templates/index.html aktualisiert

templates/index.html

@@ -113,103 +113,84 @@
     </div>
 
     <script>
-        // --- GridStack Setup mit Speicherfunktion ---
+        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' }
             });
 
+            // 2. Speicher-Funktionen
             function saveLayout() {
-            const data = grid.save();
+                const data = grid.save(false); // false = nur Positionen, nicht der Inhalt
-            localStorage.setItem('grid-layout', JSON.stringify(data));
+                localStorage.setItem('grid-layout-v1', JSON.stringify(data));
+                console.log("Layout gespeichert");
             }
 
             function loadLayout() {
-            const data = localStorage.getItem('grid-layout');
+                const data = localStorage.getItem('grid-layout-v1');
                 if (data) {
-                grid.load(JSON.parse(data));
+                    const parsedData = JSON.parse(data);
+                    grid.load(parsedData);
                 }
             }
 
-        grid.on('dragstop resizestop', function() {
+            // 3. Erst laden, dann Events binden
-            saveLayout();
-            if (fitAddon) fitAddon.fit();
-        });
-
             loadLayout();
 
-        // --- Xterm.js Setup mit FitAddon ---
+            // 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', foreground: '#fff' }, 
+                theme: { background: '#000' }, 
                 fontSize: 13, 
-            cursorBlink: true,
+                cursorBlink: true 
-            fontFamily: 'Courier New, monospace'
             });
             const fitAddon = new FitAddon.FitAddon();
             term.loadAddon(fitAddon);
             term.open(document.getElementById('terminal'));
             
-        // Terminal sofort anpassen
+            // Kleiner Fix: Terminal anpassen wenn die Box geladen wurde
-        setTimeout(() => fitAddon.fit(), 200);
+            setTimeout(() => fitAddon.fit(), 500);
 
-        // --- WebSocket Logik ---
+            // --- WebSockets & Restliche Funktionen ---
-        let termWs = null;
+            // (Hier den Rest deiner WebSocket-Logik einfügen wie gehabt)
-        function openTerminal(ip) {
+            
-            if(termWs) termWs.close();
+            // 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\x1b[34m>>> Verbinde mit ${ip}...\x1b[0m\r\n`);
+                term.write(`\r\n>>> Verbinde mit ${ip}...\r\n`);
-            
+                window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
-            termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
+                window.termWs.onmessage = (ev) => term.write(ev.data);
-            termWs.onmessage = (ev) => term.write(ev.data);
+                term.onData(data => { if(window.termWs) window.termWs.send(data); });
-            term.onData(data => { if(termWs) termWs.send(data); });
+                setTimeout(() => fitAddon.fit(), 100);
-            
-            // 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`);
+            window.sendMessage = function() {
-        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 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> <span class="text-slate-200">${msg}</span></div>`;
+                win.innerHTML += `<div class="mb-2"><span class="${classes}">${user}:</span> ${msg}</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();
-            }
-        }
-
-        // Window Resize Handling
-        window.addEventListener('resize', () => {
-            fitAddon.fit();
         });
     </script>
 </body>