Move alert settings to own page, audio.js honors filename settings, units option is now a select

www/assets/js/audio.js

@@ -14,11 +14,11 @@ function initSFX() {
         localStorage.setItem("alertvolume", 100);
     }
 
-    var alertNoiseName = localStorage.getItem("alertsound");
+    var alertNoiseFile = SETTINGS.alertsounds[localStorage.getItem("alertsound")].file;
     var alertVolume = localStorage.getItem("alertvolume");
 
     sfx = {
-        "alert": new Audio("assets/audio/alert." + alertNoiseName + ".mp3"),
+        "alert": new Audio("assets/audio/" + alertNoiseFile),
         "ok": new Audio("assets/audio/ok.mp3"),
         "error": new Audio("assets/audio/error.mp3")
     };

www/assets/js/settings.js

@@ -17,10 +17,8 @@ $('.item-content[data-setting=darktheme] .toggle input').on("change", function (
     }
 });
 
-$('.item-content[data-setting=units] .toggle input').on("change", function () {
-    var checked = $(this).prop('checked');
-    console.log(checked);
-    localStorage.setItem("units", (checked ? "imperial" : "metric"));
+$('.item-link[data-setting=units] select').on("change", function () {
+    localStorage.setItem("units", $('.item-link[data-setting=units] select').val());
 });
 
 $('.item-content[data-setting=wakelock] .toggle input').on("change", function () {
@@ -59,6 +57,11 @@ $('.item-content[data-setting=alertvolume] .range-slider').on('range:changed', f
     playSound("alert");
 });
 
+$('.item-content[data-setting=alertradius] .range-slider').on('range:changed', function (e, range) {
+    var val = app.range.get(".item-content[data-setting=alertradius] .range-slider").getValue();
+    localStorage.setItem("alertradius", val);
+});
+
 $('.item-content[data-setting=alertinterval] .range-slider').on('range:changed', function (e, range) {
     var val = app.range.get(".item-content[data-setting=alertinterval] .range-slider").getValue();
     localStorage.setItem("alertinterval", val);

www/pages/alertsettings.html

@@ -0,0 +1,90 @@
+<!-- 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="page" data-name="alertsettings">
+
+    <div class="navbar">
+        <div class="navbar-bg"></div>
+        <div class="navbar-inner">
+            <div class="left">
+                <a href="#" class="link icon-only back">
+                    <i class="icon icon-back"></i>
+                </a>
+            </div>
+            <div class="title">Alert Settings</div>
+        </div>
+    </div>
+
+
+    <div class="page-content">
+        <div class="list media-list no-hairlines tablet-inset" style="margin-top: 0;">
+            <ul>
+                {{#each settings}}
+                <li>
+                    {{#if toggle}}
+                    <div class="item-content" data-setting="{{setting}}">
+                        <div class="item-inner">
+                            <div style="display: flex; justify-content: between;">
+                                <div class="item-title">
+                                    {{title}}
+                                </div>
+                                <div class="item-after" onclick="{{onclick}}">
+                                    <label class="toggle toggle-init">
+                                        <input type="checkbox" {{#if checked}}checked{{/if}}>
+                                               <span class="toggle-icon"></span>
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="item-text">{{text}}</div>
+                        </div>
+                    </div>
+                    {{else}}
+                    {{#if slider}}
+                    <div class="item-content" data-setting="{{setting}}">
+                        <div class="item-inner">
+                            <div class="item-title" style="background-color: rgba(0,0,0,0);">
+                                {{title}}
+                            </div>
+                            <div class="item-subtitle padding-horizontal padding-top">
+                                <div class="range-slider range-slider-init padding-top margin-top" data-label="true">
+                                    <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" value="{{value}}">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {{else}}
+                    {{#if select}}
+                    <a class="item-link smart-select smart-select-init" data-open-in="popover" data-setting="{{setting}}">
+                        <select>
+                            {{#each options}}
+                            <option value="{{value}}"{{#if selected}} selected{{/if}}>{{label}}</option>
+                            {{/each}}
+                        </select>
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">{{title}}</div>
+                            </div>
+                        </div>
+                    </a>
+                    {{else}}
+                    <div class="item-content" data-setting="{{setting}}" onclick="{{onclick}}">
+                        <div class="item-inner">
+                            <div class="item-title-row">
+                                <div class="item-title">{{title}}</div>
+                            </div>
+                            <div class="item-text">{{text}}</div>
+                        </div>
+                    </div>
+                    {{/if}}
+                    {{/if}}
+                    {{/if}}
+                </li>
+                {{/each}}
+            </ul>
+        </div>
+    </div>
+
+    <script src="assets/js/settings.js"></script>
+
+</div>

www/pages/settings.html

@@ -22,6 +22,16 @@
             <ul>
                 {{#each settings}}
                 <li>
+                    {{#if link}}
+                    <div class="item-content item-link" data-setting="{{setting}}" onclick="{{onclick}}">
+                        <div class="item-inner">
+                            <div class="item-title-row">
+                                <div class="item-title">{{title}}</div>
+                            </div>
+                            <div class="item-text">{{text}}</div>
+                        </div>
+                    </div>
+                    {{else}}
                     {{#if toggle}}
                     <div class="item-content" data-setting="{{setting}}">
                         <div class="item-inner">
@@ -79,6 +89,7 @@
                     {{/if}}
                     {{/if}}
                     {{/if}}
+                    {{/if}}
                 </li>
                 {{/each}}
             </ul>

www/routes.js

@@ -103,42 +103,15 @@ var routes = [
                 }
             }
 
-            var alertsounds = [];
-            for (var id in SETTINGS.alertsounds) {
-                if (SETTINGS.alertsounds.hasOwnProperty(id)) {
-                    alertsounds.push({
-                        value: id,
-                        label: SETTINGS.alertsounds[id].name,
-                        selected: localStorage.getItem("alertsound") == id
-                    });
-                }
-            }
-
-            var settings = [{
-                    setting: "alertsound",
-                    title: "Alert sound",
-                    text: "Select which sound to play when a package is nearby.",
-                    select: true,
-                    options: alertsounds
-                },
+            var settings = [
                 {
-                    setting: "alertvolume",
-                    title: "Alert volume",
-                    min: 0,
-                    max: 100,
-                    step: 1,
-                    value: localStorage.getItem("alertvolume"),
-                    slider: true
-                },
-                {
-                    setting: "alertinterval",
-                    title: "Alert interval (seconds)",
-                    min: 15,
-                    max: 120,
-                    step: 15,
-                    value: localStorage.getItem("alertinterval") == null ? 30 : localStorage.getItem("alertinterval"),
-                    slider: true
-                }];
+                    setting: "alerts",
+                    title: "Package Alerts",
+                    text: "Change the alert sound, volume, and distance.",
+                    onclick: "router.navigate('/settings/alerts')",
+                    link: true
+                }
+            ];
 
             if (platform_type == "cordova") {
                 settings.push({
@@ -163,10 +136,19 @@ var routes = [
                     {
                         setting: "units",
                         title: "Measurement units",
-                        text: "Use feet and miles for showing distance",
-                        toggle: true,
-                        checked: localStorage.getItem("units") == "imperial",
-                        onclick: ""
+                        select: true,
+                        options: [
+                            {
+                                value: "metric",
+                                label: "Meters/Kilometers",
+                                selected: localStorage.getItem("units") == "metric"
+                            },
+                            {
+                                value: "imperial",
+                                label: "Feet/Miles",
+                                selected: localStorage.getItem("units") == "imperial"
+                            }
+                        ]
                     },
                     {
                         setting: "mapsource",
@@ -203,4 +185,63 @@ var routes = [
             });
         }
     },
+    {
+        path: '/settings/alerts',
+        name: 'alertsettings',
+        async: function (routeTo, routeFrom, resolve, reject) {
+            var alertsounds = [];
+            for (var id in SETTINGS.alertsounds) {
+                if (SETTINGS.alertsounds.hasOwnProperty(id)) {
+                    alertsounds.push({
+                        value: id,
+                        label: SETTINGS.alertsounds[id].name,
+                        selected: localStorage.getItem("alertsound") == id
+                    });
+                }
+            }
+
+            var settings = [{
+                    setting: "alertsound",
+                    title: "Alert sound",
+                    text: "Select which sound to play when a package is nearby.",
+                    select: true,
+                    options: alertsounds
+                },
+                {
+                    setting: "alertvolume",
+                    title: "Alert volume",
+                    min: 0,
+                    max: 100,
+                    step: 1,
+                    value: localStorage.getItem("alertvolume"),
+                    slider: true
+                },
+                {
+                    setting: "alertradius",
+                    title: "Alert radius (meters)",
+                    min: 50,
+                    max: 500,
+                    step: 50,
+                    value: localStorage.getItem("alertradius"),
+                    slider: true
+                },
+                {
+                    setting: "alertinterval",
+                    title: "Alert interval (seconds)",
+                    min: 15,
+                    max: 120,
+                    step: 15,
+                    value: localStorage.getItem("alertinterval") == null ? 30 : localStorage.getItem("alertinterval"),
+                    slider: true
+                }];
+
+            resolve({
+                templateUrl: './pages/alertsettings.html'
+            }, {
+                context: {
+                    settings: settings
+                }
+            });
+        }
+    },
 ];