templates/index.html aktualisiert

templates/index.html

@@ -4,6 +4,7 @@
     <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>
@@ -136,7 +137,9 @@
         <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" id="node-card-{{ node.id }}">
+                    <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 }})">
@@ -206,48 +209,6 @@
         </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;
@@ -300,8 +261,9 @@
             });
         }
 
-        // --- Status Update mit neuen OS & Arch Werten ---
+        // --- VERBESSERTE REFRESH FUNKTION ---
-        window.refreshNodeStatus = async function(nodeId) {
+        // isAuto verhindert das Flackern von "PRÜFE..." beim Hintergrund-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}`);
@@ -309,104 +271,53 @@
             const vncBadge = document.getElementById(`vnc-badge-${nodeId}`);
             const osIcon = document.getElementById(`os-icon-${nodeId}`);
             
-            badge.textContent = "PRÜFE...";
+            if (!isAuto) {
-            card.style.opacity = "0.7";
+                badge.textContent = "PRÜFE...";
+                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") {
+                } else if (data.status === "Offline/Fehler" || data.status === "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) {
-                badge.textContent = "FEHLER";
+                if(!isAuto) badge.textContent = "FEHLER";
                 led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]";
             } finally {
                 card.style.opacity = "1";
             }
         };
 
-        // --- Settings & Models ---
+        // --- Settings & Models (unverändert) ---
-        async function loadSettings() {
+        // ... (hier kommt dein bestehender Code für loadSettings, updateModelDropdown etc.) ...
-            try {
-                const res = await fetch('/api/settings');
-                currentSettings = await res.json();
-                document.getElementById('ai-provider').value = currentSettings.provider;
-                document.getElementById('ollama-url').value = currentSettings.ollama_base_url || "http://127.0.0.1:11434/v1";
-                updateModelDropdown(true);
-            } catch (e) { console.error(e); }
-        }
 
-        async function updateModelDropdown(isInitialLoad = false) {
+        // --- INIT & AUTO-REFRESH ---
-            const provider = document.getElementById('ai-provider').value;
-            const modelSelect = document.getElementById('ai-model');
-            const urlContainer = document.getElementById('ollama-url-container');
-            const ollamaUrl = document.getElementById('ollama-url').value;
-
-            urlContainer.style.display = (provider === "ollama") ? "flex" : "none";
-            modelSelect.innerHTML = '<option>Lade...</option>';
-
-            try {
-                const res = await fetch(`/api/models?provider=${provider}&url=${encodeURIComponent(ollamaUrl)}`);
-                const data = await res.json();
-                modelSelect.innerHTML = '';
-                
-                if (data.models && data.models.length > 0) {
-                    data.models.forEach(m => {
-                        const opt = document.createElement('option');
-                        opt.value = opt.textContent = m;
-                        modelSelect.appendChild(opt);
-                    });
-                    const savedModel = currentSettings[`${provider}_model`];
-                    if (isInitialLoad && savedModel) modelSelect.value = savedModel;
-                }
-            } catch (e) { modelSelect.innerHTML = '<option>Fehler</option>'; }
-        }
-
-        async function saveSettings() {
-            const provider = document.getElementById('ai-provider').value;
-            const model = document.getElementById('ai-model').value;
-            const ollama_base_url = document.getElementById('ollama-url').value;
-            const statusEl = document.getElementById('settings-status');
-
-            try {
-                await fetch('/api/settings', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ provider, model, ollama_base_url })
-                });
-                statusEl.textContent = "✅ Gespeichert";
-                setTimeout(() => statusEl.textContent = "", 2000);
-            } catch (e) { statusEl.textContent = "❌ Fehler"; }
-        }
-
-        // --- Init ---
         document.addEventListener('DOMContentLoaded', function() {
             
-            // Setze initiale OS Icons basierend auf den Server-Daten
+            // Setze initiale OS Icons
             {% 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' }
@@ -415,40 +326,17 @@
             if (savedLayout) { try { grid.load(JSON.parse(savedLayout)); } catch(e){} }
             grid.on('resizestop dragstop', () => localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false))));
 
-            const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
+            // Terminal, Logs, Chat Init (unverändert)
-            const fitAddon = new FitAddon.FitAddon();
+            // ... (bestehende WebSocket-Logik hier lassen) ...
-            term.loadAddon(fitAddon);
-            term.open(document.getElementById('terminal'));
 
-            const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
+            // --- NEU: AUTO REFRESH LOOP (Alle 60 Sek) ---
-            logWs.onmessage = (ev) => {
+            setInterval(() => {
-                const div = document.createElement('div');
+                console.log("Auto-Refresh der Node-Badges...");
-                div.textContent = `> ${ev.data}`;
+                document.querySelectorAll('.node-card-entry').forEach(card => {
-                document.getElementById('install-log').appendChild(div);
+                    const nodeId = card.getAttribute('data-node-id');
-                document.getElementById('install-log').scrollTop = document.getElementById('install-log').scrollHeight;
+                    if(nodeId) refreshNodeStatus(nodeId, true); // true = silent refresh
-            };
-
-            const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
-            chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
-            initChat(chatWs);
-
-            window.appendChat = function(user, msg, classes) {
-                const win = document.getElementById('chat-window');
-                let formattedMsg = (user === "KI") ? marked.parse(msg) : msg;
-                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">${formattedMsg}</div></div>`;
-                win.scrollTop = win.scrollHeight;
-            };
-
-            window.openTerminal = function(ip) {
-                if (window.termWs) window.termWs.close();
-                if (termDataDisposable) termDataDisposable.dispose();
-                term.clear();
-                window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
-                window.termWs.onmessage = (ev) => term.write(ev.data);
-                termDataDisposable = term.onData(data => {
-                    if (window.termWs?.readyState === WebSocket.OPEN) window.termWs.send(data);
                 });
-            };
+            }, 60000);
 
             loadSettings();
         });