From b1b549081a3a4ba8f9ada4d71bc29a45216e07b3 Mon Sep 17 00:00:00 2001
From: "info@pi-farm.de" <pi-farm@noreply.git.pi-farm.de>
Date: Fri, 6 Mar 2026 11:47:48 +0000
Subject: [PATCH] templates/index.html aktualisiert

---
 templates/index.html | 266 +++++++++++++++++++++----------------------
 1 file changed, 133 insertions(+), 133 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 018c032..b77c722 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Pi-Orchestrator AI Dashboard</title>
+    <script src="https://cdn.jsdelivr.net/npm/tailwindcss.com"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     
     <link href="https://cdn.jsdelivr.net/npm/gridstack@11.1.0/dist/gridstack.min.css" rel="stylesheet"/>
@@ -35,6 +36,10 @@
         .add-node-btn { background-color: #2563eb; color: white; }
         #settings-status { color: #10b981; font-size: 11px; min-width: 80px; }
         .markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; }
+        
+        /* Hilfsklassen für Resize-Handles (GridStack) */
+        .ui-resizable-handle { opacity: 0.2; transition: opacity 0.2s; }
+        .ui-resizable-handle:hover { opacity: 1; background: rgba(56, 189, 248, 0.5); }
     </style>
 </head>
 <body class="bg-slate-950 text-white overflow-hidden">
@@ -68,7 +73,6 @@
                     <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group node-card-entry" 
                          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 }})">
                                 <span id="os-icon-{{ node.id }}" class="text-lg" title="{{ node.os }}">🖥️</span>
@@ -81,12 +85,10 @@
                                 </form>
                             </div>
                         </div>
-                        
                         <div class="text-[10px] text-slate-400 font-mono flex justify-between items-center mt-1">
                             {{ node.ip }}
                             <span id="arch-{{ node.id }}" class="bg-slate-900 border border-slate-700 px-1.5 rounded">{{ node.arch }}</span>
                         </div>
-                        
                         <div class="mt-2 flex items-center justify-between">
                             <div class="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] {% elif 'Offline' in node.status %} bg-red-500 shadow-[0_0_8px_#ef4444] {% else %} bg-yellow-500 {% endif %}"></span>
@@ -94,12 +96,10 @@
                             </div>
                             <button onclick="refreshNodeStatus({{ node.id }})" class="text-slate-500 hover:text-blue-400 text-[10px]">🔄</button>
                         </div>
-                        
                         <div class="flex gap-1.5 mt-2">
                             <span class="text-[9px] px-1.5 rounded font-bold bg-green-900/50 text-green-400 border border-green-800">SSH</span>
                             <span id="vnc-badge-{{ node.id }}" class="text-[9px] px-1.5 rounded font-bold border {% if node.vnc %}bg-purple-900/50 text-purple-400 border-purple-800{% else %}bg-slate-800 text-slate-600 border-slate-700{% endif %}">VNC</span>
                         </div>
-
                         <button onclick="openTerminal('{{ node.ip }}')" class="mt-3 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1.5 rounded font-bold uppercase tracking-wider">Terminal öffnen</button>
                     </div>
                 {% endfor %}
@@ -119,14 +119,12 @@
                         </div>
                     </div>
                 </div>
-
                 <div class="grid-stack-item" gs-id="logs-widget" gs-w="6" gs-h="5" gs-x="6" gs-y="0">
                     <div class="grid-stack-item-content">
                         <div class="widget-header"><span>📜 System Logs</span> <span>⠿</span></div>
                         <div id="install-log">Warte auf Aufgaben...</div>
                     </div>
                 </div>
-
                 <div class="grid-stack-item" gs-id="term-widget" gs-w="12" gs-h="6" gs-x="0" gs-y="5">
                     <div class="grid-stack-item-content">
                         <div class="widget-header"><span>🖥️ Live Terminal</span> <span>⠿</span></div>
@@ -138,25 +136,55 @@
     </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" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
+                <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">Abbrechen</button>
+                    <button type="submit" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 text-sm rounded font-bold">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">
+                <input type="text" id="edit-name" name="name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required placeholder="Name">
+                <input type="text" id="edit-ip" name="ip" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required placeholder="IP">
+                <input type="text" id="edit-user" name="user" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required placeholder="SSH User">
+                <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">Abbrechen</button>
+                    <button type="submit" class="bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm rounded font-bold">Speichern</button>
+                </div>
+            </form>
+        </div>
+    </div>
 
     <script>
         let currentSettings = {};
         let termDataDisposable = null;
+        let fitAddon = new FitAddon.FitAddon();
         
