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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/ports.rs
View File

@ -21,7 +21,7 @@ use tracing::{debug, error, info, instrument, warn};
use crate::{
constants::{CACHE_STORE_INTERVAL, PORT_OWNERSHIP_TIMEOUT, PORT_RETRY_TIME},
packets::{Packet, PacketKind},
packets::Packet,
spawn, Config, Number, Port, UnixTimestamp,
};
@ -302,17 +302,10 @@ impl Serialize for Rejector {
S: Serializer,
{
let packet = &self.state.1;
let kind = match packet.kind() {
PacketKind::End => "end",
PacketKind::Reject => "reject",
_ => unreachable!(),
};
match packet.as_string() {
Some(string) if string.chars().all(|c| !c.is_control()) => {
(kind, string).serialize(serializer)
}
_ => (kind, packet.data()).serialize(serializer),
Some(string) if string.chars().all(|c| !c.is_control()) => string.serialize(serializer),
_ => packet.data().serialize(serializer),
}
}
}

16
web/index.html
View File

@ -10,10 +10,22 @@
</head>
<body>
<p id="free_ports" />
<div id="connected_box">
<div id="connected" class="hidden"><!--INSERT SVG HERE--></div>
<p id="last_update" />
<pre id="data"></pre>
<list id="list" />
</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);
});