Improve settings page with smart selects, fix #20, improve app settings.js

config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="com.netsyms.PackageHelper" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="com.netsyms.PackageHelper" version="1.1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>PackageHelper</name>
     <description>
         Assistant app for door-to-door package delivery.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "com.netsyms.packagehelper",
   "displayName": "PackageHelper",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Assistant app for door-to-door package delivery.",
   "main": "www/index.html",
   "scripts": {

www/assets/js/map_leaflet.js

@@ -17,8 +17,10 @@ function leafletMap() {
     if (localStorage.getItem("mapsource") == null) {
         localStorage.setItem("mapsource", "liberty");
     }
+    
+    $("#mapbox").css("background-color", SETTINGS.maptileurls[localStorage.getItem("mapsource")].bgcolor);
 
-    L.tileLayer(SETTINGS.maptileurls[localStorage.getItem("mapsource")], {
+    L.tileLayer(SETTINGS.maptileurls[localStorage.getItem("mapsource")].url, {
         minZoom: 1,
         maxZoom: 19
     }).addTo(map);

www/assets/js/platform.js

@@ -8,7 +8,7 @@ var platform_type = "";
 
 var platform_theme = "md";
 
-var app_version = "2.0.0";
+var app_version = "unknown";
 
 var nw_tray = null;
 

www/assets/js/settings.js

@@ -64,94 +64,16 @@ $('.item-content[data-setting=alertinterval] .range-slider').on('range:changed',
     localStorage.setItem("alertinterval", val);
 });
 
-function pickAlertSound() {
+$('.item-link[data-setting=mapsource] select').on("change", function () {
-    var currentalertsound = localStorage.getItem("alertsound");
+    localStorage.setItem("mapsource", $('.item-link[data-setting=mapsource] select').val());
-    app.dialog.create({
+    // Re-init map to load new style
-        title: 'Alert Sound',
+    reloadMap();
-        buttons: [
+});
-            {
-                text: 'Sonar' + (currentalertsound == "sonar" ? " (current)" : ""),
-            },
-            {
-                text: 'Robot' + (currentalertsound == "robot" ? " (current)" : ""),
-            },
-            {
-                text: 'Coin' + (currentalertsound == "coin" ? " (current)" : ""),
-            },
-            {
-                text: 'Jump' + (currentalertsound == "jump" ? " (current)" : ""),
-            },
-            {
-                text: 'Cancel',
-                color: 'red'
-            }
-        ],
-        verticalButtons: true,
-        onClick: function (dialog, index) {
-            var alertsound = "sonar";
-            switch (index) {
-                case 0:
-                    alertsound = "sonar";
-                    break;
-                case 1:
-                    alertsound = "robot";
-                    break;
-                case 2:
-                    alertsound = "coin";
-                    break;
-                case 3:
-                    alertsound = "jump";
-                    break;
-                default:
-                    return;
-            }
-            localStorage.setItem("alertsound", alertsound);
-            // Reload sound effect stuff to apply new sound
-            initSFX();
-            // Play the selected sound
-            playSound("alert");
-        }
-    }).open();
-}
 
-function pickMapSource() {
+$('.item-link[data-setting=alertsound] select').on("change", function () {
-    var currentmapsource = localStorage.getItem("mapsource");
+    localStorage.setItem("alertsound", $('.item-link[data-setting=alertsound] select').val());
-    app.dialog.create({
+    // Reload sound effect stuff to apply new sound
-        title: 'Map',
+    initSFX();
-        buttons: [
+    // Play the selected sound
-            {
+    playSound("alert");
-                text: 'Liberty' + (currentmapsource == "liberty" ? " (current)" : ""),
+});
-            },
-            {
-                text: 'Terrain' + (currentmapsource == "terrain" ? " (current)" : ""),
-            },
-            {
-                text: 'Dark Fiord' + (currentmapsource == "fiord" ? " (current)" : ""),
-            },
-            {
-                text: 'Cancel',
-                color: 'red'
-            }
-        ],
-        verticalButtons: true,
-        onClick: function (dialog, index) {
-            var mapsource = "liberty";
-            switch (index) {
-                case 0:
-                    mapsource = "liberty";
-                    break;
-                case 1:
-                    mapsource = "terrain";
-                    break;
-                case 2:
-                    mapsource = "fiord";
-                    break;
-                default:
-                    return;
-            }
-            localStorage.setItem("mapsource", mapsource);
-            // Re-init map to load new style
-            reloadMap();
-        }
-    }).open();
-}

www/package.json

@@ -1,6 +1,6 @@
 {
   "name": "PackageHelper",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "index.html",
   "license": "MPL-2.0",
   "dependencies": {

www/pages/settings.html

@@ -54,6 +54,20 @@
                         </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">
@@ -64,6 +78,7 @@
                     </div>
                     {{/if}}
                     {{/if}}
+                    {{/if}}
                 </li>
                 {{/each}}
             </ul>

www/routes.js

@@ -92,83 +92,113 @@ var routes = [
         path: '/settings',
         name: 'settings',
         async: function (routeTo, routeFrom, resolve, reject) {
+            var mapstyles = [];
+            for (var id in SETTINGS.maptileurls) {
+                if (SETTINGS.maptileurls.hasOwnProperty(id)) {
+                    mapstyles.push({
+                        value: id,
+                        label: SETTINGS.maptileurls[id].name,
+                        selected: localStorage.getItem("mapsource") == id
+                    });
+                }
+            }
+
+            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: "alertinterval",
+                    title: "Alert interval (seconds)",
+                    min: 15,
+                    max: 120,
+                    step: 15,
+                    value: localStorage.getItem("alertinterval") == null ? 30 : localStorage.getItem("alertinterval"),
+                    slider: true
+                }];
+
+            if (platform_type == "cordova") {
+                settings.push({
+                    setting: "wakelock",
+                    title: "Keep screen on",
+                    text: "Improves GPS accuracy and alert sound reliability, but uses more battery.",
+                    toggle: true,
+                    checked: localStorage.getItem("wakelock") == "true",
+                    onclick: ""
+                });
+            }
+
+            settings.push(
+                    {
+                        setting: "darktheme",
+                        title: "Use dark theme",
+                        text: "Saves power on phones with OLED screens.",
+                        toggle: true,
+                        checked: localStorage.getItem("darktheme") == "true",
+                        onclick: ""
+                    },
+                    {
+                        setting: "units",
+                        title: "Measurement units",
+                        text: "Use feet and miles for showing distance",
+                        toggle: true,
+                        checked: localStorage.getItem("units") == "imperial",
+                        onclick: ""
+                    },
+                    {
+                        setting: "mapsource",
+                        title: "Map style",
+                        select: true,
+                        options: mapstyles,
+                        text: "Choose which map style to use."
+                    },
+                    {
+                        setting: "versions",
+                        title: "PackageHelper app v" + app_version,
+                        text: "Copyright © 2019 Netsyms Technologies.  Licensed under the Mozilla Public License 2.0.",
+                        onclick: ""
+                    },
+                    {
+                        setting: "opensource",
+                        title: "Credits and open source info",
+                        text: "",
+                        onclick: "router.navigate('/credits')"
+                    },
+                    {
+                        setting: "privacy",
+                        title: "Privacy policy and legal",
+                        text: "",
+                        onclick: "openBrowser('https://netsyms.com/legal?pk_campaign=PackageHelpterApp')"
+                    });
+
             resolve({
                 templateUrl: './pages/settings.html'
             }, {
                 context: {
-                    settings: [
+                    settings: settings
-                        {
-                            setting: "alertsound",
-                            title: "Alert sound",
-                            text: "Select which sound to play when a package is nearby.",
-                            onclick: "pickAlertSound()"
-                        },
-                        {
-                            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: "wakelock",
-                            title: "Keep screen on",
-                            text: "Improves GPS accuracy and alert sound reliability, but uses more battery.",
-                            toggle: true,
-                            checked: localStorage.getItem("wakelock") == "true",
-                            onclick: ""
-                        },
-                        {
-                            setting: "darktheme",
-                            title: "Use dark theme",
-                            text: "Saves power on phones with OLED screens.",
-                            toggle: true,
-                            checked: localStorage.getItem("darktheme") == "true",
-                            onclick: ""
-                        },
-                        {
-                            setting: "units",
-                            title: "Measurement units",
-                            text: "Use feet and miles for showing distance",
-                            toggle: true,
-                            checked: localStorage.getItem("units") == "imperial",
-                            onclick: ""
-                        },
-                        {
-                            setting: "mapsource",
-                            title: "Map style",
-                            text: "Choose which map style to use.",
-                            onclick: "pickMapSource()"
-                        },
-                        {
-                            setting: "versions",
-                            title: "PackageHelper app v1.0.0",
-                            text: "Copyright © 2019 Netsyms Technologies.  Licensed under the Mozilla Public License 2.0.",
-                            onclick: ""
-                        },
-                        {
-                            setting: "opensource",
-                            title: "Credits and open source info",
-                            text: "",
-                            onclick: "router.navigate('/credits')"
-                        },
-                        {
-                            setting: "privacy",
-                            title: "Privacy policy and legal",
-                            text: "",
-                            onclick: "openBrowser('https://netsyms.com/legal?pk_campaign=PackageHelpterApp')"
-                        }]
                 }
             });
         }

www/settings.js

@@ -5,10 +5,40 @@
  */
 
 var SETTINGS = {
-    "maptileurls": {
+    maptileurls: {
-        "liberty": "https://maps.netsyms.net/styles/osm-liberty/{z}/{x}/{y}.png",
+        liberty: {
-        "terrain": "https://maps.netsyms.net/styles/klokantech-terrain/{z}/{x}/{y}.png",
+            url: "https://maps.netsyms.net/styles/osm-liberty/{z}/{x}/{y}.png",
-        "fiord": "https://maps.netsyms.net/styles/fiord-color/{z}/{x}/{y}.png"
+            name: "Liberty",
+            bgcolor: "#EFEFEF"
+        },
+        terrain: {
+            url: "https://maps.netsyms.net/styles/klokantech-terrain/{z}/{x}/{y}.png",
+            name: "Terrain",
+            bgcolor: "#EDF5F3"
+        },
+        fiord: {
+            url: "https://maps.netsyms.net/styles/fiord-color/{z}/{x}/{y}.png",
+            name: "Dark Fiord",
+            bgcolor: "#45516E"
+        }
     },
-    "geocodeapi": "https://apis.netsyms.net/packagehelper/geocode.php"
+    alertsounds: {
+        coin: {
+            name: "Coin",
+            file: "alert.coin.mp3"
+        },
+        jump: {
+            name: "Jump",
+            file: "alert.jump.mp3"
+        },
+        robot: {
+            name: "Robot",
+            file: "alert.robot.mp3"
+        },
+        sonar: {
+            name: "Sonar",
+            file: "alert.sonar.mp3"
+        }
+    },
+    geocodeapi: "https://apis.netsyms.net/packagehelper/geocode.php"
 }