minor ui changes
This commit is contained in:
parent
2aedf86736
commit
5fe2177a14
@ -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">
|
||||||
|
10
web/main.css
10
web/main.css
@ -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 {
|
||||||
|
11
web/main.js
11
web/main.js
@ -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);
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user