From 304240bf91ff9ff9a7286b256174201bceb3b480 Mon Sep 17 00:00:00 2001 From: Skylar Ittner Date: Sun, 22 Mar 2020 20:16:13 -0600 Subject: [PATCH] Redesign home page to use tiles instead of a list (close #37) --- www/assets/images/bgs/add.svg | 97 +++++++++++++++++++++++ www/assets/images/bgs/list.svg | 121 +++++++++++++++++++++++++++++ www/assets/images/bgs/map.svg | 79 +++++++++++++++++++ www/assets/images/bgs/notes.svg | 90 +++++++++++++++++++++ www/assets/images/bgs/settings.svg | 87 +++++++++++++++++++++ www/assets/images/bgs/toolbox.svg | 87 +++++++++++++++++++++ www/assets/js/settings.js | 5 ++ www/pages/home.html | 68 ++++++---------- www/pages/settings.html | 2 +- www/routes.js | 93 ++++++++++++++++------ 10 files changed, 662 insertions(+), 67 deletions(-) create mode 100644 www/assets/images/bgs/add.svg create mode 100644 www/assets/images/bgs/list.svg create mode 100644 www/assets/images/bgs/map.svg create mode 100644 www/assets/images/bgs/notes.svg create mode 100644 www/assets/images/bgs/settings.svg create mode 100644 www/assets/images/bgs/toolbox.svg diff --git a/www/assets/images/bgs/add.svg b/www/assets/images/bgs/add.svg new file mode 100644 index 0000000..6ef3a05 --- /dev/null +++ b/www/assets/images/bgs/add.svg @@ -0,0 +1,97 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/www/assets/images/bgs/list.svg b/www/assets/images/bgs/list.svg new file mode 100644 index 0000000..25e2804 --- /dev/null +++ b/www/assets/images/bgs/list.svg @@ -0,0 +1,121 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + diff --git a/www/assets/images/bgs/map.svg b/www/assets/images/bgs/map.svg new file mode 100644 index 0000000..70c5ef8 --- /dev/null +++ b/www/assets/images/bgs/map.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/www/assets/images/bgs/notes.svg b/www/assets/images/bgs/notes.svg new file mode 100644 index 0000000..13c3f77 --- /dev/null +++ b/www/assets/images/bgs/notes.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/www/assets/images/bgs/settings.svg b/www/assets/images/bgs/settings.svg new file mode 100644 index 0000000..d0a9f87 --- /dev/null +++ b/www/assets/images/bgs/settings.svg @@ -0,0 +1,87 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/www/assets/images/bgs/toolbox.svg b/www/assets/images/bgs/toolbox.svg new file mode 100644 index 0000000..ff2c206 --- /dev/null +++ b/www/assets/images/bgs/toolbox.svg @@ -0,0 +1,87 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/www/assets/js/settings.js b/www/assets/js/settings.js index 291392a..b58f206 100644 --- a/www/assets/js/settings.js +++ b/www/assets/js/settings.js @@ -55,6 +55,11 @@ $('.item-content[data-setting=showhelp] .toggle input').on("change", function () setStorage("show_help", checked); }); +$('.item-content[data-setting=oldhomeui] .toggle input').on("change", function () { + var checked = $(this).prop('checked'); + setStorage("oldhomeui", checked); +}); + $('.item-link[data-setting=units] select').on("change", function () { setStorage("units", $('.item-link[data-setting=units] select').val()); }); diff --git a/www/pages/home.html b/www/pages/home.html index 9d886b7..b389ffe 100644 --- a/www/pages/home.html +++ b/www/pages/home.html @@ -27,57 +27,39 @@ > + {{#if oldui}}
+ {{else}} +
+
+
+ {{#each pages}} +
+
+
+

+
+ {{title}} +
+
+
+ {{/each}} +
+
+
+ {{/if}} \ No newline at end of file diff --git a/www/pages/settings.html b/www/pages/settings.html index 32eee5b..8325ab1 100644 --- a/www/pages/settings.html +++ b/www/pages/settings.html @@ -8,7 +8,7 @@
- +
diff --git a/www/routes.js b/www/routes.js index 8e7767f..4fdb5e8 100644 --- a/www/routes.js +++ b/www/routes.js @@ -5,7 +5,7 @@ */ var show_help = function () { - return localStorage.getItem("show_help") != "false"; + return getStorage("show_help") != "false"; } var routes = [ @@ -24,7 +24,46 @@ var routes = [ packageTotal: total, packageLeft: undelivered, packageDelivered: delivered, - packagePercent: percent + packagePercent: percent, + oldui: inStorage("oldhomeui") && getStorage("oldhomeui") == "true", + pages: [ + { + title: "Add Items", + href: "/add", + icon: "fas fa-truck-loading", + bg: "add.svg" + }, + { + title: "Item List", + href: "/list", + icon: "fas fa-list", + bg: "list.svg" + }, + { + title: "Delivery Map", + href: "/map", + icon: "fas fa-map", + bg: "map.svg" + }, + { + title: "Route Notes", + href: "/myroute", + icon: "fas fa-sticky-note", + bg: "notes.svg" + }, + { + title: "Toolbox", + href: "/toolbox", + icon: "fas fa-tools", + bg: "toolbox.svg" + }, + { + title: "Settings", + href: "/settings", + icon: "fas fa-cog", + bg: "settings.svg" + } + ] } }); } @@ -195,8 +234,8 @@ var routes = [ path: '/entries', name: 'entries', async: function (routeTo, routeFrom, resolve, reject) { - if (localStorage.getItem("scanevents") != null && localStorage.getItem("scanevents") != "[]") { - var entries = JSON.parse(localStorage.getItem("scanevents")); + if (getStorage("scanevents") != null && getStorage("scanevents") != "[]") { + var entries = JSON.parse(getStorage("scanevents")); for (i in entries) { entries[i].event = entries[i].event.join(' '); } @@ -232,7 +271,7 @@ var routes = [ path: '/track', name: 'track', async: function (routeTo, routeFrom, resolve, reject) { - var history = localStorage.getItem("trackingcodehistory"); + var history = getStorage("trackingcodehistory"); if (history == null) { history = false; } else { @@ -303,8 +342,8 @@ var routes = [ name: 'settings', async: function (routeTo, routeFrom, resolve, reject) { var settings = []; - if (localStorage.getItem("username") != null && localStorage.getItem("password") != null) { - var lastsync = localStorage.getItem("lastsync"); + if (getStorage("username") != null && getStorage("password") != null) { + var lastsync = getStorage("lastsync"); if (lastsync == null) { lastsync = "never"; } else { @@ -314,7 +353,7 @@ var routes = [ { setting: "account", title: "Account", - text: "Logged in as " + localStorage.getItem("username") + "
" + "Last sync: " + lastsync + text: "Logged in as " + getStorage("username") + "
" + "Last sync: " + lastsync }, { setting: "syncnow", @@ -364,7 +403,7 @@ var routes = [ title: "Keep screen on", text: "Improves GPS accuracy and alert sound reliability, but uses more battery.", toggle: true, - checked: localStorage.getItem("wakelock") == "true", + checked: getStorage("wakelock") == "true", onclick: "" }); } @@ -375,7 +414,7 @@ var routes = [ title: "Use dark theme", text: "Saves power on phones with OLED screens.", toggle: true, - checked: localStorage.getItem("darktheme") == "true", + checked: getStorage("darktheme") == "true", onclick: "" }, { @@ -383,7 +422,15 @@ var routes = [ title: "Show help", text: "Show the help icons", toggle: true, - checked: localStorage.getItem("show_help") != "false", + checked: getStorage("show_help") != "false", + onclick: "" + }, + { + setting: "oldhomeui", + title: "Show home screen as list", + text: "Use a vertical list instead of tiles.", + toggle: true, + checked: getStorage("oldhomeui") == "true", onclick: "" }, { @@ -433,7 +480,7 @@ var routes = [ alertsounds.push({ value: id, label: SETTINGS.alertsounds[id].name, - selected: localStorage.getItem("alertsound") == id + selected: getStorage("alertsound") == id }); } } @@ -452,7 +499,7 @@ var routes = [ min: 0, max: 100, step: 1, - value: localStorage.getItem("alertvolume"), + value: getStorage("alertvolume"), slider: true }, { @@ -461,7 +508,7 @@ var routes = [ min: 50, max: 500, step: 50, - value: localStorage.getItem("alertradius"), + value: getStorage("alertradius"), slider: true }, { @@ -470,7 +517,7 @@ var routes = [ min: 15, max: 120, step: 15, - value: localStorage.getItem("alertinterval") == null ? 30 : localStorage.getItem("alertinterval"), + value: getStorage("alertinterval") == null ? 30 : getStorage("alertinterval"), slider: true } ]; @@ -494,7 +541,7 @@ var routes = [ mapstyles.push({ value: id, label: SETTINGS.maptileurls[id].name, - selected: localStorage.getItem("mapsource") == id + selected: getStorage("mapsource") == id }); } } @@ -515,12 +562,12 @@ var routes = [ { value: "metric", label: "Meters/Kilometers", - selected: localStorage.getItem("units") == "metric" + selected: getStorage("units") == "metric" }, { value: "imperial", label: "Feet/Miles", - selected: localStorage.getItem("units") == "imperial" + selected: getStorage("units") == "imperial" } ] }, @@ -532,17 +579,17 @@ var routes = [ { value: 15, label: "Low", - selected: localStorage.getItem("trackzoom") == 15 + selected: getStorage("trackzoom") == 15 }, { value: 16, label: "Normal", - selected: localStorage.getItem("trackzoom") == null || localStorage.getItem("trackzoom") == 16 + selected: getStorage("trackzoom") == null || getStorage("trackzoom") == 16 }, { value: 17, label: "High", - selected: localStorage.getItem("trackzoom") == 17 + selected: getStorage("trackzoom") == 17 } ] }, @@ -551,7 +598,7 @@ var routes = [ title: "Map Scale Ruler", text: "Show a scale in the corner of the map.", toggle: true, - checked: localStorage.getItem("mapscale") !== "false", + checked: getStorage("mapscale") !== "false", onclick: "" }, { @@ -559,7 +606,7 @@ var routes = [ title: "Alternative map", text: "Turn this on if you have problems with the map.", toggle: true, - checked: localStorage.getItem("maptype") == "leaflet", + checked: getStorage("maptype") == "leaflet", onclick: "" } ];