+        // Icon-Helper
         function getOsIcon(osName) {
             const os = (osName || "").toLowerCase();
             if (os.includes("mac") || os.includes("darwin")) return "🍏";
             if (os.includes("win")) return "🪟";
-            if (os.includes("fedora")) return "🎩";
             if (os.includes("ubuntu")) return "🟠";
-            if (os.includes("alpine")) return "⛰️";
             if (os.includes("raspbian") || os.includes("debian") || os.includes("linux")) return "🐧";
             return "🖥️";
         }
 
+        // Modal Controls
         window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden');
         window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden');
+        window.closeEditNode = () => document.getElementById('edit-node-modal').classList.add('hidden');
         
         window.openEditNode = async function(nodeId) {
             try {
@@ -167,68 +195,117 @@
                 document.getElementById('edit-user').value = data.user;
                 document.getElementById('edit-node-form').action = `/edit_node/${nodeId}`;
                 document.getElementById('edit-node-modal').classList.remove('hidden');
-            } catch(e) { console.error(e); }
+            } catch(e) { console.error("Fehler beim Laden der Node-Daten:", e); }
         };
-        window.closeEditNode = () => document.getElementById('edit-node-modal').classList.add('hidden');
 
-        // --- VERBESSERTE REFRESH FUNKTION ---
+        // Status Update
         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}`);
-            const archBadge = document.getElementById(`arch-${nodeId}`);
-            const osIcon = document.getElementById(`os-icon-${nodeId}`);
-            const vncBadge = document.getElementById(`vnc-badge-${nodeId}`);
-            
-            if (!isAuto) {
-                badge.textContent = "PRÜFE...";
-                card.style.opacity = "0.7";
-            }
-            
+            if (!isAuto) { badge.textContent = "PRÜFE..."; card.style.opacity = "0.7"; }
             try {
                 const response = await fetch(`/refresh_status/${nodeId}`);
                 const data = await response.json();
-                
                 badge.textContent = data.status;
-                archBadge.textContent = data.arch;
-                osIcon.innerText = getOsIcon(data.os);
+                document.getElementById(`arch-${nodeId}`).textContent = data.arch;
+                document.getElementById(`os-icon-${nodeId}`).innerText = getOsIcon(data.os);
                 
-                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";
-                }
-                
-                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.includes("Offline")) {
-                    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";
-            } finally {
-                card.style.opacity = "1";
-            }
+                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.includes("Offline")) 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"; }
+            finally { card.style.opacity = "1"; }
         };
 
-        // --- Settings / Models ---
-        async function loadSettings() {
-            try {
-                const res = await fetch('/api/settings');
-                currentSettings = await res.json();
-                document.getElementById('ai-provider').value = currentSettings.provider;
-                updateModelDropdown(true);
-            } catch (e) { console.error(e); }
-        }
+        // DOMContentLoaded Init
+        document.addEventListener('DOMContentLoaded', function() {
+            // 1. GridStack (Resize all handles)
+            const grid = GridStack.init({ 
+                cellHeight: 80, margin: 10, float: true, 
+                handle: '.widget-header',
+                resizable: { handles: 'all' } 
+            });
+            const savedLayout = localStorage.getItem('pi-orch-layout-v2');
+            if (savedLayout) grid.load(JSON.parse(savedLayout));
+            grid.on('resizestop dragstop', () => {
+                localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false)));
+                if (window.term) fitAddon.fit();
+            });
 
+            // 2. Terminal
+            window.term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
+            window.term.loadAddon(fitAddon);
+            window.term.open(document.getElementById('terminal'));
+            fitAddon.fit();
+
+            // 3. Chat logic & Enter Key
+            const chatInput = document.getElementById('user-input');
+            const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
+            
+            window.sendMessage = () => {
+                if(!chatInput.value.trim()) return;
+                chatWs.send(chatInput.value);
+                appendChat("Du", chatInput.value, "text-slate-400 font-bold");
+                chatInput.value = '';
+            };
+
+            chatInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') sendMessage();
+            });
+
+            chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
+
+            window.appendChat = (user, msg, classes) => {
+                const win = document.getElementById('chat-window');
+                win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1 text-[10px] uppercase">${user}</span><div class="markdown-content text-slate-300 text-sm">${marked.parse(msg)}</div></div>`;
+                win.scrollTop = win.scrollHeight;
+            };
+
+            // 4. Terminal WS
+            window.openTerminal = (ip) => {
+                if (window.termWs) window.termWs.close();
+                window.term.clear();
+                window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
+                window.termWs.onmessage = (ev) => window.term.write(ev.data);
+                if (termDataDisposable) termDataDisposable.dispose();
+                termDataDisposable = window.term.onData(data => {
+                    if(window.termWs.readyState === 1) window.termWs.send(data);
+                });
+            };
+
+            // 5. Logs WS
+            const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
+            logWs.onmessage = (ev) => {
+                const div = document.createElement('div');
+                div.textContent = `> ${ev.data}`;
+                document.getElementById('install-log').appendChild(div);
+                document.getElementById('install-log').scrollTop = document.getElementById('install-log').scrollHeight;
+            };
+
+            // 6. Settings
+            async function loadSettings() {
+                try {
+                    const res = await fetch('/api/settings');
+                    currentSettings = await res.json();
+                    document.getElementById('ai-provider').value = currentSettings.provider;
+                    updateModelDropdown(true);
+                } catch (e) {}
+            }
+            loadSettings();
+
+            // Auto-Refresh Nodes
+            setInterval(() => {
+                document.querySelectorAll('.node-card-entry').forEach(card => {
+                    refreshNodeStatus(card.getAttribute('data-node-id'), true);
+                });
+            }, 60000);
+        });
+
+        // Provider/Model Functions (global)
         async function updateModelDropdown(isInitialLoad = false) {
             const provider = document.getElementById('ai-provider').value;
             const modelSelect = document.getElementById('ai-model');
-            const urlContainer = document.getElementById('ollama-url-container');
-            urlContainer.style.display = (provider === "ollama") ? "flex" : "none";
-            modelSelect.innerHTML = '<option>Lade...</option>';
             try {
                 const res = await fetch(`/api/models?provider=${provider}`);
                 const data = await res.json();
@@ -239,7 +316,7 @@
                     modelSelect.appendChild(opt);
                 });
                 if (isInitialLoad && currentSettings[`${provider}_model`]) modelSelect.value = currentSettings[`${provider}_model`];
