free up allocated ports if they fail to authenticate
This commit is contained in:
437
web/main.js
437
web/main.js
@@ -1,235 +1,252 @@
|
||||
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 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;
|
||||
const timeout_duration = 10 * 1000;
|
||||
const retry_timeout = 5 * 1000;
|
||||
|
||||
let reconnect_timeout;
|
||||
let ping_timeout;
|
||||
let evtSource;
|
||||
let table = [];
|
||||
let reconnect_timeout;
|
||||
let ping_timeout;
|
||||
let evtSource;
|
||||
let table = [];
|
||||
|
||||
let last_update = new Date();
|
||||
let last_update = new Date();
|
||||
|
||||
let direction = -1;
|
||||
let oldkey = "last_change";
|
||||
let direction = -1;
|
||||
let oldkey = "last_change";
|
||||
|
||||
table_elem.firstChild.firstChild.lastChild.className = "sort sort-down";
|
||||
table_elem.firstChild.firstChild.lastChild.className = "sort sort-down";
|
||||
|
||||
let time_ago = (ms) => {
|
||||
let value = ms / 1000;
|
||||
// let prev = 0;
|
||||
let unit = 0;
|
||||
|
||||
let time_ago = ms => {
|
||||
let factors = [
|
||||
[1, "Sekunde", "n"],
|
||||
[60, "Minute", "n"],
|
||||
[60, "Stunde", "n"],
|
||||
[24, "Tag", "en"],
|
||||
[7, "Woche", "n"],
|
||||
[4.348214, "Monat", "en"],
|
||||
[12, "Jahr", "en"],
|
||||
];
|
||||
|
||||
let value = ms / 1000;
|
||||
// let prev = 0;
|
||||
let unit = 0;
|
||||
for (let i in factors) {
|
||||
let factor = factors[i][0];
|
||||
let new_value = Math.floor(value / factor);
|
||||
if (new_value == 0) break;
|
||||
|
||||
let factors = [
|
||||
[1, 'Sekunde', 'n'],
|
||||
[60, 'Minute', 'n'],
|
||||
[60, 'Stunde', 'n'],
|
||||
[24, 'Tag', 'en'],
|
||||
[7, 'Woche', 'n'],
|
||||
[4.348214, 'Monat', 'en'],
|
||||
[12, 'Jahr', 'en'],
|
||||
];
|
||||
// prev = Math.floor(value % factor);
|
||||
value = new_value;
|
||||
unit = i;
|
||||
}
|
||||
|
||||
for (let i in factors) {
|
||||
let factor = factors[i][0];
|
||||
let new_value = Math.floor(value / factor);
|
||||
if (new_value == 0) break;
|
||||
let factor = factors[unit];
|
||||
|
||||
// prev = Math.floor(value % factor);
|
||||
value = new_value;
|
||||
unit = i;
|
||||
return [value, factors[unit][1] + (value == 1 ? "" : factor[2])];
|
||||
};
|
||||
|
||||
sort = (element, key) => {
|
||||
if (key == oldkey) {
|
||||
direction *= -1;
|
||||
} else {
|
||||
oldkey = key;
|
||||
direction = -1;
|
||||
}
|
||||
|
||||
for (let child of table_elem.firstChild.firstChild.children) {
|
||||
child.className = "";
|
||||
}
|
||||
|
||||
element.className = `sort ${direction > 0 ? "sort-up" : "sort-down"}`;
|
||||
|
||||
do_sort(oldkey, direction);
|
||||
};
|
||||
|
||||
let do_sort = (key, direction) => {
|
||||
let is_number = !!~(["port", "number", "last_change"].indexOf(key));
|
||||
|
||||
table = table.sort((a, b) => (direction * (
|
||||
is_number ? a[key] - b[key] : ("" + a[key]).localeCompare(b[key], "de-DE")
|
||||
)));
|
||||
|
||||
populate_table();
|
||||
};
|
||||
|
||||
let fmt = Intl.DateTimeFormat("de-DE", {
|
||||
dateStyle: "medium",
|
||||
timeStyle: "medium",
|
||||
});
|
||||
|
||||
let format_date = (date) => fmt.format(date).replace(", ", " ");
|
||||
let format_time = (date) => fmt.format(date).split(", ", 2)[1];
|
||||
|
||||
let populate_table = () => {
|
||||
// clear everything except for the header row
|
||||
while (table_elem.rows.length > 1) {
|
||||
table_elem.deleteRow(-1);
|
||||
}
|
||||
|
||||
for (let row of table) {
|
||||
let tr = table_elem.insertRow(-1);
|
||||
|
||||
let values = [
|
||||
row.name === null ? "?" : row.name,
|
||||
row.number,
|
||||
row.port,
|
||||
row.status,
|
||||
time_ago(last_update - row.last_change),
|
||||
];
|
||||
|
||||
let names = [
|
||||
"name",
|
||||
"number",
|
||||
"port",
|
||||
"status",
|
||||
"last_change",
|
||||
];
|
||||
|
||||
for (let i in values) {
|
||||
let value = values[i];
|
||||
let name = names[i];
|
||||
|
||||
let td = tr.insertCell(-1);
|
||||
td.className = name;
|
||||
|
||||
if (name == "last_change") {
|
||||
let [number, unit] = value;
|
||||
|
||||
let span = document.createElement("span");
|
||||
// span.className = "value";
|
||||
span.innerText = number;
|
||||
td.appendChild(span);
|
||||
|
||||
span = document.createElement("span");
|
||||
span.className = "unit";
|
||||
span.innerText = unit;
|
||||
td.appendChild(span);
|
||||
} else {
|
||||
td.innerText = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let factor = factors[unit];
|
||||
|
||||
return [value, factors[unit][1] + (value == 1 ? "" : factor[2])];
|
||||
let update_table = (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;
|
||||
|
||||
// allocated port has no state. This means that it is unknown and should not be displayed
|
||||
if (data.port_state[port] == undefined) {
|
||||
continue;
|
||||
}
|
||||
|
||||
sort = (element, key) => {
|
||||
if (key == oldkey) {
|
||||
direction *= -1;
|
||||
} else {
|
||||
oldkey = key;
|
||||
direction = -1;
|
||||
}
|
||||
let { status, last_change } = data.port_state[port];
|
||||
|
||||
for (let child of table_elem.firstChild.firstChild.children) {
|
||||
child.className = ""
|
||||
};
|
||||
let rejector = data.rejectors[port] || null;
|
||||
|
||||
element.className = `sort ${direction > 0 ? "sort-up" : "sort-down"}`;
|
||||
if (rejector && rejector instanceof Array) {
|
||||
rejector = rejector.map((x) => "0x" + x.toString(16).padStart(2, 0))
|
||||
.join(" ");
|
||||
}
|
||||
|
||||
do_sort(oldkey, direction);
|
||||
};
|
||||
last_change = new Date(last_change * 1000);
|
||||
|
||||
let do_sort = (key, direction) => {
|
||||
let name = data.names[number] || null;
|
||||
|
||||
let is_number = !!~(["port", "number", "last_change"].indexOf(key));
|
||||
switch (status) {
|
||||
case "disconnected":
|
||||
status = rejector ? `getrennt: ${rejector}` : "getrennt";
|
||||
break;
|
||||
case "idle":
|
||||
status = "bereit";
|
||||
break;
|
||||
case "in_call":
|
||||
status = "anruf";
|
||||
break;
|
||||
}
|
||||
|
||||
table = table.sort((a, b) => (direction * (
|
||||
is_number ? a[key] - b[key] : ('' +a[key]).localeCompare(b[key], "de-DE")
|
||||
)));
|
||||
|
||||
populate_table();
|
||||
};
|
||||
|
||||
let fmt = Intl.DateTimeFormat('de-DE', { dateStyle: 'medium', timeStyle: 'medium' });
|
||||
|
||||
let format_date = date => fmt.format(date).replace(', ', ' ');
|
||||
let format_time = date => fmt.format(date).split(', ', 2)[1];
|
||||
|
||||
let populate_table = () => {
|
||||
// clear everything except for the header row
|
||||
while(table_elem.rows.length > 1) {
|
||||
table_elem.deleteRow(-1);
|
||||
}
|
||||
|
||||
for (let row of table) {
|
||||
let tr = table_elem.insertRow(-1);
|
||||
|
||||
let values = [
|
||||
row.name === null ? "?" : row.name,
|
||||
row.number,
|
||||
row.port,
|
||||
row.status,
|
||||
time_ago(last_update - row.last_change)
|
||||
];
|
||||
|
||||
let names = [
|
||||
"name",
|
||||
"number",
|
||||
"port",
|
||||
"status",
|
||||
"last_change"
|
||||
];
|
||||
|
||||
for(let i in values) {
|
||||
let value = values[i];
|
||||
let name = names[i];
|
||||
|
||||
let td = tr.insertCell(-1);
|
||||
td.className = name;
|
||||
|
||||
if (name == "last_change") {
|
||||
let [number, unit] = value;
|
||||
|
||||
let span = document.createElement("span");
|
||||
// span.className = "value";
|
||||
span.innerText = number;
|
||||
td.appendChild(span);
|
||||
|
||||
span = document.createElement("span");
|
||||
span.className = "unit";
|
||||
span.innerText = unit;
|
||||
td.appendChild(span);
|
||||
} else {
|
||||
td.innerText = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let update_table = 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 = rejector ? `getrennt: ${rejector}` : "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: null, status: "Fehler", last_change: new Date(timestamp * 1000), rejector: null, name: ""})
|
||||
}
|
||||
|
||||
do_sort(oldkey, direction);
|
||||
|
||||
populate_table();
|
||||
};
|
||||
|
||||
|
||||
let format_event = (event, method) => (method || format_date)(new Date(+event.data * 1000));
|
||||
|
||||
let display_disconnected;
|
||||
|
||||
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 = `Stand: ${format_event(event, format_time)}`;
|
||||
|
||||
last_update = new Date(+event.data * 1000);
|
||||
|
||||
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_update = new Date(+event.data * 1000);
|
||||
|
||||
last_ping.innerText = `Stand: ${format_event(event, format_time)}`;
|
||||
connected.className = "visible";
|
||||
|
||||
populate_table();
|
||||
|
||||
clearTimeout(display_disconnected);
|
||||
display_disconnected = setTimeout(() => connected.className = "hidden", 5000);
|
||||
});
|
||||
|
||||
|
||||
evtSource.onerror = () => {
|
||||
clearTimeout(reconnect_timeout);
|
||||
reconnect_timeout = setTimeout(connect_event_source, retry_timeout);
|
||||
};
|
||||
table.push({ port, number, status, last_change, rejector, name });
|
||||
}
|
||||
|
||||
|
||||
connect_event_source();
|
||||
for (let [timestamp, port] of data.errored_ports) {
|
||||
table.push({
|
||||
port,
|
||||
number: null,
|
||||
status: "Fehler",
|
||||
last_change: new Date(timestamp * 1000),
|
||||
rejector: null,
|
||||
name: "",
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
do_sort(oldkey, direction);
|
||||
|
||||
populate_table();
|
||||
};
|
||||
|
||||
let format_event = (event, method) =>
|
||||
(method || format_date)(new Date(+event.data * 1000));
|
||||
|
||||
let display_disconnected;
|
||||
|
||||
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 = `Stand: ${format_event(event, format_time)}`;
|
||||
|
||||
last_update = new Date(+event.data * 1000);
|
||||
|
||||
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_update = new Date(+event.data * 1000);
|
||||
|
||||
last_ping.innerText = `Stand: ${format_event(event, format_time)}`;
|
||||
connected.className = "visible";
|
||||
|
||||
populate_table();
|
||||
|
||||
clearTimeout(display_disconnected);
|
||||
display_disconnected = setTimeout(
|
||||
() => connected.className = "hidden",
|
||||
5000,
|
||||
);
|
||||
});
|
||||
|
||||
evtSource.onerror = () => {
|
||||
clearTimeout(reconnect_timeout);
|
||||
reconnect_timeout = setTimeout(connect_event_source, retry_timeout);
|
||||
};
|
||||
};
|
||||
|
||||
connect_event_source();
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user