From 18789ca7c489d2d67e3c8a6925ac5880e1d0997d Mon Sep 17 00:00:00 2001
From: BlueFox <bluefox@privacynerd.de>
Date: Tue, 26 Mar 2024 19:18:03 +0100
Subject: [PATCH] Added updating for some sliders etc.; some are still
 remaining

---
 simpledemo.html | 164 +++++++++++++++++++++++++-----------------------
 1 file changed, 84 insertions(+), 80 deletions(-)

diff --git a/simpledemo.html b/simpledemo.html
index 6739a76..a4f778e 100644
--- a/simpledemo.html
+++ b/simpledemo.html
@@ -192,7 +192,7 @@
                     <hr>
                     <div class='btn-group' role='group' aria-label='Basic playback option (play, pause, next, previous)'>
                         <button type='button' class='btn btn-secondary' onclick="http
-                                = new XMLHttpRequest();http.open('GET', '/api/v1/playback/previous');http.send();">
+                                = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playback/previous');http.send();updateStrings();">
                             <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-rewind-circle'
                                  viewBox='0 0 16 16'>
                                 <path d='M7.729 5.055a.5.5 0 0 0-.52.038l-3.5 2.5a.5.5 0 0 0 0 .814l3.5 2.5A.5.5 0 0 0 8 10.5V8.614l3.21 2.293A.5.5 0 0 0 12 10.5v-5a.5.5 0 0 0-.79-.407L8 7.386V5.5a.5.5 0 0 0-.271-.445'/>
@@ -200,17 +200,15 @@
                             </svg>
                         </button>
                         <button type='button' class='btn btn-success' onclick="http
-                                = new XMLHttpRequest();http.open('GET',
-                                '/api/v1/playback/play');http.send();document.getElementById('playbackTable_audioPlayingValue').innerHTML =
-                                'yes';">
+                                = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playback/play');http.send();updateStrings();">
                             <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-play-circle'
                                  viewBox='0 0 16 16'>
                                 <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'></path>
                                 <path d='M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445'></path>
                             </svg>
                         </button>
-                        <button type='button' class='btn btn-success'
-                                onclick="http = new XMLHttpRequest();http.open('GET', '/api/v1/playback/pause');http.send();document.getElementById('playbackTable_audioPlayingValue').innerHTML = 'no';\">
+                        <button type='button' class='btn btn-success' onclick="http
+                                = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playback/pause');http.send();updateStrings();">
                             <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pause-circle'
                                  viewBox='0 0 16 16'>
                                 <path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/>
@@ -218,7 +216,7 @@
                             </svg>
                         </button>
                         <button type='button' class='btn btn-secondary'
-                                onclick="http = new XMLHttpRequest();http.open('GET', '/api/v1/playback/next');http.send();">
+                                onclick="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playback/next');http.send();updateStrings();">
                             <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'
                                  class='bi bi-skip-forward-circle'
                                  viewBox='0 0 16 16'>
@@ -230,18 +228,12 @@
                     <br>
                     <hr>
                     <br><label for='volumeRange' class='form-label'>Volume</label>
-                    <input type='range' class='form-range' value='" + String(currentVolume) + "' min='0' max='" + String(maxVolume) + "'
-                           id='volumeRange'
-                           onchange='value = document.getElementById(\"volumeRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/volume/\" + value);http.send();document.getElementById(\"playbackTable_volumeValue\").innerHTML = value + \"/" + String(maxVolume) + "%\"'>
+                    <input type='range' class='form-range' value='0' min='0' max='0'
+                           id='updatedLabel_VOLUME_range_bottom'
+                           onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/volume/' + this.value);http.send();updateStrings();">
                     <button type='button' id='playbackMuteButton' onclick=
-                            "http = new XMLHttpRequest();
-                                    http.open('GET', '/api/v1/volume/toggle_mute');
-                                    http.send(); button = document.getElementById('playbackMuteButton');
-                                    button.classList.contains('btn-outline-danger') ? button.className = 'btn btn-danger' : button.className = 'btn
-                                    btn-outline-danger';
-                                    mutedValueHTML = document.getElementById('playbackTable_mutedValue');
-                                    button.classList.contains('btn-outline-danger') ? mutedValueHTML.innerHTML = 'no' : mutedValueHTML.innerHTML = 'yes'"
-                            class='btn btn-danger'> or btn-outline-danger'>
+                            "http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/volume/toggle_mute');http.send();updateStrings();"
+                            class='btn btn-danger'>
                         <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-volume-mute'
                              viewBox='0 0 16 16'>
                             <path d='M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zM6 5.04 4.312 6.39A.5.5 0 0 1 4 6.5H2v3h2a.5.5 0 0 1 .312.11L6 10.96zm7.854.606a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z'></path>
