pi-farm/PiDoBot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

templates/index.html aktualisiert

Browse Source
This commit is contained in:
info@pi-farm.de
2026-03-04 23:20:35 +00:00
parent a726b99d2f
commit 4ecf58ea7b
1 changed files with 36 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
templates/index.html
View File

@@ -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
// WICHTIG: staticGrid: false erlaubt das Verschieben
// --- UI Setup ---
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) {
grid.load(JSON.parse(data));
}
if (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');
if(!input.value) return;
chatWs.send(input.value);
appendChat("Du", input.value, "text-slate-300 font-bold");
input.value = '';
const val = userInput.value.trim();
if(!val) return;
chatWs.send(val);
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('ip', ip);
fd.append('user', user);
fd.append('password', pass);
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) {
// 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.");
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."); }
}
};
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>
const response = await fetch(`/refresh_status/${nodeId}`);