94 lines
2.2 KiB
HTML
94 lines
2.2 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
|
<style>
|
|
body { background-color: #ddd; }
|
|
p {
|
|
text-align: center;
|
|
font-family: sans-serif;
|
|
font-size: 13pt;
|
|
}
|
|
#pretty-box {
|
|
padding-left: 5px;
|
|
max-width: 500px;
|
|
max-height: 250px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
background-color: #eee;
|
|
border-radius: 15px;
|
|
}
|
|
</style>
|
|
<script>
|
|
// https://stackoverflow.com/a/4033310
|
|
function httpGetAsync(theUrl, callback)
|
|
{
|
|
var xmlHttp = new XMLHttpRequest();
|
|
xmlHttp.onreadystatechange = function() {
|
|
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
|
|
callback(xmlHttp.responseText);
|
|
}
|
|
xmlHttp.open("GET", theUrl, true); // true for asynchronous
|
|
xmlHttp.send(null);
|
|
}
|
|
|
|
function genText(data) {
|
|
base = `${data.description}`;
|
|
base += ` [${data.status ? "online" : "offline"}]`;
|
|
|
|
if('latency' in data) {
|
|
base += ` - latency: ${data.latency} ms`;
|
|
}
|
|
|
|
return base;
|
|
}
|
|
|
|
function curStatHandler(text) {
|
|
let box = document.getElementById('pretty-box');
|
|
let payload = JSON.parse(text);
|
|
|
|
for(const service in payload) {
|
|
let data = payload[service];
|
|
|
|
let elementId = `${service}-description`;
|
|
let existingElement = document.getElementById(elementId);
|
|
|
|
if (existingElement === null) {
|
|
let element = document.createElement('p');
|
|
|
|
element.id = elementId;
|
|
element.innerText = genText(data);
|
|
box.appendChild(element);
|
|
} else {
|
|
existingElement.innerText = genText(data);
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
function fetchStatus () {
|
|
httpGetAsync("http://127.0.0.1:8069/api/current_status", curStatHandler);
|
|
}
|
|
|
|
window.onload = function () {
|
|
fetchStatus();
|
|
setInterval(() => {
|
|
fetchStatus();
|
|
}, 3000)
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="pretty-box">
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|