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:18:54 +00:00
parent 42ddb3dcf4
commit 7844746438
1 changed files with 96 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
templates/index.html
View File

@@ -10,6 +10,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.1.0/css/xterm.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.1.0/css/xterm.css" />
<script src="https://cdn.jsdelivr.net/npm/xterm@5.1.0/lib/xterm.js"></script> <script src="https://cdn.jsdelivr.net/npm/xterm@5.1.0/lib/xterm.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.7.0/lib/xterm-addon-fit.js"></script>
<style> <style>
.grid-stack { background: #0f172a; min-height: 100vh; } .grid-stack { background: #0f172a; min-height: 100vh; }
@@ -30,9 +31,27 @@
font-weight: bold; font-weight: bold;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
user-select: none;
} }
.terminal-container { flex: 1; background: black; } .terminal-container {
#install-log { font-family: monospace; font-size: 11px; color: #4ade80; padding: 10px; overflow-y: auto; flex: 1; } flex: 1;
background: black;
padding: 4px;
overflow: hidden;
}
#install-log {
font-family: monospace;
font-size: 11px;
color: #4ade80;
padding: 10px;
overflow-y: auto;
flex: 1;
background: #0f172a;
}
/* Scrollbar Styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
</style> </style>
</head> </head>
<body class="bg-slate-950 text-white overflow-hidden"> <body class="bg-slate-950 text-white overflow-hidden">
@@ -42,43 +61,47 @@
<h2 class="text-xl font-bold mb-4">📍 Nodes</h2> <h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
<div id="node-list" class="flex-1 overflow-y-auto space-y-2"> <div id="node-list" class="flex-1 overflow-y-auto space-y-2">
{% for node in nodes %} {% for node in nodes %}
<div class="p-3 bg-slate-800 rounded border border-slate-700 relative"> <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group">
<div class="text-sm font-bold">{{ node.name }}</div> <div class="flex justify-between items-start">
<div class="text-[10px] text-slate-500">{{ node.ip }}</div> <div class="text-sm font-bold">{{ node.name }}</div>
<div class="mt-1"> <form action="/remove_node/{{ node.id }}" method="post">
<span class="text-[9px] px-1 rounded bg-black {% if node.status == 'Docker Aktiv' %} text-blue-400 {% else %} text-yellow-500 {% endif %}"> <button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
{{ node.status }} </form>
</span>
</div> </div>
<button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 py-1 rounded">Konsole</button> <div class="text-[10px] text-slate-500">{{ node.ip }}</div>
<div class="mt-1 flex items-center gap-2">
<span class="h-2 w-2 rounded-full {% if node.status == 'Docker Aktiv' %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% else %} bg-yellow-500 {% endif %}"></span>
<span class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</span>
</div>
<button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1 rounded transition-colors">Konsole öffnen</button>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
<button onclick="addNode()" class="mt-4 bg-blue-600 p-2 rounded text-sm font-bold">+ Node</button> <button onclick="addNode()" class="mt-4 bg-blue-600 hover:bg-blue-500 p-2 rounded text-sm font-bold transition-colors">+ Node hinzufügen</button>
</div> </div>
<div class="flex-1 overflow-y-auto"> <div class="flex-1 overflow-y-auto">
<div class="grid-stack"> <div class="grid-stack">
<div class="grid-stack-item" gs-w="6" gs-h="4" gs-x="0" gs-y="0"> <div class="grid-stack-item" gs-id="chat-widget" gs-w="6" gs-h="4" gs-x="0" gs-y="0">
<div class="grid-stack-item-content"> <div class="grid-stack-item-content">
<div class="widget-header"><span>💬 KI Chat</span> <span>⠿</span></div> <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"></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"> <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" placeholder="Befehl..."> <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...">
<button onclick="sendMessage()" class="ml-2 bg-blue-600 px-3 py-1 rounded text-xs">Senden</button> <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>
</div> </div>
</div> </div>
<div class="grid-stack-item" gs-w="6" gs-h="4" gs-x="6" gs-y="0"> <div class="grid-stack-item" gs-id="logs-widget" gs-w="6" gs-h="4" gs-x="6" gs-y="0">
<div class="grid-stack-item-content"> <div class="grid-stack-item-content">
<div class="widget-header"><span>📜 System Logs</span> <span>⠿</span></div> <div class="widget-header"><span>📜 System Logs</span> <span>⠿</span></div>
<div id="install-log">Warte auf Befehle...</div> <div id="install-log">Warte auf Aufgaben...</div>
</div> </div>
</div> </div>
<div class="grid-stack-item" gs-w="12" gs-h="6" gs-x="0" gs-y="4"> <div class="grid-stack-item" gs-id="term-widget" gs-w="12" gs-h="6" gs-x="0" gs-y="4">
<div class="grid-stack-item-content"> <div class="grid-stack-item-content">
<div class="widget-header"><span>🖥️ Live Terminal</span> <span>⠿</span></div> <div class="widget-header"><span>🖥️ Live Terminal</span> <span>⠿</span></div>
<div id="terminal" class="terminal-container"></div> <div id="terminal" class="terminal-container"></div>
@@ -90,82 +113,104 @@
</div> </div>
<script> <script>
// Initialisiere GridStack // --- GridStack Setup mit Speicherfunktion ---
var grid = GridStack.init({ var grid = GridStack.init({
cellHeight: 70, cellHeight: 70,
margin: 5, margin: 5,
resizable: { handles: 'se, sw, ne, nw, e, w, s, n' } resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
}); });
// FUNKTION: Layout laden function saveLayout() {
const data = grid.save();
localStorage.setItem('grid-layout', JSON.stringify(data));
}
function loadLayout() { function loadLayout() {
let serialization = localStorage.getItem('grid-layout'); const data = localStorage.getItem('grid-layout');
if (serialization) { if (data) {
let layout = JSON.parse(serialization); grid.load(JSON.parse(data));
grid.load(layout);
} }
} }
// FUNKTION: Layout speichern grid.on('dragstop resizestop', function() {
function saveLayout() {
let serialization = grid.save();
localStorage.setItem('grid-layout', JSON.stringify(serialization));
}
// Events: Speichere bei jeder Änderung
grid.on('dragstop resizestop', function(event, el) {
saveLayout(); saveLayout();
// Falls du das Terminal-Plugin 'fit' nutzt, hier triggern: if (fitAddon) fitAddon.fit();
// fitAddon.fit();
}); });
// Beim Start das gespeicherte Layout laden
loadLayout(); loadLayout();
// Xterm.js Setup // --- Xterm.js Setup mit FitAddon ---
const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true }); 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')); term.open(document.getElementById('terminal'));
// Grid-Resize Event: Terminal anpassen wenn Box vergrößert wird // Terminal sofort anpassen
grid.on('resizestop', function(event, el) { setTimeout(() => fitAddon.fit(), 200);
// Hier könnte man term.refresh() oder fitAddon nutzen
});
// --- Die WebSocket Logik (identisch zu vorher) --- // --- WebSocket Logik ---
let termWs = null; let termWs = null;
function openTerminal(ip) { function openTerminal(ip) {
if(termWs) termWs.close(); if(termWs) termWs.close();
term.clear(); term.clear();
term.write(`\r\n>>> Verbinde mit ${ip}...\r\n`); term.write(`\r\n\x1b[34m>>> Verbinde mit ${ip}...\x1b[0m\r\n`);
termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`); termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
termWs.onmessage = (ev) => term.write(ev.data); termWs.onmessage = (ev) => term.write(ev.data);
term.onData(data => { if(termWs) termWs.send(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`); const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
logWs.onmessage = (ev) => { logWs.onmessage = (ev) => {
const l = document.getElementById('install-log'); const l = document.getElementById('install-log');
l.innerHTML += `<div>> ${ev.data}</div>`; l.innerHTML += `<div class="border-b border-slate-800/50 pb-1 mb-1">> ${ev.data}</div>`;
l.scrollTop = l.scrollHeight; l.scrollTop = l.scrollHeight;
}; };
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`); const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
chatWs.onmessage = (ev) => { chatWs.onmessage = (ev) => {
const win = document.getElementById('chat-window'); appendChat("KI", ev.data, "text-blue-400 font-bold");
win.innerHTML += `<div class="text-blue-400"><b>KI:</b> ${ev.data}</div>`;
win.scrollTop = win.scrollHeight;
}; };
function sendMessage() { function sendMessage() {
const input = document.getElementById('user-input'); const input = document.getElementById('user-input');
if(!input.value) return;
chatWs.send(input.value); chatWs.send(input.value);
document.getElementById('chat-window').innerHTML += `<div><b>Du:</b> ${input.value}</div>`; appendChat("Du", input.value, "text-slate-300 font-bold");
input.value = ''; input.value = '';
} }
async function addNode() { function appendChat(user, msg, classes) {
// ... (identisch zu deiner addNode Funktion) 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
window.addEventListener('resize', () => {
fitAddon.fit();
});
</script> </script>
</body> </body>
</html> </html>