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 12:39:25 +00:00
parent eddd4198dd
commit 9c643c27c0
1 changed files with 40 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
templates/index.html
View File

@@ -5,12 +5,12 @@
<title>Pi-Orchestrator AI Dashboard</title> <title>Pi-Orchestrator AI Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack.min.css" rel="stylesheet"/> <link href="/static/gridstack.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack.all.js"></script> <script src="/static/gridstack.all.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.1.0/css/xterm.css" /> <link rel="stylesheet" href="/static/xterm.css" />
<script src="https://cdn.jsdelivr.net/npm/xterm@5.1.0/lib/xterm.js"></script> <script src="/static/xterm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.7.0/lib/xterm-addon-fit.js"></script> <script src="/static/xterm-addon-fit.js"></script>
<style> <style>
.grid-stack { background: #0f172a; min-height: 100vh; } .grid-stack { background: #0f172a; min-height: 100vh; }
@@ -115,77 +115,74 @@
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// 1. GridStack initialisieren // 1. GridStack initialisieren
// WICHTIG: staticGrid: false erlaubt das Verschieben
var grid = GridStack.init({ var grid = GridStack.init({
cellHeight: 70, cellHeight: 70,
margin: 5, margin: 5,
float: true, // Erlaubt freies Verschieben ohne automatisches Nachrücken nach oben float: true,
handle: '.widget-header', // NUR der Header ist zum Ziehen da handle: '.widget-header',
resizable: { handles: 'se, sw, ne, nw, e, w, s, n' } resizable: { handles: 'se, sw, ne, nw, e, w, s, n' },
staticGrid: false
}); });
// 2. Speicher-Funktionen // 2. Layout-Speicher Logik
function saveLayout() { function saveLayout() {
const data = grid.save(false); // false = nur Positionen, nicht der Inhalt const data = grid.save(false);
localStorage.setItem('grid-layout-v1', JSON.stringify(data)); localStorage.setItem('grid-layout-v1', JSON.stringify(data));
console.log("Layout gespeichert");
} }
function loadLayout() { function loadLayout() {
const data = localStorage.getItem('grid-layout-v1'); const data = localStorage.getItem('grid-layout-v1');
if (data) { if (data) {
const parsedData = JSON.parse(data); grid.load(JSON.parse(data));
grid.load(parsedData);
} }
} }
// 3. Erst laden, dann Events binden // Erst laden, dann Events aktivieren
loadLayout(); loadLayout();
// Events binden erst nachdem das Layout steht
grid.on('dragstop resizestop', function() { grid.on('dragstop resizestop', function() {
saveLayout(); saveLayout();
if (typeof fitAddon !== 'undefined') { if (window.fitAddon) window.fitAddon.fit();
setTimeout(() => fitAddon.fit(), 100);
}
}); });
// --- Xterm.js Setup --- // 3. Xterm.js Setup
const term = new Terminal({ const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true });
theme: { background: '#000' }, window.fitAddon = new FitAddon.FitAddon();
fontSize: 13, term.loadAddon(window.fitAddon);
cursorBlink: true
});
const fitAddon = new FitAddon.FitAddon();
term.loadAddon(fitAddon);
term.open(document.getElementById('terminal')); term.open(document.getElementById('terminal'));
setTimeout(() => window.fitAddon.fit(), 500);
// Kleiner Fix: Terminal anpassen wenn die Box geladen wurde // 4. WebSockets (Chat & Logs)
setTimeout(() => fitAddon.fit(), 500); const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
logWs.onmessage = (ev) => {
// --- WebSockets & Restliche Funktionen --- const l = document.getElementById('install-log');
// (Hier den Rest deiner WebSocket-Logik einfügen wie gehabt) l.innerHTML += `<div>> ${ev.data}</div>`;
l.scrollTop = l.scrollHeight;
// 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>>> Verbinde mit ${ip}...\r\n`);
window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
window.termWs.onmessage = (ev) => term.write(ev.data);
term.onData(data => { if(window.termWs) window.termWs.send(data); });
setTimeout(() => fitAddon.fit(), 100);
}; };
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
window.sendMessage = function() { window.sendMessage = function() {
const input = document.getElementById('user-input'); const input = document.getElementById('user-input');
if(!input.value) return; if(!input.value) return;
// chatWs muss hier natürlich definiert sein
chatWs.send(input.value); chatWs.send(input.value);
appendChat("Du", input.value, "text-slate-300 font-bold"); appendChat("Du", input.value, "text-slate-300 font-bold");
input.value = ''; input.value = '';
}; };
window.openTerminal = function(ip) {
if(window.termWs) window.termWs.close();
term.clear();
term.write(`\r\n\x1b[34m>>> Verbinde mit ${ip}...\x1b[0m\r\n`);
window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
window.termWs.onmessage = (ev) => term.write(ev.data);
term.onData(data => { if(window.termWs) window.termWs.send(data); });
setTimeout(() => window.fitAddon.fit(), 100);
};
function appendChat(user, msg, classes) { function appendChat(user, msg, classes) {
const win = document.getElementById('chat-window'); const win = document.getElementById('chat-window');
win.innerHTML += `<div class="mb-2"><span class="${classes}">${user}:</span> ${msg}</div>`; win.innerHTML += `<div class="mb-2"><span class="${classes}">${user}:</span> ${msg}</div>`;