From f852e15d6c5beb696c8c9ee02230952b55b70a6a Mon Sep 17 00:00:00 2001
From: "info@pi-farm.de" <pi-farm@noreply.git.pi-farm.de>
Date: Thu, 5 Mar 2026 19:16:48 +0000
Subject: [PATCH] templates/index.html aktualisiert

---
 templates/index.html | 355 +++++++++++++------------------------------
 1 file changed, 108 insertions(+), 247 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 671317d..3a116c3 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -110,7 +110,7 @@
         }
 
         /* Der Container für die URL */
-        .ollama-url-container {
+        #ollama-url-container {
             display: none; /* Standardmäßig versteckt */
             align-items: center;
             gap: 10px;
@@ -235,290 +235,151 @@
     </div>
 
     <script>
-        let termDataDisposable = null;
-
-        // Diese Liste definiert, welche Modelle in der Auswahl erscheinen
+        // 1. GLOBALE VARIABLEN (Ganz oben, für alle sichtbar)
         const modelOptions = {
-            google: [
-                "gemini-2.0-flash", 
-                "gemini-1.5-flash", 
-                "gemini-1.5-pro"
-            ],
-            openai: [
-                "gpt-4o", 
-                "gpt-4o-mini", 
-                "gpt-4-turbo"
-            ],
-            ollama: [
-                "llama3.2", 
-                "llama3.1", 
-                "mistral", 
-                "phi3", 
-                "qwen2.5"
-            ]
+            google: ["gemini-2.0-flash", "gemini-1.5-flash", "gemini-1.5-pro"],
+            openai: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo"],
+            ollama: ["llama3.2", "llama3.1", "mistral", "phi3"]
         };
 
         let currentSettings = {};
+        let termDataDisposable = null;
 
+        // 2. GLOBALE FUNKTIONEN (Damit das HTML onchange/onclick sie findet)
+
+        async function loadSettings() {
+            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("Fehler beim Laden:", e);
+            }
+        }
+
+        function updateModelDropdown(isInitialLoad = false) {
+            const providerSelect = document.getElementById('ai-provider');
+            const modelSelect = document.getElementById('ai-model');
+            const urlContainer = document.getElementById('ollama-url-container');
+            
+            if (!providerSelect || !urlContainer) return;
+
+            const provider = providerSelect.value;
+            console.log("Wechsel zu Provider:", provider);
+
+            // Sichtbarkeit umschalten
+            if (provider === "ollama") {
+                urlContainer.style.display = "flex";
+            } else {
+                urlContainer.style.display = "none";
+            }
+
+            // Modelle füllen
+            modelSelect.innerHTML = '';
+            const options = modelOptions[provider] || [];
+            options.forEach(m => {
+                const opt = document.createElement('option');
+                opt.value = m;
+                opt.textContent = m;
+                modelSelect.appendChild(opt);
+            });
+
+            // Gespeicherten Wert setzen
+            if (isInitialLoad && currentSettings) {
+                const savedModel = currentSettings[`${provider}_model`];
+                if (savedModel) modelSelect.value = savedModel;
+            }
+        }
+
+        async function saveSettings() {
+            const provider = document.getElementById('ai-provider').value;
+            const model = document.getElementById('ai-model').value;
+            const ollamaUrl = document.getElementById('ollama-url').value;
+            const statusEl = document.getElementById('settings-status');
+            
+            statusEl.textContent = "Speichere...";
+            
+            try {
+                await fetch('/api/settings', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ provider, model, ollama_base_url: ollamaUrl })
+                });
+                statusEl.textContent = "✅ Gespeichert!";
+                statusEl.style.color = "#2ecc71";
+            } catch (e) {
+                statusEl.textContent = "❌ Fehler";
+                statusEl.style.color = "#e74c3c";
+            }
+            setTimeout(() => statusEl.textContent = "", 3000);
+        }
+
+        // 3. INITIALISIERUNG (Wenn die Seite geladen ist)
         document.addEventListener('DOMContentLoaded', function() {
-            // 1. GridStack Initialisierung
+            // Hier nur die Gridstack/Terminal/WebSocket Initialisierung rein
+            
+            // GridStack
             var grid = GridStack.init({
-                cellHeight: 80,
-                margin: 10,
-                float: true,
-                handle: '.widget-header',
-
-                resizable: {
-                    handles: 'all'
-                }
+                cellHeight: 80, margin: 10, float: true, handle: '.widget-header'
             });
-
-            // Layout speichern/laden
-            function saveLayout() {
-                const data = grid.save(false);
-                localStorage.setItem('pi-orch-layout-v2', JSON.stringify(data));
-            }
-
             const savedData = localStorage.getItem('pi-orch-layout-v2');
-            if (savedData) {
-                try { grid.load(JSON.parse(savedData)); } catch(e) { console.error(e); }
-            }
-
-            grid.on('resizestop dragstop', function() {
-                saveLayout();
-                if (window.fitAddon) setTimeout(() => window.fitAddon.fit(), 100);
+            if (savedData) { try { grid.load(JSON.parse(savedData)); } catch(e) {} }
+            grid.on('resizestop dragstop', () => {
+                localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false)));
             });
 
-            // 2. Xterm.js Setup
-            const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true, convertEol: true });
+            // Terminal
+            const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
             window.fitAddon = new FitAddon.FitAddon();
             term.loadAddon(window.fitAddon);
             term.open(document.getElementById('terminal'));
