pi-farm/PiDoBot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

templates/index.html hinzugefügt

Browse Source
This commit is contained in:
info@pi-farm.de
2026-03-03 22:14:49 +00:00
parent ba1ab02b20
commit 70ab08639f
1 changed files with 105 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
templates/index.html Normal file
View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Pi-Orchestrator AI</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 text-white flex h-screen">
<div class="w-1/4 border-r border-gray-700 p-4">
<h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
<div id="node-list">
<button onclick="addNode()" class="w-full bg-blue-600 p-2 rounded mb-4">+ Node hinzufügen</button>
</div>
</div>
<div class="flex-1 flex flex-col">
<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">Willkommen! Wie soll ich den Cluster verwalten?</div>
</div>
<div class="p-4 border-t border-gray-700 flex">
<input id="user-input" type="text" class="flex-1 bg-gray-800 p-3 rounded-l outline-none" placeholder="Befehl eingeben (z.B. 'Installiere Docker auf allen Nodes')">
<button onclick="sendMessage()" class="bg-green-600 px-6 rounded-r">Senden</button>
</div>
</div>
<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>
<div class="flex flex-col h-full">
<div class="flex flex-1 overflow-hidden">
</div>
<div class="h-1/3 border-t border-gray-600 bg-black flex">
<div id="install-log" class="w-1/2 p-2 text-xs font-mono overflow-y-auto text-green-400 border-r border-gray-700">
> System bereit. Warte auf Befehle...
</div>
<div id="terminal" class="w-1/2"></div>
</div>
</div>
<script>
// Xterm.js Initialisierung
const term = new Terminal({ theme: { background: '#000' }, cursorBlink: true });
term.open(document.getElementById('terminal'));
term.write('Verfügbare Terminals: Wähle einen Node aus...\r\n');
// WebSocket für Installation-Logs
const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
logWs.onmessage = (event) => {
const logDiv = document.getElementById('install-log');
logDiv.innerHTML += `<div>${event.data}</div>`;
logDiv.scrollTop = logDiv.scrollHeight;
};
function startInstallation(ip, user, pass) {
// Diese Funktion wird gerufen, wenn ein neuer Node hinzugefügt wird
fetch('/api/setup_node', {
method: 'POST',
body: JSON.stringify({ip, user, pass})
});
}
</script>
<script>
const ws = new WebSocket(`ws://${location.host}/ws/chat`);
const chatWindow = document.getElementById('chat-window');
ws.onmessage = (event) => {
const msg = document.createElement('div');
msg.className = "bg-blue-900 p-3 rounded-lg w-fit self-start";
msg.innerText = event.data;
chatWindow.appendChild(msg);
chatWindow.scrollTop = chatWindow.scrollHeight;
};
function sendMessage() {
const input = document.getElementById('user-input');
ws.send(input.value);
const userMsg = document.createElement('div');
userMsg.className = "bg-gray-700 p-3 rounded-lg w-fit self-end ml-auto";
userMsg.innerText = input.value;
chatWindow.appendChild(userMsg);
input.value = '';
}
async function addNode() {
const ip = prompt("IP des neuen Pi:");
const name = prompt("Name des Pi:");
if(ip && name) {
await fetch('/add_node', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ip, name})
});
location.reload();
}
}
</script>
</body>
</html>