elstat/static/index.html
2018-06-12 14:38:49 -05:00

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