diff --git a/srv/poe_manager/templates/index.html b/srv/poe_manager/templates/index.html index aeff1f9..81d0cc8 100644 --- a/srv/poe_manager/templates/index.html +++ b/srv/poe_manager/templates/index.html @@ -46,6 +46,16 @@ document.addEventListener("DOMContentLoaded", () => { const intervalMinutes = {{ interval | int }}; // aus DB const intervalMilliseconds = intervalMinutes * 60 * 1000; let lastUpdateTime = Date.now(); + let selectedCard = null; + let selectedMac = null; + + const deviceModal = new bootstrap.Modal( + document.getElementById("deviceModal") + ); + + const restartModal = new bootstrap.Modal( + document.getElementById("restartModal") + ); function parseLogTimestamp(ts) { const parts = ts.match(/^(\d{4})-(\d{2})-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/); @@ -89,6 +99,32 @@ document.addEventListener("DOMContentLoaded", () => { .catch(err => console.error("Fehler beim Laden der Logs:", err)); } + document.querySelectorAll(".device-card").forEach(card => { + const mac = card.dataset.mac; + if (sessionStorage.getItem("restart_" + mac)) { + const span = card.querySelector(".fw-bold"); + span.innerHTML = + 'Restarting...'; + span.style.color = "#ffc107"; + } + + card.addEventListener("click", function () { + selectedCard = this; + selectedMac = this.dataset.mac; + document.getElementById("deviceModalTitle").innerText = + this.dataset.name; + document.getElementById("deviceIp").innerText = + this.dataset.ip || "-"; + document.getElementById("deviceSwitch").innerText = + this.dataset.switch || "-"; + document.getElementById("devicePort").innerText = + this.dataset.port || "-"; + document.getElementById("deviceStatus").innerText = + this.querySelector(".fw-bold").innerText; + deviceModal.show(); + }); + }); + // Timer alle 1 Sekunde aktualisieren setInterval(updateTimer, 1000);