@@ -270,14 +262,14 @@
                                aria-label='Playlist path (must start with a /)' aria-describedby='playlist_playBtn'
                                id='playlist_playPathInput'>
                         <button class='btn btn-success' type='button' id='playlist_playBtn' onclick=
-                                "playlistPath
-                                = document.getElementById('playlist_playPathInput').value;
-                                http = new XMLHttpRequest();http.open('GET', '/api/v1/playlist/play?playlist_path='+playlistPath);http.send();">
+                                "playlistPath = document.getElementById('playlist_playPathInput').value;
+                                http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playlist/play?playlist_path='+playlistPath);http.send();
+                                updateStrings();">
                             Change
                         </button>
                     </div>
                     <hr>
-                    <!--create playlist api demo   -->
+                    <!-- Create playlist api demo -->
                     <p>Demo for creating a new playlist containing all the contents of the given folder (on the SD card).</p>
                     <p>The new playlist will be located in the given folder and is named <code>.directory.m3u</code>. This can't be changed.
                     </p>
@@ -288,9 +280,9 @@
                                aria-label='Folder path (must start with a /)' aria-describedby='playlist_createBtn'
                                id='playlist_createPathInput'>
                         <button class='btn btn-success' type='button' id='playlist_createBtn' onclick=
-                                "folderPath
-                                = document.getElementById('playlist_createPathInput').value;
-                                http = new XMLHttpRequest();http.open('GET', '/api/v1/playlist/create?folder_path='+folderPath);http.send();">
+                                "folderPath = document.getElementById('playlist_createPathInput').value;
+                                http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playlist/create?folder_path='+folderPath);http.send();
+                                updateStrings();">
                             Change
                         </button>
                     </div>
@@ -322,8 +314,8 @@
                     <br>
                     <hr>
                     <label for='balanceRange' class='form-label'>Balance (-16 to 16)</label>
-                    <input type='range' class='form-range' value='" + String(balanceLevel+16) + "' min='0' max='32' id='balanceRange'
-                           onchange='value = document.getElementById(\"balanceRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/balance/\" + value);http.send(); document.getElementById(\"balanceChangeTable_balanceValue\").innerHTML = value-16;'>
+                    <input type='range' class='form-range' value='16' min='0' max='32' id='updatedLabel_BALANCE_range_bottom'
+                           onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/balance/' + this.value);http.send();updateStrings();">
                 </div>
             </div>
         </div>
@@ -358,18 +350,18 @@
                     <br>
                     <hr>
                     <label for='eqLowRange' class='form-label'>Equalizer for lows (-40dB to 6dB)</label>
-                    <input type='range' class='form-range' value='" + String(eqLow+40) + "' min='0' max='46' id='eqLowRange'
-                           onchange='value = document.getElementById(\"eqLowRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/low/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqLowValue\").innerHTML = value-40 + \"dB\";'>
+                    <input type='range' class='form-range' value='" + String(eqLow+40) + "' min='0' max='46' id='updatedLabel_EQLOW_range_bottom'
+                           onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/eq/low/' + this.value);http.send();updateStrings();">
                     <br>
                     <hr>
                     <br><label for='eqMidRange' class='form-label'>Equalizer for mids (-40dB to 6dB)</label>
-                    <input type='range' class='form-range' value='" + String(eqMid+40) + "' min='0' max='46' id='eqMidRange'
-                           onchange='value = document.getElementById(\"eqMidRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/mid/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqMidValue\").innerHTML = value-40 + \"dB\";'>
+                    <input type='range' class='form-range' value='" + String(eqMid+40) + "' min='0' max='46' id='updatedLabel_EQMID_range_bottom'
+                           onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/eq/mid/' + this.value);http.send();updateStrings();">
                     <br>
                     <hr>
                     <br><label for='eqHighRange' class='form-label'>Equalizer for highs (-40dB to 6dB)</label>
-                    <input type='range' class='form-range' value='" + String(eqHigh+40) + "' min='0' max='46' id='eqHighRange'
-                           onchange='value = document.getElementById(\"eqHighRange\").value; http = new XMLHttpRequest();http.open(\"GET\", \"/api/v1/eq/high/\" + value);http.send(); document.getElementById(\"eqChangeTable_eqHighValue\").innerHTML = value-40 + \"dB\";'>
+                    <input type='range' class='form-range' value='" + String(eqHigh+40) + "' min='0' max='46' id='updatedLabel_EQHIGH_range_bottom'
+                           onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/eq/high/' + this.value);http.send();updateStrings();">
                 </div>
             </div>
         </div>
