simpledemo.html: Added support for changing the mDNS hostname

simpledemo.html

@@ -146,6 +146,10 @@
                             <td>WiFi SSID</td>
                             <td class='text-end' id="updatedLabel_WIFISSID_table"><span class="placeholder col-4"></span></td>
                         </tr>
+                        <tr>
+                            <td>Network hostname</td>
+                            <td class='text-end' id="updatedLabel_HOSTNAME_table_top"><span class="placeholder col-4"></span></td>
+                        </tr>
                         <tr>
                             <td>AP SSID</td>
                             <td class='text-end' id="updatedLabel_APSSID_table"><span class="placeholder col-4"></span></td>
@@ -404,13 +408,14 @@
             </div>
         </div>
 
-        <!-- WiFi CONFIGURATION Collapsible -->
+        <!-- NETWORK Collapsible -->
         <div class='accordion-item'>
             <h2 class='accordion-header'>
                 <button class='accordion-button collapsed' type='button' data-bs-toggle='collapse' data-bs-target='#accordion-collapse-wifi'
                         aria-expanded='true' aria-controls='accordion-collapse-wifi'>
-                    WiFi configuration
+                    Network
                     &nbsp;<span class='badge text-bg-warning'>/api/v1/system/wifi/</span>
+                    &nbsp;<span class='badge text-bg-warning'>/api/v1/system/network_name/</span>
                 </button>
             </h2>
             <div id='accordion-collapse-wifi' class='accordion-collapse collapse' data-bs-parent='#accordion'>
@@ -439,6 +444,33 @@
                             Change
                         </button>
                     </div>
+                    <hr>  <!-- horizontal ruler for seperation -->
+                    <table class='table table-striped'>
+                        <tbody>
+                        <tr>
+                            <td>Network hostname</td>
+                            <td class='text-end' id="updatedLabel_HOSTNAME_table_bottom"><span class="placeholder col-4"></span></td>
+                        </tr>
+                        </tbody>
+                    </table>
+                    <p>Your NetSpeaker registers a hostname on your local network via mDNS, which makes easy addressing
+                    possible. This address consists of the hostname and <code>.local</code>. To change it, just enter the
+                    new one here. Changes wont apply directly, you have to restart the NetSpeaker over the button below to apply changes.
+                    </p>
+                    <div class='input-group mb-3'>
+                        <span class='input-group-text'>Hostname</span>
+                        <input type='text' class='form-control' placeholder='Type in the new hostname here'
+                               aria-label='Type in the new hostname here' aria-describedby='hostnameChange_submitBtn'
+                               id='hostnameChange_hostnameInput'>
+                        <span class='input-group-text'>.local</span>
+                        <button class='btn btn-success' type='button' id='hostnameChange_submitBtn' onclick=
+                                "newHostname=document.getElementById('hostnameChange_hostnameInput').value;
+                                http=new XMLHttpRequest();http.open('GET', 'http://' + document.cookie +
+                                '/api/v1/system/network_name/change?network_name=' + newHostname);http.send();
+                                updateStrings();">
+                            Change
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -487,7 +519,8 @@
                     <button type='button' class='btn btn-danger' onclick="function wait(ms){var start=new Date().getTime();var
                                     end=start;while(end<start+ms){end
                             = new Date().getTime();}}http = new XMLHttpRequest();http.open('GET',
-                            'http://' + document.cookie + '/api/v1/system/restart');http.send();wait(3000);window.location.reload();">
+                            'http://' + document.cookie + '/api/v1/system/restart');http.send();wait(3000);document.cookie='';
+                            window.location.reload();">
                         <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-bootstrap-reboot'
                              viewBox='0 0 16 16'>
                             <path d='M1.161 8a6.84 6.84 0 1 0 6.842-6.84.58.58 0 1 1 0-1.16 8 8 0 1 1-6.556 3.412l-.663-.577a.58.58 0 0 1 .227-.997l2.52-.69a.58.58 0 0 1 .728.633l-.332 2.592a.58.58 0 0 1-.956.364l-.643-.56A6.812 6.812 0 0 0 1.16 8z'></path>
@@ -563,6 +596,8 @@
     wifiLabel1 = document.getElementById('updatedLabel_WIFISSID_table');
     apSsidLabel1 = document.getElementById('updatedLabel_APSSID_table');
     apSsidLabel2 = document.getElementById('updatedLabel_APSSID_code');
+    hostnameLabel1 = document.getElementById('updatedLabel_HOSTNAME_table_top');
+    hostnameLabel2 = document.getElementById('updatedLabel_HOSTNAME_table_bottom');
     apPskLabel1 = document.getElementById('updatedLabel_APPSK_table');
     apPskLabel2 = document.getElementById('updatedLabel_APPSK_code');
     const playingLabel1 = document.getElementById("updatedLabel_PLAYING_table_top");
@@ -605,6 +640,7 @@
         restoreStateApiEndpoint =        "/api/v1/system/restore_state/get";
         restorePlayingStateApiEndpoint = "/api/v1/system/restore_playing/get";
         wifiApiEndpoint =                "/api/v1/system/wifi/get_ssid";
+        hostnameApiEndpoint =            "/api/v1/system/network_name";
         apApiEndpoint =                  "/api/v1/system/wifi/get_ap_creds";
         playbackInfoApiEndpoint =        "/api/v1/playback/info";
         volumeApiEndpoint =              "/api/v1/volume/get";
@@ -638,6 +674,19 @@
         frnameRequest.send();
 
 
+        /* Hostname parser */
+        var hostnameRequest = new XMLHttpRequest();
+        hostnameRequest.onreadystatechange = function() {
+            if (this.readyState == 4 && this.status == 200) {
+                var hostnameString = JSON.parse(this.responseText).network_name;
+                hostnameLabel1.innerHTML = hostnameString + '.local';
+                hostnameLabel2.innerHTML = hostnameString + '.local';
+            }
+        }
+        hostnameRequest.open("GET", apiBase + hostnameApiEndpoint, true);
+        hostnameRequest.send();
+
+
         /* Save & Restore parser */
         var restoreStateRequest = new XMLHttpRequest();
         restoreStateRequest.onreadystatechange = function() {
@@ -867,6 +916,9 @@ updatedLabel_EQHIGH_table_top
 updatedLabel_EQHIGH_table_bottom
 updatedLabel_EQHIGH_range_bottom
 
+updatedLabel_HOSTNAME_table_bottom
+updatedLabel_HOSTNAME_table_top
+
 updatedLabel_RS_PLPATH_table_top
 updatedLabel_RS_PLIDX_table_top
 updatedLabel_RS_PATH_table_top