147 lines
6.3 KiB
HTML
147 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Pi-Orchestrator AI Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></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" />
|
|
<script src="https://cdn.jsdelivr.net/npm/xterm@5.1.0/lib/xterm.js"></script>
|
|
|
|
<style>
|
|
.grid-stack { background: #0f172a; min-height: 100vh; }
|
|
.grid-stack-item-content {
|
|
background: #1e293b;
|
|
color: white;
|
|
border: 1px solid #334155;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.widget-header {
|
|
background: #334155;
|
|
padding: 5px 10px;
|
|
cursor: move;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.terminal-container { flex: 1; background: black; }
|
|
#install-log { font-family: monospace; font-size: 11px; color: #4ade80; padding: 10px; overflow-y: auto; flex: 1; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-950 text-white overflow-hidden">
|
|
|
|
<div class="flex h-screen">
|
|
<div class="w-64 bg-slate-900 border-r border-slate-700 p-4 flex flex-col">
|
|
<h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
|
|
<div id="node-list" class="flex-1 overflow-y-auto space-y-2">
|
|
{% for node in nodes %}
|
|
<div class="p-3 bg-slate-800 rounded border border-slate-700 relative">
|
|
<div class="text-sm font-bold">{{ node.name }}</div>
|
|
<div class="text-[10px] text-slate-500">{{ node.ip }}</div>
|
|
<div class="mt-1">
|
|
<span class="text-[9px] px-1 rounded bg-black {% if node.status == 'Docker Aktiv' %} text-blue-400 {% else %} text-yellow-500 {% endif %}">
|
|
{{ node.status }}
|
|
</span>
|
|
</div>
|
|
<button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 py-1 rounded">Konsole</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<button onclick="addNode()" class="mt-4 bg-blue-600 p-2 rounded text-sm font-bold">+ Node</button>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto">
|
|
<div class="grid-stack">
|
|
|
|
<div class="grid-stack-item" gs-w="6" gs-h="4" gs-x="0" gs-y="0">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Initialisiere GridStack
|
|
var grid = GridStack.init({
|
|
cellHeight: 70,
|
|
acceptWidgets: true,
|
|
dragIn: '.newWidget',
|
|
resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
|
|
});
|
|
|
|
// Xterm.js Setup
|
|
const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true });
|
|
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;
|
|
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 => { if(termWs) termWs.send(data); });
|
|
}
|
|
|
|
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.scrollTop = l.scrollHeight;
|
|
};
|
|
|
|
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
|
|
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() {
|
|
const input = document.getElementById('user-input');
|
|
chatWs.send(input.value);
|
|
document.getElementById('chat-window').innerHTML += `<div><b>Du:</b> ${input.value}</div>`;
|
|
input.value = '';
|
|
}
|
|
|
|
async function addNode() {
|
|
// ... (identisch zu deiner addNode Funktion)
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |