Add alert volume slider, add cancel buttons to alert sound/map dialogs

www/assets/js/audio.js

@@ -10,18 +10,38 @@ function initSFX() {
     if (localStorage.getItem("alertsound") == null) {
         localStorage.setItem("alertsound", "sonar");
     }
+    if (localStorage.getItem("alertvolume") == null) {
+        localStorage.setItem("alertvolume", 100);
+    }
 
     var alertNoiseName = localStorage.getItem("alertsound");
+    var alertVolume = localStorage.getItem("alertvolume");
 
     sfx = {
         "alert": new Audio("assets/audio/alert." + alertNoiseName + ".mp3"),
         "ok": new Audio("assets/audio/ok.mp3"),
         "error": new Audio("assets/audio/error.mp3")
     };
+
+    setVolume("alert", alertVolume);
 }
 
+/**
+ * Play a sound.
+ * @param string sound Name of the sound to play (alert, ok, error)
+ * @returns {undefined}
+ */
 function playSound(sound) {
     sfx[sound].play();
 }
 
+/**
+ * Set sound volume
+ * @param string sound The name of the sound to set volume of
+ * @param number volume Number in range 0 to 100
+ */
+function setVolume(sound, volume) {
+    sfx[sound].volume = volume / 100.0;
+}
+
 initSFX();

www/assets/js/main.js

@@ -62,6 +62,11 @@ if (localStorage.getItem("alertradius") == null) {
     localStorage.setItem("alertradius", 100);
 }
 
+// Set default alert sound volume
+if (localStorage.getItem("alertvolume") == null) {
+    localStorage.setItem("alertvolume", 100);
+}
+
 if (localStorage.getItem("darktheme") == "true") {
     $("#app").addClass("theme-dark");
 }

www/assets/js/settings.js

@@ -46,6 +46,13 @@ $('.item-content[data-setting=wakelock] .toggle input').on("change", function ()
     }
 });
 
+$('.item-content[data-setting=alertvolume] .range-slider').on('range:changed', function (e, range) {
+    var val = app.range.get(".item-content[data-setting=alertvolume] .range-slider").getValue();
+    localStorage.setItem("alertvolume", val);
+    setVolume("alert", val);
+    playSound("alert");
+});
+
 function pickAlertSound() {
     var currentalertsound = localStorage.getItem("alertsound");
     app.dialog.create({
@@ -62,12 +69,19 @@ function pickAlertSound() {
             },
             {
                 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;
@@ -77,9 +91,8 @@ function pickAlertSound() {
                 case 3:
                     alertsound = "jump";
                     break;
-                case 0:
                 default:
-                    alertsound = "sonar";
+                    return;
             }
             localStorage.setItem("alertsound", alertsound);
             // Reload sound effect stuff to apply new sound
@@ -103,24 +116,34 @@ function pickMapSource() {
             },
             {
                 text: 'Terrain' + (currentmapsource == "terrain" ? " (current)" : ""),
+            },
+            {
+                text: 'Cancel',
+                color: 'red'
             }
         ],
         verticalButtons: true,
         onClick: function (dialog, index) {
             var mapsource = "offline";
             switch (index) {
+                case 0:
+                    mapsource = "offline";
+                    break;
                 case 1:
                     mapsource = "liberty";
                     break;
                 case 2:
                     mapsource = "terrain";
                     break;
-                case 0:
                 default:
-                    mapsource = "offline";
+                    return;
             }
             localStorage.setItem("mapsource", mapsource);
 
         }
     }).open();
+}
+
+function formatPercentLabel(value) {
+    return value + "%";
 }

www/pages/settings.html

@@ -39,6 +39,20 @@
                         </div>
                     </div>
                     {{else}}
+                    {{#if slider}}
+                    <div class="item-content" data-setting="{{setting}}">
+                        <div class="item-inner">
+                            <div class="item-title">
+                                {{title}}
+                            </div>
+                            <div class="item-subtitle padding-horizontal-half">
+                                <div class="range-slider range-slider-init">
+                                    <input type="range" min="{{min}}" max="{{max}}" step="{{step}}" label="true" formatLabel="formatPercentLabel(value)" value="{{value}}">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    {{else}}
                     <div class="item-content" data-setting="{{setting}}" onclick="{{onclick}}">
                         <div class="item-inner">
                             <div class="item-title-row">
@@ -48,6 +62,7 @@
                         </div>
                     </div>
                     {{/if}}
+                    {{/if}}
                 </li>
                 {{/each}}
             </ul>
@@ -56,4 +71,4 @@
 
     <script src="assets/js/settings.js"></script>
 
-</div>
+</div>

www/routes.js

@@ -81,6 +81,15 @@ var routes = [
                             text: "Select which sound to play when a package is nearby.",
                             onclick: "pickAlertSound()"
                         },
+                        {
+                            setting: "alertvolume",
+                            title: "Alert Volume",
+                            min: 0,
+                            max: 100,
+                            step: 5,
+                            value: localStorage.getItem("alertvolume"),
+                            slider: true
+                        },
                         {
                             setting: "wakelock",
                             title: "Keep screen on",