From 7d39c12fceb8dc0e08e51616a386c13a8c340620 Mon Sep 17 00:00:00 2001 From: Skylar Ittner Date: Sun, 29 Dec 2019 19:36:00 -0700 Subject: [PATCH] Add help menus (close #29) --- www/assets/css/app.css | 11 +++++++ www/assets/js/settings.js | 18 +++++----- www/pages/help/list.html | 52 ++++++++++++++++------------- www/pages/help/map.html | 69 +++++++++++++++++++++++++++++++++++++++ www/pages/list.html | 4 ++- www/pages/map.html | 6 ++-- www/routes.js | 39 ++++++++++++++++++---- 7 files changed, 159 insertions(+), 40 deletions(-) create mode 100644 www/pages/help/map.html diff --git a/www/assets/css/app.css b/www/assets/css/app.css index 3a1140e..60ad4d2 100644 --- a/www/assets/css/app.css +++ b/www/assets/css/app.css @@ -19,6 +19,17 @@ Framework7 and FontAwesome both have a .fab class line-height: var(--f7-line-height); } +/* + * Material icons are too big and disrupt the flow of text + */ +.block .material-icons { + font-size: var(--f7-block-font-size); +} + +.material-icons-intext .material-icons { + font-size: var(--f7-block-font-size); +} + #mapbox .package-marker { width: 25px; height: 25px; diff --git a/www/assets/js/settings.js b/www/assets/js/settings.js index fa23369..2378d8b 100644 --- a/www/assets/js/settings.js +++ b/www/assets/js/settings.js @@ -7,7 +7,6 @@ $('.item-content[data-setting=darktheme] .toggle input').on("change", function () { var checked = $(this).prop('checked'); - console.log(checked); localStorage.setItem("darktheme", checked); if (localStorage.getItem("darktheme") == "true") { @@ -17,6 +16,11 @@ $('.item-content[data-setting=darktheme] .toggle input').on("change", function ( } }); +$('.item-content[data-setting=showhelp] .toggle input').on("change", function () { + var checked = $(this).prop('checked'); + localStorage.setItem("show_help", checked); +}); + $('.item-link[data-setting=units] select').on("change", function () { localStorage.setItem("units", $('.item-link[data-setting=units] select').val()); }); @@ -27,21 +31,20 @@ $('.item-link[data-setting=trackzoom] select').on("change", function () { $('.item-content[data-setting=wakelock] .toggle input').on("change", function () { var checked = $(this).prop('checked'); - console.log(checked); localStorage.setItem("wakelock", checked); if (platform_type == "cordova") { if (localStorage.getItem("wakelock") == "true") { window.powerManagement.acquire(function () { - console.log('Wakelock acquired'); + console.log("Info", 'Wakelock acquired'); }, function () { - console.log('Failed to acquire wakelock'); + console.log("Warn", 'Failed to acquire wakelock'); }); } else { window.powerManagement.release(function () { - console.log('Wakelock released'); + console.log("Info", 'Wakelock released'); }, function () { - console.log('Failed to release wakelock'); + console.log("Warn", 'Failed to release wakelock'); }); } } else { @@ -73,13 +76,12 @@ $('.item-content[data-setting=alertinterval] .range-slider').on('range:changed', $('.item-link[data-setting=mapsource] select').on("change", function () { localStorage.setItem("mapsource", $('.item-link[data-setting=mapsource] select').val()); - // Re-init map to load new style + reloadMap(); }); $('.item-content[data-setting=maptype] .toggle input').on("change", function () { var checked = $(this).prop('checked'); - console.log(checked); localStorage.setItem("maptype", checked ? "leaflet" : "mapbox"); maptype = checked ? "leaflet" : "mapbox"; diff --git a/www/pages/help/list.html b/www/pages/help/list.html index 0d94a6e..0f29c82 100644 --- a/www/pages/help/list.html +++ b/www/pages/help/list.html @@ -18,33 +18,39 @@
+
Manage Items
-

- Swipe left-to-right on a list entry - to show the actions you can take. - These actions are marking the item as delivered/undelivered, or - navigating to its location with your device's default maps app. -

- -

- Swipe right-to-left on a list entry - and tap delete Delete to remove it. -

+ Swipe left-to-right on a list entry + to show the actions you can take. + These actions are marking the item as delivered/undelivered, or + navigating to its location with your device's default maps app. +
+ Swipe right-to-left on a list entry + and tap + delete Delete to remove it. +
-

- Tap the search button to open a search - box. Type in this box to hide any list entries that don't contain your - input. -

+
Clear the List
+
+ Tap the delete + button to remove all items from the list. This cannot be undone, so it's + a good idea to do it at the end of the day or in the morning before you start. + Note that clearing the list does not affect the address autofill. +
-

- Tap the sort button to sort the list. -

+
Search
+
+ Tap the search button to open a search + box. Type in this box to hide any list entries that don't contain your + search query. +
-

- Tap the delete button to remove all - items from the list. -

+
Sort Items
+
+ Tap the sort button to sort + the list. You can sort by distance from your current + location, alphabetically by street name, and numerically by + address number.
diff --git a/www/pages/help/map.html b/www/pages/help/map.html new file mode 100644 index 0000000..bafc5fb --- /dev/null +++ b/www/pages/help/map.html @@ -0,0 +1,69 @@ + +
+
+
+ +
+
+
+
Help
+
+ + Close + +
+
+
+ +
+
Manage Items
+
+ Tap on an icon to see the item(s) at that location. + Tap on an item to toggle it between delivered and + undelivered. If two or more addresses are very close + together, their items will be grouped under one icon. +
+ +
Move the Map
+
+ Pinch with two fingers or scroll with a mouse to zoom + in and out. You can also double-tap to zoom in. + Drag with one finger or a mouse to move (pan) the map. + +
+ + If you prefer, tap or click + + and + + to zoom in and out. +
+ +
Follow Location
+
+ Tap + my_location + or + + to show your current + location on the map as a blue dot. The map will follow + the dot until you zoom or move the map. If the dot goes + off the edge of the map, press the button again to + re-center the map. Pressing the button when the dot is + visible will hide the dot and stop the map from + following your location. +
+ +
Get Directions
+
+ directions will open your + default map/navigation app with the item location set as + the destination. This is useful if you're having + trouble finding the location. +
+
+
+
+
\ No newline at end of file diff --git a/www/pages/list.html b/www/pages/list.html index 312b291..ffff9ef 100644 --- a/www/pages/list.html +++ b/www/pages/list.html @@ -24,10 +24,12 @@ delete - + + {{#if show_help}} help + {{/if}}
diff --git a/www/pages/map.html b/www/pages/map.html index c45afc8..5ea7164 100644 --- a/www/pages/map.html +++ b/www/pages/map.html @@ -15,9 +15,11 @@
Map
- - refresh + {{#if show_help}} + + help + {{/if}}
diff --git a/www/routes.js b/www/routes.js index 905b9b3..b44546b 100644 --- a/www/routes.js +++ b/www/routes.js @@ -4,6 +4,10 @@ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +var show_help = function () { + return localStorage.getItem("show_help") != "false"; +} + var routes = [ { path: '/home', @@ -27,13 +31,14 @@ var routes = [ }, { path: '/manage', + name: 'manage', templateUrl: './pages/manage.html', options: { context: { + show_help: show_help, itemtypes: SETTINGS.itemtypes } }, - name: 'manage', on: { pageAfterIn: function () { app.autocomplete.create({ @@ -56,8 +61,13 @@ var routes = [ }, { path: '/list', - templateUrl: './pages/list.html', name: 'list', + templateUrl: './pages/list.html', + options: { + context: { + show_help: show_help + } + }, on: { pageAfterIn: function () { loadPackageList(); @@ -74,14 +84,17 @@ var routes = [ } }); } - }, - keepAlive: true + } }, { path: '/map', - url: './pages/map.html', + templateUrl: './pages/map.html', name: 'map', - keepAlive: true, + options: { + context: { + show_help: show_help + } + }, on: { pageAfterIn: function () { reloadMap(); @@ -191,6 +204,12 @@ var routes = [ panel: { url: './pages/help/list.html' } + }, + { + path: '/map', + panel: { + url: './pages/help/map.html' + } } ] }, @@ -240,6 +259,14 @@ var routes = [ checked: localStorage.getItem("darktheme") == "true", onclick: "" }, + { + setting: "showhelp", + title: "Show help", + text: "Show the help icons", + toggle: true, + checked: localStorage.getItem("show_help") != "false", + onclick: "" + }, { setting: "versions", title: "PackageHelper app v" + app_version,