@@ -391,12 +383,12 @@
                         <span class='input-group-text'> -> </span>
                         <input type='text' class='form-control' placeholder='New friendly name' aria-label='New friendly name'
                                aria-describedby='frnameChange_BTN_submitName' id='frnameChange_newNameInput'>
-                        <button class='btn btn-success' type='button' id='frnameChange_BTN_submitName' onclick=
-                                "newNameInput
-                        = document.getElementById('frnameChange_newNameInput'); if(newNameInput.value != ''){ http = new
-                        XMLHttpRequest();http.open('GET',
-                        '/api/v1/system/name/change?friendly_name='+newNameInput.value);http.send();document.getElementById('frnameChange_oldName').innerHTML=newNameInput.value;document.getElementById('title_frname').innerHTML=newNameInput.value;newNameInput.value='';
-                        }\">
+                        <button class='btn btn-success' type='button' id='frnameChange_BTN_submitName' onclick="
+                        newName=document.getElementById('frnameChange_newNameInput').value;oldName=document.getElementById('updatedLabel_FRNAME_oldinputtext').innerHTML;
+                        if(oldName != newName) {
+                            http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/system/name/change?friendly_name=' + newName);http.send();
+                            updateStrings();
+                        }">
                             Change
                         </button>
                     </div>
@@ -420,7 +412,7 @@
                     <p>After doing this, you have to go down to the restart collapsible. There, restart the NetSpeaker and it should connect
                         to the configured WiFi.</p>
                     <p>If anything is wrong (either SSID or PSK wrong/typo, or the wifi's not available), the NetSpeaker opens an HotSpot
-                        with the SSID <code>" + apSSID + "</code> and the PSK <code>" + apPSK + "</code>! </p>
+                        with the SSID <code></code> and the PSK <code></code>! </p>
                     <div class='input-group mb-3'>
                         <span class='input-group-text'>SSID</span>
                         <input type='text' class='form-control' placeholder='Type in a new SSID here (optional)'
@@ -574,17 +566,22 @@
     const rs_languageLabel1 = document.getElementById("updatedLabel_RS_LANGUAGE_table_top");
     volumeLabel1 = document.getElementById('updatedLabel_VOLUME_table_top');
     volumeLabel2 = document.getElementById('updatedLabel_VOLUME_table_bottom');
+    volumeRange1 = document.getElementById('updatedLabel_VOLUME_range_bottom');
     mutedLabel1 = document.getElementById('updatedLabel_MUTED_table_top');
     mutedLabel2 = document.getElementById('updatedLabel_MUTED_table_bottom');
     eqLowLabel1 = document.getElementById('updatedLabel_EQLOW_table_top');
     eqLowLabel2 = document.getElementById('updatedLabel_EQLOW_table_bottom');
+    eqLowRange1 = document.getElementById('updatedLabel_EQLOW_range_bottom');
     eqMidLabel1 = document.getElementById('updatedLabel_EQMID_table_top');
     eqMidLabel2 = document.getElementById('updatedLabel_EQMID_table_bottom');
+    eqMidRange1 = document.getElementById('updatedLabel_EQMID_range_bottom');
     eqHighLabel1 = document.getElementById('updatedLabel_EQHIGH_table_top');
     eqHighLabel2 = document.getElementById('updatedLabel_EQHIGH_table_bottom');
+    eqHighRange1 = document.getElementById('updatedLabel_EQHIGH_range_bottom');
     balanceLabel1 = document.getElementById('updatedLabel_BALANCE_table_top');
     balanceLabel2 = document.getElementById('updatedLabel_BALANCE_table_bottom');
-    
+    balanceRange1 = document.getElementById('updatedLabel_BALANCE_range_bottom');
+
 
     function updateStrings() {
         apiBase =                        "http://" + document.cookie;
@@ -695,6 +692,8 @@
                 volumeLabel2.innerHTML = volumeValue + "/" + maxVolumeValue;
                 mutedLabel1.innerHTML = mutedValue ? "yes" : "no";
                 mutedLabel2.innerHTML = mutedValue ? "yes" : "no";
+                volumeRange1.max = maxVolumeValue;
+                volumeRange1.value = volumeValue;
             }
         }
         volumeRequest.open("GET", apiBase + volumeApiEndpoint, true);
@@ -708,12 +707,15 @@
                 var eqLowValue = JSON.parse(this.responseText).equalizer_low;
                 var eqMidValue = JSON.parse(this.responseText).equalizer_mid;
                 var eqHighValue = JSON.parse(this.responseText).equalizer_high;
