fixxed status-anzeige

static/js/app.js

@@ -2,28 +2,59 @@
 
 document.addEventListener('DOMContentLoaded', () => {
 
+    // ── Status-Anzeige ─────────────────────────────────────────────────────────
     const statusBadge = document.getElementById('connection-status');
 
-    function updateStatus(connected) {
+    function updateStatus(connected, message = '') {
     if (!statusBadge) return;
+
     if (connected) {
-        statusBadge.className = 'badge bg-success px-3 py-2';
-        statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Verbunden';
-        reconnectSection.style.display = 'none';
+        statusBadge.className = 'badge bg-success px-3 py-2 fs-6';
+        statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Verbunden' + (message ? ` – ${message}` : '');
+        if (reconnectSection) reconnectSection.style.display = 'none';
     } else {
-        statusBadge.className = 'badge bg-danger px-3 py-2';
-        statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Getrennt';
-        showReconnect();
+        statusBadge.className = 'badge bg-danger px-3 py-2 fs-6';
+        statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Getrennt' + (message ? ` – ${message}` : '');
+        if (reconnectSection) reconnectSection.style.display = 'block';
     }
     }
 
-    // Nach erfolgreichem Connect / Reconnect
-    // in if (result.success) { ... }
-    updateStatus(true);
-
-    // Nach Fehler in sendControl (z. B. am Ende von sendControl)
+    // Initialer Status
     updateStatus(false);
 
+    // ── Automatische Verbindungsprüfung ────────────────────────────────────────
+    let connectionCheckInterval = null;
+
+    function startConnectionCheck() {
+    if (connectionCheckInterval) clearInterval(connectionCheckInterval);
+
+    connectionCheckInterval = setInterval(async () => {
+        try {
+        // Leichter Dummy-Befehl oder Status-Abfrage (hier nur ein Ping-ähnlicher GET)
+        // Du kannst später eine echte /api/status-Route bauen
+        const res = await fetch('/api/control', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ port: 'ping', value: 0 }) // Dummy → wird ignoriert
+        });
+
+        if (!res.ok) {
+            throw new Error('Status-Check fehlgeschlagen');
+        }
+
+        updateStatus(true);
+        } catch (err) {
+        console.warn('Verbindungs-Check fehlgeschlagen:', err);
+        updateStatus(false, 'Verbindung verloren');
+        }
+    }, 8000); // alle 8 Sekunden
+    }
+
+    // Stop-Intervall beim Verlassen der Seite
+    window.addEventListener('beforeunload', () => {
+    if (connectionCheckInterval) clearInterval(connectionCheckInterval);
+    });
+    
   const config = window.mkConfig || {};
   console.log("app.js verwendet config:", config);
   console.log('MK Control Frontend geladen');
@@ -167,6 +198,9 @@ connectBtn.addEventListener('click', async () => {
 
   console.log("→ Beginne mit Rendern von", config.channels.length, "Kanälen");
 
+  startConnectionCheck();
+  updateStatus(true);
+
 //  function renderChannels() {
 //    if (!channelsContainer) return;
 //    channelsContainer.innerHTML = '';

templates/control.html

@@ -32,7 +32,7 @@
 
     <!-- Status-Anzeige -->
     <div class="position-fixed top-0 end-0 m-3" style="z-index: 1050;">
-        <div id="connection-status" class="badge bg-secondary px-3 py-2">
+        <div id="connection-status" class="badge bg-secondary px-3 py-2 fs-6">
             <i class="bi bi-circle-fill me-2 text-muted"></i> Nicht verbunden
         </div>
     </div>