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:27:16 +00:00
parent 7844746438
commit 3d5a4ae89c
1 changed files with 73 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
templates/index.html
View File

@@ -113,103 +113,84 @@
</div> </div>
<script> <script>
// --- GridStack Setup mit Speicherfunktion --- document.addEventListener('DOMContentLoaded', function() {
var grid = GridStack.init({ // 1. GridStack initialisieren
cellHeight: 70, var grid = GridStack.init({
margin: 5, cellHeight: 70,
resizable: { handles: 'se, sw, ne, nw, e, w, s, n' } margin: 5,
}); float: true, // Erlaubt freies Verschieben ohne automatisches Nachrücken nach oben
handle: '.widget-header', // NUR der Header ist zum Ziehen da
resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
});
function saveLayout() { // 2. Speicher-Funktionen
const data = grid.save(); function saveLayout() {
localStorage.setItem('grid-layout', JSON.stringify(data)); const data = grid.save(false); // false = nur Positionen, nicht der Inhalt
} localStorage.setItem('grid-layout-v1', JSON.stringify(data));
console.log("Layout gespeichert");
function loadLayout() {
const data = localStorage.getItem('grid-layout');
if (data) {
grid.load(JSON.parse(data));
} }
}
grid.on('dragstop resizestop', function() { function loadLayout() {
saveLayout(); const data = localStorage.getItem('grid-layout-v1');
if (fitAddon) fitAddon.fit(); if (data) {
}); const parsedData = JSON.parse(data);
grid.load(parsedData);
loadLayout(); }
// --- 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);
// --- WebSocket Logik ---
let termWs = null;
function openTerminal(ip) {
if(termWs) termWs.close();
term.clear();
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 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) => {
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);
appendChat("Du", input.value, "text-slate-300 font-bold");
input.value = '';
}
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 // 3. Erst laden, dann Events binden
window.addEventListener('resize', () => { loadLayout();
fitAddon.fit();
// Events binden erst nachdem das Layout steht
grid.on('dragstop resizestop', function() {
saveLayout();
if (typeof fitAddon !== 'undefined') {
setTimeout(() => fitAddon.fit(), 100);
}
});
// --- Xterm.js Setup ---
const term = new Terminal({
theme: { background: '#000' },
fontSize: 13,
cursorBlink: true
});
const fitAddon = new FitAddon.FitAddon();
term.loadAddon(fitAddon);
term.open(document.getElementById('terminal'));
// Kleiner Fix: Terminal anpassen wenn die Box geladen wurde
setTimeout(() => fitAddon.fit(), 500);
// --- WebSockets & Restliche Funktionen ---
// (Hier den Rest deiner WebSocket-Logik einfügen wie gehabt)
// 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);
};
window.sendMessage = function() {
const input = document.getElementById('user-input');
if(!input.value) return;
// chatWs muss hier natürlich definiert sein
chatWs.send(input.value);
appendChat("Du", input.value, "text-slate-300 font-bold");
input.value = '';
};
function appendChat(user, msg, classes) {
const win = document.getElementById('chat-window');
win.innerHTML += `<div class="mb-2"><span class="${classes}">${user}:</span> ${msg}</div>`;
win.scrollTop = win.scrollHeight;
}
}); });
</script> </script>
</body> </body>