-                eqLowLabel1.innerHTML = eqLowValue;
-                eqLowLabel2.innerHTML = eqLowValue;
-                eqMidLabel1.innerHTML = eqMidValue;
-                eqMidLabel2.innerHTML = eqMidValue;
-                eqHighLabel1.innerHTML = eqHighValue;
-                eqHighLabel2.innerHTML = eqHighValue;
+                eqLowLabel1.innerHTML = eqLowValue + "dB";
+                eqLowLabel2.innerHTML = eqLowValue + "dB";
+                eqLowRange1.value = eqLowValue + 40;
+                eqMidLabel1.innerHTML = eqMidValue + "dB";
+                eqMidLabel2.innerHTML = eqMidValue + "dB";
+                eqMidRange1.value = eqMidValue + 40;
+                eqHighLabel1.innerHTML = eqHighValue + "dB";
+                eqHighLabel2.innerHTML = eqHighValue + "dB";
+                eqHighRange1.value = eqHighValue + 40;
             }
         }
         eqRequest.open("GET", apiBase + eqApiEndpoint, true);
@@ -727,6 +729,7 @@
                 var balanceValue = JSON.parse(this.responseText).balance;
                 balanceLabel1.innerHTML = balanceValue;
                 balanceLabel2.innerHTML = balanceValue;
+                balanceRange1.value = balanceValue + 16;  // as the slider goes from 0 to 32 (as the API accepts it)
             }
         }
         balanceRequest.open("GET", apiBase + balanceApiEndpoint, true);
@@ -740,45 +743,46 @@
         setTimeout(updateStrings, 1000);  // to make user see the epic placeholder glow effect of the bootstrap library
         setInterval(updateStrings, 10000);
     }
-    
-    if (document.cookie == "" || !isValidIP(document.cookie)) {
-        var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {});
-        selectIPModal.show();
+    window.onload = function(e) {
+        if (document.cookie == "" || !isValidIP(document.cookie)) {
+            var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {});
+            selectIPModal.show();
 
-        const alertPlaceholder = document.getElementById('configWorkingAlertPlaceholder');
+            const alertPlaceholder = document.getElementById('configWorkingAlertPlaceholder');
 
-        function configButtonEventListener(hideModalOnSuccess) {
-            var ipAddressEntered = document.getElementById('ipAdressInput').value;
-            if(isValidIP(ipAddressEntered)) {
-                var request = new XMLHttpRequest();
-                request.onreadystatechange = function() {
-                    if (this.readyState == 4 && this.status == 200) {
-                        appendAlert(alertPlaceholder, 'Working Configuration!', 'success');
-                        document.cookie = ipAddressEntered;
-                        setupSite()
-                        setTimeout(function(){
-                            if(hideModalOnSuccess) selectIPModal.hide();
-                        }, 500);
-                    } else if (this.readyState != 4) {
-                        // just do nothing, wait!
-                    } else {
-                        appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
-                    }
-                };
-                request.open("GET", "http://" + ipAddressEntered + "/api/v1/system/version", true);
-                request.send()
-            } else {
-                appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
+            function configButtonEventListener(hideModalOnSuccess) {
+                var ipAddressEntered = document.getElementById('ipAdressInput').value;
+                if(isValidIP(ipAddressEntered)) {
+                    var request = new XMLHttpRequest();
+                    request.onreadystatechange = function() {
+                        if (this.readyState == 4 && this.status == 200) {
+                            appendAlert(alertPlaceholder, 'Working Configuration!', 'success');
+                            document.cookie = ipAddressEntered;
+                            setupSite()
+                            setTimeout(function(){
+                                if(hideModalOnSuccess) selectIPModal.hide();
+                            }, 500);
+                        } else if (this.readyState != 4) {
+                            // just do nothing, wait!
+                        } else {
+                            appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
+                        }
+                    };
+                    request.open("GET", "http://" + ipAddressEntered + "/api/v1/system/version", true);
+                    request.send()
+                } else {
+                    appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
+                }
             }
-        }
 
-        const ipAdressModalApplyBtn = document.getElementById('ipAdressModalApplyBtn');
-        ipAdressModalApplyBtn.addEventListener('click', () => { configButtonEventListener(false); });
+            const ipAdressModalApplyBtn = document.getElementById('ipAdressModalApplyBtn');
+            ipAdressModalApplyBtn.addEventListener('click', () => { configButtonEventListener(false); });
 
-        const ipAdressModalOkBtn = document.getElementById('ipAdressModalOkBtn');
-        ipAdressModalOkBtn.addEventListener('click', () => { configButtonEventListener(true); });
+            const ipAdressModalOkBtn = document.getElementById('ipAdressModalOkBtn');
+            ipAdressModalOkBtn.addEventListener('click', () => { configButtonEventListener(true); });
 
-    } else if (isValidIP(document.cookie)) setupSite();
+        } else if (isValidIP(document.cookie)) setupSite();
+    }  // end of onload function
 </script>
 </body>
 </html>