From 8aaa9f7a549cfda039bcb3b7a76f1dce09bfdacf Mon Sep 17 00:00:00 2001
From: "info@pi-farm.de" <pi-farm@noreply.git.pi-farm.de>
Date: Wed, 4 Mar 2026 12:59:18 +0000
Subject: [PATCH] templates/index.html aktualisiert

---
 templates/index.html | 63 +++++++++++++++++++++++++++++++++++---------
 1 file changed, 50 insertions(+), 13 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 0138f6f..0421d95 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -61,20 +61,25 @@
             <h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
             <div id="node-list" class="flex-1 overflow-y-auto space-y-2">
                 {% for node in nodes %}
-                <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group">
-                    <div class="flex justify-between items-start">
-                        <div class="text-sm font-bold">{{ node.name }}</div>
-                        <form action="/remove_node/{{ node.id }}" method="post">
-                            <button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
-                        </form>
+                    <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group" id="node-card-{{ node.id }}">
+                        <div class="flex justify-between items-start">
+                            <div class="text-sm font-bold">{{ node.name }}</div>
+                            <form action="/remove_node/{{ node.id }}" method="post">
+                                <button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
+                            </form>
+                        </div>
+                        <div class="text-[10px] text-slate-500 font-mono flex justify-between items-center">
+                            {{ node.ip }}
+                            <button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400 transition-transform active:rotate-180" title="Status prüfen">
+                                🔄
+                            </button>
+                        </div>
+                        <div class="mt-1 flex items-center gap-2">
+                            <span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if node.status == 'Docker Aktiv' %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% else %} bg-yellow-500 {% endif %}"></span>
+                            <span id="badge-{{ node.id }}" class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</span>
+                        </div>
+                        <button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1 rounded transition-colors">Konsole öffnen</button>
                     </div>
-                    <div class="text-[10px] text-slate-500">{{ node.ip }}</div>
-                    <div class="mt-1 flex items-center gap-2">
-                        <span class="h-2 w-2 rounded-full {% if node.status == 'Docker Aktiv' %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% else %} bg-yellow-500 {% endif %}"></span>
-                        <span class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</span>
-                    </div>
-                    <button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1 rounded transition-colors">Konsole öffnen</button>
-                </div>
                 {% endfor %}
             </div>
             <button onclick="addNode()" class="mt-4 bg-blue-600 hover:bg-blue-500 p-2 rounded text-sm font-bold transition-colors">+ Node hinzufügen</button>
@@ -221,6 +226,38 @@
                     alert("Alle Felder müssen ausgefüllt werden.");
                 }
             };
+
+            window.refreshNodeStatus = async function(nodeId) {
+                const badge = document.getElementById(`badge-${nodeId}`);
+                const led = document.getElementById(`led-${nodeId}`);
+                
+                // Visuelles Feedback: Badge ausgrauen während der Suche
+                badge.innerText = "Prüfe...";
+                badge.classList.add("animate-pulse");
+
+                try {
+                    const response = await fetch(`/refresh_status/${nodeId}`);
+                    const data = await response.json();
+                    
+                    // UI aktualisieren
+                    badge.innerText = data.status;
+                    badge.classList.remove("animate-pulse");
+
+                    if (data.status === "Docker Aktiv") {
+                        led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
+                        badge.classList.add("text-blue-400");
+                    } else if (data.status === "Offline/Fehler") {
+                        led.className = "h-2 w-2 rounded-full bg-red-600";
+                        badge.classList.add("text-red-400");
+                    } else {
+                        led.className = "h-2 w-2 rounded-full bg-yellow-500";
+                        badge.classList.remove("text-blue-400");
+                    }
+                } catch (err) {
+                    console.error("Fehler beim Refresh:", err);
+                    badge.innerText = "Fehler";
+                }
+            };
         });
     </script>
 </body>