From 5fe2177a14aaf27b0b4e71640ac18cd9d1d8bfe0 Mon Sep 17 00:00:00 2001 From: soruh Date: Sun, 11 Jun 2023 06:44:14 +0200 Subject: [PATCH] minor ui changes --- web/index.html | 7 +++++-- web/main.css | 10 ++++++++++ web/main.js | 11 ++++++++--- 3 files changed, 23 insertions(+), 5 deletions(-) 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); });