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

Added updating for some sliders etc.; some are still remaining

Browse Source
This commit is contained in:
BlueFox 2024-03-26 19:18:03 +01:00
parent 2aee4216d2
commit 18789ca7c4
Signed by: BlueFox
GPG Key ID: 327233DA85435270
1 changed files with 84 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
simpledemo.html
View File

@ -192,7 +192,7 @@
<hr> <hr>
<div class='btn-group' role='group' aria-label='Basic playback option (play, pause, next, previous)'> <div class='btn-group' role='group' aria-label='Basic playback option (play, pause, next, previous)'>
<button type='button' class='btn btn-secondary' onclick="http <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' <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-rewind-circle'
viewBox='0 0 16 16'> 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'/> <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> </svg>
</button> </button>
<button type='button' class='btn btn-success' onclick="http <button type='button' class='btn btn-success' onclick="http
= new XMLHttpRequest();http.open('GET', = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playback/play');http.send();updateStrings();">
'/api/v1/playback/play');http.send();document.getElementById('playbackTable_audioPlayingValue').innerHTML =
'yes';">
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-play-circle' <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-play-circle'
viewBox='0 0 16 16'> 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='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> <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> </svg>
</button> </button>
<button type='button' class='btn btn-success' <button type='button' class='btn btn-success' onclick="http
onclick="http = new XMLHttpRequest();http.open('GET', '/api/v1/playback/pause');http.send();document.getElementById('playbackTable_audioPlayingValue').innerHTML = 'no';\"> = 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' <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-pause-circle'
viewBox='0 0 16 16'> 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 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> </svg>
</button> </button>
<button type='button' class='btn btn-secondary' <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' <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor'
class='bi bi-skip-forward-circle' class='bi bi-skip-forward-circle'
viewBox='0 0 16 16'> viewBox='0 0 16 16'>
@ -230,18 +228,12 @@
<br> <br>
<hr> <hr>
<br><label for='volumeRange' class='form-label'>Volume</label> <br><label for='volumeRange' class='form-label'>Volume</label>
<input type='range' class='form-range' value='" + String(currentVolume) + "' min='0' max='" + String(maxVolume) + "' <input type='range' class='form-range' value='0' min='0' max='0'
id='volumeRange' id='updatedLabel_VOLUME_range_bottom'
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) + "%\"'> onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/volume/' + this.value);http.send();updateStrings();">
<button type='button' id='playbackMuteButton' onclick= <button type='button' id='playbackMuteButton' onclick=
"http = new XMLHttpRequest(); "http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/volume/toggle_mute');http.send();updateStrings();"
http.open('GET', '/api/v1/volume/toggle_mute'); class='btn btn-danger'>
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'>
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-volume-mute' <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-volume-mute'
viewBox='0 0 16 16'> 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> <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' aria-label='Playlist path (must start with a /)' aria-describedby='playlist_playBtn'
id='playlist_playPathInput'> id='playlist_playPathInput'>
<button class='btn btn-success' type='button' id='playlist_playBtn' onclick= <button class='btn btn-success' type='button' id='playlist_playBtn' onclick=
"playlistPath "playlistPath = document.getElementById('playlist_playPathInput').value;
= document.getElementById('playlist_playPathInput').value; http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playlist/play?playlist_path='+playlistPath);http.send();
http = new XMLHttpRequest();http.open('GET', '/api/v1/playlist/play?playlist_path='+playlistPath);http.send();"> updateStrings();">
Change Change
</button> </button>
</div> </div>
<hr> <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>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>The new playlist will be located in the given folder and is named <code>.directory.m3u</code>. This can't be changed.
</p> </p>
@ -288,9 +280,9 @@
aria-label='Folder path (must start with a /)' aria-describedby='playlist_createBtn' aria-label='Folder path (must start with a /)' aria-describedby='playlist_createBtn'
id='playlist_createPathInput'> id='playlist_createPathInput'>
<button class='btn btn-success' type='button' id='playlist_createBtn' onclick= <button class='btn btn-success' type='button' id='playlist_createBtn' onclick=
"folderPath "folderPath = document.getElementById('playlist_createPathInput').value;
= document.getElementById('playlist_createPathInput').value; http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/playlist/create?folder_path='+folderPath);http.send();
http = new XMLHttpRequest();http.open('GET', '/api/v1/playlist/create?folder_path='+folderPath);http.send();"> updateStrings();">
Change Change
</button> </button>
</div> </div>
@ -322,8 +314,8 @@
<br> <br>
<hr> <hr>
<label for='balanceRange' class='form-label'>Balance (-16 to 16)</label> <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' <input type='range' class='form-range' value='16' min='0' max='32' id='updatedLabel_BALANCE_range_bottom'
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;'> onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/balance/' + this.value);http.send();updateStrings();">
</div> </div>
</div> </div>
</div> </div>
@ -358,18 +350,18 @@
<br> <br>
<hr> <hr>
<label for='eqLowRange' class='form-label'>Equalizer for lows (-40dB to 6dB)</label> <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' <input type='range' class='form-range' value='" + String(eqLow+40) + "' min='0' max='46' id='updatedLabel_EQLOW_range_bottom'
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\";'> onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/eq/low/' + this.value);http.send();updateStrings();">
<br> <br>
<hr> <hr>
<br><label for='eqMidRange' class='form-label'>Equalizer for mids (-40dB to 6dB)</label> <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' <input type='range' class='form-range' value='" + String(eqMid+40) + "' min='0' max='46' id='updatedLabel_EQMID_range_bottom'
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\";'> onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/eq/mid/' + this.value);http.send();updateStrings();">
<br> <br>
<hr> <hr>
<br><label for='eqHighRange' class='form-label'>Equalizer for highs (-40dB to 6dB)</label> <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' <input type='range' class='form-range' value='" + String(eqHigh+40) + "' min='0' max='46' id='updatedLabel_EQHIGH_range_bottom'
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\";'> onchange="http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/eq/high/' + this.value);http.send();updateStrings();">
</div> </div>
</div> </div>
</div> </div>
@ -391,12 +383,12 @@
<span class='input-group-text'> -> </span> <span class='input-group-text'> -> </span>
<input type='text' class='form-control' placeholder='New friendly name' aria-label='New friendly name' <input type='text' class='form-control' placeholder='New friendly name' aria-label='New friendly name'
aria-describedby='frnameChange_BTN_submitName' id='frnameChange_newNameInput'> aria-describedby='frnameChange_BTN_submitName' id='frnameChange_newNameInput'>
<button class='btn btn-success' type='button' id='frnameChange_BTN_submitName' onclick= <button class='btn btn-success' type='button' id='frnameChange_BTN_submitName' onclick="
"newNameInput newName=document.getElementById('frnameChange_newNameInput').value;oldName=document.getElementById('updatedLabel_FRNAME_oldinputtext').innerHTML;
= document.getElementById('frnameChange_newNameInput'); if(newNameInput.value != ''){ http = new if(oldName != newName) {
XMLHttpRequest();http.open('GET', http = new XMLHttpRequest();http.open('GET', 'http://' + document.cookie + '/api/v1/system/name/change?friendly_name=' + newName);http.send();
'/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=''; updateStrings();
}\"> }">
Change Change
</button> </button>
</div> </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 <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> 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 <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'> <div class='input-group mb-3'>
<span class='input-group-text'>SSID</span> <span class='input-group-text'>SSID</span>
<input type='text' class='form-control' placeholder='Type in a new SSID here (optional)' <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"); const rs_languageLabel1 = document.getElementById("updatedLabel_RS_LANGUAGE_table_top");
volumeLabel1 = document.getElementById('updatedLabel_VOLUME_table_top'); volumeLabel1 = document.getElementById('updatedLabel_VOLUME_table_top');
volumeLabel2 = document.getElementById('updatedLabel_VOLUME_table_bottom'); volumeLabel2 = document.getElementById('updatedLabel_VOLUME_table_bottom');
volumeRange1 = document.getElementById('updatedLabel_VOLUME_range_bottom');
mutedLabel1 = document.getElementById('updatedLabel_MUTED_table_top'); mutedLabel1 = document.getElementById('updatedLabel_MUTED_table_top');
mutedLabel2 = document.getElementById('updatedLabel_MUTED_table_bottom'); mutedLabel2 = document.getElementById('updatedLabel_MUTED_table_bottom');
eqLowLabel1 = document.getElementById('updatedLabel_EQLOW_table_top'); eqLowLabel1 = document.getElementById('updatedLabel_EQLOW_table_top');
eqLowLabel2 = document.getElementById('updatedLabel_EQLOW_table_bottom'); eqLowLabel2 = document.getElementById('updatedLabel_EQLOW_table_bottom');
eqLowRange1 = document.getElementById('updatedLabel_EQLOW_range_bottom');
eqMidLabel1 = document.getElementById('updatedLabel_EQMID_table_top'); eqMidLabel1 = document.getElementById('updatedLabel_EQMID_table_top');
eqMidLabel2 = document.getElementById('updatedLabel_EQMID_table_bottom'); eqMidLabel2 = document.getElementById('updatedLabel_EQMID_table_bottom');
eqMidRange1 = document.getElementById('updatedLabel_EQMID_range_bottom');
eqHighLabel1 = document.getElementById('updatedLabel_EQHIGH_table_top'); eqHighLabel1 = document.getElementById('updatedLabel_EQHIGH_table_top');
eqHighLabel2 = document.getElementById('updatedLabel_EQHIGH_table_bottom'); eqHighLabel2 = document.getElementById('updatedLabel_EQHIGH_table_bottom');
eqHighRange1 = document.getElementById('updatedLabel_EQHIGH_range_bottom');
balanceLabel1 = document.getElementById('updatedLabel_BALANCE_table_top'); balanceLabel1 = document.getElementById('updatedLabel_BALANCE_table_top');
balanceLabel2 = document.getElementById('updatedLabel_BALANCE_table_bottom'); balanceLabel2 = document.getElementById('updatedLabel_BALANCE_table_bottom');
balanceRange1 = document.getElementById('updatedLabel_BALANCE_range_bottom');
function updateStrings() { function updateStrings() {
apiBase = "http://" + document.cookie; apiBase = "http://" + document.cookie;
@ -695,6 +692,8 @@
volumeLabel2.innerHTML = volumeValue + "/" + maxVolumeValue; volumeLabel2.innerHTML = volumeValue + "/" + maxVolumeValue;
mutedLabel1.innerHTML = mutedValue ? "yes" : "no"; mutedLabel1.innerHTML = mutedValue ? "yes" : "no";
mutedLabel2.innerHTML = mutedValue ? "yes" : "no"; mutedLabel2.innerHTML = mutedValue ? "yes" : "no";
volumeRange1.max = maxVolumeValue;
volumeRange1.value = volumeValue;
} }
} }
volumeRequest.open("GET", apiBase + volumeApiEndpoint, true); volumeRequest.open("GET", apiBase + volumeApiEndpoint, true);
@ -708,12 +707,15 @@
var eqLowValue = JSON.parse(this.responseText).equalizer_low; var eqLowValue = JSON.parse(this.responseText).equalizer_low;
var eqMidValue = JSON.parse(this.responseText).equalizer_mid; var eqMidValue = JSON.parse(this.responseText).equalizer_mid;
var eqHighValue = JSON.parse(this.responseText).equalizer_high; var eqHighValue = JSON.parse(this.responseText).equalizer_high;
eqLowLabel1.innerHTML = eqLowValue; eqLowLabel1.innerHTML = eqLowValue + "dB";
eqLowLabel2.innerHTML = eqLowValue; eqLowLabel2.innerHTML = eqLowValue + "dB";
eqMidLabel1.innerHTML = eqMidValue; eqLowRange1.value = eqLowValue + 40;
eqMidLabel2.innerHTML = eqMidValue; eqMidLabel1.innerHTML = eqMidValue + "dB";
eqHighLabel1.innerHTML = eqHighValue; eqMidLabel2.innerHTML = eqMidValue + "dB";
eqHighLabel2.innerHTML = eqHighValue; eqMidRange1.value = eqMidValue + 40;
eqHighLabel1.innerHTML = eqHighValue + "dB";
eqHighLabel2.innerHTML = eqHighValue + "dB";
eqHighRange1.value = eqHighValue + 40;
} }
} }
eqRequest.open("GET", apiBase + eqApiEndpoint, true); eqRequest.open("GET", apiBase + eqApiEndpoint, true);
@ -727,6 +729,7 @@
var balanceValue = JSON.parse(this.responseText).balance; var balanceValue = JSON.parse(this.responseText).balance;
balanceLabel1.innerHTML = balanceValue; balanceLabel1.innerHTML = balanceValue;
balanceLabel2.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); 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 setTimeout(updateStrings, 1000); // to make user see the epic placeholder glow effect of the bootstrap library
setInterval(updateStrings, 10000); setInterval(updateStrings, 10000);
} }
window.onload = function(e) {
if (document.cookie == "" || !isValidIP(document.cookie)) { if (document.cookie == "" || !isValidIP(document.cookie)) {
var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {}); var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {});
selectIPModal.show(); selectIPModal.show();
const alertPlaceholder = document.getElementById('configWorkingAlertPlaceholder'); const alertPlaceholder = document.getElementById('configWorkingAlertPlaceholder');
function configButtonEventListener(hideModalOnSuccess) { function configButtonEventListener(hideModalOnSuccess) {
var ipAddressEntered = document.getElementById('ipAdressInput').value; var ipAddressEntered = document.getElementById('ipAdressInput').value;
if(isValidIP(ipAddressEntered)) { if(isValidIP(ipAddressEntered)) {
var request = new XMLHttpRequest(); var request = new XMLHttpRequest();
request.onreadystatechange = function() { request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
appendAlert(alertPlaceholder, 'Working Configuration!', 'success'); appendAlert(alertPlaceholder, 'Working Configuration!', 'success');
document.cookie = ipAddressEntered; document.cookie = ipAddressEntered;
setupSite() setupSite()
setTimeout(function(){ setTimeout(function(){
if(hideModalOnSuccess) selectIPModal.hide(); if(hideModalOnSuccess) selectIPModal.hide();
}, 500); }, 500);
} else if (this.readyState != 4) { } else if (this.readyState != 4) {
// just do nothing, wait! // just do nothing, wait!
} else { } else {
appendAlert(alertPlaceholder, 'Configuration not working', 'danger'); appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
} }
}; };
request.open("GET", "http://" + ipAddressEntered + "/api/v1/system/version", true); request.open("GET", "http://" + ipAddressEntered + "/api/v1/system/version", true);
request.send() request.send()
} else { } else {
appendAlert(alertPlaceholder, 'Configuration not working', 'danger'); appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
}
} }
}
const ipAdressModalApplyBtn = document.getElementById('ipAdressModalApplyBtn'); const ipAdressModalApplyBtn = document.getElementById('ipAdressModalApplyBtn');
ipAdressModalApplyBtn.addEventListener('click', () => { configButtonEventListener(false); }); ipAdressModalApplyBtn.addEventListener('click', () => { configButtonEventListener(false); });
const ipAdressModalOkBtn = document.getElementById('ipAdressModalOkBtn'); const ipAdressModalOkBtn = document.getElementById('ipAdressModalOkBtn');
ipAdressModalOkBtn.addEventListener('click', () => { configButtonEventListener(true); }); ipAdressModalOkBtn.addEventListener('click', () => { configButtonEventListener(true); });
} else if (isValidIP(document.cookie)) setupSite(); } else if (isValidIP(document.cookie)) setupSite();
} // end of onload function
</script> </script>
</body> </body>
</html> </html>