templates/index.html aktualisiert

templates/index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Pi-Orchestrator AI Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
     
     <link href="/static/gridstack.min.css" rel="stylesheet"/>
     <script src="/static/gridstack-all.js"></script>
@@ -137,9 +136,7 @@
         <div class="w-64 bg-slate-900 border-r border-slate-800 p-4 flex flex-col">
             <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 node-card-entry" 
+                    <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group" id="node-card-{{ node.id }}">
-                         id="node-card-{{ node.id }}" 
-                         data-node-id="{{ node.id }}">
                         
                         <div class="flex justify-between items-start">
                             <div class="text-sm font-bold flex items-center gap-1.5 cursor-pointer hover:text-blue-400" onclick="openEditNode({{ node.id }})">
@@ -209,6 +206,48 @@
         </div>
     </div>
 
+    <div id="add-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000]">
+        <div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-96 shadow-2xl">
+            <h3 class="text-lg font-bold mb-4 text-blue-400">Neuen Node hinzufügen</h3>
+            <form action="/add_node" method="post" class="space-y-3">
+                <input type="text" name="name" placeholder="Name (z.B. Pi-Worker-1)" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
+                <input type="text" name="ip" placeholder="IP Adresse" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
+                <input type="text" name="user" placeholder="SSH Benutzer" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
+                <input type="password" name="password" placeholder="SSH Passwort (für Handshake)" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
+                <input type="password" name="sudo_pass" placeholder="Sudo Passwort (Optional für KI)" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm">
+                
+                <div class="flex justify-end gap-2 pt-4">
+                    <button type="button" onclick="closeAddNode()" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors">Abbrechen</button>
+                    <button type="submit" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 text-sm rounded font-bold transition-colors">Koppeln</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <div id="edit-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000]">
+        <div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-96 shadow-2xl">
+            <h3 class="text-lg font-bold mb-4 text-emerald-400">Node bearbeiten</h3>
+            <form id="edit-node-form" method="post" class="space-y-3">
+                <label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">Anzeigename</label>
+                <input type="text" id="edit-name" name="name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
+                
+                <label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">IP-Adresse</label>
+                <input type="text" id="edit-ip" name="ip" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
+                
+                <label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">SSH User</label>
+                <input type="text" id="edit-user" name="user" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
+                
+                <label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">Sudo Passwort</label>
+                <input type="password" id="edit-sudo" name="sudo_pass" placeholder="Leer lassen falls unverändert" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm">
+                
+                <div class="flex justify-end gap-2 pt-4">
+                    <button type="button" onclick="closeEditNode()" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors">Abbrechen</button>
+                    <button type="submit" class="bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm rounded font-bold transition-colors">Speichern</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
     <script>
         let currentSettings = {};
         let termDataDisposable = null;
@@ -261,9 +300,8 @@
             });
         }
 
-        // --- VERBESSERTE REFRESH FUNKTION ---
+        // --- Status Update mit neuen OS & Arch Werten ---
-        // isAuto verhindert das Flackern von "PRÜFE..." beim Hintergrund-Update
+        window.refreshNodeStatus = async function(nodeId) {
-        window.refreshNodeStatus = async function(nodeId, isAuto = false) {
             const badge = document.getElementById(`badge-${nodeId}`);
             const led = document.getElementById(`led-${nodeId}`);
             const card = document.getElementById(`node-card-${nodeId}`);
@@ -271,35 +309,36 @@
             const vncBadge = document.getElementById(`vnc-badge-${nodeId}`);
             const osIcon = document.getElementById(`os-icon-${nodeId}`);
             
-            if (!isAuto) {
+            badge.textContent = "PRÜFE...";
-                badge.textContent = "PRÜFE...";
+            card.style.opacity = "0.7";
-                card.style.opacity = "0.7";
-            }
             
             try {
                 const response = await fetch(`/refresh_status/${nodeId}`);
                 const data = await response.json();
                 
+                // Texte & Icons aktualisieren
                 badge.textContent = data.status;
                 archBadge.textContent = data.arch;
                 osIcon.innerText = getOsIcon(data.os);
                 osIcon.title = data.os;
                 
+                // VNC Badge
                 if (data.vnc) {
                     vncBadge.className = "text-[9px] px-1.5 rounded font-bold border bg-purple-900/50 text-purple-400 border-purple-800";
                 } else {
                     vncBadge.className = "text-[9px] px-1.5 rounded font-bold border bg-slate-800 text-slate-600 border-slate-700";
                 }
                 
+                // LED Logik
                 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" || data.status === "Offline") {
+                } 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) {
-                if(!isAuto) badge.textContent = "FEHLER";
+                badge.textContent = "FEHLER";
                 led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]";
             } finally {
                 card.style.opacity = "1";
@@ -360,16 +399,14 @@
             } catch (e) { statusEl.textContent = "❌ Fehler"; }
         }
 
-
+        // --- Init ---
-        // --- INIT & AUTO-REFRESH ---
         document.addEventListener('DOMContentLoaded', function() {
             
-            // Setze initiale OS Icons
+            // Setze initiale OS Icons basierend auf den Server-Daten
             {% for node in nodes %}
                 document.getElementById('os-icon-{{ node.id }}').innerText = getOsIcon("{{ node.os }}");
             {% endfor %}
 
-            // Gridstack Init
             var grid = GridStack.init({
                 cellHeight: 80, margin: 10, float: true, 
                 handle: '.widget-header', resizable: { handles: 'all' }
@@ -413,15 +450,6 @@
                 });
             };
 
-            // --- NEU: AUTO REFRESH LOOP (Alle 60 Sek) ---
-            setInterval(() => {
-                console.log("Auto-Refresh der Node-Badges...");
-                document.querySelectorAll('.node-card-entry').forEach(card => {
-                    const nodeId = card.getAttribute('data-node-id');
-                    if(nodeId) refreshNodeStatus(nodeId, true); // true = silent refresh
-                });
-            }, 60000);
-
             loadSettings();
         });
     </script>