66 lines
2.4 KiB
HTML
66 lines
2.4 KiB
HTML
<!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>
|
|
|
|
<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> |