136 lines
4.2 KiB
JavaScript
136 lines
4.2 KiB
JavaScript
window.onload = () => {
|
|
const table_elem = document.getElementById("table");
|
|
const last_change = document.getElementById("last_change");
|
|
const last_ping = document.getElementById("last_ping");
|
|
const connected = document.getElementById("connected");
|
|
const free_ports = document.getElementById("free_ports");
|
|
|
|
const timeout_duration = 10*1000;
|
|
const retry_timeout = 5*1000;
|
|
|
|
let reconnect_timeout;
|
|
let ping_timeout;
|
|
let evtSource;
|
|
let table = [];
|
|
|
|
let format_date = date => date.toLocaleDateString("de-DE") + ' ' + date.toLocaleTimeString("de-DE");
|
|
|
|
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}`;
|
|
|
|
last_change.innerHTML = `Letzte Änderung: ${format_date(new Date(+data.last_update * 1000))}`;
|
|
|
|
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})
|
|
}
|
|
|
|
for (let [timestamp, port] of data.errored_ports) {
|
|
table.push({port, number: '', status: "Fehler", last_change: new Date(timestamp * 1000), rejector: '', name: ''})
|
|
}
|
|
|
|
console.log(table);
|
|
|
|
print_table();
|
|
};
|
|
|
|
|
|
let format_event = event => format_date(new Date(+event.data * 1000));
|
|
|
|
let connect_event_source = () => {
|
|
|
|
clearTimeout(reconnect_timeout);
|
|
clearTimeout(ping_timeout);
|
|
ping_timeout = setTimeout(connect_event_source, timeout_duration);
|
|
|
|
evtSource && evtSource.close && evtSource.close();
|
|
|
|
evtSource = new EventSource("/events");
|
|
evtSource.addEventListener("change", event => {
|
|
last_ping.innerText = `Letzter Serverkontakt: ${format_event(event)}`;
|
|
|
|
fetch("/data")
|
|
.then(res => res.json())
|
|
.then(update_table);
|
|
});
|
|
|
|
evtSource.addEventListener("ping", event => {
|
|
clearTimeout(ping_timeout);
|
|
ping_timeout = setTimeout(connect_event_source, timeout_duration);
|
|
|
|
|
|
last_ping.innerText = `Letzter Serverkontakt: ${format_event(event)}`;
|
|
connected.className = "visible";
|
|
setTimeout(() => connected.className = "hidden", 1000);
|
|
});
|
|
|
|
|
|
evtSource.onerror = () => {
|
|
clearTimeout(reconnect_timeout);
|
|
reconnect_timeout = setTimeout(connect_event_source, retry_timeout);
|
|
};
|
|
}
|
|
|
|
|
|
connect_event_source();
|
|
|
|
}; |