Implemented the other API get functions

simpledemo.html

@@ -14,7 +14,8 @@
     <p>Welcome to</p>
     <h1 id='updatedLabel_FRNAME_title'><span class="placeholder col-3"></span></h1>
     <p id="title_onIP"><span class="placeholder col-1"></span></p>
-    <p style='font-size: .875em; color: var(--bs-code-color); padding-top: .5rem' id="updatedLabel_VERSION_title"><span class="placeholder col-2"></span></p>
+    <p style='font-size: .875em; color: var(--bs-code-color); padding-top: .5rem' id="updatedLabel_VERSION_title"><span
+            class="placeholder col-2"></span></p>
 
     <hr style='margin: 3em 0em;'>
 
@@ -35,73 +36,79 @@
                         <tbody>
                         <tr>
                             <td>Playing</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_PLAYING_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Volume</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_VOLUME_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Muted</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_MUTED_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Equalizer Low</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td></tr>
+                            <td class='text-end' id="updatedLabel_EQLOW_table_top"><span class="placeholder col-12"></span></td>
+                        </tr>
                         <tr>
                             <td>Equalizer Mid</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td></tr>
+                            <td class='text-end' id="updatedLabel_EQMID_table_top"><span class="placeholder col-12"></span></td>
+                        </tr>
                         <tr>
                             <td>Equalizer High</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_EQHIGH_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Balance (range -16 | +16)</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_BALANCE_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Path to playlist</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_RS_PLPATH_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Index in playlist (starting from 0)</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_RS_PLIDX_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource path</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_RS_PATH_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource type</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_RS_TYPE_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource title</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_RS_TITLE_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource album</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_RS_ALBUM_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource artist</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_RS_ARTIST_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource track number</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_RS_TRACKNR_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource year</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_RS_YEAR_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource genre</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_RS_GENRE_table_top"><span class="placeholder col-12"></span></td>
+                        </tr>
+                        <tr>
+                            <td>Resource copyright</td>
+                            <td class='text-end' id="updatedLabel_RS_COPYRIGHT_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Resource language (for TTS)</td>
-                            <td class='text-end'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id="updatedLabel_RS_LANGUAGE_table_top"><span class="placeholder col-12"></span></td>
                         </tr>
                         </tbody>
                     </table>
@@ -153,7 +160,8 @@
     <!---- API FUNCTIONS ACCODRION  ---->
     <!---------------------------------->
     <div class='accordion text-start' id='accordion'>
-        <!--PLAYBACK Collapsible -->
+
+        <!-- PLAYBACK Collapsible -->
         <div class='accordion-item'>
             <h2 class='accordion-header'>
                 <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
@@ -169,15 +177,15 @@
                         <tbody>
                         <tr>
                             <td>Playing</td>
-                            <td class='text-end' id='playbackTable_audioPlayingValue'><span class="placeholder col-4"></span></td>
+                            <td class='text-end' id='updatedLabel_PLAYING_table_bottom'><span class="placeholder col-4"></span></td>
                         </tr>
                         <tr>
                             <td>Volume</td>
-                            <td class='text-end' id='playbackTable_volumeValue'><span class="placeholder col-4"></span></td>
+                            <td class='text-end' id='updatedLabel_VOLUME_table_bottom'><span class="placeholder col-4"></span></td>
                         </tr>
                         <tr>
                             <td>Muted</td>
-                            <td class='text-end' id='playbackTable_mutedValue'><span class="placeholder col-4"></span></td>
+                            <td class='text-end' id='updatedLabel_MUTED_table_bottom'><span class="placeholder col-4"></span></td>
                         </tr>
                         </tbody>
                     </table>
@@ -307,7 +315,7 @@
                         <tbody>
                         <tr>
                             <td>Balance (range -16 | +16)</td>
-                            <td class='text-end' id='balanceChangeTable_balanceValue'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id='updatedLabel_BALANCE_table_bottom'><span class="placeholder col-12"></span></td>
                         </tr>
                         </tbody>
                     </table>
