Jetzt funktioniert die HTML Seite:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Status Mattzo Controller</title>
<script>
var controllers = {
"RocRailServer":"192.168.178.93",
"Train Controller":"192.168.178.103",
"LayoutController 1":"192.168.178.117",
"LayoutController 2":"192.168.178.104",
"LayoutController 3":"192.168.178.107",
"LayoutController 4":"192.168.178.109"
}
var siteBuild=false;
function ping(ip,fieldName) {
if(!siteBuild){
document.getElementById(fieldName).innerHTML = "";
}
url = "http://" + ip + "/?rand=" + Math.random().toString(36).substring(7);
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
var jsonArray = JSON.parse(httpRequest.responseText);
decodeJson(fieldName,jsonArray);
}else{
document.getElementById(fieldName).innerHTML = "<span style='color:green'>ONLINE</span>";
}
}
}
httpRequest.ontimeout = function() {
document.getElementById(fieldName).innerHTML = "<span style='color:red'>OFFLINE</span>";
document.getElementById(fieldName + "2").innerHTML = "";
}
httpRequest.timeout = 5000;
httpRequest.open("GET", url, true);
httpRequest.send();
}
function setTrains(hubs){
var out = "<table><tr><th>Zug</th><th>Status</th><th>Battery</th></tr>"
hubs.forEach(hub =>
Object.keys(hub).forEach(key => {
out += "<tr>";
out += "<td>" + key + "</td>";
out += "<td>";
if(hub[key]["isConnected"]==1){
out += "<span style='color:green'>ONLINE</span>";
}else{
out += "<span style='color:red'>OFFLINE</span>";
}
out += "</td>";
out += "<td>";
out += hub[key]["batteryLevel"]
out += "</td>"
out += "</tr>";
})
);
out += "</table>";
document.getElementById("trains").innerHTML = out;
}
function decodeJson(fieldName,jsonArray){
if("type" in jsonArray){
switch (jsonArray["type"]) {
case "layout":
document.getElementById(fieldName).innerHTML = "<span style='color:green'>ONLINE</span>";
document.getElementById(fieldName + "2").innerHTML = jsonArray["batLevel"];
break;
case "train":
document.getElementById(fieldName).innerHTML = "<span style='color:green'>ONLINE</span>";
setTrains(jsonArray.Hubs);
break;
default:
document.getElementById(fieldName).innerHTML = "<span style='color:green'>ONLINE</span>";
break;
}
}
};
function test(){
var out = "<table><tr><th>System</th><th>Status</th><th>Volt</th></tr>";
console.log(controllers);
var i = 0;
Object.keys(controllers).forEach(key => {
i++;
out += "<tr>";
out += "<td>" + key + "</td>";
out += "<td id=\"controller" + i + "\">";
out += "</td>";
out += "<td id=\"controller" + i + "2\">";
out += "</td>";
out += "</tr>";
});
out += "</table>";
if(!siteBuild){
document.getElementById("controller").innerHTML = out;
siteBuild=true;
}
i = 0;
Object.keys(controllers).forEach(key => {
i++;
ping(controllers[key],"controller" + i);
});
};
</script>
</head>
<body onload="test();">
<div style="float: left;margin:20px;margin-right: 50px;">
<div id="controller"></div>
<div style="margin-top:20px;">
<input type="submit" value="Reload" onclick="test()">
</div>
</div>
<div id="trains" style="padding:20px"></div>
</body>
</html>