soruh/centralex
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

basic web view

Browse Source
This commit is contained in:
soruh
2023-06-11 06:30:31 +02:00
parent e609cb0f44
commit 2aedf86736
4 changed files with 119 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/index.html
View File

@@ -10,10 +10,22 @@
</head>
<body>
<div id="connected" class="hidden"><!--INSERT SVG HERE--></div>
<p id="last_update" />
<pre id="data"></pre>
<list id="list" />
<p id="free_ports" />
<div id="connected_box">
<div id="connected" class="hidden"><!--INSERT SVG HERE--></div>
<p id="last_update" />
</div>
<table id="table">
<tr>
<th>Nummer</th>
<th>Port</th>
<th>Zustand</th>
<th>Name</th>
<th>Meldung</th>
<th>Letzte Änderung</th>
</tr>
</table>
</body>
</html>

21
web/main.css
View File

@@ -2,7 +2,7 @@ body {
background-color: #eee;
}
#connected {
#connected_box {
position: absolute;
top: 5%;
right: 5%;
@@ -10,6 +10,25 @@ body {
height: 5%;
}
td,
th {
border: 1px solid black;
padding: 0.5em;
}
table {
border-spacing: 0;
}
.number {
text-align: right;
}
.text {
text-align: left;
}
.visible {
opacity: 1;
transition: opacity 500ms linear;

84
web/main.js
View File

@@ -1,7 +1,8 @@
window.onload = () => {
const data = document.getElementById("data");
const table_elem = document.getElementById("table");
const last_update = document.getElementById("last_update");
const connected = document.getElementById("connected");
const free_ports = document.getElementById("free_ports");
const timeout_duration = 10*1000;
const retry_timeout = 5*1000;
@@ -9,7 +10,82 @@ window.onload = () => {
let reconnect_timeout;
let ping_timeout;
let evtSource;
let table = [];
let format_date = date => date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
let print_table = () => {
while(table_elem.children.length > 1) {
table_elem.removeChild(table_elem.lastChild);
}
for (let row of table) {
let tr = document.createElement("tr");
let values = [
row.number,
row.port,
row.status,
row.name || "?",
row.rejector || "",
format_date(row.last_change)
];
for(let value of values) {
let td = document.createElement("td");
td.innerText = value;
td.className = Number.isInteger(value) ? "number" : "text";
tr.appendChild(td);
}
table_elem.appendChild(tr)
}
};
let update_table = data => {
console.log(data);
const allowed_ports = data.allowed_ports.map(x => x.end - x.start + 1).reduce((a,b) => a + b, 0);
free_ports.innerText = `Freie Ports: ${allowed_ports - Object.keys(data.allocated_ports).length - data.errored_ports.length}`;
table = [];
for(let number in data.allocated_ports) {
let port = data.allocated_ports[number];
number = +number;
let {status, last_change} = data.port_state[port];
let rejector = data.rejectors[port] || null;
if (rejector && rejector instanceof Array) {
rejector = rejector.map(x => "0x"+x.toString(16).padStart(2, 0)).join(" ")
}
last_change = new Date(last_change * 1000);
let name = data.names[number] || null;
switch(status) {
case "disconnected":
status = "getrennt";
break;
case "idle":
status = "bereit";
break;
case "in_call":
status = "anruf";
break;
}
table.push({port, number, status, last_change, rejector, name})
}
console.log(table);
print_table();
};
let connect_event_source = () => {
@@ -21,11 +97,11 @@ window.onload = () => {
evtSource = new EventSource("/events");
evtSource.addEventListener("change", event => {
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
last_update.innerText = `Letzte Änderung: ${format_date(new Date(+event.data * 1000))}`;
fetch("/data")
.then(res => res.json())
.then(res => data.innerText = JSON.stringify(res, null, 1));
.then(update_table);
});
evtSource.addEventListener("ping", event => {
@@ -33,7 +109,7 @@ window.onload = () => {
ping_timeout = setTimeout(connect_event_source, timeout_duration);
last_update.innerText = `last update at ${new Date(+event.data * 1000)}`;
last_update.innerText = `Letzte Änderung: ${format_date(new Date(+event.data * 1000))}`;
connected.className = "visible";
setTimeout(() => connected.className = "hidden", 1000);
});