templates/index.html aktualisiert

templates/index.html

@@ -77,82 +77,30 @@
             border-bottom: 1px solid #334155;
         }
 
-        .toolbar-title {
+        .toolbar-title { font-weight: bold; font-size: 1.1em; color: #38bdf8; }
-            font-weight: bold;
+        .toolbar-controls { display: flex; align-items: center; gap: 10px; }
-            font-size: 1.1em;
+        .toolbar-controls label { white-space: nowrap; font-size: 12px; color: #94a3b8; }
-            color: #38bdf8;
+        #ollama-url-container { display: none; align-items: center; gap: 8px; border-left: 1px solid #475569; padding-left: 12px; }
-        }
-
-        .toolbar-controls {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .toolbar-controls label {
-            white-space: nowrap;
-            font-size: 12px;
-            color: #94a3b8;
-        }
-
-        #ollama-url-container {
-            display: none;
-            align-items: center;
-            gap: 8px;
-            border-left: 1px solid #475569;
-            padding-left: 12px;
-        }
 
         .toolbar-controls select, 
         .toolbar-controls input {
-            height: 32px;
+            height: 32px; background: #0f172a; color: white; border: 1px solid #475569;
-            background: #0f172a;
+            border-radius: 4px; padding: 0 8px; font-size: 12px; outline: none;
-            color: white;
-            border: 1px solid #475569;
-            border-radius: 4px;
-            padding: 0 8px;
-            font-size: 12px;
-            outline: none;
         }
 
         .toolbar-controls select:focus, 
-        .toolbar-controls input:focus {
+        .toolbar-controls input:focus { border-color: #38bdf8; }
-            border-color: #38bdf8;
-        }
 
-        /* Schicke Toolbar-Buttons */
         .btn-tool {
-            height: 32px;
+            height: 32px; padding: 0 12px; border-radius: 4px; font-size: 12px;
-            padding: 0 12px;
+            font-weight: bold; transition: all 0.2s; display: flex; align-items: center; gap: 5px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: bold;
-            transition: all 0.2s;
-            display: flex;
-            align-items: center;
-            gap: 5px;
         }
-
+        .save-btn { background-color: #059669; color: white; }
-        .save-btn {
-            background-color: #059669;
-            color: white;
-        }
-
         .save-btn:hover { background-color: #10b981; }
-
+        .add-node-btn { background-color: #2563eb; color: white; }
-        .add-node-btn {
-            background-color: #2563eb;
-            color: white;
-        }
-
         .add-node-btn:hover { background-color: #3b82f6; }
 
-        #settings-status {
+        #settings-status { color: #10b981; font-size: 11px; min-width: 80px; }
-            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; }
         .markdown-content code { font-family: monospace; color: #4ade80; }
         .markdown-content p { margin-bottom: 8px; }
@@ -162,29 +110,23 @@
     
     <div class="top-toolbar">
         <div class="toolbar-title">🤖 KI-Orchestrator</div>
-        
         <div class="toolbar-controls">
             <button onclick="addNode()" class="btn-tool add-node-btn">
                 <span>+</span> Node hinzufügen
             </button>
-
             <div class="h-6 w-px bg-slate-700 mx-2"></div>
-
             <label for="ai-provider">Provider:</label>
             <select id="ai-provider" onchange="updateModelDropdown(false)">
                 <option value="google">Google Gemini</option>
                 <option value="openai">OpenAI</option>
                 <option value="ollama">Ollama</option>
             </select>
-            
             <label for="ai-model">Modell:</label>
             <select id="ai-model"></select>
-            
             <div id="ollama-url-container">
                 <label for="ollama-url">URL:</label>
                 <input type="text" id="ollama-url" onblur="updateModelDropdown(false)" placeholder="http://192.168.x.x:11434/v1">
             </div>
-            
             <button class="btn-tool save-btn" onclick="saveSettings()">Speichern</button>
             <span id="settings-status"></span>
         </div>
@@ -192,27 +134,42 @@
 
     <div class="flex h-screen">
         <div class="w-64 bg-slate-900 border-r border-slate-800 p-4 flex flex-col">
-<!--            <h2 class="text-xl font-bold mb-4 flex items-center gap-2">
-                <span class="text-blue-400">📍</span> 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" id="node-card-{{ node.id }}">
+                        
                         <div class="flex justify-between items-start">
-                            <div class="text-sm font-bold">{{ node.name }}</div>
+                            <div class="text-sm font-bold flex items-center gap-1.5 cursor-pointer hover:text-blue-400" onclick="openEditNode({{ node.id }})">
-                            <form action="/remove_node/{{ node.id }}" method="post">
+                                <span id="os-icon-{{ node.id }}" class="text-lg" title="{{ node.os }}">🖥️</span>
-                                <button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
+                                <span>{{ node.name }}</span>
-                            </form>
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <button onclick="openEditNode({{ node.id }})" class="text-slate-500 hover:text-blue-400 text-xs" title="Bearbeiten">✏️</button>
+                                <form action="/remove_node/{{ node.id }}" method="post" class="inline m-0 p-0">
+                                    <button type="submit" class="text-slate-500 hover:text-red-500 text-xs" title="Löschen">✕</button>
+                                </form>
+                            </div>
                         </div>
-                        <div class="text-[10px] text-slate-500 font-mono flex justify-between items-center">
+                        
+                        <div class="text-[10px] text-slate-400 font-mono flex justify-between items-center mt-1">
                             {{ node.ip }}
-                            <button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400">🔄</button>
+                            <span id="arch-{{ node.id }}" class="bg-slate-900 border border-slate-700 px-1.5 rounded">{{ node.arch }}</span>
                         </div>
-                        <div class="mt-1 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] {% else %} bg-yellow-500 {% endif %}"></span>
+                        <div class="mt-2 flex items-center justify-between">
-                            <span id="badge-{{ node.id }}" class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</span>
+                            <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 node.status == 'Offline/Fehler' %} bg-red-500 shadow-[0_0_8px_#ef4444] {% else %} bg-yellow-500 {% endif %}"></span>
+                                <span id="badge-{{ node.id }}" class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</span>
+                            </div>
+                            <button onclick="refreshNodeStatus({{ node.id }})" class="text-slate-500 hover:text-blue-400 text-[10px]" title="Status aktualisieren">🔄</button>
                         </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 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 transition-colors font-bold uppercase tracking-wider">Terminal öffnen</button>
                     </div>
                 {% endfor %}
             </div>
@@ -250,16 +207,42 @@
     </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">
+        <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">Neuen Node hinzufügen</h3>
+            <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-4">
+            <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>
+                <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>
-                <div class="flex justify-end gap-2 pt-2">
+                <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">
-                    <button type="button" onclick="closeAddNode()" class="px-4 py-2 text-sm text-slate-400">Abbrechen</button>
+                
-                    <button type="submit" class="bg-blue-600 px-4 py-2 text-sm rounded font-bold">Koppeln</button>
+                <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>
@@ -268,44 +251,64 @@
     <script>
         let currentSettings = {};
         let termDataDisposable = null;
-        const modelOptions = { google: [], openai: [], ollama: [] }; // Wird vom Backend befüllt
+        
+        // --- Hilfsfunktion für OS Icons ---
+        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 "🖥️";
+        }
 
-        // 1. CHAT LOGIK (Mit Enter und Fokus)
+        // --- Modals Steuerung ---
+        window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden');
+        window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden');
+        
+        window.openEditNode = async function(nodeId) {
+            try {
+                const res = await fetch(`/api/node/${nodeId}`);
+                const data = await res.json();
+                if(data.error) { alert(data.error); return; }
+                
+                document.getElementById('edit-name').value = data.name;
+                document.getElementById('edit-ip').value = data.ip;
+                document.getElementById('edit-user').value = data.user;
+                document.getElementById('edit-sudo').value = data.sudo_pass || "";
+                document.getElementById('edit-node-form').action = `/edit_node/${nodeId}`;
+                document.getElementById('edit-node-modal').classList.remove('hidden');
+            } catch(e) { console.error("Fehler beim Laden der Node-Daten:", e); }
+        };
+        window.closeEditNode = () => document.getElementById('edit-node-modal').classList.add('hidden');
+
+        // --- Chat Logik ---
         function initChat(chatWs) {
             const input = document.getElementById('user-input');
-            
             window.sendMessage = function() {
                 const msg = input.value.trim();
                 if(!msg) return;
                 chatWs.send(msg);
                 appendChat("Du", msg, "text-slate-400 font-bold");
                 input.value = '';
-                input.focus(); // Fokus zurücksetzen
+                input.focus();
             };
-
             input.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter') {
+                if (e.key === 'Enter') { e.preventDefault(); sendMessage(); }
-                    e.preventDefault();
-                    sendMessage();
-                }
             });
         }
 
-        // 2. NODE MODAL LOGIK
+        // --- Status Update mit neuen OS & Arch Werten ---
-        window.addNode = function() {
-            document.getElementById('add-node-modal').classList.remove('hidden');
-        };
-        window.closeAddNode = function() {
-            document.getElementById('add-node-modal').classList.add('hidden');
-        };
-
-        // 3. Node Status aktualisieren ---
         window.refreshNodeStatus = async function(nodeId) {
             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 vncBadge = document.getElementById(`vnc-badge-${nodeId}`);
+            const osIcon = document.getElementById(`os-icon-${nodeId}`);
             
-            // Optisches Feedback: Karte leicht ausgrauen und Text ändern
             badge.textContent = "PRÜFE...";
             card.style.opacity = "0.7";
             
@@ -313,10 +316,20 @@
                 const response = await fetch(`/refresh_status/${nodeId}`);
                 const data = await response.json();
                 
-                // Status Text aktualisieren
+                // Texte & Icons aktualisieren
                 badge.textContent = data.status;
+                archBadge.textContent = data.arch;
+                osIcon.innerText = getOsIcon(data.os);
+                osIcon.title = data.os;
                 
-                // LED Farbe dynamisch anpassen
+                // 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") {
@@ -326,13 +339,13 @@
                 }
             } catch (e) {
                 badge.textContent = "FEHLER";
-                led.className = "h-2 w-2 rounded-full bg-red-500";
+                led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]";
             } finally {
                 card.style.opacity = "1";
             }
         };
 
