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-04 12:59:18 +00:00
parent 1d337ed77a
commit 8aaa9f7a54
1 changed files with 50 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
templates/index.html
View File

@@ -61,17 +61,22 @@
<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 group">
<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">{{ node.name }}</div>
<form action="/remove_node/{{ node.id }}" method="post">
<button type="submit" class="text-slate-500 hover:text-red-500 text-xs">✕</button>
</form>
</div>
<div class="text-[10px] text-slate-500">{{ node.ip }}</div>
<div class="text-[10px] text-slate-500 font-mono flex justify-between items-center">
{{ node.ip }}
<button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400 transition-transform active:rotate-180" title="Status prüfen">
🔄
</button>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="h-2 w-2 rounded-full {% if node.status == 'Docker Aktiv' %} bg-blue-500 shadow-[0_0_8px_#3b82f6] {% else %} bg-yellow-500 {% endif %}"></span>
<span class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</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] {% else %} bg-yellow-500 {% endif %}"></span>
<span id="badge-{{ node.id }}" class="text-[9px] uppercase font-mono text-slate-300">{{ node.status }}</span>
</div>
<button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1 rounded transition-colors">Konsole öffnen</button>
</div>
@@ -221,6 +226,38 @@
alert("Alle Felder müssen ausgefüllt werden.");
}
};
window.refreshNodeStatus = async function(nodeId) {
const badge = document.getElementById(`badge-${nodeId}`);
const led = document.getElementById(`led-${nodeId}`);
// Visuelles Feedback: Badge ausgrauen während der Suche
badge.innerText = "Prüfe...";
badge.classList.add("animate-pulse");
try {
const response = await fetch(`/refresh_status/${nodeId}`);
const data = await response.json();
// UI aktualisieren
badge.innerText = data.status;
badge.classList.remove("animate-pulse");
if (data.status === "Docker Aktiv") {
led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
badge.classList.add("text-blue-400");
} else if (data.status === "Offline/Fehler") {
led.className = "h-2 w-2 rounded-full bg-red-600";
badge.classList.add("text-red-400");
} else {
led.className = "h-2 w-2 rounded-full bg-yellow-500";
badge.classList.remove("text-blue-400");
}
} catch (err) {
console.error("Fehler beim Refresh:", err);
badge.innerText = "Fehler";
}
};
});
</script>
</body>