diff --git a/templates/index.html b/templates/index.html index cf8b60d..09cd5e2 100644 --- a/templates/index.html +++ b/templates/index.html @@ -299,7 +299,40 @@ document.getElementById('add-node-modal').classList.add('hidden'); }; - // 3. SETTINGS & MODEL LOGIK + // 3. Node Status aktualisieren --- + window.refreshNodeStatus = async function(nodeId) { + const badge = document.getElementById(`badge-${nodeId}`); + const led = document.getElementById(`led-${nodeId}`); + const card = document.getElementById(`node-card-${nodeId}`); + + // Optisches Feedback: Karte leicht ausgrauen und Text ändern + badge.textContent = "PRÜFE..."; + card.style.opacity = "0.7"; + + try { + const response = await fetch(`/refresh_status/${nodeId}`); + const data = await response.json(); + + // Status Text aktualisieren + badge.textContent = data.status; + + // LED Farbe dynamisch anpassen + if (data.status === "Docker Aktiv") { + led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]"; + } else if (data.status === "Offline/Fehler") { + led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]"; + } else { + led.className = "h-2 w-2 rounded-full bg-yellow-500"; + } + } catch (e) { + badge.textContent = "FEHLER"; + led.className = "h-2 w-2 rounded-full bg-red-500"; + } finally { + card.style.opacity = "1"; + } + }; + + // 4. SETTINGS & MODEL LOGIK async function loadSettings() { try { const res = await fetch('/api/settings'); @@ -354,7 +387,7 @@ } catch (e) { statusEl.textContent = "❌ Fehler"; } } - // 4. INITIALISIERUNG + // 5. INITIALISIERUNG document.addEventListener('DOMContentLoaded', function() { // GridStack mit allen Resize-Handles var grid = GridStack.init({