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-06 11:47:48 +00:00
parent 4d7f8c56e2
commit b1b549081a
1 changed files with 133 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

266
templates/index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Pi-Orchestrator AI Dashboard</title> <title>Pi-Orchestrator AI Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/tailwindcss.com"></script>
<script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/gridstack@11.1.0/dist/gridstack.min.css" rel="stylesheet"/> <link href="https://cdn.jsdelivr.net/npm/gridstack@11.1.0/dist/gridstack.min.css" rel="stylesheet"/>
@@ -35,6 +36,10 @@
.add-node-btn { background-color: #2563eb; color: white; } .add-node-btn { background-color: #2563eb; color: white; }
#settings-status { color: #10b981; font-size: 11px; min-width: 80px; } #settings-status { color: #10b981; font-size: 11px; min-width: 80px; }
.markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; } .markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; }
/* Hilfsklassen für Resize-Handles (GridStack) */
.ui-resizable-handle { opacity: 0.2; transition: opacity 0.2s; }
.ui-resizable-handle:hover { opacity: 1; background: rgba(56, 189, 248, 0.5); }
</style> </style>
</head> </head>
<body class="bg-slate-950 text-white overflow-hidden"> <body class="bg-slate-950 text-white overflow-hidden">
@@ -68,7 +73,6 @@
<div class="p-3 bg-slate-800 rounded border border-slate-700 relative group node-card-entry" <div class="p-3 bg-slate-800 rounded border border-slate-700 relative group node-card-entry"
id="node-card-{{ node.id }}" id="node-card-{{ node.id }}"
data-node-id="{{ node.id }}"> data-node-id="{{ node.id }}">
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div class="text-sm font-bold flex items-center gap-1.5 cursor-pointer hover:text-blue-400" onclick="openEditNode({{ node.id }})"> <div class="text-sm font-bold flex items-center gap-1.5 cursor-pointer hover:text-blue-400" onclick="openEditNode({{ node.id }})">
<span id="os-icon-{{ node.id }}" class="text-lg" title="{{ node.os }}">🖥️</span> <span id="os-icon-{{ node.id }}" class="text-lg" title="{{ node.os }}">🖥️</span>
@@ -81,12 +85,10 @@
</form> </form>
</div> </div>
</div> </div>
<div class="text-[10px] text-slate-400 font-mono flex justify-between items-center mt-1"> <div class="text-[10px] text-slate-400 font-mono flex justify-between items-center mt-1">
{{ node.ip }} {{ node.ip }}
<span id="arch-{{ node.id }}" class="bg-slate-900 border border-slate-700 px-1.5 rounded">{{ node.arch }}</span> <span id="arch-{{ node.id }}" class="bg-slate-900 border border-slate-700 px-1.5 rounded">{{ node.arch }}</span>
</div> </div>
<div class="mt-2 flex items-center justify-between"> <div class="mt-2 flex items-center justify-between">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if node.status == 'Docker Aktiv' %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% elif 'Offline' in node.status %} bg-red-500 shadow-[0_0_8px_#ef4444] {% else %} bg-yellow-500 {% endif %}"></span> <span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if node.status == 'Docker Aktiv' %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% elif 'Offline' in node.status %} bg-red-500 shadow-[0_0_8px_#ef4444] {% else %} bg-yellow-500 {% endif %}"></span>
@@ -94,12 +96,10 @@
</div> </div>
<button onclick="refreshNodeStatus({{ node.id }})" class="text-slate-500 hover:text-blue-400 text-[10px]">🔄</button> <button onclick="refreshNodeStatus({{ node.id }})" class="text-slate-500 hover:text-blue-400 text-[10px]">🔄</button>
</div> </div>
<div class="flex gap-1.5 mt-2"> <div class="flex gap-1.5 mt-2">
<span class="text-[9px] px-1.5 rounded font-bold bg-green-900/50 text-green-400 border border-green-800">SSH</span> <span class="text-[9px] px-1.5 rounded font-bold bg-green-900/50 text-green-400 border border-green-800">SSH</span>
<span id="vnc-badge-{{ node.id }}" class="text-[9px] px-1.5 rounded font-bold border {% if node.vnc %}bg-purple-900/50 text-purple-400 border-purple-800{% else %}bg-slate-800 text-slate-600 border-slate-700{% endif %}">VNC</span> <span id="vnc-badge-{{ node.id }}" class="text-[9px] px-1.5 rounded font-bold border {% if node.vnc %}bg-purple-900/50 text-purple-400 border-purple-800{% else %}bg-slate-800 text-slate-600 border-slate-700{% endif %}">VNC</span>
</div> </div>
<button onclick="openTerminal('{{ node.ip }}')" class="mt-3 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1.5 rounded font-bold uppercase tracking-wider">Terminal öffnen</button> <button onclick="openTerminal('{{ node.ip }}')" class="mt-3 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1.5 rounded font-bold uppercase tracking-wider">Terminal öffnen</button>
</div> </div>
{% endfor %} {% endfor %}
@@ -119,14 +119,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="grid-stack-item" gs-id="logs-widget" gs-w="6" gs-h="5" gs-x="6" gs-y="0"> <div class="grid-stack-item" gs-id="logs-widget" gs-w="6" gs-h="5" gs-x="6" gs-y="0">
<div class="grid-stack-item-content"> <div class="grid-stack-item-content">
<div class="widget-header"><span>📜 System Logs</span> <span>⠿</span></div> <div class="widget-header"><span>📜 System Logs</span> <span>⠿</span></div>
<div id="install-log">Warte auf Aufgaben...</div> <div id="install-log">Warte auf Aufgaben...</div>
</div> </div>
</div> </div>
<div class="grid-stack-item" gs-id="term-widget" gs-w="12" gs-h="6" gs-x="0" gs-y="5"> <div class="grid-stack-item" gs-id="term-widget" gs-w="12" gs-h="6" gs-x="0" gs-y="5">
<div class="grid-stack-item-content"> <div class="grid-stack-item-content">
<div class="widget-header"><span>🖥️ Live Terminal</span> <span>⠿</span></div> <div class="widget-header"><span>🖥️ Live Terminal</span> <span>⠿</span></div>
@@ -138,25 +136,55 @@
</div> </div>
<div id="add-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000]"> <div id="add-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000]">
<div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-96 shadow-2xl">
<h3 class="text-lg font-bold mb-4 text-blue-400">Neuen Node hinzufügen</h3>
<form action="/add_node" method="post" class="space-y-3">
<input type="text" name="name" placeholder="Name (z.B. Pi-Worker-1)" 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 Benutzer" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
<input type="password" name="password" placeholder="SSH 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="closeAddNode()" class="px-4 py-2 text-sm text-slate-400 hover:text-white">Abbrechen</button>
<button type="submit" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 text-sm rounded font-bold">Koppeln</button>
</div>
</form>
</div> </div>
</div>
<div id="edit-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000]">
<div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-96 shadow-2xl">
<h3 class="text-lg font-bold mb-4 text-emerald-400">Node bearbeiten</h3>
<form id="edit-node-form" method="post" class="space-y-3">
<input type="text" id="edit-name" name="name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required placeholder="Name">
<input type="text" id="edit-ip" name="ip" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required placeholder="IP">
<input type="text" id="edit-user" name="user" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required placeholder="SSH User">
<div class="flex justify-end gap-2 pt-4">
<button type="button" onclick="closeEditNode()" class="px-4 py-2 text-sm text-slate-400 hover:text-white">Abbrechen</button>
<button type="submit" class="bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm rounded font-bold">Speichern</button>
</div>
</form>
</div>
</div>
<script> <script>
let currentSettings = {}; let currentSettings = {};
let termDataDisposable = null; let termDataDisposable = null;
let fitAddon = new FitAddon.FitAddon();
// Icon-Helper
function getOsIcon(osName) { function getOsIcon(osName) {
const os = (osName || "").toLowerCase(); const os = (osName || "").toLowerCase();
if (os.includes("mac") || os.includes("darwin")) return "🍏"; if (os.includes("mac") || os.includes("darwin")) return "🍏";
if (os.includes("win")) return "🪟"; if (os.includes("win")) return "🪟";
if (os.includes("fedora")) return "🎩";
if (os.includes("ubuntu")) return "🟠"; if (os.includes("ubuntu")) return "🟠";
if (os.includes("alpine")) return "⛰️";
if (os.includes("raspbian") || os.includes("debian") || os.includes("linux")) return "🐧"; if (os.includes("raspbian") || os.includes("debian") || os.includes("linux")) return "🐧";
return "🖥️"; return "🖥️";
} }
// Modal Controls
window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden'); window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden');
window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden'); window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden');
window.closeEditNode = () => document.getElementById('edit-node-modal').classList.add('hidden');
window.openEditNode = async function(nodeId) { window.openEditNode = async function(nodeId) {
try { try {
@@ -167,68 +195,117 @@
document.getElementById('edit-user').value = data.user; document.getElementById('edit-user').value = data.user;
document.getElementById('edit-node-form').action = `/edit_node/${nodeId}`; document.getElementById('edit-node-form').action = `/edit_node/${nodeId}`;
document.getElementById('edit-node-modal').classList.remove('hidden'); document.getElementById('edit-node-modal').classList.remove('hidden');
} catch(e) { console.error(e); } } catch(e) { console.error("Fehler beim Laden der Node-Daten:", e); }
}; };
window.closeEditNode = () => document.getElementById('edit-node-modal').classList.add('hidden');
// --- VERBESSERTE REFRESH FUNKTION --- // Status Update
window.refreshNodeStatus = async function(nodeId, isAuto = false) { window.refreshNodeStatus = async function(nodeId, isAuto = false) {
const badge = document.getElementById(`badge-${nodeId}`); const badge = document.getElementById(`badge-${nodeId}`);
const led = document.getElementById(`led-${nodeId}`); const led = document.getElementById(`led-${nodeId}`);
const card = document.getElementById(`node-card-${nodeId}`); const card = document.getElementById(`node-card-${nodeId}`);
const archBadge = document.getElementById(`arch-${nodeId}`); if (!isAuto) { badge.textContent = "PRÜFE..."; card.style.opacity = "0.7"; }
const osIcon = document.getElementById(`os-icon-${nodeId}`);
const vncBadge = document.getElementById(`vnc-badge-${nodeId}`);
if (!isAuto) {
badge.textContent = "PRÜFE...";
card.style.opacity = "0.7";
}
try { try {
const response = await fetch(`/refresh_status/${nodeId}`); const response = await fetch(`/refresh_status/${nodeId}`);
const data = await response.json(); const data = await response.json();
badge.textContent = data.status; badge.textContent = data.status;
archBadge.textContent = data.arch; document.getElementById(`arch-${nodeId}`).textContent = data.arch;
osIcon.innerText = getOsIcon(data.os); document.getElementById(`os-icon-${nodeId}`).innerText = getOsIcon(data.os);
if (data.vnc) { if (data.status === "Docker Aktiv") led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
vncBadge.className = "text-[9px] px-1.5 rounded font-bold border bg-purple-900/50 text-purple-400 border-purple-800"; else if (data.status.includes("Offline")) led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]";
} else { else led.className = "h-2 w-2 rounded-full bg-yellow-500";
vncBadge.className = "text-[9px] px-1.5 rounded font-bold border bg-slate-800 text-slate-600 border-slate-700"; } catch (e) { if (!isAuto) badge.textContent = "FEHLER"; }
} finally { card.style.opacity = "1"; }
if (data.status === "Docker Aktiv") {
led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
} else if (data.status.includes("Offline")) {
led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]";
} else {
led.className = "h-2 w-2 rounded-full bg-yellow-500";
}
} catch (e) {
if (!isAuto) badge.textContent = "FEHLER";
} finally {
card.style.opacity = "1";
}
}; };
// --- Settings / Models --- // DOMContentLoaded Init
async function loadSettings() { document.addEventListener('DOMContentLoaded', function() {
try { // 1. GridStack (Resize all handles)
const res = await fetch('/api/settings'); const grid = GridStack.init({
currentSettings = await res.json(); cellHeight: 80, margin: 10, float: true,
document.getElementById('ai-provider').value = currentSettings.provider; handle: '.widget-header',
updateModelDropdown(true); resizable: { handles: 'all' }
} catch (e) { console.error(e); } });
} const savedLayout = localStorage.getItem('pi-orch-layout-v2');
if (savedLayout) grid.load(JSON.parse(savedLayout));
grid.on('resizestop dragstop', () => {
localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false)));
if (window.term) fitAddon.fit();
});
// 2. Terminal
window.term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
window.term.loadAddon(fitAddon);
window.term.open(document.getElementById('terminal'));
fitAddon.fit();
// 3. Chat logic & Enter Key
const chatInput = document.getElementById('user-input');
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
window.sendMessage = () => {
if(!chatInput.value.trim()) return;
chatWs.send(chatInput.value);
appendChat("Du", chatInput.value, "text-slate-400 font-bold");
chatInput.value = '';
};
chatInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
window.appendChat = (user, msg, classes) => {
const win = document.getElementById('chat-window');
win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1 text-[10px] uppercase">${user}</span><div class="markdown-content text-slate-300 text-sm">${marked.parse(msg)}</div></div>`;
win.scrollTop = win.scrollHeight;
};
// 4. Terminal WS
window.openTerminal = (ip) => {
if (window.termWs) window.termWs.close();
window.term.clear();
window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
window.termWs.onmessage = (ev) => window.term.write(ev.data);
if (termDataDisposable) termDataDisposable.dispose();
termDataDisposable = window.term.onData(data => {
if(window.termWs.readyState === 1) window.termWs.send(data);
});
};
// 5. Logs WS
const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
logWs.onmessage = (ev) => {
const div = document.createElement('div');
div.textContent = `> ${ev.data}`;
document.getElementById('install-log').appendChild(div);
document.getElementById('install-log').scrollTop = document.getElementById('install-log').scrollHeight;
};
// 6. Settings
async function loadSettings() {
try {
const res = await fetch('/api/settings');
currentSettings = await res.json();
document.getElementById('ai-provider').value = currentSettings.provider;
updateModelDropdown(true);
} catch (e) {}
}
loadSettings();
// Auto-Refresh Nodes
setInterval(() => {
document.querySelectorAll('.node-card-entry').forEach(card => {
refreshNodeStatus(card.getAttribute('data-node-id'), true);
});
}, 60000);
});
// Provider/Model Functions (global)
async function updateModelDropdown(isInitialLoad = false) { async function updateModelDropdown(isInitialLoad = false) {
const provider = document.getElementById('ai-provider').value; const provider = document.getElementById('ai-provider').value;
const modelSelect = document.getElementById('ai-model'); const modelSelect = document.getElementById('ai-model');
const urlContainer = document.getElementById('ollama-url-container');
urlContainer.style.display = (provider === "ollama") ? "flex" : "none";
modelSelect.innerHTML = '<option>Lade...</option>';
try { try {
const res = await fetch(`/api/models?provider=${provider}`); const res = await fetch(`/api/models?provider=${provider}`);
const data = await res.json(); const data = await res.json();
@@ -239,7 +316,7 @@
modelSelect.appendChild(opt); modelSelect.appendChild(opt);
}); });
if (isInitialLoad && currentSettings[`${provider}_model`]) modelSelect.value = currentSettings[`${provider}_model`]; if (isInitialLoad && currentSettings[`${provider}_model`]) modelSelect.value = currentSettings[`${provider}_model`];
} catch (e) { modelSelect.innerHTML = '<option>Fehler</option>'; } } catch (e) {}
} }
async function saveSettings() { async function saveSettings() {
@@ -253,85 +330,8 @@
}); });
document.getElementById('settings-status').textContent = "✅ Gespeichert"; document.getElementById('settings-status').textContent = "✅ Gespeichert";
setTimeout(() => document.getElementById('settings-status').textContent = "", 2000); setTimeout(() => document.getElementById('settings-status').textContent = "", 2000);
} catch (e) { } } catch (e) {}
} }
// --- Init ---
document.addEventListener('DOMContentLoaded', function() {
// GridStack laden
try {
// FIX: handles: 'all' hinzugefügt, damit man an jeder Seite ziehen kann
var grid = GridStack.init({
cellHeight: 80,
margin: 10,
float: true,
handle: '.widget-header',
resizable: { handles: 'all' }
});
const savedLayout = localStorage.getItem('pi-orch-layout-v2');
if (savedLayout) grid.load(JSON.parse(savedLayout));
grid.on('resizestop dragstop', () => localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false))));
grid.on('resizestop', (event, el) => {
// Wenn das Terminal-Widget vergrößert wurde, pass das Terminal-Layout an
if (el.getAttribute('gs-id') === 'term-widget') {
setTimeout(() => fitAddon.fit(), 100);
}
});
} catch(e) { console.error("GridStack Fehler:", e); }
// Terminal
const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
const fitAddon = new FitAddon.FitAddon();
term.loadAddon(fitAddon);
term.open(document.getElementById('terminal'));
// WebSockets
const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
logWs.onmessage = (ev) => {
const div = document.createElement('div');
div.textContent = `> ${ev.data}`;
document.getElementById('install-log').appendChild(div);
document.getElementById('install-log').scrollTop = document.getElementById('install-log').scrollHeight;
};
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
window.sendMessage = () => {
const input = document.getElementById('user-input');
if(!input.value.trim()) return;
chatWs.send(input.value);
appendChat("Du", input.value, "text-slate-400 font-bold");
input.value = '';
};
window.appendChat = (user, msg, classes) => {
const win = document.getElementById('chat-window');
win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1 text-[10px] uppercase">${user}</span><div class="markdown-content text-slate-300 text-sm">${marked.parse(msg)}</div></div>`;
win.scrollTop = win.scrollHeight;
};
window.openTerminal = (ip) => {
if (window.termWs) window.termWs.close();
term.clear();
window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
window.termWs.onmessage = (ev) => term.write(ev.data);
if (termDataDisposable) termDataDisposable.dispose();
termDataDisposable = term.onData(data => window.termWs.send(data));
};
// --- NEU: AUTO-REFRESH LOOP (Alle 60 Sek) ---
setInterval(() => {
document.querySelectorAll('.node-card-entry').forEach(card => {
const nodeId = card.getAttribute('data-node-id');
if(nodeId) refreshNodeStatus(nodeId, true);
});
}, 60000);
loadSettings();
});
</script> </script>
</body> </body>
</html> </html>