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-03 23:31:32 +00:00
parent 5cf8ee5622
commit 19c24410c5
1 changed files with 116 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
templates/index.html
View File

@@ -2,176 +2,156 @@
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Pi-Orchestrator AI Control Center</title>
<title>Pi-Orchestrator AI</title>
<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 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>
<style>
/* Custom scrollbar für den Matrix-Look */
#install-log::-webkit-scrollbar { width: 5px; }
#install-log::-webkit-scrollbar-thumb { background: #22c55e; }
/* Styles für die ziehbaren Trennbalken (Gutters) */
.gutter {
background-color: #2d3748;
background-repeat: no-repeat;
background-position: center;
}
.gutter.gutter-horizontal {
cursor: col-resize;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAG8aZGCAwMA6gBVHicPXM2nPRDAADy9GAVu4E9ngAAAABJRU5ErkJggg==');
}
.gutter.gutter-vertical {
cursor: row-resize;
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>
</head>
<body class="bg-gray-900 text-white h-screen flex flex-col overflow-hidden">
<div class="flex flex-1 overflow-hidden">
<div id="vertical-split" class="flex flex-col flex-1">
<div class="w-64 border-r border-gray-700 p-4 flex flex-col bg-gray-800">
<h2 class="text-xl font-bold mb-4 flex items-center">
<span class="mr-2">📍</span> Nodes
</h2>
<div id="node-list" class="flex-1 overflow-y-auto space-y-2">
{% for node in nodes %}
<div class="p-3 bg-gray-700 rounded-lg border border-gray-600 relative group">
<form action="/remove_node/{{ node.id }}" method="post" class="absolute top-2 right-2">
<button type="submit" class="text-red-500 font-bold">×</button>
</form>
<div class="font-bold text-blue-400">{{ node.name }}</div>
<div class="text-xs text-gray-400">{{ node.ip }}</div>
<div class="text-[10px] uppercase mt-1 text-green-500 font-mono">{{ node.status }}</div>
<button onclick="openTerminal('{{ node.ip }}')" class="mt-2 text-[10px] bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded w-full">Terminal öffnen</button>
<div id="upper-area" class="flex">
<div id="sidebar" class="bg-gray-800 p-4 overflow-y-auto">
<h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
<div id="node-list" class="space-y-2">
{% for node in nodes %}
<div class="p-3 bg-gray-700 rounded border border-gray-600 relative group">
<form action="/remove_node/{{ node.id }}" method="post" class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
<button type="submit" class="text-red-500 font-bold px-1">×</button>
</form>
<div class="text-sm font-bold">{{ node.name }}</div>
<div class="text-[10px] text-gray-400">{{ node.ip }}</div>
<button onclick="openTerminal('{{ node.ip }}')" class="mt-2 text-[10px] bg-blue-600 hover:bg-blue-500 px-2 py-1 rounded w-full">Terminal</button>
</div>
{% endfor %}
</div>
<button onclick="addNode()" class="mt-4 w-full bg-green-700 p-2 rounded text-sm">+ Add</button>
</div>
{% endfor %}
</div>
<button onclick="addNode()" class="mt-4 w-full bg-blue-600 hover:bg-blue-700 p-2 rounded font-bold transition-colors">
+ Node hinzufügen
</button>
</div>
<div class="flex-1 flex flex-col bg-gray-900">
<div id="chat-window" class="flex-1 p-6 overflow-y-auto space-y-4">
<div class="bg-gray-800 p-3 rounded-lg w-fit border border-gray-700">
<span class="text-blue-400 font-bold">Bot:</span> Willkommen im Cluster-Management. Ich bin bereit für deine Befehle.
<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>
<div class="p-4 border-t border-gray-700 bg-gray-800 flex gap-2">
<input id="user-input" type="text"
class="flex-1 bg-gray-700 p-3 rounded-lg outline-none border border-gray-600 focus:border-blue-500"
placeholder="Frag die KI (z.B. 'Werfe Nginx auf Pi-1 ab')">
<button onclick="sendMessage()" class="bg-green-600 hover:bg-green-700 px-6 rounded-lg font-bold transition-colors">
Senden
</button>
</div>
</div>
</div>
<div class="h-1/3 border-t-2 border-blue-900 bg-black flex">
<div class="w-1/2 flex flex-col border-r border-gray-800">
<div class="bg-gray-800 px-3 py-1 text-[10px] font-bold text-gray-400 uppercase tracking-widest">Setup Logs</div>
<div id="install-log" class="flex-1 p-3 text-xs font-mono overflow-y-auto text-green-500">
<div>> System bereit. Warte auf Node-Aktionen...</div>
</div>
</div>
<div class="w-1/2 flex flex-col">
<div class="bg-gray-800 px-3 py-1 text-[10px] font-bold text-gray-400 uppercase tracking-widest">Active Terminal</div>
<div id="terminal" class="flex-1 p-1"></div>
<div id="lower-area" class="flex bg-black">
<div id="log-area" class="p-2 font-mono text-xs text-green-400 overflow-y-auto border-r border-gray-800">
<div class="text-gray-600 border-b border-gray-800 mb-1 uppercase tracking-tighter">System Logs</div>
<div id="install-log"></div>
</div>
<div id="terminal-area" class="p-1">
<div id="terminal" class="h-full w-full"></div>
</div>
</div>
</div>
<script>
// --- Xterm.js Setup ---
const term = new Terminal({
theme: { background: '#000000', foreground: '#ffffff' },
cursorBlink: true,
fontSize: 12,
fontFamily: 'Courier New'
// --- Split.js Initialisierung ---
// 1. Vertikaler Split (Oben vs Unten)
Split(['#upper-area', '#lower-area'], {
direction: 'vertical',
sizes: [65, 35], // 65% Oben, 35% Unten
minSize: 100,
gutterSize: 8,
});
// 2. Horizontaler Split Oben (Sidebar vs Chat)
Split(['#sidebar', '#chat-area'], {
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.write('System initialisiert. Terminal bereit.\r\n');
// --- WebSocket Chat ---
const ws = new WebSocket(`ws://${location.host}/ws/chat`);
const chatWindow = document.getElementById('chat-window');
let termWs = null;
function openTerminal(ip) {
if(termWs) termWs.close();
term.clear();
term.write(`\r\n>>> Verbinde mit ${ip}...\r\n`);
termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
termWs.onmessage = (ev) => term.write(ev.data);
term.onData(data => termWs.send(data));
}
ws.onmessage = (event) => {
appendMessage('Bot', event.data, 'bg-blue-900 border-blue-700');
const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
logWs.onmessage = (ev) => {
const l = document.getElementById('install-log');
l.innerHTML += `<div>${ev.data}</div>`;
l.parentElement.scrollTop = l.parentElement.scrollHeight;
};
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
chatWs.onmessage = (ev) => appendChat("Bot", ev.data, "text-blue-400");
function sendMessage() {
const input = document.getElementById('user-input');
if (!input.value) return;
ws.send(input.value);
appendMessage('Du', input.value, 'bg-gray-700 border-gray-600 self-end ml-auto');
input.value = '';
const i = document.getElementById('user-input');
chatWs.send(i.value);
appendChat("Du", i.value, "text-white");
i.value = '';
}
function appendMessage(sender, text, classes) {
const msg = document.createElement('div');
msg.className = `${classes} p-3 rounded-lg w-fit max-w-[80%] border`;
msg.innerHTML = `<span class="font-bold">${sender}:</span> ${text}`;
chatWindow.appendChild(msg);
chatWindow.scrollTop = chatWindow.scrollHeight;
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);
}
// --- WebSocket Installation Logs ---
const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
logWs.onmessage = (event) => {
const logDiv = document.getElementById('install-log');
const entry = document.createElement('div');
entry.className = "mb-1";
entry.innerText = `> ${event.data}`;
logDiv.appendChild(entry);
logDiv.scrollTop = logDiv.scrollHeight;
};
// --- Node Funktionen ---
async function addNode() {
const name = prompt("Name des Pi (z.B. Pi-Server-1):");
const ip = prompt("IP Adresse:");
const user = prompt("SSH Nutzername (meist 'pi' oder dein Name):", "pi");
const password = prompt("Initiales SSH Passwort (wird nur einmalig für Key-Copy benötigt):");
if (name && ip && user && password) {
const formData = new FormData();
formData.append('name', name);
formData.append('ip', ip);
formData.append('user', user);
formData.append('password', password);
await fetch('/add_node', {
method: 'POST',
body: formData
});
const name = prompt("Name:");
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();
}
}
let activeTermWs = null;
function openTerminal(ip) {
if (activeTermWs) activeTermWs.close();
term.clear();
term.write(`\r\n>>> Verbinde mit ${ip}...\r\n`);
activeTermWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
activeTermWs.onmessage = (event) => {
term.write(event.data);
};
activeTermWs.onclose = () => {
term.write('\r\n[Verbindung geschlossen]\r\n');
};
// Tastatureingaben vom Browser an den Server schicken
term.onData(data => {
if (activeTermWs && activeTermWs.readyState === WebSocket.OPEN) {
activeTermWs.send(data);
}
});
}
// Enter-Taste zum Senden
document.getElementById('user-input').addEventListener('keypress', function (e) {
if (e.key === 'Enter') sendMessage();
});
</script>
</body>
</html>