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);