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:02:39 +00:00
parent 47730521bc
commit ea992e5205
1 changed files with 34 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
templates/index.html
View File

@@ -22,37 +22,26 @@
</h2> </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-gray-700 rounded-lg border border-gray-600 hover:border-blue-500 transition-colors"> <div class="p-3 bg-gray-700 rounded-lg border border-gray-600 relative group">
<div class="font-bold text-blue-400">{{ node.name }}</div> <form action="/remove_node/{{ node.id }}" method="post" class="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity">
<div class="text-xs text-gray-400">{{ node.ip }}</div> <button type="submit" class="text-red-500 hover:text-red-400 font-bold text-xs bg-gray-900 rounded-full w-5 h-5 flex items-center justify-center">×</button>
<div class="text-[10px] uppercase mt-1 text-green-500 font-mono">{{ node.status }}</div> </form>
<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> <div class="font-bold text-blue-400">{{ node.name }}</div>
{% endfor %} <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> </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"> <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 + Node hinzufügen
</button> </button>
</div> </div>
{% for node in nodes %}
<div class="p-3 bg-gray-700 rounded-lg border border-gray-600 group relative">
<form action="/remove_node/{{ node.id }}" method="post" class="absolute top-2 right-2">
<button type="submit" class="text-gray-500 hover:text-red-500 text-xs 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>
<div class="flex gap-2 mt-2">
<button onclick="openTerminal('{{ node.ip }}')" class="flex-1 text-[10px] bg-gray-600 hover:bg-gray-500 py-1 rounded">Terminal</button>
</div>
</div>
{% endfor %}
<div class="flex-1 flex flex-col bg-gray-900"> <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 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"> <div class="bg-gray-800 p-3 rounded-lg w-fit border border-gray-700">
@@ -153,14 +142,30 @@
} }
} }
let activeTermWs = null;
function openTerminal(ip) { function openTerminal(ip) {
if (activeTermWs) activeTermWs.close();
term.clear(); term.clear();
term.write(`Verbinde mit ${ip}...\r\n`); term.write(`\r\n>>> Verbinde mit ${ip}...\r\n`);
// Hier würde die WebSocket Verbindung für das spezifische Terminal initiiert werden
const termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`); activeTermWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
termWs.onmessage = (event) => {
term.write(event.data.replace(/\n/g, '\r\n')); 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 // Enter-Taste zum Senden