@@ -335,15 +343,15 @@
                         <tbody>
                         <tr>
                             <td>Equalizer Low (-40dB to 6dB)</td>
-                            <td class='text-end' id='eqChangeTable_eqLowValue'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id='updatedLabel_EQLOW_table_bottom'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Equalizer Mid (-40dB to 6dB)</td>
-                            <td class='text-end' id='eqChangeTable_eqMidValue'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id='updatedLabel_EQMID_table_bottom'><span class="placeholder col-12"></span></td>
                         </tr>
                         <tr>
                             <td>Equalizer High (-40dB to 6dB)</td>
-                            <td class='text-end' id='eqChangeTable_eqHighValue'><span class="placeholder col-12"></span></td>
+                            <td class='text-end' id='updatedLabel_EQHIGH_table_bottom'><span class="placeholder col-12"></span></td>
                         </tr>
                         </tbody>
                     </table>
@@ -389,7 +397,8 @@
                         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='';
                         }\">
-                        Change</button>
+                            Change
+                        </button>
                     </div>
                 </div>
             </div>
@@ -505,10 +514,10 @@
                 <div class="text-start modal-body">
                     <p>Please give the IP adress of you NetSpeaker here, so that this site can access its API.</p>
                     <div class="mb-3">
-                      <div class="input-group">
+                        <div class="input-group">
-                        <span class="input-group-text">http://</span>
+                            <span class="input-group-text">http://</span>
-                        <input type="text" class="form-control" id="ipAdressInput">
+                            <input type="text" class="form-control" id="ipAdressInput">
-                      </div>
+                        </div>
                     </div>
                     <div id="configWorkingAlertPlaceholder"></div>
                 </div>
@@ -541,18 +550,55 @@
       alertPlaceholder.append(wrapper)
     }
 
