Close #64, add help docs to Add screen, add option to disable alert SFX

www/assets/css/app.css

@@ -96,6 +96,10 @@ Framework7 and FontAwesome both have a .fab class
     transition: 10ms !important;
 }
 
+.fab-stacked-above {
+    bottom: calc(calc(calc(var(--f7-fab-margin) + var(--f7-safe-area-bottom)) + var(--f7-fab-size)) + var(--f7-fab-margin)) !important;
+}
+
 /*
  Allow easily changing help text to reflect finger/mouse usage.
 */

www/assets/js/add.js

@@ -56,6 +56,13 @@ $(".addpackagebtn").click(function () {
     }
 
     var address = ($("input[name=number]").val() + " " + $("input[name=street]").val()).toUpperCase();
+
+    var itemtype = $("input[name=itemtype]:checked").val();
+
+    if ($(this).hasClass("addpackagebtn-custom")) {
+        itemtype = $(this).data("addtype");
+    }
+
     $("#no-history").addClass("display-none");
     addPackageByAddress(
             $("input[name=number]").val().toUpperCase(),
@@ -63,7 +70,7 @@ $(".addpackagebtn").click(function () {
             $("input[name=street]").val().toUpperCase(),
             $("input[name=citystate]").val().toUpperCase(),
             $("input[name=zipcode]").val().toUpperCase(),
-            $("input[name=itemtype]:checked").val(),
+            itemtype,
             function (ids) {
                 var packageObj = getPackage(ids.packageID);
                 // Reset item type to default

www/assets/js/audio.js

@@ -14,11 +14,17 @@ function initSFX() {
         setStorage("alertvolume", 100);
     }
 
-    var alertNoiseFile = SETTINGS.alertsounds[getStorage("alertsound")].file;
     var alertVolume = getStorage("alertvolume");
+    var noalertsound = false;
+    var alertNoiseFile = "";
+    if (getStorage("alertsound") == "NONE") {
+        noalertsound = true;
+    } else {
+        alertNoiseFile = SETTINGS.alertsounds[getStorage("alertsound")].file;
+    }
 
     sfx = {
-        "alert": new Audio("assets/audio/" + alertNoiseFile),
+        "alert": noalertsound ? false : new Audio("assets/audio/" + alertNoiseFile),
         "ok": new Audio("assets/audio/ok.mp3"),
         "error": new Audio("assets/audio/error.mp3"),
         "scan": new Audio("assets/audio/scan.mp3")
@@ -33,6 +39,9 @@ function initSFX() {
  * @returns {undefined}
  */
 function playSound(sound) {
+    if (sfx[sound] == false) {
+        return;
+    }
     sfx[sound].play();
 }
 
@@ -42,6 +51,9 @@ function playSound(sound) {
  * @param number volume Number in range 0 to 100
  */
 function setVolume(sound, volume) {
+    if (sfx[sound] == false) {
+        return;
+    }
     sfx[sound].volume = volume / 100.0;
 }
 

www/assets/js/settings.js

@@ -171,4 +171,8 @@ $('.item-link[data-setting=alertsound] select').on("change", function () {
     initSFX();
     // Play the selected sound
     playSound("alert");
+});
+
+$('.item-link[data-setting=customaddtype] select').on("change", function () {
+    setStorage("customaddtype", $('.item-link[data-setting=customaddtype] select').val());
 });

www/pages/add.html

@@ -21,6 +21,11 @@
                 <a class="link popover-open" data-popover="#popover-add-options">
                     <i class="icon material-icons">more_vert</i>
                 </a>
+                {{#if show_help}}
+                <a class="link" href="/help/add">
+                    <i class="icon material-icons">help</i>
+                </a>
+                {{/if}}
             </div>
         </div>
     </div>
@@ -138,6 +143,20 @@
                     </div>
                 </div>
 
+                {{#if customaddtype}}
+                <div class="fab fab-right-bottom no-tablet hapticbtn fab-stacked-above">
+                    <a class="addpackagebtn addpackagebtn-custom" data-addtype="{{customaddtype}}">
+                        <i class="{{customaddicon}}"></i>
+                    </a>
+                </div>
+                <div class="fab fab-extended fab-right-bottom only-tablet hapticbtn fab-stacked-above">
+                    <a class="addpackagebtn addpackagebtn-custom" data-addtype="{{customaddtype}}">
+                        <i class="{{customaddicon}}"></i>
+                        <div class="fab-text">{{customaddname}}</div>
+                    </a>
+                </div>
+                {{/if}}
+
                 <div class="fab fab-right-bottom no-tablet hapticbtn">
                     <a class="addpackagebtn">
                         <i class="icon material-icons">add</i>

www/pages/help/add.html

@@ -0,0 +1,64 @@
+<!-- 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">Add a Package/Item</div>
+                <div class="block">
+                    Enter the house number, street, city, state, and ZIP code. Then choose an item type and
+                    <span class="taptext">tap</span><span class="clicktext">click</span> the <b>+</b> button.
+                    You'll hear a noise and see a message at the bottom of the screen confirming the item was added.
+                    
+                    <ul class="padding-left">
+                        <li>The city, state, and ZIP are saved for you so you won't have to enter them every day.
+                        <li>The next time you <span class="taptext">tap</span><span class="clicktext">click</span>
+                            the Number box, it will automatically be erased for you so you can quickly enter the next one.
+                        <li>If you find yourself frequently selecting the same item type, you can add an extra + button that will only
+                            add items as your preferred type. Go to Settings -> Packages and Alerts -> Custom Add Button to set it up.
+                    </ul>
+                </div>
+
+                <div class="block-title">Addresses with Letters</div>
+                <div class="block">
+                    If the house "number" has letters in it, <span class="taptext">tap</span><span class="clicktext">click</span>
+                    the menu button (<i class="fas fa-ellipsis-v"></i>) the top right and select "Address contains letters".
+                    You'll now be able to enter both letters and numbers in the Number box.
+                </div>
+
+                <div class="block-title">Remove an Item</div>
+                <div class="block">
+                    If you made a mistake, you can quickly remove a recently added item.
+                    On small screens, <span class="taptext">tap</span><span class="clicktext">click</span> the recent tab
+                    or swipe to the left. Then simply <span class="taptext">tap</span><span class="clicktext">click</span> the entry you
+                    want to remove.
+                    If you go to a different part of the app, the recent tab will be empty.
+                    If the item you want to remove isn't in the recent tab, back out to the main screen,
+                    go to the List page, and remove it from there.
+                </div>
+
+                <div class="block-title">Autocomplete</div>
+                <div class="block">
+                    You'll notice that as you use PackageHelper, it will suggest street names for you. These suggestions
+                    are based on the address number you enter. For example, if you add a package for 1234 Sample Rd, then
+                    for 987 Other St, the next time you type 1234 it will suggest Sample Rd. If multiple addresses share the same
+                    number, the suggestion list will start with the most frequently used at the top.
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

www/routes.js

@@ -79,6 +79,9 @@ var routes = [
                 context: {
                     show_help: show_help,
                     itemtypes: SETTINGS.itemtypes,
+                    customaddtype: inStorage("customaddtype") && getStorage("customaddtype") != "NONE" ? getStorage("customaddtype") : false,
+                    customaddicon: inStorage("customaddtype") && getStorage("customaddtype") != "NONE" ? SETTINGS.itemtypes[getStorage("customaddtype")].icon : false,
+                    customaddname: inStorage("customaddtype") && getStorage("customaddtype") != "NONE" ? SETTINGS.itemtypes[getStorage("customaddtype")].name : false,
                     nottablet: !tablet
                 }
             })
@@ -435,6 +438,12 @@ var routes = [
     {
         path: '/help',
         routes: [
+            {
+                path: '/add',
+                panel: {
+                    url: './pages/help/add.html'
+                }
+            },
             {
                 path: '/list',
                 panel: {
@@ -500,16 +509,16 @@ var routes = [
             }
             settings.push(
                     {
-                        setting: "alerts",
+                        setting: "packages",
-                        title: "Package Alerts",
+                        title: "Packages and Alerts",
-                        text: "Change the alert sound, volume, and distance.",
+                        text: "Change options for the Add screen, proximity alerts, etc.",
-                        onclick: "router.navigate('/settings/alerts')",
+                        onclick: "router.navigate('/settings/packages')",
                         link: true
                     },
                     {
                         setting: "maps",
                         title: "Map and Navigation",
-                        text: "Change map settings and units.",
+                        text: "Change map theme and settings.",
                         onclick: "router.navigate('/settings/maps')",
                         link: true
                     },
@@ -580,10 +589,16 @@ var routes = [
         },
         routes: [
             {
-                path: '/alerts',
+                path: '/packages',
                 name: 'settings',
                 async: function (routeTo, routeFrom, resolve, reject) {
-                    var alertsounds = [];
+                    var alertsounds = [
+                        {
+                            value: "NONE",
+                            label: "No sound",
+                            selected: getStorage("alertsound") == "NONE"
+                        }
+                    ];
                     for (var id in SETTINGS.alertsounds) {
                         if (SETTINGS.alertsounds.hasOwnProperty(id)) {
                             alertsounds.push({
@@ -594,7 +609,39 @@ var routes = [
                         }
                     }
 
+                    var customitemtypes = [
+                        {
+                            value: "NONE",
+                            label: "No button",
+                            selected: !inStorage("customaddtype") || getStorage("customaddtype") == "NONE"
+                        }
+                    ];
+                    for (var id in SETTINGS.itemtypes) {
+                        if (SETTINGS.itemtypes.hasOwnProperty(id)) {
+                            customitemtypes.push({
+                                value: id,
+                                label: SETTINGS.itemtypes[id].name,
+                                selected: getStorage("customaddtype") == id
+                            });
+                        }
+                    }
+
                     var settings = [
+                        {
+                            setting: "mapcalibrate",
+                            title: "Map Calibration",
+                            text: "Ask to fix the map if package delivered far from expected location.",
+                            toggle: true,
+                            checked: getStorage("mapcalibrate") !== "false",
+                            onclick: ""
+                        },
+                        {
+                            setting: "customaddtype",
+                            title: "Custom Add Button",
+                            text: "Have a second button on the Add screen for your favorite item type.",
+                            select: true,
+                            options: customitemtypes
+                        },
                         {
                             setting: "alertsound",
                             title: "Alert sound",
@@ -702,14 +749,6 @@ var routes = [
                                 }
                             ]
                         },
-                        {
-                            setting: "mapcalibrate",
-                            title: "Map Calibration",
-                            text: "Ask where you are when delivering a package if the map is wrong.",
-                            toggle: true,
-                            checked: getStorage("mapcalibrate") !== "false",
-                            onclick: ""
-                        },
                         {
                             setting: "mapscale",
                             title: "Map Scale Ruler",