-        // 4. SETTINGS & MODEL LOGIK
+        // --- Settings & Models ---
         async function loadSettings() {
             try {
                 const res = await fetch('/api/settings');
@@ -340,7 +353,7 @@
                 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("Load Settings Error", e); }
+            } catch (e) { console.error(e); }
         }
 
         async function updateModelDropdown(isInitialLoad = false) {
@@ -363,11 +376,10 @@
                         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 beim Laden</option>'; }
+            } catch (e) { modelSelect.innerHTML = '<option>Fehler</option>'; }
         }
 
         async function saveSettings() {
@@ -387,22 +399,22 @@
             } catch (e) { statusEl.textContent = "❌ Fehler"; }
         }
 
-        // 5. INITIALISIERUNG
+        // --- Init ---
         document.addEventListener('DOMContentLoaded', function() {
-            // GridStack mit allen Resize-Handles
+            
+            // Setze initiale OS Icons basierend auf den Server-Daten
+            {% for node in nodes %}
+                document.getElementById('os-icon-{{ node.id }}').innerText = getOsIcon("{{ node.os }}");
+            {% endfor %}
+
             var grid = GridStack.init({
                 cellHeight: 80, margin: 10, float: true, 
-                handle: '.widget-header',
+                handle: '.widget-header', resizable: { handles: 'all' }
-                resizable: { handles: 'all' } // Erlaubt Resize an allen Seiten
             });
-
             const savedLayout = localStorage.getItem('pi-orch-layout-v2');
             if (savedLayout) { try { grid.load(JSON.parse(savedLayout)); } catch(e){} }
-            grid.on('resizestop dragstop', () => {
+            grid.on('resizestop dragstop', () => localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false))));
-                localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false)));
-            });
 
-            // Terminal & WebSockets
             const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
             const fitAddon = new FitAddon.FitAddon();
             term.loadAddon(fitAddon);