update app.js

static/js/app.js

@@ -1,62 +1,6 @@
 // static/js/app.js – MK Control Frontend
 
 document.addEventListener('DOMContentLoaded', () => {
-
-    // ── Status-Anzeige ─────────────────────────────────────────────────────────
-    const statusBadge = document.getElementById('connection-status');
-
-    function updateStatus(connected, message = '') {
-    if (!statusBadge) return;
-
-    if (connected) {
-        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 fs-6';
-        statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Getrennt' + (message ? ` – ${message}` : '');
-        if (reconnectSection) reconnectSection.style.display = 'block';
-    }
-    }
-
-    // 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');
 
   // ── Elemente ───────────────────────────────────────────────────────────────
@@ -73,50 +17,56 @@ document.addEventListener('DOMContentLoaded', () => {
     return;
   }
 
-  // ── Config aus Template (von Flask eingebettet) ───────────────────────────
+  // ── Config aus Template ────────────────────────────────────────────────────
-  //const config = window.config || {}; // Sicherstellen, dass config existiert
+  const config = window.mkConfig || {};
+  console.log("app.js verwendet config:", config);
 
   // ── Connect-Button ────────────────────────────────────────────────────────
-connectBtn.addEventListener('click', async () => {
+  connectBtn.addEventListener('click', async () => {
-  connectBtn.disabled = true;
+    connectBtn.disabled = true;
-  connectBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Verbinde...';
+    connectBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Verbinde...';
 
-  try {
+    try {
-    console.log("→ Sende /api/connect ...");
+      console.log("→ Sende /api/connect ...");
-    const response = await fetch('/api/connect', {
+      const response = await fetch('/api/connect', {
-      method: 'POST',
+        method: 'POST',
-      headers: { 'Content-Type': 'application/json' }
+        headers: { 'Content-Type': 'application/json' }
-    });
+      });
 
-    console.log("→ Antwort erhalten:", response.status);
+      console.log("→ Antwort erhalten:", response.status);
-    const result = await response.json();
+      const result = await response.json();
-    console.log("→ Resultat:", result);
+      console.log("→ Resultat:", result);
 
-    if (result.success) {
+      if (result.success) {
-      console.log("→ Connect erfolgreich – blende Sections um");
+        console.log("→ Connect erfolgreich – blende Sections um");
-      connectSection.style.display = 'none';
+        connectSection.style.display = 'none';
-      controlSection.style.display = 'block';
+        controlSection.style.display = 'block';
-      reconnectSection.style.display = 'none';
+        reconnectSection.style.display = 'none';
 
-    // ── HIER die Status-Anzeige aktualisieren ───────────────────────────
+        // Status aktualisieren
-      updateStatus(true);
+        updateStatus(true);
 
-      console.log("→ Rufe renderChannels() auf");
+        console.log("→ Rufe renderChannels() auf");
-      renderChannels();
+        renderChannels();
 
-      console.log("→ renderChannels() abgeschlossen");
+        console.log("→ renderChannels() abgeschlossen");
-    } else {
+
-      console.warn("→ Connect fehlgeschlagen:", result.message);
+        // Automatische Prüfung starten
-      alert('Verbindung fehlgeschlagen:\n' + (result.message || 'Unbekannter Fehler'));
+        startConnectionCheck();
+      } else {
+        console.warn("→ Connect fehlgeschlagen:", result.message);
+        alert('Verbindung fehlgeschlagen:\n' + (result.message || 'Unbekannter Fehler'));
+        updateStatus(false);
+      }
+    } catch (err) {
+      console.error("→ Connect-Fehler:", err);
+      alert('Netzwerk- oder Verbindungsfehler: ' + err.message);
+      updateStatus(false);
+    } finally {
+      connectBtn.disabled = false;
+      connectBtn.innerHTML = '<i class="bi bi-bluetooth me-2"></i> Mit Hub verbinden';
     }
-  } catch (err) {
+  });
-    console.error("→ Connect-Fehler:", err);
-    alert('Netzwerk- oder Verbindungsfehler: ' + err.message);
-  } finally {
-    connectBtn.disabled = false;
-    connectBtn.innerHTML = '<i class="bi bi-bluetooth me-2"></i> Mit Hub verbinden';
-  }
-});
 
   // ── Alle stoppen ──────────────────────────────────────────────────────────
   if (stopAllBtn) {
@@ -164,8 +114,11 @@ connectBtn.addEventListener('click', async () => {
         if (result.success) {
           reconnectSection.style.display = 'none';
           controlSection.style.display = 'block';
+
+          updateStatus(true);
+          startConnectionCheck();
+
           alert('Verbindung wiederhergestellt!');
-          // Optional: Kanäle neu rendern oder Status aktualisieren
         } else {
           alert('Erneute Verbindung fehlgeschlagen:\n' + (result.message || 'Unbekannt'));
         }
@@ -181,37 +134,25 @@ connectBtn.addEventListener('click', async () => {
 
   // ── Kanäle dynamisch rendern ──────────────────────────────────────────────
   function renderChannels() {
-  console.log("renderChannels() START");
+    console.log("renderChannels() START");
-  console.log("→ config.channels existiert?", !!config?.channels);
+    console.log("→ config.channels existiert?", !!config?.channels);
-  console.log("→ channels.length:", config?.channels?.length ?? "undefined");
+    console.log("→ channels.length:", config?.channels?.length ?? "undefined");
 
-  if (!channelsContainer) {
+    if (!channelsContainer) {
-    console.error("→ channelsContainer nicht gefunden im DOM!");
+      console.error("→ channelsContainer nicht gefunden im DOM!");
-    return;
+      return;
-  }
+    }
 
-  channelsContainer.innerHTML = '';
+    channelsContainer.innerHTML = '';
-  console.log("→ Container geleert");
+    console.log("→ Container geleert");
 
-  if (!config?.channels || config.channels.length === 0) {
+    if (!config?.channels || config.channels.length === 0) {
-    console.warn("→ Keine Kanäle erkannt – zeige leere Meldung");
+      console.warn("→ Keine Kanäle erkannt – zeige leere Meldung");
-    channelsContainer.innerHTML = '<p class="text-center text-muted py-5">Keine Kanäle in der Konfiguration definiert.</p>';
+      channelsContainer.innerHTML = '<p class="text-center text-muted py-5">Keine Kanäle in der Konfiguration definiert.</p>';
-    return;
+      return;
-  }
+    }
 
-  console.log("→ Beginne mit Rendern von", config.channels.length, "Kanälen");
+    console.log("→ Beginne mit Rendern von", config.channels.length, "Kanälen");
-
-  startConnectionCheck();
-  updateStatus(true);
-
-//  function renderChannels() {
-//    if (!channelsContainer) return;
-//    channelsContainer.innerHTML = '';
-
-//    if (!config.channels || config.channels.length === 0) {
-//      channelsContainer.innerHTML = '<p class="text-center text-muted py-5">Keine Kanäle in der Konfiguration definiert.</p>';
-//      return;
-//    }
 
     config.channels.forEach(channel => {
       const col = document.createElement('div');
@@ -335,8 +276,8 @@ connectBtn.addEventListener('click', async () => {
       }
     } catch (err) {
       console.error('sendControl Fehler:', err);
-      // Optional: Hier könnte man showReconnect() aufrufen, wenn gewünscht
+      // Bei Fehler: Verbindungsprüfung triggern
-      // showReconnect();
+      updateStatus(false, 'Fehler beim Senden');
     }
   }
 
@@ -348,6 +289,56 @@ connectBtn.addEventListener('click', async () => {
     }
   }
 
-  // Optional: Bei Seitenlade-Fehler oder späterem Verbindungsverlust aufrufen
+  // ── Status-Anzeige ─────────────────────────────────────────────────────────
-  // showReconnect(); // ← zum Testen manuell einblenden
+  const statusBadge = document.getElementById('connection-status');
+
+  function updateStatus(connected, message = '') {
+    if (!statusBadge) return;
+
+    if (connected) {
+      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 fs-6';
+      statusBadge.innerHTML = '<i class="bi bi-circle-fill me-2"></i> Getrennt' + (message ? ` – ${message}` : '');
+      showReconnect();
+    }
+  }
+
+  // Initialer Status
+  updateStatus(false);
+
+  // ── Automatische Verbindungsprüfung ────────────────────────────────────────
+  let connectionCheckInterval = null;
+
+  function startConnectionCheck() {
+    if (connectionCheckInterval) clearInterval(connectionCheckInterval);
+
+    connectionCheckInterval = setInterval(async () => {
+      try {
+        const res = await fetch('/api/control', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ port: 'ping', value: 0 }) // Dummy
+        });
+
+        if (!res.ok) {
+          throw new Error('Check fehlgeschlagen');
+        }
+
+        updateStatus(true);
+      } catch (err) {
+        console.warn('Verbindungs-Check fehlgeschlagen:', err);
+        updateStatus(false, 'Verbindung verloren');
+      }
+    }, 8000); // 8 Sekunden
+  }
+
+  window.addEventListener('beforeunload', () => {
+    if (connectionCheckInterval) clearInterval(connectionCheckInterval);
+  });
+
+  // Optional: Bei Seitenlade den Check starten (falls schon verbunden)
+  // startConnectionCheck();  // ← auskommentiert, da nach Connect gestartet
 });