From b75e2867dce5aeb7d2f33c6c07f8fca596d2ff1a Mon Sep 17 00:00:00 2001
From: "info@pi-farm.de" <pi-farm@noreply.git.pi-farm.de>
Date: Tue, 3 Mar 2026 23:43:07 +0000
Subject: [PATCH] templates/index.html aktualisiert

---
 templates/index.html | 35 ++++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index e0f8985..3885b5c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -37,13 +37,33 @@
                 <h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
                 <div id="node-list" class="space-y-2">
                     {% for node in nodes %}
-                    <div class="p-3 bg-gray-700 rounded border border-gray-600 relative group">
+                    <div class="p-3 bg-gray-800 rounded-lg border border-gray-700 relative group transition-all hover:border-blue-500" id="node-{{ node.id }}">
                         <form action="/remove_node/{{ node.id }}" method="post" class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                            <button type="submit" class="text-red-500 font-bold px-1">×</button>
+                            <button type="submit" class="text-red-500 font-bold px-1 hover:scale-125">×</button>
                         </form>
-                        <div class="text-sm font-bold">{{ node.name }}</div>
-                        <div class="text-[10px] text-gray-400">{{ node.ip }}</div>
-                        <button onclick="openTerminal('{{ node.ip }}')" class="mt-2 text-[10px] bg-blue-600 hover:bg-blue-500 px-2 py-1 rounded w-full">Terminal</button>
+
+                        <div class="flex items-center justify-between mb-1">
+                            <div class="text-sm font-bold truncate pr-4">{{ node.name }}</div>
+                            <div class="status-indicator">
+                                {% if "Docker" in node.status or "Online" in node.status %}
+                                    <span class="flex h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_rgba(59,130,246,0.8)]" title="Docker installiert"></span>
+                                {% else %}
+                                    <span class="flex h-2 w-2 rounded-full bg-yellow-500 opacity-75" title="Nur SSH"></span>
+                                {% endif %}
+                            </div>
+                        </div>
+
+                        <div class="text-[10px] text-gray-500 font-mono">{{ node.ip }}</div>
+                        
+                        <div class="mt-2 flex items-center gap-1">
+                            <span class="text-[9px] px-1.5 py-0.5 rounded bg-gray-900 border border-gray-600 text-gray-300 uppercase tracking-tighter status-text">
+                                {{ node.status }}
+                            </span>
+                        </div>
+
+                        <button onclick="openTerminal('{{ node.ip }}')" class="mt-3 text-[10px] bg-blue-900/50 hover:bg-blue-600 border border-blue-700/50 text-blue-200 py-1 rounded w-full transition-colors">
+                            Konsole öffnen
+                        </button>
                     </div>
                     {% endfor %}
                 </div>
@@ -120,6 +140,11 @@
             const l = document.getElementById('install-log');
             l.innerHTML += `<div>${ev.data}</div>`;
             l.parentElement.scrollTop = l.parentElement.scrollHeight;
+
+            // Wenn der Log "fertig" oder "abgeschlossen" meldet, lade die Node-Liste nach 2 Sek neu
+            if (ev.data.includes("abgeschlossen") || ev.data.includes("fertig")) {
+                setTimeout(() => { location.reload(); }, 2000);
+            }
         };
 
         const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);