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 23:37:16 +00:00
parent 49bbb76320
commit bf6a978793
1 changed files with 43 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
templates/index.html
View File

@@ -14,7 +14,6 @@
<script src="/static/marked.min.js"></script>
<style>
/* Bestehendes CSS erweitern/korrigieren */
.grid-stack { background: #0f172a; min-height: 100vh; padding: 10px; }
.grid-stack-item-content {
background: #1e293b;
@@ -23,10 +22,9 @@
border-radius: 8px;
display: flex;
flex-direction: column;
overflow: hidden; /* Verhindert, dass Inhalt aus dem Widget quillt */
overflow: hidden;
}
/* FIX: Terminal und Logs müssen 100% Höhe einnehmen */
.terminal-container, #terminal {
flex: 1;
width: 100%;
@@ -42,7 +40,6 @@
padding: 10px;
overflow-y: auto;
background: #0f172a;
height: 100%;
}
.widget-header {
@@ -54,9 +51,9 @@
display: flex;
justify-content: space-between;
align-items: center;
user-select: none;
}
/* Markdown Styling bleibt gleich... */
.markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; }
.markdown-content code { font-family: monospace; color: #4ade80; }
.markdown-content p { margin-bottom: 8px; }
@@ -78,109 +75,84 @@
</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>
<button onclick="refreshNodeStatus({{ node.id }})" class="hover:text-blue-400">🔄</button>
</div>
<div class="mt-1 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] {% 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>
<button onclick="openTerminal('{{ node.ip }}')" class="mt-2 w-full text-[10px] bg-slate-700 hover:bg-slate-600 py-1 rounded">Konsole öffnen</button>
</div>
{% endfor %}
</div>
<button onclick="addNode()" class="mt-4 bg-blue-600 hover:bg-blue-500 p-2 rounded text-sm font-bold transition-colors">+ Node hinzufügen</button>
<button onclick="addNode()" class="mt-4 bg-blue-600 hover:bg-blue-500 p-2 rounded text-sm font-bold">+ Node hinzufügen</button>
<button onclick="localStorage.removeItem('pi-orch-layout-v2'); location.reload();" class="mt-2 text-[10px] text-slate-500 hover:text-white uppercase">Layout Reset</button>
</div>
<div class="flex-1 overflow-y-auto">
<div class="grid-stack">
<div class="grid-stack-item" gs-id="chat-widget" gs-w="6" gs-h="4" gs-x="0" gs-y="0">
<div class="grid-stack-item" gs-id="chat-widget" gs-w="6" gs-h="5" gs-x="0" gs-y="0">
<div class="grid-stack-item-content">
<div class="widget-header"><span>💬 KI Chat</span> <span>⠿</span></div>
<div id="chat-window" class="flex-1 p-4 overflow-y-auto text-sm space-y-2 bg-[#0f172a]/50"></div>
<div class="p-2 border-t border-slate-700 flex bg-slate-800">
<input id="user-input" type="text" class="flex-1 bg-slate-900 p-2 rounded text-xs outline-none border border-slate-700 focus:border-blue-500" placeholder="KI fragen..." autocomplete="off">
<button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-xs transition-colors">Senden</button>
<button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-3 py-1 rounded text-xs">Senden</button>
</div>
</div>
</div>
<div class="grid-stack-item" gs-id="logs-widget" gs-w="6" gs-h="4" 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="widget-header"><span>📜 System Logs</span> <span>⠿</span></div>
<div id="install-log">Warte auf Aufgaben...</div>
</div>
</div>
<div class="grid-stack-item" gs-id="term-widget" gs-w="12" gs-h="6" gs-x="0" gs-y="4">
<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="widget-header"><span>🖥️ Live Terminal</span> <span>⠿</span></div>
<div id="terminal" class="terminal-container"></div>
</div>
</div>
</div>
</div>
</div>
<script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 1. GridStack mit verbesserten Parametern
// 1. GridStack Initialisierung
var grid = GridStack.init({
cellHeight: 80, // Etwas höher für bessere Lesbarkeit
cellHeight: 80,
margin: 10,
float: true,
handle: '.widget-header',
resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
handle: '.widget-header'
});
// 2. Layout-Logik (mit Sicherheitscheck)
// Layout speichern/laden
function saveLayout() {
const data = grid.save(false);
localStorage.setItem('pi-orch-layout-v2', JSON.stringify(data));
}
function loadLayout() {
const data = localStorage.getItem('pi-orch-layout-v2');
if (data) {
try {
grid.load(JSON.parse(data));
} catch (e) {
console.error("Layout-Laden fehlgeschlagen", e);
localStorage.removeItem('pi-orch-layout-v2');
}
}
const savedData = localStorage.getItem('pi-orch-layout-v2');
if (savedData) {
try { grid.load(JSON.parse(savedData)); } catch(e) { console.error(e); }
}
// Layout laden
loadLayout();
// Automatisches Resizen des Terminals beim Verschieben/Größe ändern
grid.on('resizestop', function() {
grid.on('resizestop dragstop', function() {
saveLayout();
if (window.fitAddon) {
setTimeout(() => window.fitAddon.fit(), 100);
}
if (window.fitAddon) setTimeout(() => window.fitAddon.fit(), 100);
});
grid.on('dragstop', saveLayout);
// 3. Xterm.js Setup (WICHTIG: Terminal muss in den Container passen)
const term = new Terminal({
theme: { background: '#000' },
fontSize: 13,
cursorBlink: true,
convertEol: true // Korrigiert Zeilenumbrüche
});
// 2. Xterm.js Setup
const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true, convertEol: true });
window.fitAddon = new FitAddon.FitAddon();
term.loadAddon(window.fitAddon);
term.open(document.getElementById('terminal'));
// Verzögertes Fit, damit das Grid erst stabil steht
setTimeout(() => window.fitAddon.fit(), 500);
// --- WebSockets ---
// 3. WebSockets
const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
logWs.onmessage = (ev) => {
const l = document.getElementById('install-log');
@@ -191,15 +163,13 @@
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
// 4. Chat Funktionen
const userInput = document.getElementById('user-input');
userInput.focus();
userInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') { e.preventDefault(); window.sendMessage(); }
});
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
window.sendMessage = function() {
const val = userInput.value.trim();
if(!val) return;
@@ -209,14 +179,6 @@
userInput.focus();
};
const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
logWs.onmessage = (ev) => {
const l = document.getElementById('install-log');
l.innerHTML += `<div>> ${ev.data}</div>`;
l.scrollTop = l.scrollHeight;
};
// appendChat Funktion...
function appendChat(user, msg, classes) {
const win = document.getElementById('chat-window');
let formattedMsg = msg;
@@ -227,7 +189,7 @@
win.scrollTop = win.scrollHeight;
}
// --- Restliche Funktionen ---
// 5. Node Funktionen
window.openTerminal = function(ip) {
if(window.termWs) window.termWs.close();
term.clear();
@@ -238,39 +200,17 @@
setTimeout(() => window.fitAddon.fit(), 100);
};
function appendChat(user, msg, classes) {
const win = document.getElementById('chat-window');
let formattedMsg = msg;
if (user === "KI" && typeof marked !== 'undefined') {
formattedMsg = marked.parse(msg);
}
win.innerHTML += `
<div class="mb-4">
<span class="${classes} block mb-1">${user}:</span>
<div class="markdown-content text-slate-300 text-sm leading-relaxed">${formattedMsg}</div>
</div>
`;
win.scrollTop = win.scrollHeight;
}
window.addNode = async function() {
const name = prompt("Node Name:");
const ip = prompt("IP Adresse:");
const user = prompt("Benutzername (meist 'pi'):", "pi");
const pass = prompt("SSH Passwort (für Key-Copy):");
const user = prompt("Benutzername:", "pi");
const pass = prompt("SSH Passwort:");
if (name && ip && pass) {
const fd = new FormData();
fd.append('name', name); fd.append('ip', ip);
fd.append('user', user); fd.append('password', pass);
try {
const response = await fetch('/add_node', { method: 'POST', body: fd });
if (response.ok) location.reload();
else alert("Fehler beim Hinzufügen.");
} catch (err) { alert("Verbindung fehlgeschlagen."); }
const response = await fetch('/add_node', { method: 'POST', body: fd });
if (response.ok) location.reload();
}
};
@@ -278,9 +218,18 @@
const badge = document.getElementById(`badge-${nodeId}`);
const led = document.getElementById(`led-${nodeId}`);
badge.innerText = "Prüfe...";
badge.classList.add("animate-pulse");
try {
const response = await fetch(`/refresh_status/${nodeId}`);
});
</script>
const r = await fetch(`/refresh_status/${nodeId}`);
const d = await r.json();
badge.innerText = d.status;
if (d.status === "Docker Aktiv") {
led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
} else {
led.className = "h-2 w-2 rounded-full bg-yellow-500";
}
} catch (e) { badge.innerText = "Fehler"; }
};
});
</script>
</body>
</html>