templates/index.html aktualisiert

templates/index.html

@@ -65,9 +65,9 @@
         }
         .markdown-content code {
             font-family: monospace;
-            color: #4ade80; /* Ein schickes Grün für Inline-Code */
+            color: #4ade80;
         }
-        .markdown-content pre code { color: #fff; } /* Weiß für echten Code in der Box */
+        .markdown-content pre code { color: #fff; }
         .markdown-content p { margin-bottom: 8px; }
         .markdown-content ul { list-style-type: disc; margin-left: 20px; margin-bottom: 8px; }
         .markdown-content ol { list-style-type: decimal; margin-left: 20px; margin-bottom: 8px; }
@@ -113,7 +113,7 @@
                         <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...">
+                            <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>
                         </div>
                     </div>
@@ -139,8 +139,7 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            // 1. GridStack initialisieren
+            // --- UI Setup ---
-            // WICHTIG: staticGrid: false erlaubt das Verschieben
             var grid = GridStack.init({
                 cellHeight: 70,
                 margin: 5,
@@ -150,7 +149,6 @@
                 staticGrid: false 
             });
 
-            // 2. Layout-Speicher Logik
             function saveLayout() {
                 const data = grid.save(false);
                 localStorage.setItem('grid-layout-v1', JSON.stringify(data));
@@ -158,12 +156,9 @@
 
             function loadLayout() {
                 const data = localStorage.getItem('grid-layout-v1');
-                if (data) {
+                if (data) grid.load(JSON.parse(data));
-                    grid.load(JSON.parse(data));
-                }
             }
 
-            // Erst laden, dann Events aktivieren
             loadLayout();
 
             grid.on('dragstop resizestop', function() {
@@ -171,14 +166,13 @@
                 if (window.fitAddon) window.fitAddon.fit();
             });
 
-            // 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'));
             setTimeout(() => window.fitAddon.fit(), 500);
 
-            // 4. WebSockets (Chat & Logs)
+            // --- WebSockets ---
             const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
             logWs.onmessage = (ev) => {
                 const l = document.getElementById('install-log');
@@ -189,15 +183,32 @@
             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
+            // --- NEU: Enter-Taste & Fokus Logik ---
+            const userInput = document.getElementById('user-input');
+
+            // Fokus beim Laden setzen
+            userInput.focus();
+
+            // Auf Enter-Taste hören
+            userInput.addEventListener('keydown', function(event) {
+                if (event.key === 'Enter') {
+                    event.preventDefault(); // Verhindert Neuladen/Standardverhalten
+                    window.sendMessage();
+                }
+            });
+
             window.sendMessage = function() {
-                const input = document.getElementById('user-input');
+                const val = userInput.value.trim();
-                if(!input.value) return;
+                if(!val) return;
-                chatWs.send(input.value);
+                
-                appendChat("Du", input.value, "text-slate-300 font-bold");
+                chatWs.send(val);
-                input.value = '';
+                appendChat("Du", val, "text-slate-300 font-bold");
+                
+                userInput.value = ''; // Feld leeren
+                userInput.focus();    // Fokus sofort zurücksetzen
             };
 
+            // --- Restliche Funktionen ---
             window.openTerminal = function(ip) {
                 if(window.termWs) window.termWs.close();
                 term.clear();
@@ -210,11 +221,8 @@
 
             function appendChat(user, msg, classes) {
                 const win = document.getElementById('chat-window');
-                
-                // Fallback: Wenn `marked` nicht geladen ist, benutze den Rohtext
                 let formattedMsg = msg;
                 
-                // Wenn die Nachricht von der KI kommt, parse das Markdown in HTML!
                 if (user === "KI" && typeof marked !== 'undefined') {
                     formattedMsg = marked.parse(msg);
                 }
@@ -236,63 +244,22 @@
 
                 if (name && ip && pass) {
                     const fd = new FormData();
-                    fd.append('name', name);
+                    fd.append('name', name); fd.append('ip', ip);
-                    fd.append('ip', ip);
+                    fd.append('user', user); fd.append('password', pass);
-                    fd.append('user', user);
-                    fd.append('password', pass);
 
                     try {
-                        const response = await fetch('/add_node', { 
+                        const response = await fetch('/add_node', { method: 'POST', body: fd });
-                            method: 'POST', 
+                        if (response.ok) location.reload();
-                            body: fd 
+                        else alert("Fehler beim Hinzufügen.");
-                        });
+                    } catch (err) { alert("Verbindung fehlgeschlagen."); }
-                        if (response.ok) {
-                            // Seite neu laden, um den neuen Node in der Sidebar zu sehen
-                            location.reload();
-                        } else {
-                            alert("Fehler beim Hinzufügen des Nodes.");
-                        }
-                    } catch (err) {
-                        console.error("Netzwerkfehler:", err);
-                        alert("Verbindung zum Server fehlgeschlagen.");
-                    }
-                } else {
-                    alert("Alle Felder müssen ausgefüllt werden.");
                 }
             };
 
             window.refreshNodeStatus = async function(nodeId) {
                 const badge = document.getElementById(`badge-${nodeId}`);
                 const led = document.getElementById(`led-${nodeId}`);
-                
-                // Visuelles Feedback: Badge ausgrauen während der Suche
                 badge.innerText = "Prüfe...";
                 badge.classList.add("animate-pulse");
 
                 try {
                     const response = await fetch(`/refresh_status/${nodeId}`);
-                    const data = await response.json();
-                    
-                    // UI aktualisieren
-                    badge.innerText = data.status;
-                    badge.classList.remove("animate-pulse");
-
-                    if (data.status === "Docker Aktiv") {
-                        led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
-                        badge.classList.add("text-blue-400");
-                    } else if (data.status === "Offline/Fehler") {
-                        led.className = "h-2 w-2 rounded-full bg-red-600";
-                        badge.classList.add("text-red-400");
-                    } else {
-                        led.className = "h-2 w-2 rounded-full bg-yellow-500";
-                        badge.classList.remove("text-blue-400");
-                    }
-                } catch (err) {
-                    console.error("Fehler beim Refresh:", err);
-                    badge.innerText = "Fehler";
-                }
-            };
-        });
-    </script>
-</body>
-</html>