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:10:08 +00:00
parent 60d9d594d0
commit be2ebb3ecb
1 changed files with 95 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

226
templates/index.html
View File

@@ -2,132 +2,112 @@
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Pi-Orchestrator AI</title> <title>Pi-Orchestrator AI Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/gridstack@7.2.3/dist/gridstack.all.js"></script>
<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>
<style> <style>
/* Styles für die ziehbaren Trennbalken (Gutters) */ .grid-stack { background: #0f172a; min-height: 100vh; }
.gutter { .grid-stack-item-content {
background-color: #2d3748; background: #1e293b;
background-repeat: no-repeat; color: white;
background-position: center; border: 1px solid #334155;
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden;
} }
.gutter.gutter-horizontal { .widget-header {
cursor: col-resize; background: #334155;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAG8aZGCAwMA6gBVHicPXM2nPRDAADy9GAVu4E9ngAAAABJRU5ErkJggg=='); padding: 5px 10px;
cursor: move;
font-size: 12px;
font-weight: bold;
display: flex;
justify-content: space-between;
} }
.gutter.gutter-vertical { .terminal-container { flex: 1; background: black; }
cursor: row-resize; #install-log { font-family: monospace; font-size: 11px; color: #4ade80; padding: 10px; overflow-y: auto; flex: 1; }
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABjU9S9AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
}
.split { display: flex; flex-direction: row; }
#upper-area { display: flex; flex-direction: row; width: 100%; }
#lower-area { display: flex; flex-direction: row; width: 100%; }
</style> </style>
</head> </head>
<body class="bg-gray-900 text-white h-screen flex flex-col overflow-hidden"> <body class="bg-slate-950 text-white overflow-hidden">
<div id="vertical-split" class="flex flex-col flex-1"> <div class="flex h-screen">
<div class="w-64 bg-slate-900 border-r border-slate-700 p-4 flex flex-col">
<div id="upper-area" class="flex"> <h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
<div id="sidebar" class="bg-gray-800 p-4 overflow-y-auto"> <div id="node-list" class="flex-1 overflow-y-auto space-y-2">
<h2 class="text-xl font-bold mb-4">📍 Nodes</h2> {% for node in nodes %}
<div id="node-list" class="space-y-2"> <div class="p-3 bg-slate-800 rounded border border-slate-700 relative">
{% for node in nodes %} <div class="text-sm font-bold">{{ node.name }}</div>
<div class="p-3 bg-gray-800 rounded-lg border border-gray-700 relative group" id="node-{{ node.id }}"> <div class="text-[10px] text-slate-500">{{ node.ip }}</div>
<div class="mt-1">
<div class="flex items-center justify-between mb-1"> <span class="text-[9px] px-1 rounded bg-black {% if node.status == 'Docker Aktiv' %} text-blue-400 {% else %} text-yellow-500 {% endif %}">
<div class="text-sm font-bold truncate pr-4">{{ node.name }}</div> {{ node.status }}
<div class="status-indicator"> </span>
{% if node.status == "Docker Aktiv" %}
<span class="flex h-2.5 w-2.5 rounded-full bg-blue-500 shadow-[0_0_10px_#3b82f6]"></span>
{% elif node.status == "Kopplung..." %}
<span class="flex h-2.5 w-2.5 rounded-full bg-yellow-500 animate-pulse"></span>
{% else %}
<span class="flex h-2.5 w-2.5 rounded-full bg-gray-600"></span>
{% endif %}
</div>
</div>
<div class="text-[10px] text-gray-500 font-mono flex justify-between items-center">
{{ node.ip }}
<a href="/refresh_status/{{ node.id }}" class="hover:text-blue-400">🔄</a>
</div>
<div class="mt-2">
<span class="text-[9px] px-1.5 py-0.5 rounded bg-black border border-gray-600
{% if node.status == 'Docker Aktiv' %} text-blue-400 border-blue-900 {% else %} text-gray-400 {% endif %}">
{{ node.status }}
</span>
</div>
<button onclick="openTerminal('{{ node.ip }}')" class="mt-3 text-[10px] bg-gray-700 hover:bg-blue-800 py-1 rounded w-full transition-all">
Konsole
</button>
</div> </div>
{% endfor %} <button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 py-1 rounded">Konsole</button>
</div>
<button onclick="addNode()" class="mt-4 w-full bg-green-700 p-2 rounded text-sm">+ Add</button>
</div>
<div id="chat-area" class="flex flex-col bg-gray-900">
<div id="chat-window" class="flex-1 p-4 overflow-y-auto space-y-2">
<div class="text-gray-500 italic text-sm">System bereit...</div>
</div>
<div class="p-3 border-t border-gray-700 flex bg-gray-800">
<input id="user-input" type="text" class="flex-1 bg-gray-700 p-2 rounded-l outline-none text-sm" placeholder="KI Befehl...">
<button onclick="sendMessage()" class="bg-blue-600 px-4 rounded-r">Send</button>
</div> </div>
{% endfor %}
</div> </div>
<button onclick="addNode()" class="mt-4 bg-blue-600 p-2 rounded text-sm font-bold">+ Node</button>
</div> </div>
<div id="lower-area" class="flex bg-black"> <div class="flex-1 overflow-y-auto">
<div id="log-area" class="p-2 font-mono text-xs text-green-400 overflow-y-auto border-r border-gray-800"> <div class="grid-stack">
<div class="text-gray-600 border-b border-gray-800 mb-1 uppercase tracking-tighter">System Logs</div>
<div id="install-log"></div> <div class="grid-stack-item" gs-w="6" gs-h="4" gs-x="0" gs-y="0">
</div> <div class="grid-stack-item-content">
<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 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...">
<button onclick="sendMessage()" class="ml-2 bg-blue-600 px-3 py-1 rounded text-xs">Senden</button>
</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-content">
<div class="widget-header"><span>📜 System Logs</span> <span>⠿</span></div>
<div id="install-log">Warte auf Befehle...</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-content">
<div class="widget-header"><span>🖥️ Live Terminal</span> <span>⠿</span></div>
<div id="terminal" class="terminal-container"></div>
</div>
</div>
<div id="terminal-area" class="p-1">
<div id="terminal" class="h-full w-full"></div>
</div> </div>
</div> </div>
</div> </div>
<script> <script>
// --- Split.js Initialisierung --- // Initialisiere GridStack
var grid = GridStack.init({
// 1. Vertikaler Split (Oben vs Unten) cellHeight: 70,
Split(['#upper-area', '#lower-area'], { acceptWidgets: true,
direction: 'vertical', dragIn: '.newWidget',
sizes: [65, 35], // 65% Oben, 35% Unten resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
minSize: 100,
gutterSize: 8,
}); });
// 2. Horizontaler Split Oben (Sidebar vs Chat) // Xterm.js Setup
Split(['#sidebar', '#chat-area'], { const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true });
sizes: [20, 80],
minSize: [150, 300],
gutterSize: 8,
});
// 3. Horizontaler Split Unten (Logs vs Terminal)
Split(['#log-area', '#terminal-area'], {
sizes: [30, 70],
minSize: [100, 300],
gutterSize: 8,
onDrag: () => {
// Terminal an neue Größe anpassen (falls Fit-Addon genutzt wird)
}
});
// --- Terminal & WebSockets ---
const term = new Terminal({ theme: { background: '#000' }, cursorBlink: true, fontSize: 13 });
term.open(document.getElementById('terminal')); term.open(document.getElementById('terminal'));
// Grid-Resize Event: Terminal anpassen wenn Box vergrößert wird
grid.on('resizestop', function(event, el) {
// Hier könnte man term.refresh() oder fitAddon nutzen
});
// --- Die WebSocket Logik (identisch zu vorher) ---
let termWs = null; let termWs = null;
function openTerminal(ip) { function openTerminal(ip) {
if(termWs) termWs.close(); if(termWs) termWs.close();
@@ -135,50 +115,32 @@
term.write(`\r\n>>> Verbinde mit ${ip}...\r\n`); term.write(`\r\n>>> Verbinde mit ${ip}...\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 => termWs.send(data)); term.onData(data => { if(termWs) termWs.send(data); });
} }
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>> ${ev.data}</div>`;
l.parentElement.scrollTop = l.parentElement.scrollHeight; l.scrollTop = l.scrollHeight;
// Wenn der Log "fertig" oder "abgeschlossen" meldet, lade die Node-Liste nach 2 Sek neu
if (ev.data.includes("abgeschlossen") || ev.data.includes("fertig")) {
setTimeout(() => { location.reload(); }, 2000);
}
}; };
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`); const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
chatWs.onmessage = (ev) => appendChat("Bot", ev.data, "text-blue-400"); chatWs.onmessage = (ev) => {
const win = document.getElementById('chat-window');
win.innerHTML += `<div class="text-blue-400"><b>KI:</b> ${ev.data}</div>`;
win.scrollTop = win.scrollHeight;
};
function sendMessage() { function sendMessage() {
const i = document.getElementById('user-input'); const input = document.getElementById('user-input');
chatWs.send(i.value); chatWs.send(input.value);
appendChat("Du", i.value, "text-white"); document.getElementById('chat-window').innerHTML += `<div><b>Du:</b> ${input.value}</div>`;
i.value = ''; input.value = '';
}
function appendChat(user, msg, color) {
const div = document.createElement('div');
div.className = "text-sm border-l-2 border-gray-700 pl-2 py-1";
div.innerHTML = `<span class="${color} font-bold">${user}:</span> ${msg}`;
document.getElementById('chat-window').appendChild(div);
} }
async function addNode() { async function addNode() {
const name = prompt("Name:"); // ... (identisch zu deiner addNode Funktion)
const ip = prompt("IP:");
const user = prompt("User:", "pi");
const pass = prompt("Passwort:");
if(name && ip && pass) {
const fd = new FormData();
fd.append('name', name); fd.append('ip', ip);
fd.append('user', user); fd.append('password', pass);
await fetch('/add_node', { method: 'POST', body: fd });
location.reload();
}
} }
</script> </script>
</body> </body>