+    versionLabel1 = document.getElementById('updatedLabel_VERSION_title');
+    versionLabel2 = document.getElementById('updatedLabel_VERSION_table');
+    frnameLabel1 = document.getElementById('updatedLabel_FRNAME_title');
+    frnameLabel2 = document.getElementById('updatedLabel_FRNAME_table');
+    frnameLabel3 = document.getElementById('updatedLabel_FRNAME_oldinputtext');
+    restoreStateLabel1 = document.getElementById('updatedLabel_RESTORESTATE_table')
+    restorePlayingStateLabel1 = document.getElementById('updatedLabel_RESTOREPLAYING_table')
+    wifiLabel1 = document.getElementById('updatedLabel_WIFISSID_table');
+    const playingLabel1 = document.getElementById("updatedLabel_PLAYING_table_top");
+    const playingLabel2 = document.getElementById("updatedLabel_PLAYING_table_bottom");
+    const rs_plpathLabel1 = document.getElementById("updatedLabel_RS_PLPATH_table_top");
+    const rs_plidxLabel1 = document.getElementById("updatedLabel_RS_PLIDX_table_top");
+    const rs_pathLabel1 = document.getElementById("updatedLabel_RS_PATH_table_top");
+    const rs_typeLabel1 = document.getElementById("updatedLabel_RS_TYPE_table_top");
+    const rs_titleLabel1 = document.getElementById("updatedLabel_RS_TITLE_table_top");
+    const rs_albumLabel1 = document.getElementById("updatedLabel_RS_ALBUM_table_top");
+    const rs_artistLabel1 = document.getElementById("updatedLabel_RS_ARTIST_table_top");
+    const rs_tracknrLabel1 = document.getElementById("updatedLabel_RS_TRACKNR_table_top");
+    const rs_yearLabel1 = document.getElementById("updatedLabel_RS_YEAR_table_top");
+    const rs_genreLabel1 = document.getElementById("updatedLabel_RS_GENRE_table_top");
+    const rs_copyrightLabel1 = document.getElementById("updatedLabel_RS_COPYRIGHT_table_top");
+    const rs_languageLabel1 = document.getElementById("updatedLabel_RS_LANGUAGE_table_top");
+    volumeLabel1 = document.getElementById('updatedLabel_VOLUME_table_top');
+    volumeLabel2 = document.getElementById('updatedLabel_VOLUME_table_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');
+    eqMidLabel1 = document.getElementById('updatedLabel_EQMID_table_top');
+    eqMidLabel2 = document.getElementById('updatedLabel_EQMID_table_bottom');
+    eqHighLabel1 = document.getElementById('updatedLabel_EQHIGH_table_top');
+    eqHighLabel2 = document.getElementById('updatedLabel_EQHIGH_table_bottom');
+    balanceLabel1 = document.getElementById('updatedLabel_BALANCE_table_top');
+    balanceLabel2 = document.getElementById('updatedLabel_BALANCE_table_bottom');
+    
+
     function updateStrings() {
-        apiBase = "http://" + document.cookie;
+        apiBase =                        "http://" + document.cookie;
-        versionApiEndpoint = "/api/v1/system/version";
+        versionApiEndpoint =             "/api/v1/system/version";
-        frnameApiEndpoint = "/api/v1/system/name";
+        frnameApiEndpoint =              "/api/v1/system/name";
-        restoreStateApiEndpoint = "/api/v1/system/restore_state/get";
+        restoreStateApiEndpoint =        "/api/v1/system/restore_state/get";
         restorePlayingStateApiEndpoint = "/api/v1/system/restore_playing/get";
-        wifiApiEndpoint = "/api/v1/system/wifi/get_ssid";
+        wifiApiEndpoint =                "/api/v1/system/wifi/get_ssid";
+        playbackInfoApiEndpoint =        "/api/v1/playback/info";
+        volumeApiEndpoint =              "/api/v1/volume/get";
+        eqApiEndpoint =                  "/api/v1/eq/get";
+        balanceApiEndpoint =             "/api/v1/balance/get";
 
         /* Version string parser */
-        versionLabel1 = document.getElementById('updatedLabel_VERSION_title');
-        versionLabel2 = document.getElementById('updatedLabel_VERSION_table');
-
         var versionRequest = new XMLHttpRequest();
         versionRequest.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
@@ -566,10 +612,6 @@
 
 
         /* friendly name parser */
-        frnameLabel1 = document.getElementById('updatedLabel_FRNAME_title');
-        frnameLabel2 = document.getElementById('updatedLabel_FRNAME_table');
-        frnameLabel3 = document.getElementById('updatedLabel_FRNAME_oldinputtext');
-
         var frnameRequest = new XMLHttpRequest();
         frnameRequest.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
@@ -584,9 +626,6 @@
 
 
         /* Save & Restore parser */
-        restoreStateLabel1 = document.getElementById('updatedLabel_RESTORESTATE_table')
-        restorePlayingStateLabel1 = document.getElementById('updatedLabel_RESTOREPLAYING_table')
-
         var restoreStateRequest = new XMLHttpRequest();
         restoreStateRequest.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
@@ -609,8 +648,6 @@
 
 
         /* WiFi SSID parser */
-        wifiLabel1 = document.getElementById('updatedLabel_WIFISSID_table');
-
         var wifiRequest = new XMLHttpRequest();
         wifiRequest.onreadystatechange = function() {
             if (this.readyState == 4 && this.status == 200) {
@@ -622,12 +659,78 @@
         wifiRequest.send();
 
         /* Playback info parser */
+        var playbackInfoRequest = new XMLHttpRequest();
+        playbackInfoRequest.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                var playbackInfoResponse = JSON.parse(this.responseText);
+
+                playingLabel1.innerHTML = playbackInfoResponse.state == "playing" ? "yes" : "no";
+                playingLabel2.innerHTML = playbackInfoResponse.state == "playing" ? "yes" : "no";
+                rs_plpathLabel1.innerHTML = playbackInfoResponse.resource_playlist_path;
+                rs_plidxLabel1.innerHTML = playbackInfoResponse.resource_playlist_index;
+                rs_pathLabel1.innerHTML = playbackInfoResponse.resource_path;
+                rs_typeLabel1.innerHTML = playbackInfoResponse.resource_type;
+                rs_titleLabel1.innerHTML = playbackInfoResponse.resource_title;
+                rs_albumLabel1.innerHTML = playbackInfoResponse.resource_album;
+                rs_artistLabel1.innerHTML = playbackInfoResponse.resource_artist;
+                rs_tracknrLabel1.innerHTML = playbackInfoResponse.resource_track;
+                rs_yearLabel1.innerHTML = playbackInfoResponse.resource_year;
+                rs_genreLabel1.innerHTML = playbackInfoResponse.resource_genre;
+                rs_copyrightLabel1.innerHTML = playbackInfoResponse.resource_copyright;
+                rs_languageLabel1.innerHTML = playbackInfoResponse.resource_tts_language;
+            }
+        }
+        playbackInfoRequest.open("GET", apiBase + playbackInfoApiEndpoint, true);
+        playbackInfoRequest.send();
+
+
+        /* Volume+Muted parser */
+        var volumeRequest = new XMLHttpRequest();
+        volumeRequest.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                var volumeValue = JSON.parse(this.responseText).volume;
+                var maxVolumeValue = JSON.parse(this.responseText).volume_max;
+                var mutedValue = JSON.parse(this.responseText).muted;
+                volumeLabel1.innerHTML = volumeValue + "/" + maxVolumeValue;
+                volumeLabel2.innerHTML = volumeValue + "/" + maxVolumeValue;
+                mutedLabel1.innerHTML = mutedValue ? "yes" : "no";
+                mutedLabel2.innerHTML = mutedValue ? "yes" : "no";
+            }
+        }
+        volumeRequest.open("GET", apiBase + volumeApiEndpoint, true);
+        volumeRequest.send();
 
