From b1290372aa0c011ff8e7d5b62f4057140c33173c Mon Sep 17 00:00:00 2001 From: Skylar Ittner Date: Sun, 27 Oct 2019 21:06:12 -0600 Subject: [PATCH] Improve settings page with smart selects, fix #20, improve app settings.js --- config.xml | 2 +- package.json | 2 +- www/assets/js/map_leaflet.js | 4 +- www/assets/js/platform.js | 2 +- www/assets/js/settings.js | 102 +++----------------- www/package.json | 2 +- www/pages/settings.html | 15 +++ www/routes.js | 176 ++++++++++++++++++++--------------- www/settings.js | 40 +++++++- 9 files changed, 172 insertions(+), 173 deletions(-) diff --git a/config.xml b/config.xml index c6f1e68..03b9f40 100644 --- a/config.xml +++ b/config.xml @@ -1,5 +1,5 @@ - + PackageHelper Assistant app for door-to-door package delivery. diff --git a/package.json b/package.json index a1bad8c..65f99bc 100644 --- a/package.json +++ b/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": { diff --git a/www/assets/js/map_leaflet.js b/www/assets/js/map_leaflet.js index f530065..7447cc4 100644 --- a/www/assets/js/map_leaflet.js +++ b/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); diff --git a/www/assets/js/platform.js b/www/assets/js/platform.js index 91fc97d..932cbc6 100644 --- a/www/assets/js/platform.js +++ b/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; diff --git a/www/assets/js/settings.js b/www/assets/js/settings.js index a2f2c7f..8c823a2 100644 --- a/www/assets/js/settings.js +++ b/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() { - var currentalertsound = localStorage.getItem("alertsound"); - app.dialog.create({ - title: 'Alert Sound', - 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(); -} +$('.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(); +}); -function pickMapSource() { - var currentmapsource = localStorage.getItem("mapsource"); - app.dialog.create({ - title: 'Map', - buttons: [ - { - 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(); -} \ No newline at end of file +$('.item-link[data-setting=alertsound] select').on("change", function () { + localStorage.setItem("alertsound", $('.item-link[data-setting=alertsound] select').val()); + // Reload sound effect stuff to apply new sound + initSFX(); + // Play the selected sound + playSound("alert"); +}); \ No newline at end of file diff --git a/www/package.json b/www/package.json index ddd8b60..d2c770d 100644 --- a/www/package.json +++ b/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": { diff --git a/www/pages/settings.html b/www/pages/settings.html index 83b738c..3551363 100644 --- a/www/pages/settings.html +++ b/www/pages/settings.html @@ -54,6 +54,20 @@ {{else}} + {{#if select}} + + +
+
+
{{title}}
+
+
+ + {{else}}
@@ -64,6 +78,7 @@
{{/if}} {{/if}} + {{/if}} {{/each}} diff --git a/www/routes.js b/www/routes.js index 062a23f..ee6bffe 100644 --- a/www/routes.js +++ b/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: [ - { - 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')" - }] + settings: settings } }); } diff --git a/www/settings.js b/www/settings.js index 81840c4..52dec58 100644 --- a/www/settings.js +++ b/www/settings.js @@ -5,10 +5,40 @@ */ var SETTINGS = { - "maptileurls": { - "liberty": "https://maps.netsyms.net/styles/osm-liberty/{z}/{x}/{y}.png", - "terrain": "https://maps.netsyms.net/styles/klokantech-terrain/{z}/{x}/{y}.png", - "fiord": "https://maps.netsyms.net/styles/fiord-color/{z}/{x}/{y}.png" + maptileurls: { + liberty: { + url: "https://maps.netsyms.net/styles/osm-liberty/{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" }