Webseite überarbeitet und Telegram Bot funktion hinzugefügt #1

Merged
pi-farm merged 59 commits from dev into main 2026-03-07 23:50:03 +00:00
Showing only changes of commit 9168a349f2 - Show all commits

View File

@@ -88,9 +88,10 @@
gap: 8px;
border-left: 1px solid #475569;
padding-left: 12px;
flex: 1;
}
#ollama-url { width: 200px; }
#ollama-url { width: 100%; min-width: 200px; }
.toolbar-controls select, .toolbar-controls input {
height: 32px; background: #0f172a; color: white;
border: 1px solid #475569; border-radius: 4px; padding: 0 8px; font-size: 12px;
@@ -142,13 +143,18 @@
{% 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="flex justify-between items-start">
<div class="text-sm font-bold">{{ node.name }}</div>
<div class="text-sm font-bold" id="node-name-{{ node.id }}">{{ node.name }}</div>
<div class="flex gap-2">
<button onclick="editNode({{ node.id }}, '{{ node.name }}', '{{ node.ip }}')" class="text-slate-500 hover:text-sky-400 text-xs">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
</button>
<form action="/remove_node/{{ node.id }}" method="post" onsubmit="return confirm('Entfernen?')">
<button type="submit" class="text-slate-500 hover:text-red-500 text-xs"></button>
</form>
</div>
</div>
<div class="text-[10px] text-slate-500 font-mono flex justify-between items-center mb-1">
{{ node.ip }}
<span id="node-ip-{{ node.id }}">{{ node.ip }}</span>
<button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400">🔄</button>
</div>
<div class="flex gap-1 mb-2">
@@ -212,6 +218,27 @@
</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">
<h3 class="text-lg font-bold mb-4">Node bearbeiten</h3>
<input type="hidden" id="edit-node-id">
<div class="space-y-4">
<div>
<label class="text-xs text-slate-400">Anzeigename</label>
<input type="text" id="edit-node-name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm text-white">
</div>
<div>
<label class="text-xs text-slate-400">IP Adresse</label>
<input type="text" id="edit-node-ip" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm text-white">
</div>
<div class="flex justify-end gap-2 pt-2">
<button type="button" onclick="closeEditNode()" class="px-4 py-2 text-sm text-slate-400">Abbrechen</button>
<button type="button" onclick="updateNode()" class="bg-sky-600 px-4 py-2 text-sm rounded font-bold">Speichern</button>
</div>
</div>
</div>
</div>
<script>
let currentSettings = {};
let termDataDisposable = null;
@@ -234,7 +261,35 @@
window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden');
window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden');
// 3. ERWEITERTER REFRESH (Aktualisiert OS & Arch)
// EDIT LOGIK
window.editNode = (id, name, ip) => {
document.getElementById('edit-node-id').value = id;
document.getElementById('edit-node-name').value = name;
document.getElementById('edit-node-ip').value = ip;
document.getElementById('edit-node-modal').classList.remove('hidden');
};
window.closeEditNode = () => document.getElementById('edit-node-modal').classList.add('hidden');
window.updateNode = async function() {
const id = document.getElementById('edit-node-id').value;
const name = document.getElementById('edit-node-name').value;
const ip = document.getElementById('edit-node-ip').value;
try {
const res = await fetch(`/api/node/${id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, ip })
});
if(res.ok) {
document.getElementById(`node-name-${id}`).textContent = name;
document.getElementById(`node-ip-${id}`).textContent = ip;
closeEditNode();
}
} catch (e) { alert("Fehler beim Speichern"); }
};
// 3. ERWEITERTER REFRESH
window.refreshNodeStatus = async function(nodeId) {
const badge = document.getElementById(`badge-${nodeId}`);
const led = document.getElementById(`led-${nodeId}`);
@@ -289,7 +344,6 @@
modelSelect.innerHTML = '<option>Lade...</option>';
try {
// URL Parameter nur aufbauen, wenn nötig
let queryUrl = `/api/models?provider=${provider}`;
if (provider === "ollama") {
queryUrl += `&url=${encodeURIComponent(ollamaUrl)}`;
@@ -305,9 +359,7 @@
opt.value = opt.textContent = m;
modelSelect.appendChild(opt);
});
const savedModel = currentSettings[`${provider}_model`] || (provider === 'nvidia' ? currentSettings['nvidia_model'] : null);
if (isInitialLoad && savedModel) modelSelect.value = savedModel;
// Sicherer Zugriff auf die Einstellungen
if (isInitialLoad && currentSettings) {
const savedModel = currentSettings[`${provider}_model`];
if (savedModel) modelSelect.value = savedModel;
@@ -341,8 +393,7 @@
margin: 10,
float: true,
handle: '.widget-header',
resizable: { handles: 'all' },
alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
resizable: { handles: 'all' }
});
const savedLayout = localStorage.getItem('pi-orch-layout-v2');
@@ -389,6 +440,5 @@
loadSettings();
});
</script>
</body>
</html>