Hinzufügen HTML Seiten zur Konfiguration der Ports und Darstellung des jeweiligen Status

2026-03-09 22:59:57 +01:00
parent 2348fc59c7
commit 1bf8c6545f
11 changed files with 826 additions and 98 deletions
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="style.css">
+    <title>Port Status</title>
+    <style>
+        .port {
+            margin: 10px;
+            padding: 10px;
+            border: 1px solid #ccc;
+            display: inline-block;
+            width: 200px;
+        }
+        .disabled {
+            background-color: lightgray;
+            color: gray;
+        }
+        .ok {
+            background-color: lightgreen;
+        }
+        .missing {
+            background-color: red;
+            animation: blink 1s infinite;
+        }
+        @keyframes blink {
+            0%, 50% { background-color: red; }
+            51%, 100% { background-color: white; }
+        }
+    </style>
+</head>
+<body>
+    <h1>Port Status Übersicht</h1>
+    <div id="portsContainer"></div>
+    <br>
+    <button onclick="location.href='/portconfig.html'">Zur Konfiguration</button>
+    <button onclick="location.href='/admin.html'">Zur Admin Seite</button>
+
+
+    <script>
+        async function loadStatus() {
+            try {
+                const response = await fetch('/status/data');
+                const data = await response.json();
+                const container = document.getElementById('portsContainer');
+                container.innerHTML = '';
+                data.ports.forEach((port, index) => {
+                    const div = document.createElement('div');
+                    div.className = 'port';
+                    let statusClass = '';
+                    let statusText = '';
+                    if (!port.enabled) {
+                        statusClass = 'disabled';
+                        statusText = 'disabled';
+                    } else if (port.state === 0) {
+                        statusClass = 'ok';
+                        statusText = 'OK';
+                    } else {
+                        statusClass = 'missing';
+                        statusText = 'Fehlt';
+                    }
+                    div.classList.add(statusClass);
+                    div.innerHTML = `
+                        <strong>Port ${index}: ${port.name}</strong><br>
+                        Status: ${statusText}
+                    `;
+                    container.appendChild(div);
+                });
+            } catch (error) {
+                console.error('Fehler beim Laden des Status:', error);
+            }
+        }
+
+        loadStatus();
+        setInterval(loadStatus, 1000); // Aktualisiere jede Sekunde
+    </script>
+</body>
+</html>