From 33c2515044275d15abb96be436ccf74a8cf65639 Mon Sep 17 00:00:00 2001 From: oberon Date: Thu, 12 Feb 2026 18:52:22 +0100 Subject: [PATCH] update app.js --- static/js/app.js | 237 +++++++++++++++++++++++------------------------ 1 file changed, 114 insertions(+), 123 deletions(-) diff --git a/static/js/app.js b/static/js/app.js index c53a0c2..c27958f 100644 --- a/static/js/app.js +++ b/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 = ' Verbunden' + (message ? ` – ${message}` : ''); - if (reconnectSection) reconnectSection.style.display = 'none'; - } else { - statusBadge.className = 'badge bg-danger px-3 py-2 fs-6'; - statusBadge.innerHTML = ' 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) ─────────────────────────── - //const config = window.config || {}; // Sicherstellen, dass config existiert + // ── Config aus Template ──────────────────────────────────────────────────── + const config = window.mkConfig || {}; + console.log("app.js verwendet config:", config); // ── Connect-Button ──────────────────────────────────────────────────────── -connectBtn.addEventListener('click', async () => { - connectBtn.disabled = true; - connectBtn.innerHTML = ' Verbinde...'; + connectBtn.addEventListener('click', async () => { + connectBtn.disabled = true; + connectBtn.innerHTML = ' Verbinde...'; - try { - console.log("→ Sende /api/connect ..."); - const response = await fetch('/api/connect', { - method: 'POST', - headers: { 'Content-Type': 'application/json' } - }); + try { + console.log("→ Sende /api/connect ..."); + const response = await fetch('/api/connect', { + method: 'POST', + headers: { 'Content-Type': 'application/json' } + }); - console.log("→ Antwort erhalten:", response.status); - const result = await response.json(); - console.log("→ Resultat:", result); + console.log("→ Antwort erhalten:", response.status); + const result = await response.json(); + console.log("→ Resultat:", result); - if (result.success) { - console.log("→ Connect erfolgreich – blende Sections um"); - connectSection.style.display = 'none'; - controlSection.style.display = 'block'; - reconnectSection.style.display = 'none'; + if (result.success) { + console.log("→ Connect erfolgreich – blende Sections um"); + connectSection.style.display = 'none'; + controlSection.style.display = 'block'; + reconnectSection.style.display = 'none'; - // ── HIER die Status-Anzeige aktualisieren ─────────────────────────── - updateStatus(true); + // Status aktualisieren + updateStatus(true); - console.log("→ Rufe renderChannels() auf"); - renderChannels(); + console.log("→ Rufe renderChannels() auf"); + renderChannels(); - console.log("→ renderChannels() abgeschlossen"); - } else { - console.warn("→ Connect fehlgeschlagen:", result.message); - alert('Verbindung fehlgeschlagen:\n' + (result.message || 'Unbekannter Fehler')); + console.log("→ renderChannels() abgeschlossen"); + + // Automatische Prüfung starten + 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 = ' Mit Hub verbinden'; } - } catch (err) { - console.error("→ Connect-Fehler:", err); - alert('Netzwerk- oder Verbindungsfehler: ' + err.message); - } finally { - connectBtn.disabled = false; - connectBtn.innerHTML = ' 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("→ config.channels existiert?", !!config?.channels); - console.log("→ channels.length:", config?.channels?.length ?? "undefined"); + console.log("renderChannels() START"); + console.log("→ config.channels existiert?", !!config?.channels); + console.log("→ channels.length:", config?.channels?.length ?? "undefined"); - if (!channelsContainer) { - console.error("→ channelsContainer nicht gefunden im DOM!"); - return; - } + if (!channelsContainer) { + console.error("→ channelsContainer nicht gefunden im DOM!"); + return; + } - channelsContainer.innerHTML = ''; - console.log("→ Container geleert"); + channelsContainer.innerHTML = ''; + console.log("→ Container geleert"); - if (!config?.channels || config.channels.length === 0) { - console.warn("→ Keine Kanäle erkannt – zeige leere Meldung"); - channelsContainer.innerHTML = '

Keine Kanäle in der Konfiguration definiert.

'; - return; - } + if (!config?.channels || config.channels.length === 0) { + console.warn("→ Keine Kanäle erkannt – zeige leere Meldung"); + channelsContainer.innerHTML = '

Keine Kanäle in der Konfiguration definiert.

'; + return; + } - 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 = '

Keine Kanäle in der Konfiguration definiert.

'; -// return; -// } + console.log("→ Beginne mit Rendern von", config.channels.length, "Kanälen"); 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 - // showReconnect(); + // Bei Fehler: Verbindungsprüfung triggern + updateStatus(false, 'Fehler beim Senden'); } } @@ -348,6 +289,56 @@ connectBtn.addEventListener('click', async () => { } } - // Optional: Bei Seitenlade-Fehler oder späterem Verbindungsverlust aufrufen - // showReconnect(); // ← zum Testen manuell einblenden + // ── 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 = ' Verbunden' + (message ? ` – ${message}` : ''); + if (reconnectSection) reconnectSection.style.display = 'none'; + } else { + statusBadge.className = 'badge bg-danger px-3 py-2 fs-6'; + statusBadge.innerHTML = ' 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 }); \ No newline at end of file