NetSpeaker/NetSpeaker-API-Demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

simpledemo.html: Added support for changing the mDNS hostname

Browse Source
This commit is contained in:
BlueFox 2024-03-30 11:03:00 +01:00
parent cf0f5944ac
commit c0b5820ff1
1 changed files with 55 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
simpledemo.html
View File

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