Improve route notes

www/assets/js/notes.js

@@ -49,7 +49,7 @@ function isDeliverable(number, street) {
     };
 }
 
-function saveNote(id) {
+function saveNote(id) {    
     var exists = false;
     var index = -1;
     for (var i = 0; i < notes.length; i++) {
@@ -63,6 +63,8 @@ function saveNote(id) {
         id: id,
         number: "",
         street: "",
+        zipcode: "",
+        route: "",
         notes: "",
         toggles: {}
     };
@@ -70,9 +72,31 @@ function saveNote(id) {
         note = notes[index];
     }
 
-    note.number = $("input[name=number]").val();
-    note.street = $("input[name=street]").val();
-    note.notes = $("textarea#notes").val();
+    note.number = $("input[name=number]").val().trim();
+    note.street = $("input[name=street]").val().trim();
+    note.zipcode = $("input[name=zipcode]").val().trim();
+    note.route = $("input[name=route]").val().trim().toUpperCase();
+    note.notes = $("textarea#notes").val().trim();
+
+    if (note.number == "") {
+        app.dialog.alert("Fill in an address number.", "Error");
+        return false;
+    }
+    if (note.street == "") {
+        app.dialog.alert("Fill in a street.", "Error");
+        return false;
+    }
+    if (note.zipcode == "") {
+        app.dialog.alert("Fill in a zip code.", "Error");
+        return false;
+    }
+    if (note.route == "" || /^[CRHG][0-9]{3}$/.test(note.route) != true) {
+        app.dialog.alert("Fill in a route (examples: C123, R001, H050).", "Error");
+        return false;
+    }
+    
+    setStorage("lastrouteid", note.route);
+    setStorage("zipcode", note.zipcode);
 
     for (i in SETTINGS.routenotetoggles) {
         var toggle = SETTINGS.routenotetoggles[i];
@@ -148,6 +172,12 @@ $(".view-main").on("click", ".deletenotebtn", function () {
     });
 });
 
+$(".view-main").on("blur", "#notenumberinput,#notestreetinput", function () {
+    if (findNote($("#notenumberinput").val(), $("#notestreetinput").val()) != null) {
+        app.dialog.alert("A note already exists for that address.", "Warning");
+    }
+});
+
 function getToggleName(id) {
     for (i in SETTINGS.routenotetoggles) {
         if (SETTINGS.routenotetoggles[i].id == id) {
@@ -157,10 +187,23 @@ function getToggleName(id) {
     return "";
 }
 
+function getToggleIcon(id) {
+    for (i in SETTINGS.routenotetoggles) {
+        if (SETTINGS.routenotetoggles[i].id == id) {
+            return SETTINGS.routenotetoggles[i].icon;
+        }
+    }
+    return "";
+}
+
 Template7.registerHelper('notetogglename', function (key) {
     return getToggleName(key);
 });
 
+Template7.registerHelper('notetoggleicon', function (key) {
+    return getToggleIcon(key);
+});
+
 Template7.registerHelper('newlinestobr', function (text) {
     return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
 });

www/pages/add.html

@@ -61,7 +61,7 @@
                                 <div class="item-inner">
                                     <div class="item-title item-label">Street</div>
                                     <div class="item-input-wrap">
-                                        <input type="text" name="street" id="streetInput" placeholder="Road Drive" autocomplete="off" autocorrect="off">
+                                        <input type="text" name="street" id="streetInput" placeholder="Road Dr" autocomplete="off" autocorrect="off">
                                         <span class="input-clear-button"></span>
                                     </div>
                                 </div>

www/pages/myroute.html

@@ -13,6 +13,21 @@
                 </a>
             </div>
             <div class="title">Route Notes</div>
+            <div class="right">
+                <a class="link icon-only searchbar-enable" data-searchbar=".notes-list-searchbar">
+                    <i class="icon material-icons">search</i>
+                </a>
+            </div>
+            <form class="searchbar searchbar-expandable notes-list-searchbar">
+                <div class="searchbar-inner">
+                    <div class="searchbar-input-wrap">
+                        <input type="search" placeholder="Search"/>
+                        <i class="searchbar-icon"></i>
+                        <span class="input-clear-button"></span>
+                    </div>
+                    <span class="searchbar-disable-button">Cancel</span>
+                </div>
+            </form>
         </div>
     </div>
 
@@ -25,7 +40,7 @@
     <div class="page-content page-content-fab-pad">
         <div class="block-title">Notes</div>
         {{#if notes}}
-        <div class="list accordion-list">
+        <div class="list accordion-list" id="noteslist">
             <ul>
                 {{#each notes}}
                 <li class="accordion-item route-note" data-noteid="{{id}}">
@@ -41,11 +56,11 @@
                             {{#if notes}}
                             <p>{{newlinestobr notes}}</p>
                             {{/if}}
-                            <div class="list simple-list" style="font-size: 95%;">
+                            <div>
                                 <ul>
                                     {{#each toggles}}
                                     {{#if this}}
-                                    <li style="height: 32px;">{{notetogglename @key}}</li>
+                                    <li><i class="{{notetoggleicon @key}}"></i> {{notetogglename @key}}</li>
                                     {{/if}}
                                     {{/each}}
                                 </ul>

www/pages/myroute/editnote.html

@@ -32,7 +32,7 @@
                     <div class="item-inner">
                         <div class="item-title item-label">Number</div>
                         <div class="item-input-wrap">
-                            <input type="number" value="{{note.number}}" name="number" placeholder="1234" autocomplete="off" autocorrect="off" autocapitalize="off">
+                            <input type="number" value="{{note.number}}" name="number" id="notenumberinput" placeholder="1234" autocomplete="off" autocorrect="off" autocapitalize="off">
                             <span class="input-clear-button"></span>
                         </div>
                     </div>
@@ -41,11 +41,31 @@
                     <div class="item-inner">
                         <div class="item-title item-label">Street</div>
                         <div class="item-input-wrap">
-                            <input type="text" value="{{note.street}}" name="street" id="street" placeholder="Road Drive" autocomplete="off" autocorrect="off">
+                            <input type="text" value="{{note.street}}" name="street" id="notestreetinput" placeholder="Road Dr" autocomplete="off" autocorrect="off">
                             <span class="input-clear-button"></span>
                         </div>
                     </div>
                 </li>
+                <li>
+                    <div class="row justify-content-stretch">
+                        <div class="col-50 item-content item-input">
+                            <div class="item-inner">
+                                <div class="item-title item-label">ZIP</div>
+                                <div class="item-input-wrap">
+                                    <input type="number" value="{{note.zipcode}}" name="zipcode" id="zipcode" placeholder="12345" value="" autocomplete="off" autocorrect="off">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-50 item-content item-input no-padding-left">
+                            <div class="item-inner no-padding-right">
+                                <div class="item-title item-label">Route</div>
+                                <div class="item-input-wrap">
+                                    <input type="text" value="{{note.route}}" name="route" id="route" placeholder="C999" value="" autocomplete="off" autocorrect="off" maxlength="4" pattern="^[CRHG][0-9]{3}$" >
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </li>
 
                 <li class="item-divider">Options</li>
                 {{#each toggles}}

www/routes.js

@@ -107,7 +107,17 @@ var routes = [
         },
         on: {
             pageAfterIn: function () {
-                // TODO: searchbar
+                notessearchbar = app.searchbar.create({
+                    el: '.notes-list-searchbar',
+                    searchContainer: '#noteslist',
+                    searchIn: '.item-title',
+                    backdrop: false,
+                    on: {
+                        search(sb, query, previousQuery) {
+                            console.log(query, previousQuery);
+                        }
+                    }
+                });
             }
         },
         routes: [
@@ -131,6 +141,8 @@ var routes = [
                                 id: uuid,
                                 number: "",
                                 street: "",
+                                zipcode: inStorage("zipcode") ? getStorage("zipcode") : "",
+                                route: inStorage("lastrouteid") ? getStorage("lastrouteid") : "",
                                 notes: "",
                                 toggles: {}
                             }

www/settings.js

@@ -322,19 +322,22 @@ var SETTINGS = {
             name: "Vacant",
             id: "vacant",
             preventsDelivery: true,
-            reason: "vacant"
+            reason: "vacant",
+            icon: "far fa-circle"
         },
         {
             name: "Outside delivery radius",
             id: "undeliverable",
             preventsDelivery: true,
-            reason: "too far from the route"
+            reason: "too far from the route",
+            icon: "fas fa-route"
         },
         {
             name: "On hold",
             id: "hold",
             preventsDelivery: true,
-            reason: "on hold"
+            reason: "on hold",
+            icon: "fas fa-pause-circle"
         }
     ],
     synckeyblacklist: [