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

master
Skylar Ittner 5 years ago
parent 47bd443689
commit b1290372aa

@ -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.

@ -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": {

@ -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);

@ -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;

@ -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();
}
$('.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");
});

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

@ -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>

@ -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 &copy; 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 &copy; 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
}
});
}

@ -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"
}

Loading…
Cancel
Save