-            } catch (e) { modelSelect.innerHTML = '<option>Fehler</option>'; }
+            } catch (e) {}
         }
 
         async function saveSettings() {
@@ -253,85 +330,8 @@
                 });
                 document.getElementById('settings-status').textContent = "✅ Gespeichert";
                 setTimeout(() => document.getElementById('settings-status').textContent = "", 2000);
-            } catch (e) { }
+            } catch (e) {}
         }
-
-        // --- Init ---
-        document.addEventListener('DOMContentLoaded', function() {
-            // GridStack laden
-            try {
-                // FIX: handles: 'all' hinzugefügt, damit man an jeder Seite ziehen kann
-                var grid = GridStack.init({ 
-                    cellHeight: 80, 
-                    margin: 10, 
-                    float: true, 
-                    handle: '.widget-header',
-                    resizable: { handles: 'all' } 
-                });
-                
-                const savedLayout = localStorage.getItem('pi-orch-layout-v2');
-                if (savedLayout) grid.load(JSON.parse(savedLayout));
-                grid.on('resizestop dragstop', () => localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false))));
-                grid.on('resizestop', (event, el) => {
-                // Wenn das Terminal-Widget vergrößert wurde, pass das Terminal-Layout an
-                if (el.getAttribute('gs-id') === 'term-widget') {
-                    setTimeout(() => fitAddon.fit(), 100);
-                }
-            });
-            
-            } catch(e) { console.error("GridStack Fehler:", e); }
-
-            // Terminal
-            const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
-            const fitAddon = new FitAddon.FitAddon();
-            term.loadAddon(fitAddon);
-            term.open(document.getElementById('terminal'));
-
-            // WebSockets
-            const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
-            logWs.onmessage = (ev) => {
-                const div = document.createElement('div');
-                div.textContent = `> ${ev.data}`;
-                document.getElementById('install-log').appendChild(div);
-                document.getElementById('install-log').scrollTop = document.getElementById('install-log').scrollHeight;
-            };
-
-            const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
-            chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
-
-            window.sendMessage = () => {
-                const input = document.getElementById('user-input');
-                if(!input.value.trim()) return;
-                chatWs.send(input.value);
-                appendChat("Du", input.value, "text-slate-400 font-bold");
-                input.value = '';
-            };
-
-            window.appendChat = (user, msg, classes) => {
-                const win = document.getElementById('chat-window');
-                win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1 text-[10px] uppercase">${user}</span><div class="markdown-content text-slate-300 text-sm">${marked.parse(msg)}</div></div>`;
-                win.scrollTop = win.scrollHeight;
-            };
-
-            window.openTerminal = (ip) => {
-                if (window.termWs) window.termWs.close();
-                term.clear();
-                window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
-                window.termWs.onmessage = (ev) => term.write(ev.data);
-                if (termDataDisposable) termDataDisposable.dispose();
-                termDataDisposable = term.onData(data => window.termWs.send(data));
-            };
-
-            // --- NEU: AUTO-REFRESH LOOP (Alle 60 Sek) ---
-            setInterval(() => {
-                document.querySelectorAll('.node-card-entry').forEach(card => {
-                    const nodeId = card.getAttribute('data-node-id');
-                    if(nodeId) refreshNodeStatus(nodeId, true);
-                });
-            }, 60000);
-
-            loadSettings();
-        });
     </script>
 </body>
 </html>
\ No newline at end of file
