From 3d5a4ae89c3de2bb759c4894e196eab076dc0b8d 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:27:16 +0000
Subject: [PATCH] templates/index.html aktualisiert

---
 templates/index.html | 165 +++++++++++++++++++------------------------
 1 file changed, 73 insertions(+), 92 deletions(-)

diff --git a/templates/index.html b/templates/index.html
index 664a0d1..151774e 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -113,103 +113,84 @@
     </div>
 
     <script>
-        // --- GridStack Setup mit Speicherfunktion ---
-        var grid = GridStack.init({
-            cellHeight: 70,
-            margin: 5,
-            resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
-        });
+        document.addEventListener('DOMContentLoaded', function() {
+            // 1. GridStack initialisieren
+            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' }
+            });
 
-        function saveLayout() {
-            const data = grid.save();
-            localStorage.setItem('grid-layout', JSON.stringify(data));
-        }
-
-        function loadLayout() {
-            const data = localStorage.getItem('grid-layout');
-            if (data) {
-                grid.load(JSON.parse(data));
+            // 2. Speicher-Funktionen
+            function saveLayout() {
+                const data = grid.save(false); // false = nur Positionen, nicht der Inhalt
+                localStorage.setItem('grid-layout-v1', JSON.stringify(data));
+                console.log("Layout gespeichert");
             }
-        }
 
-        grid.on('dragstop resizestop', function() {
-            saveLayout();
-            if (fitAddon) fitAddon.fit();
-        });
-
-        loadLayout();
-
-        // --- Xterm.js Setup mit FitAddon ---
-        const term = new Terminal({ 
-            theme: { background: '#000', foreground: '#fff' }, 
-            fontSize: 13, 
-            cursorBlink: true,
-            fontFamily: 'Courier New, monospace'
-        });
-        const fitAddon = new FitAddon.FitAddon();
-        term.loadAddon(fitAddon);
-        term.open(document.getElementById('terminal'));
-        
-        // Terminal sofort anpassen
-        setTimeout(() => fitAddon.fit(), 200);
-
-        // --- WebSocket Logik ---
-        let termWs = null;
-        function openTerminal(ip) {
-            if(termWs) termWs.close();
-            term.clear();
-            term.write(`\r\n\x1b[34m>>> Verbinde mit ${ip}...\x1b[0m\r\n`);
-            
-            termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
-            termWs.onmessage = (ev) => term.write(ev.data);
-            term.onData(data => { if(termWs) termWs.send(data); });
-            
-            // Terminal Größe beim Öffnen anpassen
-            fitAddon.fit();
-        }
-
-        const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
-        logWs.onmessage = (ev) => {
-            const l = document.getElementById('install-log');
-            l.innerHTML += `<div class="border-b border-slate-800/50 pb-1 mb-1">> ${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");
-        };
-
-        function sendMessage() {
-            const input = document.getElementById('user-input');
-            if(!input.value) 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');
-            win.innerHTML += `<div class="mb-2"><span class="${classes}">${user}:</span> <span class="text-slate-200">${msg}</span></div>`;
-            win.scrollTop = win.scrollHeight;
-        }
-
-        async function addNode() {
-            const name = prompt("Node Name:");
-            const ip = prompt("IP Adresse:");
-            const pass = prompt("SSH Passwort (für Key-Copy):");
-            if(name && ip && pass) {
-                const fd = new FormData();
-                fd.append('name', name); fd.append('ip', ip);
-                fd.append('user', 'pi'); fd.append('password', pass);
-                await fetch('/add_node', { method: 'POST', body: fd });
-                location.reload();
+            function loadLayout() {
+                const data = localStorage.getItem('grid-layout-v1');
+                if (data) {
+                    const parsedData = JSON.parse(data);
+                    grid.load(parsedData);
+                }
             }
-        }
 
-        // Window Resize Handling
-        window.addEventListener('resize', () => {
-            fitAddon.fit();
+            // 3. Erst laden, dann Events binden
+            loadLayout();
+
+            // Events binden erst nachdem das Layout steht
+            grid.on('dragstop resizestop', function() {
+                saveLayout();
+                if (typeof fitAddon !== 'undefined') {
+                    setTimeout(() => fitAddon.fit(), 100);
+                }
+            });
+
+            // --- Xterm.js Setup ---
+            const term = new Terminal({ 
+                theme: { background: '#000' }, 
+                fontSize: 13, 
+                cursorBlink: true 
+            });
+            const fitAddon = new FitAddon.FitAddon();
+            term.loadAddon(fitAddon);
+            term.open(document.getElementById('terminal'));
+            
+            // Kleiner Fix: Terminal anpassen wenn die Box geladen wurde
+            setTimeout(() => 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);
+            };
+
+            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 = '';
+            };
+
+            function appendChat(user, msg, classes) {
+                const win = document.getElementById('chat-window');
+                win.innerHTML += `<div class="mb-2"><span class="${classes}">${user}:</span> ${msg}</div>`;
+                win.scrollTop = win.scrollHeight;
+            }
         });
     </script>
 </body>