minor ui changes

This commit is contained in:
soruh 2023-06-11 06:44:14 +02:00
parent 2aedf86736
commit 5fe2177a14
3 changed files with 23 additions and 5 deletions

View File

@ -10,10 +10,13 @@
</head> </head>
<body> <body>
<p id="free_ports" /> <div id="header">
<p id="free_ports" />
<p id="last_change" />
</div>
<div id="connected_box"> <div id="connected_box">
<div id="connected" class="hidden"><!--INSERT SVG HERE--></div> <div id="connected" class="hidden"><!--INSERT SVG HERE--></div>
<p id="last_update" /> <p id="last_ping" />
</div> </div>
<table id="table"> <table id="table">

View File

@ -10,6 +10,16 @@ body {
height: 5%; height: 5%;
} }
#free_ports,
#last_change {
display: inline-block;
}
#free_ports {
margin-right: 10%;
}
td, td,
th { th {

View File

@ -1,6 +1,7 @@
window.onload = () => { window.onload = () => {
const table_elem = document.getElementById("table"); const table_elem = document.getElementById("table");
const last_update = document.getElementById("last_update"); const last_change = document.getElementById("last_change");
const last_ping = document.getElementById("last_ping");
const connected = document.getElementById("connected"); const connected = document.getElementById("connected");
const free_ports = document.getElementById("free_ports"); const free_ports = document.getElementById("free_ports");
@ -87,6 +88,9 @@ window.onload = () => {
print_table(); print_table();
}; };
let format_event = event => format_date(new Date(+event.data * 1000));
let connect_event_source = () => { let connect_event_source = () => {
clearTimeout(reconnect_timeout); clearTimeout(reconnect_timeout);
@ -97,7 +101,7 @@ window.onload = () => {
evtSource = new EventSource("/events"); evtSource = new EventSource("/events");
evtSource.addEventListener("change", event => { evtSource.addEventListener("change", event => {
last_update.innerText = `Letzte Änderung: ${format_date(new Date(+event.data * 1000))}`; last_ping.innerText = `Letzter Serverkontakt: ${format_event(event)}`;
fetch("/data") fetch("/data")
.then(res => res.json()) .then(res => res.json())
@ -108,8 +112,9 @@ window.onload = () => {
clearTimeout(ping_timeout); clearTimeout(ping_timeout);
ping_timeout = setTimeout(connect_event_source, timeout_duration); ping_timeout = setTimeout(connect_event_source, timeout_duration);
last_change.innerHTML = `Letzte Änderung: ${format_event(event)}`;
last_update.innerText = `Letzte Änderung: ${format_date(new Date(+event.data * 1000))}`; last_ping.innerText = `Letzter Serverkontakt: ${format_event(event)}`;
connected.className = "visible"; connected.className = "visible";
setTimeout(() => connected.className = "hidden", 1000); setTimeout(() => connected.className = "hidden", 1000);
}); });