templates/index.html aktualisiert
This commit is contained in:
@@ -113,103 +113,84 @@
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// --- GridStack Setup mit Speicherfunktion ---
|
||||
var grid = GridStack.init({
|
||||
cellHeight: 70,
|
||||
margin: 5,
|
||||
resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
|
||||
});
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 1. GridStack initialisieren
|
||||
var grid = GridStack.init({
|
||||
cellHeight: 70,
|
||||
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() {
|
||||
const data = grid.save();
|
||||
localStorage.setItem('grid-layout', JSON.stringify(data));
|
||||
}
|
||||
|
||||
function loadLayout() {
|
||||
const data = localStorage.getItem('grid-layout');
|
||||
if (data) {
|
||||
grid.load(JSON.parse(data));
|
||||
// 2. Speicher-Funktionen
|
||||
function saveLayout() {
|
||||
const data = grid.save(false); // false = nur Positionen, nicht der Inhalt
|
||||
localStorage.setItem('grid-layout-v1', JSON.stringify(data));
|
||||
console.log("Layout gespeichert");
|
||||
}
|
||||
}
|
||||
|
||||
grid.on('dragstop resizestop', function() {
|
||||
saveLayout();
|
||||
if (fitAddon) fitAddon.fit();
|
||||
});
|
||||
|
||||
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();
|
||||
function loadLayout() {
|
||||
const data = localStorage.getItem('grid-layout-v1');
|
||||
if (data) {
|
||||
const parsedData = JSON.parse(data);
|
||||
grid.load(parsedData);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Window Resize Handling
|
||||
window.addEventListener('resize', () => {
|
||||
fitAddon.fit();
|
||||
// 3. Erst laden, dann Events binden
|
||||
loadLayout();
|
||||
|
||||
// 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>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user