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

simpledemo.html: Implemented the IP address entering process when visiting the website first.

Browse Source
This commit is contained in:
BlueFox 2024-03-26 13:33:47 +01:00
parent ccd87f3f35
commit 0e8de29d09
Signed by: BlueFox
GPG Key ID: 327233DA85435270
1 changed files with 64 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
simpledemo.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>API Demo (on [IP here])</title>
<title>NetSpeaker Demo (on [IP here])</title>
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css' rel='stylesheet'
integrity='sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN' crossorigin='anonymous'>
<style>#playbackMuteButton:hover { background-color: #00000000; }</style>
@ -13,6 +13,7 @@
<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>
<hr style='margin: 3em 0em;'>
@ -520,11 +521,17 @@
</div>
<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">
<span class="input-group-text">http://</span>
<input type="text" class="form-control" id="ipAdressInput">
</div>
</div>
<div id="configWorkingAlertPlaceholder"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Apply & Test</button>
<button type="button" class="btn btn-success">Ok</button>
<button type="button" class="btn btn-primary" id="ipAdressModalApplyBtn">Apply & Test</button>
<button type="button" class="btn btn-success" id="ipAdressModalOkBtn">Ok</button>
</div>
</div>
</div>
@ -533,15 +540,64 @@
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js'
integrity='sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL' crossorigin='anonymous'></script>
<script type="text/javascript">
function validateIPAddress(ipaddress) {
function isValidIP(ipaddress) {
if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ipaddress)) {
return true;
}
return false;
}
if (document.cookie == "" || !validateIPAddress(document.cookie)) {
var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {})
selectIPModal.show()
function appendAlert(alertPlaceholder, message, type) {
const wrapper = document.createElement('div')
wrapper.innerHTML = [
`<div class="alert alert-${type} alert-dismissible" role="alert">`,
` <div>${message}</div>`,
' <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
'</div>'
].join('')
alertPlaceholder.append(wrapper)
}
if (document.cookie == "" || !isValidIP(document.cookie)) {
var selectIPModal = new bootstrap.Modal(document.getElementById('selectIPAddressModal'), {});
selectIPModal.show();
const alertPlaceholder = document.getElementById('configWorkingAlertPlaceholder');
function configButtonEventListener(hideModalOnSuccess) {
var ipAddressEntered = document.getElementById('ipAdressInput').value;
if(isValidIP(ipAddressEntered)) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
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;
setTimeout(function(){
if(hideModalOnSuccess) selectIPModal.hide();
}, 500);
} else if (this.readyState != 4) {
// just do nothing, wait!
} else {
appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
}
};
request.open("GET", "http://" + ipAddressEntered + "/api/v1/system/version", true);
request.send()
} else {
appendAlert(alertPlaceholder, 'Configuration not working', 'danger');
}
}
const ipAdressModalApplyBtn = document.getElementById('ipAdressModalApplyBtn');
ipAdressModalApplyBtn.addEventListener('click', () => { configButtonEventListener(false); });
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;
}
</script>
</body>