-            setTimeout(() => window.fitAddon.fit(), 500);
-
-            // 3. WebSockets
+            
+            // WebSockets
             const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
-            const logContainer = document.getElementById('install-log');
-
             logWs.onmessage = (ev) => {
-                // 1. Neues Element erstellen statt innerHTML +=
                 const div = document.createElement('div');
                 div.textContent = `> ${ev.data}`;
-                logContainer.appendChild(div);
-
-                // 2. Zeilen begrenzen (z.B. max 500 Zeilen behalten)
-                if (logContainer.childNodes.length > 500) {
-                    logContainer.removeChild(logContainer.firstChild);
-                }
-
-                // 3. Auto-Scroll nur wenn wir am Ende sind (optional, aber CPU-schonend)
-                logContainer.scrollTop = logContainer.scrollHeight;
+                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");
 
-            // 4. Chat Funktionen
-            const userInput = document.getElementById('user-input');
-            userInput.focus();
-            userInput.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter') { e.preventDefault(); window.sendMessage(); }
-            });
-
+            // Chat Senden Funktion global machen
             window.sendMessage = function() {
-                const val = userInput.value.trim();
-                if(!val) return;
-                chatWs.send(val);
-                appendChat("Du", val, "text-slate-300 font-bold");
-                userInput.value = '';
-                userInput.focus();
+                const input = document.getElementById('user-input');
+                if(!input.value.trim()) return;
+                chatWs.send(input.value);
+                appendChat("Du", input.value, "text-slate-300 font-bold");
+                input.value = '';
             };
 
             function appendChat(user, msg, classes) {
                 const win = document.getElementById('chat-window');
-                let formattedMsg = msg;
-                if (user === "KI" && typeof marked !== 'undefined') {
-                    formattedMsg = marked.parse(msg);
-                }
-                win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1">${user}:</span><div class="markdown-content text-slate-300 text-sm leading-relaxed">${formattedMsg}</div></div>`;
+                let formattedMsg = (user === "KI") ? marked.parse(msg) : msg;
+                win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1">${user}:</span><div class="markdown-content text-slate-300 text-sm">${formattedMsg}</div></div>`;
                 win.scrollTop = win.scrollHeight;
             }
 
-            // 5. Node Funktionen
+            // Node Funktionen global machen
             window.openTerminal = function(ip) {
-
-                // alte websocket schließen
-                if (window.termWs) {
-                    window.termWs.close();
-                    window.termWs = null;
-                }
-
-                // alten onData listener entfernen ✅
-                if (termDataDisposable) {
-                    termDataDisposable.dispose();
-                    termDataDisposable = null;
-                }
-
+                if (window.termWs) window.termWs.close();
+                if (termDataDisposable) termDataDisposable.dispose();
                 term.clear();
-                term.write(`\r\n\x1b[34m>>> Verbinde mit ${ip}...\x1b[0m\r\n`);
-
                 window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
-
-                window.termWs.onmessage = (ev) => {
-                    term.write(ev.data);
-                };
-
-                window.termWs.onclose = () => {
-                    term.write("\r\n\x1b[31m[Session beendet]\x1b[0m\r\n");
-                };
-
-                // NEUEN listener registrieren
+                window.termWs.onmessage = (ev) => term.write(ev.data);
                 termDataDisposable = term.onData(data => {
-                    if (window.termWs &&
-                        window.termWs.readyState === WebSocket.OPEN) {
-                        window.termWs.send(data);
-                    }
+                    if (window.termWs?.readyState === WebSocket.OPEN) window.termWs.send(data);
                 });
-
-                setTimeout(() => window.fitAddon.fit(), 100);
             };
 
