templates/index.html aktualisiert

templates/index.html

@@ -14,7 +14,6 @@
     <script src="/static/marked.min.js"></script>
     
     <style>
-        /* Bestehendes CSS erweitern/korrigieren */
         .grid-stack { background: #0f172a; min-height: 100vh; padding: 10px; }
         .grid-stack-item-content {
             background: #1e293b;
@@ -23,10 +22,9 @@
             border-radius: 8px;
             display: flex;
             flex-direction: column;
-            overflow: hidden; /* Verhindert, dass Inhalt aus dem Widget quillt */
+            overflow: hidden;
         }
         
-        /* FIX: Terminal und Logs müssen 100% Höhe einnehmen */
         .terminal-container, #terminal { 
             flex: 1; 
             width: 100%;
@@ -42,7 +40,6 @@
             padding: 10px; 
             overflow-y: auto; 
             background: #0f172a;
-            height: 100%;
         }
 
         .widget-header {
@@ -54,9 +51,9 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
+            user-select: none;
         }
 
-        /* Markdown Styling bleibt gleich... */
         .markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; }
         .markdown-content code { font-family: monospace; color: #4ade80; }
         .markdown-content p { margin-bottom: 8px; }
@@ -78,109 +75,84 @@
                         </div>
                         <div class="text-[10px] text-slate-500 font-mono flex justify-between items-center">
                             {{ node.ip }}
-                            <button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400 transition-transform active:rotate-180" title="Status prüfen">
+                            <button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400">🔄</button>
-                                🔄
-                            </button>
                         </div>
                         <div class="mt-1 flex items-center gap-2">
                             <span id="led-{{ node.id }}" 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 id="badge-{{ node.id }}" 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>
+                        <button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1 rounded">Konsole öffnen</button>
                     </div>
                 {% endfor %}
             </div>
-            <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>
+            <button onclick="addNode()" class="mt-4 bg-blue-600 hover:bg-blue-500 p-2 rounded text-sm font-bold">+ Node hinzufügen</button>
+            <button onclick="localStorage.removeItem('pi-orch-layout-v2'); location.reload();" class="mt-2 text-[10px] text-slate-500 hover:text-white uppercase">Layout Reset</button>
         </div>
 
         <div class="flex-1 overflow-y-auto">
             <div class="grid-stack">
-                
+                <div class="grid-stack-item" gs-id="chat-widget" gs-w="6" gs-h="5" 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 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 border border-slate-700 focus:border-blue-500" placeholder="KI fragen..." autocomplete="off">
-                            <button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-xs transition-colors">Senden</button>
+                            <button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-xs">Senden</button>
                         </div>
                     </div>
                 </div>
 
-                <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" gs-id="logs-widget" gs-w="6" gs-h="5" 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 Aufgaben...</div>
                     </div>
                 </div>
 
-                <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" gs-id="term-widget" gs-w="12" gs-h="6" gs-x="0" gs-y="5">
                     <div class="grid-stack-item-content">
                         <div class="widget-header"><span>🖥️ Live Terminal</span> <span>⠿</span></div>
                         <div id="terminal" class="terminal-container"></div>
                     </div>
                 </div>
-
             </div>
         </div>
     </div>
 
-<script>
+    <script>
         document.addEventListener('DOMContentLoaded', function() {
-            // 1. GridStack mit verbesserten Parametern
+            // 1. GridStack Initialisierung
             var grid = GridStack.init({
-                cellHeight: 80, // Etwas höher für bessere Lesbarkeit
+                cellHeight: 80,
                 margin: 10,
                 float: true,
-                handle: '.widget-header',
+                handle: '.widget-header'
-                resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
             });
 
-            // 2. Layout-Logik (mit Sicherheitscheck)
+            // Layout speichern/laden
             function saveLayout() {
                 const data = grid.save(false);
                 localStorage.setItem('pi-orch-layout-v2', JSON.stringify(data));
             }
 
-            function loadLayout() {
+            const savedData = localStorage.getItem('pi-orch-layout-v2');
-                const data = localStorage.getItem('pi-orch-layout-v2');
+            if (savedData) {
-                if (data) {
+                try { grid.load(JSON.parse(savedData)); } catch(e) { console.error(e); }
-                    try {
-                        grid.load(JSON.parse(data));
-                    } catch (e) {
-                        console.error("Layout-Laden fehlgeschlagen", e);
-                        localStorage.removeItem('pi-orch-layout-v2');
-                    }
-                }
             }
 
-            // Layout laden
+            grid.on('resizestop dragstop', function() {
-            loadLayout();
-
-            // Automatisches Resizen des Terminals beim Verschieben/Größe ändern
-            grid.on('resizestop', function() {
                 saveLayout();
-                if (window.fitAddon) {
+                if (window.fitAddon) setTimeout(() => window.fitAddon.fit(), 100);
-                    setTimeout(() => window.fitAddon.fit(), 100);
-                }
             });
-            grid.on('dragstop', saveLayout);
 
-            // 3. Xterm.js Setup (WICHTIG: Terminal muss in den Container passen)
+            // 2. Xterm.js Setup
-            const term = new Terminal({ 
+            const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true, convertEol: true });
-                theme: { background: '#000' }, 
-                fontSize: 13, 
-                cursorBlink: true,
-                convertEol: true // Korrigiert Zeilenumbrüche
-            });
             window.fitAddon = new FitAddon.FitAddon();
             term.loadAddon(window.fitAddon);
             term.open(document.getElementById('terminal'));
-            
-            // Verzögertes Fit, damit das Grid erst stabil steht
             setTimeout(() => window.fitAddon.fit(), 500);
 
-            // --- WebSockets ---
+            // 3. WebSockets
             const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
             logWs.onmessage = (ev) => {
                 const l = document.getElementById('install-log');
@@ -191,15 +163,13 @@
             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(); }
             });
 
-            const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
-            chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
-
             window.sendMessage = function() {
                 const val = userInput.value.trim();
                 if(!val) return;
@@ -209,14 +179,6 @@
                 userInput.focus();
             };
 
-            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;
-            };
-
-            // appendChat Funktion...
             function appendChat(user, msg, classes) {
                 const win = document.getElementById('chat-window');
                 let formattedMsg = msg;
@@ -227,7 +189,7 @@
                 win.scrollTop = win.scrollHeight;
             }
 
-            // --- Restliche Funktionen ---
+            // 5. Node Funktionen
             window.openTerminal = function(ip) {
                 if(window.termWs) window.termWs.close();
                 term.clear();
@@ -238,39 +200,17 @@
                 setTimeout(() => window.fitAddon.fit(), 100);
             };
 
-            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>
-                `;
-                win.scrollTop = win.scrollHeight;
-            }
-
             window.addNode = async function() {
                 const name = prompt("Node Name:");
                 const ip = prompt("IP Adresse:");
-                const user = prompt("Benutzername (meist 'pi'):", "pi");
+                const user = prompt("Benutzername:", "pi");
-                const pass = prompt("SSH Passwort (für Key-Copy):");
+                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);
-
-                    try {
                     const response = await fetch('/add_node', { method: 'POST', body: fd });
                     if (response.ok) location.reload();
-                        else alert("Fehler beim Hinzufügen.");
-                    } catch (err) { alert("Verbindung fehlgeschlagen."); }
                 }
             };
 
@@ -278,9 +218,18 @@
                 const badge = document.getElementById(`badge-${nodeId}`);
                 const led = document.getElementById(`led-${nodeId}`);
                 badge.innerText = "Prüfe...";
-                badge.classList.add("animate-pulse");
-
                 try {
-                    const response = await fetch(`/refresh_status/${nodeId}`);
+                    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"; }
+            };
         });
-</script>
+    </script>
+</body>
+</html>