diff --git a/web/index.html b/web/index.html
index 6bf77bb..2675085 100644
--- a/web/index.html
+++ b/web/index.html
@@ -10,10 +10,13 @@
-
+
diff --git a/web/main.css b/web/main.css
index 9c99c3b..7fa7b97 100644
--- a/web/main.css
+++ b/web/main.css
@@ -10,6 +10,16 @@ body {
height: 5%;
}
+#free_ports,
+#last_change {
+ display: inline-block;
+}
+
+#free_ports {
+ margin-right: 10%;
+}
+
+
td,
th {
diff --git a/web/main.js b/web/main.js
index ead3107..eb74eca 100644
--- a/web/main.js
+++ b/web/main.js
@@ -1,6 +1,7 @@
window.onload = () => {
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 free_ports = document.getElementById("free_ports");
@@ -87,6 +88,9 @@ window.onload = () => {
print_table();
};
+
+ let format_event = event => format_date(new Date(+event.data * 1000));
+
let connect_event_source = () => {
clearTimeout(reconnect_timeout);
@@ -97,7 +101,7 @@ window.onload = () => {
evtSource = new EventSource("/events");
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")
.then(res => res.json())
@@ -108,8 +112,9 @@ window.onload = () => {
clearTimeout(ping_timeout);
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";
setTimeout(() => connected.className = "hidden", 1000);
});