From 784474643868fa4b9f67bade3e075bdb3bda4037 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:18:54 +0000
Subject: [PATCH] templates/index.html aktualisiert

---
 templates/index.html | 147 ++++++++++++++++++++++++++++---------------
 1 file changed, 96 insertions(+), 51 deletions(-)
diff --git a/templates/index.html b/templates/index.html
index 14fa0c6..664a0d1 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -10,6 +10,7 @@
 
     <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>
     
     <style>
         .grid-stack { background: #0f172a; min-height: 100vh; }
@@ -30,9 +31,27 @@
             font-weight: bold;
             display: flex;
             justify-content: space-between;
+            user-select: none;
         }
-        .terminal-container { flex: 1; background: black; }
-        #install-log { font-family: monospace; font-size: 11px; color: #4ade80; padding: 10px; overflow-y: auto; flex: 1; }
+        .terminal-container { 
+            flex: 1; 
+            background: black; 
+            padding: 4px;
+            overflow: hidden;
+        }
+        #install-log { 
+            font-family: monospace; 
+            font-size: 11px; 
+            color: #4ade80; 
+            padding: 10px; 
+            overflow-y: auto; 
+            flex: 1; 
+            background: #0f172a;
+        }
+        /* Scrollbar Styling */
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: #1e293b; }
+        ::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
     </style>
 </head>
 <body class="bg-slate-950 text-white overflow-hidden">
@@ -42,43 +61,47 @@
             <h2 class="text-xl font-bold mb-4">📍 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">
-                    <div class="text-sm font-bold">{{ node.name }}</div>
-                    <div class="text-[10px] text-slate-500">{{ node.ip }}</div>
-                    <div class="mt-1">
-                        <span class="text-[9px] px-1 rounded bg-black {% if node.status == 'Docker Aktiv' %} text-blue-400 {% else %} text-yellow-500 {% endif %}">
-                            {{ node.status }}
-                        </span>
+                <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group">
+                    <div class="flex justify-between items-start">
+                        <div class="text-sm font-bold">{{ node.name }}</div>
+                        <form action="/remove_node/{{ node.id }}" method="post">
+                            <button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
+                        </form>
                     </div>
-                    <button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 py-1 rounded">Konsole</button>
+                    <div class="text-[10px] text-slate-500">{{ node.ip }}</div>
+                    <div class="mt-1 flex items-center gap-2">
+                        <span 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>
+                        <span class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</span>
+                    </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>
                 {% endfor %}
             </div>
-            <button onclick="addNode()" class="mt-4 bg-blue-600 p-2 rounded text-sm font-bold">+ Node</button>
+            <button onclick="addNode()" class="mt-4 bg-blue-600 hover:bg-blue-500 p-2 rounded text-sm font-bold transition-colors">+ Node hinzufügen</button>
         </div>
 
         <div class="flex-1 overflow-y-auto">
             <div class="grid-stack">
                 
-                <div class="grid-stack-item" gs-w="6" gs-h="4" gs-x="0" gs-y="0">
+                <div class="grid-stack-item" gs-id="chat-widget" gs-w="6" gs-h="4" gs-x="0" gs-y="0">
                     <div class="grid-stack-item-content">
                         <div class="widget-header"><span>💬 KI Chat</span> <span>⠿</span></div>
-                        <div id="chat-window" class="flex-1 p-4 overflow-y-auto text-sm space-y-2"></div>
+                        <div id="chat-window" class="flex-1 p-4 overflow-y-auto text-sm space-y-2 bg-[#0f172a]/50"></div>
                         <div class="p-2 border-t border-slate-700 flex bg-slate-800">
-                            <input id="user-input" type="text" class="flex-1 bg-slate-900 p-2 rounded text-xs outline-none" placeholder="Befehl...">
-                            <button onclick="sendMessage()" class="ml-2 bg-blue-600 px-3 py-1 rounded text-xs">Senden</button>
+                            <input id="user-input" type="text" class="flex-1 bg-slate-900 p-2 rounded text-xs outline-none border border-slate-700 focus:border-blue-500" placeholder="KI fragen...">
+                            <button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-xs transition-colors">Senden</button>
                         </div>
                     </div>
                 </div>
 
