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:00:24 +00:00
parent 099609fa29
commit 9ae1a51163
1 changed files with 27 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
templates/index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Pi-Orchestrator AI Dashboard</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<link href="/static/gridstack.min.css" rel="stylesheet"/>
<script src="/static/gridstack-all.js"></script>
@@ -136,7 +137,9 @@
<div class="w-64 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-2">
{% for node in nodes %}
<div class="p-3 bg-slate-800 rounded border border-slate-700 relative group" id="node-card-{{ node.id }}">
<div class="p-3 bg-slate-800 rounded border border-slate-700 relative group node-card-entry"
id="node-card-{{ node.id }}"
data-node-id="{{ node.id }}">
<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 }})">
@@ -206,48 +209,6 @@
</div>
</div>
<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 (für Handshake)" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
<input type="password" name="sudo_pass" placeholder="Sudo Passwort (Optional für KI)" 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="closeAddNode()" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors">Abbrechen</button>
<button type="submit" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 text-sm rounded font-bold transition-colors">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]">
<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">
<label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">Anzeigename</label>
<input type="text" id="edit-name" name="name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
<label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">IP-Adresse</label>
<input type="text" id="edit-ip" name="ip" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
<label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">SSH User</label>
<input type="text" id="edit-user" name="user" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
<label class="text-[10px] text-slate-400 uppercase font-bold block mb-[-8px]">Sudo Passwort</label>
<input type="password" id="edit-sudo" name="sudo_pass" placeholder="Leer lassen falls unverändert" 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="closeEditNode()" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors">Abbrechen</button>
<button type="submit" class="bg-emerald-600 hover:bg-emerald-500 px-4 py-2 text-sm rounded font-bold transition-colors">Speichern</button>
</div>
</form>
</div>
</div>
<script>
let currentSettings = {};
let termDataDisposable = null;
@@ -300,8 +261,9 @@
});
}
// --- Status Update mit neuen OS & Arch Werten ---
window.refreshNodeStatus = async function(nodeId) {
// --- VERBESSERTE REFRESH FUNKTION ---
// isAuto verhindert das Flackern von "PRÜFE..." beim Hintergrund-Update
window.refreshNodeStatus = async function(nodeId, isAuto = false) {
const badge = document.getElementById(`badge-${nodeId}`);
const led = document.getElementById(`led-${nodeId}`);
const card = document.getElementById(`node-card-${nodeId}`);
@@ -309,104 +271,53 @@
const vncBadge = document.getElementById(`vnc-badge-${nodeId}`);
const osIcon = document.getElementById(`os-icon-${nodeId}`);
badge.textContent = "PRÜFE...";
card.style.opacity = "0.7";
if (!isAuto) {
badge.textContent = "PRÜFE...";
card.style.opacity = "0.7";
}
try {
const response = await fetch(`/refresh_status/${nodeId}`);
const data = await response.json();
// Texte & Icons aktualisieren
badge.textContent = data.status;
archBadge.textContent = data.arch;
osIcon.innerText = getOsIcon(data.os);
osIcon.title = data.os;
// VNC Badge
if (data.vnc) {
vncBadge.className = "text-[9px] px-1.5 rounded font-bold border bg-purple-900/50 text-purple-400 border-purple-800";
} else {
vncBadge.className = "text-[9px] px-1.5 rounded font-bold border bg-slate-800 text-slate-600 border-slate-700";
}
// LED Logik
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 === "Offline/Fehler") {
} else if (data.status === "Offline/Fehler" || data.status === "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) {
badge.textContent = "FEHLER";
if(!isAuto) badge.textContent = "FEHLER";
led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]";
} finally {
card.style.opacity = "1";
}
};
// --- Settings & Models ---
async function loadSettings() {
try {
const res = await fetch('/api/settings');
currentSettings = await res.json();
document.getElementById('ai-provider').value = currentSettings.provider;
document.getElementById('ollama-url').value = currentSettings.ollama_base_url || "http://127.0.0.1:11434/v1";
updateModelDropdown(true);
} catch (e) { console.error(e); }
}
// --- Settings & Models (unverändert) ---
// ... (hier kommt dein bestehender Code für loadSettings, updateModelDropdown etc.) ...
async function updateModelDropdown(isInitialLoad = false) {
const provider = document.getElementById('ai-provider').value;
const modelSelect = document.getElementById('ai-model');
const urlContainer = document.getElementById('ollama-url-container');
const ollamaUrl = document.getElementById('ollama-url').value;
urlContainer.style.display = (provider === "ollama") ? "flex" : "none";
modelSelect.innerHTML = '<option>Lade...</option>';
try {
const res = await fetch(`/api/models?provider=${provider}&url=${encodeURIComponent(ollamaUrl)}`);
const data = await res.json();
modelSelect.innerHTML = '';
if (data.models && data.models.length > 0) {
data.models.forEach(m => {
const opt = document.createElement('option');
opt.value = opt.textContent = m;
modelSelect.appendChild(opt);
});
const savedModel = currentSettings[`${provider}_model`];
if (isInitialLoad && savedModel) modelSelect.value = savedModel;
}
} catch (e) { modelSelect.innerHTML = '<option>Fehler</option>'; }
}
async function saveSettings() {
const provider = document.getElementById('ai-provider').value;
const model = document.getElementById('ai-model').value;
const ollama_base_url = document.getElementById('ollama-url').value;
const statusEl = document.getElementById('settings-status');
try {
await fetch('/api/settings', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ provider, model, ollama_base_url })
});
statusEl.textContent = "✅ Gespeichert";
setTimeout(() => statusEl.textContent = "", 2000);
} catch (e) { statusEl.textContent = "❌ Fehler"; }
}
// --- Init ---
// --- INIT & AUTO-REFRESH ---
document.addEventListener('DOMContentLoaded', function() {
// Setze initiale OS Icons basierend auf den Server-Daten
// Setze initiale OS Icons
{% for node in nodes %}
document.getElementById('os-icon-{{ node.id }}').innerText = getOsIcon("{{ node.os }}");
{% endfor %}
// Gridstack Init
var grid = GridStack.init({
cellHeight: 80, margin: 10, float: true,
handle: '.widget-header', resizable: { handles: 'all' }
@@ -415,40 +326,17 @@
if (savedLayout) { try { grid.load(JSON.parse(savedLayout)); } catch(e){} }
grid.on('resizestop dragstop', () => localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false))));
const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
const fitAddon = new FitAddon.FitAddon();
term.loadAddon(fitAddon);
term.open(document.getElementById('terminal'));
// Terminal, Logs, Chat Init (unverändert)
// ... (bestehende WebSocket-Logik hier lassen) ...
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");
initChat(chatWs);
window.appendChat = function(user, msg, classes) {
const win = document.getElementById('chat-window');
let formattedMsg = (user === "KI") ? marked.parse(msg) : msg;
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">${formattedMsg}</div></div>`;
win.scrollTop = win.scrollHeight;
};
window.openTerminal = function(ip) {
if (window.termWs) window.termWs.close();
if (termDataDisposable) termDataDisposable.dispose();
term.clear();
window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
window.termWs.onmessage = (ev) => term.write(ev.data);
termDataDisposable = term.onData(data => {
if (window.termWs?.readyState === WebSocket.OPEN) window.termWs.send(data);
// --- NEU: AUTO REFRESH LOOP (Alle 60 Sek) ---
setInterval(() => {
console.log("Auto-Refresh der Node-Badges...");
document.querySelectorAll('.node-card-entry').forEach(card => {
const nodeId = card.getAttribute('data-node-id');
if(nodeId) refreshNodeStatus(nodeId, true); // true = silent refresh
});
};
}, 60000);
loadSettings();
});