-        /* Volume parser */
 
         /* Equalizer parser */
+        var eqRequest = new XMLHttpRequest();
+        eqRequest.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                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;
+            }
+        }
+        eqRequest.open("GET", apiBase + eqApiEndpoint, true);
+        eqRequest.send();
+
 
         /* Balance parser */
+        var balanceRequest = new XMLHttpRequest();
+        balanceRequest.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                var balanceValue = JSON.parse(this.responseText).balance;
+                balanceLabel1.innerHTML = balanceValue;
+                balanceLabel2.innerHTML = balanceValue;
+            }
+        }
+        balanceRequest.open("GET", apiBase + balanceApiEndpoint, true);
+        balanceRequest.send();
 
     }
 
@@ -678,4 +781,39 @@
     } else if (isValidIP(document.cookie)) setupSite();
 </script>
 </body>
-</html>
+</html>
+
+
+<!-- An uncomplete list of XML IDs used in this piece of HTML:
+updatedLabel_PLAYING_table_top
+updatedLabel_PLAYING_table_bottom
+
+updatedLabel_VOLUME_table_top
+updatedLabel_VOLUME_table_bottom
+
+updatedLabel_MUTED_table_top
+updatedLabel_MUTED_table_bottom
+
+updatedLabel_BALANCE_table_top
+updatedLabel_BALANCE_table_bottom
+
+updatedLabel_EQLOW_table_top
+updatedLabel_EQLOW_table_bottom
+updatedLabel_EQMID_table_top
+updatedLabel_EQMID_table_bottom
+updatedLabel_EQHIGH_table_top
+updatedLabel_EQHIGH_table_bottom
+
+updatedLabel_RS_PLPATH_table_top
+updatedLabel_RS_PLIDX_table_top
+updatedLabel_RS_PATH_table_top
+updatedLabel_RS_TYPE_table_top
+updatedLabel_RS_TITLE_table_top
+updatedLabel_RS_ALBUM_table_top
+updatedLabel_RS_ARTIST_table_top
+updatedLabel_RS_TRACKNR_table_top
+updatedLabel_RS_YEAR_table_top
+updatedLabel_RS_GENRE_table_top
+updatedLabel_RS_COPYRIGHT_table_top
+updatedLabel_RS_LANGUAGE_table_top
+-->