-                <div class="grid-stack-item" gs-w="6" gs-h="4" gs-x="6" gs-y="0">
+                <div class="grid-stack-item" gs-id="logs-widget" gs-w="6" gs-h="4" gs-x="6" gs-y="0">
                     <div class="grid-stack-item-content">
                         <div class="widget-header"><span>📜 System Logs</span> <span>⠿</span></div>
-                        <div id="install-log">Warte auf Befehle...</div>
+                        <div id="install-log">Warte auf Aufgaben...</div>
                     </div>
                 </div>
 
-                <div class="grid-stack-item" gs-w="12" gs-h="6" gs-x="0" gs-y="4">
+                <div class="grid-stack-item" gs-id="term-widget" gs-w="12" gs-h="6" gs-x="0" gs-y="4">
                     <div class="grid-stack-item-content">
                         <div class="widget-header"><span>🖥️ Live Terminal</span> <span>⠿</span></div>
                         <div id="terminal" class="terminal-container"></div>
@@ -90,82 +113,104 @@
     </div>
 
     <script>
-        // Initialisiere GridStack
+        // --- GridStack Setup mit Speicherfunktion ---
         var grid = GridStack.init({
             cellHeight: 70,
             margin: 5,
             resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
         });
 
-        // FUNKTION: Layout laden
+        function saveLayout() {
+            const data = grid.save();
+            localStorage.setItem('grid-layout', JSON.stringify(data));
+        }
+
         function loadLayout() {
-            let serialization = localStorage.getItem('grid-layout');
-            if (serialization) {
-                let layout = JSON.parse(serialization);
-                grid.load(layout);
+            const data = localStorage.getItem('grid-layout');
+            if (data) {
+                grid.load(JSON.parse(data));
             }
         }
 
-        // FUNKTION: Layout speichern
-        function saveLayout() {
-            let serialization = grid.save();
-            localStorage.setItem('grid-layout', JSON.stringify(serialization));
-        }
-
-        // Events: Speichere bei jeder Änderung
-        grid.on('dragstop resizestop', function(event, el) {
+        grid.on('dragstop resizestop', function() {
             saveLayout();
-            // Falls du das Terminal-Plugin 'fit' nutzt, hier triggern:
-            // fitAddon.fit(); 
+            if (fitAddon) fitAddon.fit();
         });
 
-        // Beim Start das gespeicherte Layout laden
         loadLayout();
 
-        // Xterm.js Setup
-        const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true });
-        term.open(document.getElementById('terminal'));
-
-        // Grid-Resize Event: Terminal anpassen wenn Box vergrößert wird
-        grid.on('resizestop', function(event, el) {
-            // Hier könnte man term.refresh() oder fitAddon nutzen
+        // --- 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);
 
-        // --- Die WebSocket Logik (identisch zu vorher) ---
+        // --- WebSocket Logik ---
         let termWs = null;
         function openTerminal(ip) {
             if(termWs) termWs.close();
             term.clear();
-            term.write(`\r\n>>> Verbinde mit ${ip}...\r\n`);
+            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>> ${ev.data}</div>`;
+            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) => {
-            const win = document.getElementById('chat-window');
-            win.innerHTML += `<div class="text-blue-400"><b>KI:</b> ${ev.data}</div>`;
-            win.scrollTop = win.scrollHeight;
+            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);
-            document.getElementById('chat-window').innerHTML += `<div><b>Du:</b> ${input.value}</div>`;
+            appendChat("Du", input.value, "text-slate-300 font-bold");
             input.value = '';
         }
 
-        async function addNode() {
-            // ... (identisch zu deiner addNode Funktion)
+        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();
+            }
+        }
+
+        // Window Resize Handling
+        window.addEventListener('resize', () => {
+            fitAddon.fit();
+        });
     </script>
 </body>
 </html>
\ No newline at end of file
