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:20:49 +00:00
parent ab1552b182
commit 777ec2dd23
1 changed files with 54 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
templates/index.html
View File

@@ -4,7 +4,6 @@
<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>
@@ -137,9 +136,7 @@
<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 node-card-entry"
id="node-card-{{ node.id }}"
data-node-id="{{ node.id }}">
<div class="p-3 bg-slate-800 rounded border border-slate-700 relative group" id="node-card-{{ 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 }})">
@@ -209,6 +206,48 @@
</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;
@@ -261,9 +300,8 @@
});
}
// --- VERBESSERTE REFRESH FUNKTION ---
// isAuto verhindert das Flackern von "PRÜFE..." beim Hintergrund-Update
window.refreshNodeStatus = async function(nodeId, isAuto = false) {
// --- Status Update mit neuen OS & Arch Werten ---
window.refreshNodeStatus = async function(nodeId) {
const badge = document.getElementById(`badge-${nodeId}`);
const led = document.getElementById(`led-${nodeId}`);
const card = document.getElementById(`node-card-${nodeId}`);
@@ -271,35 +309,36 @@
const vncBadge = document.getElementById(`vnc-badge-${nodeId}`);
const osIcon = document.getElementById(`os-icon-${nodeId}`);
if (!isAuto) {
badge.textContent = "PRÜFE...";
card.style.opacity = "0.7";
}
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" || data.status === "Offline") {
} else if (data.status === "Offline/Fehler") {
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";
badge.textContent = "FEHLER";
led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]";
} finally {
card.style.opacity = "1";
@@ -360,16 +399,14 @@
} catch (e) { statusEl.textContent = "❌ Fehler"; }
}
// --- INIT & AUTO-REFRESH ---
// --- Init ---
document.addEventListener('DOMContentLoaded', function() {
// Setze initiale OS Icons
// Setze initiale OS Icons basierend auf den Server-Daten
{% 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' }
@@ -413,15 +450,6 @@
});
};
// --- 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();
});
</script>