From 9c643c27c065bd6898756de1dd63a198fa9fc67a Mon Sep 17 00:00:00 2001
From: "info@pi-farm.de" <pi-farm@noreply.git.pi-farm.de>
Date: Wed, 4 Mar 2026 12:39:25 +0000
Subject: [PATCH] templates/index.html aktualisiert

---
 templates/index.html | 83 +++++++++++++++++++++-----------------------
 1 file changed, 40 insertions(+), 43 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 151774e..34dbedc 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,12 +5,12 @@
     <title>Pi-Orchestrator AI Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
     
-    <link href="https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack.min.css" rel="stylesheet"/>
-    <script src="https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack.all.js"></script>
+    <link href="/static/gridstack.min.css" rel="stylesheet"/>
+    <script src="/static/gridstack.all.js"></script>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.1.0/css/xterm.css" />
-    <script src="https://cdn.jsdelivr.net/npm/xterm@5.1.0/lib/xterm.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.7.0/lib/xterm-addon-fit.js"></script>
+    <link rel="stylesheet" href="/static/xterm.css" />
+    <script src="/static/xterm.js"></script>
+    <script src="/static/xterm-addon-fit.js"></script>
     
     <style>
         .grid-stack { background: #0f172a; min-height: 100vh; }
@@ -115,77 +115,74 @@
     <script>
         document.addEventListener('DOMContentLoaded', function() {
             // 1. GridStack initialisieren
+            // WICHTIG: staticGrid: false erlaubt das Verschieben
             var grid = GridStack.init({
                 cellHeight: 70,
                 margin: 5,
-                float: true, // Erlaubt freies Verschieben ohne automatisches Nachrücken nach oben
-                handle: '.widget-header', // NUR der Header ist zum Ziehen da
-                resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
+                float: true,
+                handle: '.widget-header', 
+                resizable: { handles: 'se, sw, ne, nw, e, w, s, n' },
+                staticGrid: false 
             });
 
-            // 2. Speicher-Funktionen
+            // 2. Layout-Speicher Logik
             function saveLayout() {
-                const data = grid.save(false); // false = nur Positionen, nicht der Inhalt
+                const data = grid.save(false);
                 localStorage.setItem('grid-layout-v1', JSON.stringify(data));
-                console.log("Layout gespeichert");
             }
 
             function loadLayout() {
                 const data = localStorage.getItem('grid-layout-v1');
                 if (data) {
-                    const parsedData = JSON.parse(data);
-                    grid.load(parsedData);
+                    grid.load(JSON.parse(data));
                 }
             }
 
-            // 3. Erst laden, dann Events binden
+            // Erst laden, dann Events aktivieren
             loadLayout();
 
-            // Events binden erst nachdem das Layout steht
             grid.on('dragstop resizestop', function() {
                 saveLayout();
-                if (typeof fitAddon !== 'undefined') {
-                    setTimeout(() => fitAddon.fit(), 100);
-                }
+                if (window.fitAddon) window.fitAddon.fit();
             });
 
-            // --- Xterm.js Setup ---
-            const term = new Terminal({ 
-                theme: { background: '#000' }, 
-                fontSize: 13, 
-                cursorBlink: true 
-            });
-            const fitAddon = new FitAddon.FitAddon();
-            term.loadAddon(fitAddon);
+            // 3. Xterm.js Setup
+            const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true });
+            window.fitAddon = new FitAddon.FitAddon();
+            term.loadAddon(window.fitAddon);
             term.open(document.getElementById('terminal'));
-            
-            // Kleiner Fix: Terminal anpassen wenn die Box geladen wurde
-            setTimeout(() => fitAddon.fit(), 500);
+            setTimeout(() => window.fitAddon.fit(), 500);
 
-            // --- WebSockets & Restliche Funktionen ---
-            // (Hier den Rest deiner WebSocket-Logik einfügen wie gehabt)
-            
-            // Beispiel für die globale Erreichbarkeit der Funktionen
-            window.openTerminal = function(ip) {
-                // ... dein bisheriger Code ...
-                if(window.termWs) window.termWs.close();
-                term.clear();
-                term.write(`\r\n>>> Verbinde mit ${ip}...\r\n`);
-                window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
-                window.termWs.onmessage = (ev) => term.write(ev.data);
-                term.onData(data => { if(window.termWs) window.termWs.send(data); });
-                setTimeout(() => fitAddon.fit(), 100);
+            // 4. WebSockets (Chat & Logs)
+            const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
+            logWs.onmessage = (ev) => {
+                const l = document.getElementById('install-log');
+                l.innerHTML += `<div>> ${ev.data}</div>`;
+                l.scrollTop = l.scrollHeight;
             };
 
+            const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
+            chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
+
+            // Globale Funktionen für Buttons
             window.sendMessage = function() {
                 const input = document.getElementById('user-input');
                 if(!input.value) return;
-                // chatWs muss hier natürlich definiert sein
                 chatWs.send(input.value);
                 appendChat("Du", input.value, "text-slate-300 font-bold");
                 input.value = '';
             };
 
+            window.openTerminal = function(ip) {
+                if(window.termWs) window.termWs.close();
+                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);
+                term.onData(data => { if(window.termWs) window.termWs.send(data); });
+                setTimeout(() => window.fitAddon.fit(), 100);
+            };
+
             function appendChat(user, msg, classes) {
                 const win = document.getElementById('chat-window');
                 win.innerHTML += `<div class="mb-2"><span class="${classes}">${user}:</span> ${msg}</div>`;