Add help menus (close #29)

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;

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";

www/pages/help/list.html

@@ -18,33 +18,39 @@
             </div>
 
             <div class="page-content">
+                <div class="block-title">Manage Items</div>
                 <div class="block">
-                    <p>
+                    Swipe <i class="fas fa-arrow-right"></i> left-to-right on a list entry
-                        Swipe <i class="fas fa-arrow-right"></i> left-to-right on a list entry 
+                    to show the actions you can take.
-                        to show the actions you can take.
+                    These actions are marking the item as delivered/undelivered, or
-                        These actions are marking the item as delivered/undelivered, or 
+                    navigating to its location with your device's default maps app.
-                        navigating to its location with your device's default maps app.
+                    <br />
-                    </p>
+                    Swipe <i class="fas fa-arrow-left"></i> right-to-left on a list entry
+                    and tap
+                    <span class="button button-small display-inline button-fill color-red text-color-white"><i class="material-icons">delete</i> Delete</span> to remove it.
+                </div>
 
-                    <p>
+                <div class="block-title">Clear the List</div>
-                        Swipe <i class="fas fa-arrow-left"></i> right-to-left on a list entry
+                <div class="block">
-                        and tap <i class="material-icons">delete</i> Delete to remove it.
+                    Tap the <span class="color-red text-color-primary"><i class="material-icons">delete</i></span>
-                    </p>
+                    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.
+                </div>
 
-                    <p>
+                <div class="block-title">Search</div>
-                        Tap the <i class="material-icons">search</i> button to open a search
+                <div class="block">
-                        box.  Type in this box to hide any list entries that don't contain your
+                    Tap the <i class="material-icons text-color-primary">search</i> button to open a search
-                        input.
+                    box.  Type in this box to hide any list entries that don't contain your
-                    </p>
+                    search query.
+                </div>
 
-                    <p>
+                <div class="block-title">Sort Items</div>
-                        Tap the <i class="material-icons">sort</i> button to sort the list.
+                <div class="block">
-                    </p>
+                    Tap the <i class="material-icons text-color-primary">sort</i> button to sort
-
+                    the list. You can sort by distance from your current
-                    <p>
+                    location, alphabetically by street name, and numerically by
-                        Tap the <span class="color-red"><i class="material-icons">delete</i></span> button to remove all
+                    address number.
-                        items from the list.
-                    </p>
                 </div>
             </div>
         </div>

www/pages/help/map.html

@@ -0,0 +1,69 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<div class="panel panel-right panel-cover">
+    <div class="view">
+        <div class="page">
+
+            <div class="navbar">
+                <div class="navbar-bg"></div>
+                <div class="navbar-inner">
+                    <div class="title">Help</div>
+                    <div class="right">
+                        <a class="link panel-close">
+                            <span>Close</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <div class="page-content">
+                <div class="block-title">Manage Items</div>
+                <div class="block">
+                    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.
+                </div>
+
+                <div class="block-title">Move the Map</div>
+                <div class="block">
+                    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.
+
+                    <br />
+
+                    If you prefer, tap or click
+                    <span class="button button-small display-inline button-fill color-white text-color-black"><i class="fas fa-plus"></i></span>
+                    and
+                    <span class="button button-small display-inline button-fill color-white text-color-black"><i class="fas fa-minus"></i></span>
+                    to zoom in and out.
+                </div>
+
+                <div class="block-title">Follow Location</div>
+                <div class="block">
+                    Tap
+                    <span class="button button-small display-inline button-fill color-white text-color-black"><i class='material-icons'>my_location</i></span>
+                    or
+                    <span class="button button-small display-inline button-fill color-white text-color-black"><i class='far fa-compass'></i></span>
+                    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.
+                </div>
+
+                <div class="block-title">Get Directions</div>
+                <div class="block">
+                    <span class="text-color-primary"><i class="material-icons">directions</i></span> 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.
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

www/pages/list.html

@@ -25,9 +25,11 @@
                     <i class="icon material-icons">delete</i>
                 </a>
 
+                {{#if show_help}}
                 <a class="link" href="/help/list">
                     <i class="icon material-icons">help</i>
                 </a>
+                {{/if}}
             </div>
             <form class="searchbar searchbar-expandable package-list-searchbar">
                 <div class="searchbar-inner">

www/pages/map.html

@@ -15,9 +15,11 @@
             </div>
             <div class="title">Map</div>
             <div class="right">
-                <a class="link" onclick="reloadMap()">
+                {{#if show_help}}
-                    <i class="material-icons">refresh</i>
+                <a class="link" href="/help/map">
+                    <i class="icon material-icons">help</i>
                 </a>
+                {{/if}}
             </div>
         </div>
     </div>

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 <span class=material-icons-intext><i class=material-icons>help</i></span> icons",
+                        toggle: true,
+                        checked: localStorage.getItem("show_help") != "false",
+                        onclick: ""
+                    },
                     {
                         setting: "versions",
                         title: "PackageHelper app v" + app_version,