261 lines
15 KiB
HTML
261 lines
15 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="/static/gridstack.min.css" rel="stylesheet"/>
|
|
<script src="/static/gridstack-all.js"></script>
|
|
|
|
<link rel="stylesheet" href="/static/xterm.css" />
|
|
<script src="/static/xterm.js"></script>
|
|
<script src="/static/xterm-addon-fit.js"></script>
|
|
<script src="/static/marked.min.js"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
|
|
<style>
|
|
.grid-stack { background: #0f172a; min-height: 100vh; padding: 10px; }
|
|
.grid-stack-item-content {
|
|
background: #1e293b;
|
|
color: white;
|
|
border: 1px solid #334155;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.terminal-container, #terminal {
|
|
flex: 1; width: 100%; height: 100%; background: black;
|
|
}
|
|
|
|
#install-log {
|
|
flex: 1; font-family: monospace; font-size: 11px; color: #4ade80;
|
|
padding: 10px; overflow-y: auto; background: #0f172a;
|
|
}
|
|
|
|
.widget-header {
|
|
background: #334155; padding: 8px 12px; cursor: move;
|
|
font-size: 12px; font-weight: bold; display: flex;
|
|
justify-content: space-between; align-items: center; user-select: none;
|
|
}
|
|
|
|
body { margin: 0; padding-top: 60px; }
|
|
|
|
.top-toolbar {
|
|
position: fixed; top: 0; left: 0; width: 100%;
|
|
background-color: #1e293b; color: white; height: 55px;
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 0 20px; box-sizing: border-box; z-index: 1000;
|
|
border-bottom: 1px solid #334155;
|
|
}
|
|
|
|
.os-icon { width: 18px; height: 18px; filter: grayscale(0.5); }
|
|
.node-card:hover .os-icon { filter: grayscale(0); }
|
|
|
|
/* Tooltip Style */
|
|
.feature-icon { font-size: 12px; opacity: 0.4; transition: opacity 0.3s; }
|
|
.feature-active { opacity: 1; color: #38bdf8; }
|
|
|
|
.markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-slate-950 text-white overflow-hidden">
|
|
|
|
<div class="top-toolbar">
|
|
<div class="toolbar-title font-bold text-sky-400">🤖 KI-Orchestrator</div>
|
|
|
|
<div class="toolbar-controls flex items-center gap-4">
|
|
<button onclick="openAddNode()" class="bg-blue-600 hover:bg-blue-500 px-3 py-1.5 rounded text-xs font-bold transition-all">
|
|
+ Node hinzufügen
|
|
</button>
|
|
|
|
<div class="h-6 w-px bg-slate-700"></div>
|
|
|
|
<select id="ai-provider" onchange="updateModelDropdown(false)" class="bg-slate-900 border border-slate-700 text-xs rounded p-1">
|
|
<option value="google">Google Gemini</option>
|
|
<option value="openai">OpenAI</option>
|
|
<option value="ollama">Ollama</option>
|
|
</select>
|
|
|
|
<select id="ai-model" class="bg-slate-900 border border-slate-700 text-xs rounded p-1 min-w-[120px]"></select>
|
|
|
|
<div id="ollama-url-container" class="hidden flex items-center gap-2">
|
|
<input type="text" id="ollama-url" class="bg-slate-900 border border-slate-700 text-xs rounded p-1" placeholder="URL">
|
|
</div>
|
|
|
|
<button class="bg-emerald-600 hover:bg-emerald-500 px-3 py-1.5 rounded text-xs font-bold" onclick="saveSettings()">Speichern</button>
|
|
<span id="settings-status"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex h-screen">
|
|
<div class="w-72 bg-slate-900 border-r border-slate-800 p-4 flex flex-col">
|
|
<div id="node-list" class="flex-1 overflow-y-auto space-y-3">
|
|
{% for node in nodes %}
|
|
<div class="p-3 bg-slate-800 rounded-lg border border-slate-700 hover:border-slate-500 transition-all group relative" id="node-card-{{ node.id }}">
|
|
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-6 h-6 flex items-center justify-center bg-slate-900 rounded">
|
|
{% if node.os_type == 'debian' %} 🐧
|
|
{% elif node.os_type == 'raspbian' %} 🍓
|
|
{% elif node.os_type == 'fedora' %} 🎩
|
|
{% elif node.os_type == 'ubuntu' %} 🧡
|
|
{% else %} 💻 {% endif %}
|
|
</div>
|
|
<span class="text-sm font-bold truncate max-w-[120px]">{{ node.name }}</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button onclick="openEditNode({{ node | tojson }})" class="text-slate-500 hover:text-blue-400 p-1">
|
|
<i data-lucide="edit-3" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
<form action="/remove_node/{{ node.id }}" method="post" onsubmit="return confirm('Node wirklich löschen?')">
|
|
<button type="submit" class="text-slate-500 hover:text-red-500 p-1">
|
|
<i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center text-[10px] text-slate-400 font-mono mb-2">
|
|
<span>{{ node.ip }}</span>
|
|
<span class="bg-slate-700 px-1 rounded text-slate-300">{{ node.arch }}</span>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between mt-2 pt-2 border-t border-slate-700/50">
|
|
<div class="flex items-center gap-2">
|
|
<span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if node.status == 'Online' %} bg-emerald-500 shadow-[0_0_8px_#10b981] {% else %} bg-slate-600 {% endif %}"></span>
|
|
<span id="badge-{{ node.id }}" class="text-[9px] uppercase font-bold tracking-wider">{{ node.status }}</span>
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<i data-lucide="container" title="Docker" class="w-3.5 h-3.5 {% if node.has_docker %} text-blue-400 {% else %} text-slate-600 {% endif %}"></i>
|
|
<i data-lucide="monitor" title="VNC" class="w-3.5 h-3.5 {% if node.has_vnc %} text-orange-400 {% else %} text-slate-600 {% endif %}"></i>
|
|
<i data-lucide="terminal" title="SSH" class="w-3.5 h-3.5 text-emerald-400"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button onclick="openTerminal('{{ node.ip }}')" class="flex-1 text-[9px] bg-blue-600/20 hover:bg-blue-600 text-blue-400 hover:text-white py-1 rounded transition-all">TERMINAL</button>
|
|
<button onclick="refreshNodeStatus({{ node.id }})" class="px-2 text-[9px] bg-slate-700 hover:bg-slate-600 rounded">🔄</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 overflow-y-auto">
|
|
<div class="grid-stack">
|
|
<div class="grid-stack-item" gs-id="chat-widget" gs-w="6" gs-h="5">
|
|
<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 bg-[#0f172a]/50"></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 border border-slate-700 focus:border-blue-500" placeholder="Frage die KI..." autocomplete="off">
|
|
<button onclick="sendMessage()" class="ml-2 bg-blue-600 px-4 py-1 rounded text-xs transition-colors">Senden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-stack-item" gs-id="logs-widget" gs-w="6" gs-h="5">
|
|
<div class="grid-stack-item-content">
|
|
<div class="widget-header"><span>📜 System Logs</span> <span>⠿</span></div>
|
|
<div id="install-log">Warte auf Aufgaben...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid-stack-item" gs-id="term-widget" gs-w="12" gs-h="6">
|
|
<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>
|
|
|
|
<div id="add-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000] backdrop-blur-sm">
|
|
<div class="bg-slate-800 p-6 rounded-xl border border-slate-600 w-96 shadow-2xl">
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2 text-blue-400">
|
|
<i data-lucide="plus-circle"></i> Node hinzufügen
|
|
</h3>
|
|
<form action="/add_node" method="post" class="space-y-3">
|
|
<input type="text" name="name" placeholder="Name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
|
|
<input type="text" name="ip" placeholder="IP Adresse" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
|
|
<input type="text" name="user" placeholder="SSH User" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
|
|
<input type="password" name="password" placeholder="SSH/Sudo Passwort" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
|
|
<div class="flex justify-end gap-2 pt-4">
|
|
<button type="button" onclick="closeModals()" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">Abbrechen</button>
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-500 px-6 py-2 text-sm rounded-lg font-bold shadow-lg shadow-blue-900/20">Koppeln</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="edit-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000] backdrop-blur-sm">
|
|
<div class="bg-slate-800 p-6 rounded-xl border border-slate-600 w-96 shadow-2xl">
|
|
<h3 class="text-lg font-bold mb-4 flex items-center gap-2 text-amber-400">
|
|
<i data-lucide="settings-2"></i> Node bearbeiten
|
|
</h3>
|
|
<form id="edit-node-form" method="post" class="space-y-3">
|
|
<div class="text-[10px] text-slate-500 uppercase font-bold tracking-widest">Grunddaten</div>
|
|
<input type="text" id="edit-name" name="name" placeholder="Name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
|
|
<input type="text" id="edit-ip" name="ip" placeholder="IP Adresse" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
|
|
<input type="text" id="edit-user" name="user" placeholder="SSH User" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
|
|
|
|
<div class="text-[10px] text-slate-500 uppercase font-bold tracking-widest pt-2">Sicherheit</div>
|
|
<input type="password" id="edit-password" name="password" placeholder="Neues Passwort (optional)" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm">
|
|
|
|
<div class="flex justify-end gap-2 pt-4">
|
|
<button type="button" onclick="closeModals()" class="px-4 py-2 text-sm text-slate-400 hover:text-white">Abbrechen</button>
|
|
<button type="submit" class="bg-amber-600 hover:bg-amber-500 px-6 py-2 text-sm rounded-lg font-bold shadow-lg shadow-amber-900/20 text-white">Speichern</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Icons initialisieren
|
|
lucide.createIcons();
|
|
|
|
// 1. MODAL LOGIK
|
|
window.openAddNode = function() {
|
|
document.getElementById('add-node-modal').classList.remove('hidden');
|
|
};
|
|
|
|
window.openEditNode = function(node) {
|
|
document.getElementById('edit-name').value = node.name;
|
|
document.getElementById('edit-ip').value = node.ip;
|
|
document.getElementById('edit-user').value = node.user;
|
|
document.getElementById('edit-node-form').action = `/edit_node/${node.id}`;
|
|
document.getElementById('edit-node-modal').classList.remove('hidden');
|
|
};
|
|
|
|
window.closeModals = function() {
|
|
document.getElementById('add-node-modal').classList.add('hidden');
|
|
document.getElementById('edit-node-modal').classList.add('hidden');
|
|
};
|
|
|
|
// 2. REFRESH LOGIK (Mit UI-Update für neue Felder)
|
|
window.refreshNodeStatus = async function(nodeId) {
|
|
const card = document.getElementById(`node-card-${nodeId}`);
|
|
card.classList.add('animate-pulse', 'opacity-70');
|
|
|
|
try {
|
|
const response = await fetch(`/refresh_status/${nodeId}`);
|
|
// Wir laden die Seite neu, um die Jinja-Templates mit den neuen DB-Werten zu rendern
|
|
// Alternativ könnte man hier die DOM-Elemente einzeln updaten
|
|
location.reload();
|
|
} catch (e) {
|
|
console.error("Refresh failed", e);
|
|
card.classList.remove('animate-pulse', 'opacity-70');
|
|
}
|
|
};
|
|
|
|
// ... (Der restliche JavaScript-Code für Chat, Terminal und Settings bleibt identisch zu deinem Original)
|
|
// [Hier den bestehenden JS-Code für initChat, loadSettings, GridStack etc. einfügen]
|
|
</script>
|
|
</body>
|
|
</html> |