oberon/mkcontrol-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update app.js

Browse Source
This commit is contained in:
oberon 2026-02-12 18:52:22 +01:00
parent 7c5824f140
commit 33c2515044
1 changed files with 114 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
static/js/app.js
View File

@ -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,11 +17,12 @@ 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.addEventListener('click', async () => {
connectBtn.disabled = true;
connectBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> Verbinde...';
@ -98,25 +43,30 @@ connectBtn.addEventListener('click', async () => {
controlSection.style.display = 'block';
reconnectSection.style.display = 'none';
// ── HIER die Status-Anzeige aktualisieren ───────────────────────────
// Status aktualisieren
updateStatus(true);
console.log("→ Rufe renderChannels() auf");
renderChannels();
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 = '<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'));
}
@ -201,18 +154,6 @@ 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 = '';
// 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');
col.className = 'col-md-6 mb-4';
@ -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 = '<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
});