-            window.addNode = async function() {
-                const name = prompt("Node Name:");
-                const ip = prompt("IP Adresse:");
-                const user = prompt("Benutzername:", "pi");
-                const pass = prompt("SSH Passwort:");
-                if (name && ip && pass) {
-                    const fd = new FormData();
-                    fd.append('name', name); fd.append('ip', ip);
-                    fd.append('user', user); fd.append('password', pass);
-                    const response = await fetch('/add_node', { method: 'POST', body: fd });
-                    if (response.ok) location.reload();
-                }
-            };
-
-            window.refreshNodeStatus = async function(nodeId) {
-                const badge = document.getElementById(`badge-${nodeId}`);
-                const led = document.getElementById(`led-${nodeId}`);
-                badge.innerText = "Prüfe...";
-                try {
-                    const r = await fetch(`/refresh_status/${nodeId}`);
-                    const d = await r.json();
-                    badge.innerText = d.status;
-                    if (d.status === "Docker Aktiv") {
-                        led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
-                    } else {
-                        led.className = "h-2 w-2 rounded-full bg-yellow-500";
-                    }
-                } catch (e) { badge.innerText = "Fehler"; }
-            };
-
-            // Bekannte Standard-Modelle für das Dropdown
-            const modelOptions = {
-                google: ["gemini-2.5-flash", "gemini-2.5-pro", "gemini-2.0-flash"],
-                openai: ["gpt-4o", "gpt-4-turbo", "gpt-3.5-turbo"],
-                ollama: ["llama3", "mistral", "qwen"]
-            };
-
-            async function loadSettings() {
-                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("Fehler beim Laden der Einstellungen:", e);
-                }
-            }
-
-            function updateModelDropdown(isInitialLoad = false) {
-                const providerSelect = document.getElementById('ai-provider');
-                const modelSelect = document.getElementById('ai-model');
-                const urlContainer = document.getElementById('ollama-url-container');
-                
-                if (!providerSelect || !urlContainer) {
-                    console.error("Fehler: HTML Elemente nicht gefunden!");
-                    return;
-                }
-
-                const provider = providerSelect.value;
-                console.log("Gewählter Provider:", provider); // Debug-Ausgabe für die Konsole
-
-                // 1. Sichtbarkeit umschalten mit !important-Logik über JS
-                if (provider === "ollama") {
-                    urlContainer.setAttribute("style", "display: flex !important");
-                } else {
-                    urlContainer.setAttribute("style", "display: none !important");
-                }
-
-                // 2. Dropdown befüllen
-                if (modelSelect) {
-                    modelSelect.innerHTML = ''; 
-                    const options = modelOptions[provider] || [];
-                    
-                    options.forEach(m => {
-                        const opt = document.createElement('option');
-                        opt.value = m;
-                        opt.textContent = m;
-                        modelSelect.appendChild(opt);
-                    });
-
-                    // 3. Wert beim Laden setzen
-                    if (isInitialLoad && currentSettings) {
-                        const savedModel = currentSettings[`${provider}_model`];
-                        if (savedModel) {
-                            // Falls das Modell nicht in der Liste ist, hinzufügen
-                            if (!options.includes(savedModel)) {
-                                const opt = document.createElement('option');
-                                opt.value = savedModel;
-                                opt.textContent = savedModel;
-                                modelSelect.appendChild(opt);
-                            }
-                            modelSelect.value = savedModel;
-                        }
-                    }
-                }
-            }
-
-            async function saveSettings() {
-                const provider = document.getElementById('ai-provider').value;
-                const model = document.getElementById('ai-model').value;
-                const ollamaUrl = document.getElementById('ollama-url').value; // NEU
-                const statusEl = document.getElementById('settings-status');
-                
-                statusEl.textContent = "Speichere...";
-                statusEl.style.color = "#f1c40f";
-                
-                try {
-                    await fetch('/api/settings', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ 
-                            provider: provider, 
-                            model: model,
-                            ollama_base_url: ollamaUrl // NEU
-                        })
-                    });
-                    
-                    statusEl.textContent = "✅ Gespeichert!";
-                    statusEl.style.color = "#2ecc71";
-                    
-                    currentSettings.provider = provider;
-                    currentSettings[`${provider}_model`] = model;
-                    currentSettings.ollama_base_url = ollamaUrl;
-                    
-                } catch (e) {
-                    statusEl.textContent = "❌ Fehler";
-                    statusEl.style.color = "#e74c3c";
-                }
-                
-                setTimeout(() => statusEl.textContent = "", 3000);
-            }
-            // Einstellungen beim Laden der Seite abrufen
-            window.addEventListener('DOMContentLoaded', loadSettings);
+            // Jetzt die Einstellungen laden
+            loadSettings();
         });
     </script>
 </body>