templates/index.html aktualisiert

templates/index.html

@@ -61,17 +61,22 @@
             <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="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">{{ node.ip }}</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 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="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 class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</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>
@@ -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>