Refactored HTML, written some requesting functions to fill table data on the site
This commit is contained in:
parent
0e8de29d09
commit
3fb4f3df69
GPG Key ID:
327233DA85435270
203
simpledemo.html
203
simpledemo.html
@ -9,12 +9,12 @@
|
||||
<style>#playbackMuteButton:hover { background-color: #00000000; }</style>
|
||||
</head>
|
||||
<body data-bs-theme='dark'>
|
||||
<div class='text-center container-sm' style='padding: 4em 0em'>
|
||||
<div class='text-center container-sm placeholder-glow' style='padding: 4em 0em'>
|
||||
|
||||
<p>Welcome to</p>
|
||||
<h1 id='title_frname'>[FRIENDLY NAME HERE]</h1>
|
||||
<p id="title_onIP"></p>
|
||||
<p style='font-size: .875em; color: var(--bs-code-color); padding-top: .5rem'>[VERSION STRING HERE]</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>
|
||||
|
||||
<hr style='margin: 3em 0em;'>
|
||||
|
||||
@ -35,79 +35,73 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Playing</td>
|
||||
<td class='text-end'>
|
||||
[html += audioPlaying ? "yes" : "no"]
|
||||
</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Volume</td>
|
||||
<td class='text-end'>[" + String(currentVolume) + "/" + String(maxVolume) + "]</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Muted</td>
|
||||
<td class='text-end'>
|
||||
[html += muted ? "yes" : "no"]
|
||||
</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Equalizer Low</td>
|
||||
<td class='text-end'>[" + String(eqLow) + "dB"]</td>
|
||||
</tr>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td></tr>
|
||||
<tr>
|
||||
<td>Equalizer Mid</td>
|
||||
<td class='text-end'>[" + String(eqMid) + "dB"]</td>
|
||||
</tr>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td></tr>
|
||||
<tr>
|
||||
<td>Equalizer High</td>
|
||||
<td class='text-end'>[" + String(eqHigh) + "dB"]</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Balance (range -16 | +16)</td>
|
||||
<td class='text-end'>" + String(balanceLevel) + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Path to playlist</td>
|
||||
<td class='text-end'>" + currentPlaylist + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Index in playlist (starting from 0)</td>
|
||||
<td class='text-end'>" + String(currentPlaylistPosition) + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource path</td>
|
||||
<td class='text-end'>" + pbInfo.resourcePath + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource type</td>
|
||||
<td class='text-end'>" + pbInfo.type + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource title</td>
|
||||
<td class='text-end'>" + pbInfo.title + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource album</td>
|
||||
<td class='text-end'>" + pbInfo.album + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource artist</td>
|
||||
<td class='text-end'>" + pbInfo.artist + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource track number</td>
|
||||
<td class='text-end'>" + pbInfo.track + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource year</td>
|
||||
<td class='text-end'>" + pbInfo.year + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource genre</td>
|
||||
<td class='text-end'>" + pbInfo.genre + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Resource language (for TTS)</td>
|
||||
<td class='text-end'>" + pbInfo.tts_language + "</td>
|
||||
<td class='text-end'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -127,29 +121,23 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Version</td>
|
||||
<td class='text-end'>" + version + "</td>
|
||||
<td class='text-end' id="updatedLabel_VERSION_table"><span class="placeholder col-4"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Friendly name</td>
|
||||
<td class='text-end'>" + configuration.getString(PREFERENCES_KEY_FRIENDLY_NAME, "
|
||||
<not_given>") + "
|
||||
</td>
|
||||
<td class='text-end' id="updatedLabel_FRNAME_table"><span class="placeholder col-4"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Save & Restore state</td>
|
||||
<td class='text-end'>
|
||||
html += configuration.getBool(PREFERENCES_KEY_RESTORE_OLD_STATE, false) ? "yes" : "no
|
||||
</td>
|
||||
<td class='text-end' id="updatedLabel_RESTORESTATE_table"><span class="placeholder col-4"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Save & Restore playing state (default no)</td>
|
||||
<td class='text-end'>
|
||||
html += configuration.getBool(PREFERENCES_KEY_RESTORE_PLAYING, false) ? "yes" : "no
|
||||
</td>
|
||||
<td class='text-end' id="updatedLabel_RESTOREPLAYING_table"><span class="placeholder col-4"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>WiFi SSID</td>
|
||||
<td class='text-end'>" + configuration.getString(PREFERENCES_KEY_WIFI_SSID, "") + "</td>
|
||||
<td class='text-end' id="updatedLabel_WIFISSID_table"><span class="placeholder col-4"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -181,20 +169,15 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Playing</td>
|
||||
<td class='text-end' id='playbackTable_audioPlayingValue'>
|
||||
html += audioPlaying ? "yes" : "no
|
||||
</td>
|
||||
<td class='text-end' id='playbackTable_audioPlayingValue'><span class="placeholder col-4"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Volume</td>
|
||||
<td class='text-end' id='playbackTable_volumeValue'>" + String(currentVolume) + "/" + String(maxVolume) + "%
|
||||
</td>
|
||||
<td class='text-end' id='playbackTable_volumeValue'><span class="placeholder col-4"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Muted</td>
|
||||
<td class='text-end' id='playbackTable_mutedValue'>
|
||||
html += muted ? "yes" : "no
|
||||
</td>
|
||||
<td class='text-end' id='playbackTable_mutedValue'><span class="placeholder col-4"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -324,7 +307,7 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Balance (range -16 | +16)</td>
|
||||
<td class='text-end' id='balanceChangeTable_balanceValue'>" + String(balanceLevel) + "</td>
|
||||
<td class='text-end' id='balanceChangeTable_balanceValue'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -337,7 +320,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--EQUALIZER Collapsible -->
|
||||
<!-- EQUALIZER 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-eq'
|
||||
@ -352,15 +335,15 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Equalizer Low (-40dB to 6dB)</td>
|
||||
<td class='text-end' id='eqChangeTable_eqLowValue'>" + String(eqLow) + "dB</td>
|
||||
<td class='text-end' id='eqChangeTable_eqLowValue'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Equalizer Mid (-40dB to 6dB)</td>
|
||||
<td class='text-end' id='eqChangeTable_eqMidValue'>" + String(eqMid) + "dB</td>
|
||||
<td class='text-end' id='eqChangeTable_eqMidValue'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Equalizer High (-40dB to 6dB)</td>
|
||||
<td class='text-end' id='eqChangeTable_eqHighValue'>" + String(eqHigh) + "dB</td>
|
||||
<td class='text-end' id='eqChangeTable_eqHighValue'><span class="placeholder col-12"></span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -383,7 +366,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--FRIENDLY NAME Collapsible -->
|
||||
<!-- FRIENDLY NAME Collapsible -->
|
||||
<div class='accordion-item'>
|
||||
<h2 class='accordion-header'>
|
||||
<button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
|
||||
@ -396,12 +379,12 @@
|
||||
<div id='accordion-collapse-frname' class='accordion-collapse collapse' data-bs-parent='#accordion'>
|
||||
<div class='accordion-body'>
|
||||
<div class='input-group mb-3'>
|
||||
<span class='input-group-text' id='frnameChange_oldName'>" + configuration.getString(PREFERENCES_KEY_FRIENDLY_NAME) + "</span>
|
||||
<span class='input-group-text' id='updatedLabel_FRNAME_oldinputtext'>...</span>
|
||||
<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
|
||||
"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='';
|
||||
@ -451,7 +434,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--SAVE AND RESTORE Collapsible -->
|
||||
<!-- SAVE AND RESTORE Collapsible -->
|
||||
<div class='accordion-item'>
|
||||
<h2 class='accordion-header'>
|
||||
<button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
|
||||
@ -483,7 +466,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--RESTART Collapsible -->
|
||||
<!-- RESTART Collapsible -->
|
||||
<div class='accordion-item'>
|
||||
<h2 class='accordion-header'>
|
||||
<button class='accordion-button collapsed' type='button' data-bs-toggle='collapse'
|
||||
@ -557,6 +540,103 @@
|
||||
|
||||
alertPlaceholder.append(wrapper)
|
||||
}
|
||||
|
||||
function updateStrings() {
|
||||
apiBase = "http://" + document.cookie;
|
||||
versionApiEndpoint = "/api/v1/system/version";
|
||||
frnameApiEndpoint = "/api/v1/system/name";
|
||||
restoreStateApiEndpoint = "/api/v1/system/restore_state/get";
|
||||
restorePlayingStateApiEndpoint = "/api/v1/system/restore_playing/get";
|
||||
wifiApiEndpoint = "/api/v1/system/wifi/get_ssid";
|
||||
|
||||
/* 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) {
|
||||
var versionString = JSON.parse(this.responseText).version;
|
||||
versionLabel1.innerHTML = versionString;
|
||||
versionLabel2.innerHTML = versionString;
|
||||
}
|
||||
}
|
||||
versionRequest.open("GET", apiBase + versionApiEndpoint, true);
|
||||
versionRequest.send();
|
||||
|
||||
|
||||
/* 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) {
|
||||
var frnameString = JSON.parse(this.responseText).friendly_name;
|
||||
frnameLabel1.innerHTML = frnameString;
|
||||
frnameLabel2.innerHTML = frnameString;
|
||||
frnameLabel3.innerHTML = frnameString;
|
||||
}
|
||||
}
|
||||
frnameRequest.open("GET", apiBase + frnameApiEndpoint, true);
|
||||
frnameRequest.send();
|
||||
|
||||
|
||||
/* 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) {
|
||||
var restoreStateString = JSON.parse(this.responseText).restore_state;
|
||||
restoreStateLabel1.innerHTML = restoreStateString ? "yes" : "no";
|
||||
}
|
||||
}
|
||||
restoreStateRequest.open("GET", apiBase + restoreStateApiEndpoint, true);
|
||||
restoreStateRequest.send();
|
||||
|
||||
var restorePlayingRequest = new XMLHttpRequest();
|
||||
restorePlayingRequest.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var restorePlayingString = JSON.parse(this.responseText).restore_playing;
|
||||
restorePlayingStateLabel1.innerHTML = restorePlayingString ? "yes" : "no";
|
||||
}
|
||||
}
|
||||
restorePlayingRequest.open("GET", apiBase + restorePlayingStateApiEndpoint, true);
|
||||
restorePlayingRequest.send();
|
||||
|
||||
|
||||
/* WiFi SSID parser */
|
||||
wifiLabel1 = document.getElementById('updatedLabel_WIFISSID_table');
|
||||
|
||||
var wifiRequest = new XMLHttpRequest();
|
||||
wifiRequest.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var wifiSsidString = JSON.parse(this.responseText).wifi_ssid;
|
||||
wifiLabel1.innerHTML = wifiSsidString;
|
||||
}
|
||||
}
|
||||
wifiRequest.open("GET", apiBase + wifiApiEndpoint, true);
|
||||
wifiRequest.send();
|
||||
|
||||
/* Playback info parser */
|
||||
|
||||
/* Volume parser */
|
||||
|
||||
/* Equalizer parser */
|
||||
|
||||
/* Balance parser */
|
||||
|
||||
}
|
||||
|
||||
function setupSite() {
|
||||
document.title = "NetSpeaker Demo (on " + document.cookie + ")";
|
||||
document.getElementById("title_onIP").innerHTML = "on " + document.cookie;
|
||||
setTimeout(updateStrings, 1000); // to make user see the epic placeholder glow effect of the bootstrap library
|
||||
setInterval(updateStrings, 5000);
|
||||
}
|
||||
|
||||
if (document.cookie == "" || !isValidIP(document.cookie)) {
|
||||
var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {});
|
||||
@ -572,8 +652,7 @@
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
appendAlert(alertPlaceholder, 'Working Configuration!', 'success');
|
||||
document.cookie = ipAddressEntered;
|
||||
document.title = "NetSpeaker Demo (on " + ipAddressEntered + ")";
|
||||
document.getElementById("title_onIP").innerHTML = "on " + document.cookie;
|
||||
setupSite()
|
||||
setTimeout(function(){
|
||||
if(hideModalOnSuccess) selectIPModal.hide();
|
||||
}, 500);
|
||||
@ -595,10 +674,8 @@
|
||||
|
||||
const ipAdressModalOkBtn = document.getElementById('ipAdressModalOkBtn');
|
||||
ipAdressModalOkBtn.addEventListener('click', () => { configButtonEventListener(true); });
|
||||
} else if (isValidIP(document.cookie)) {
|
||||
document.title = "NetSpeaker Demo (on " + document.cookie + ")";
|
||||
document.getElementById("title_onIP").innerHTML = "on " + document.cookie;
|
||||
}
|
||||
|
||||
} else if (isValidIP(document.cookie)) setupSite();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user