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:34:18 +00:00
parent 4ecf58ea7b
commit 49bbb76320
1 changed files with 85 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
templates/index.html
View File

@@ -14,7 +14,8 @@
<script src="/static/marked.min.js"></script> <script src="/static/marked.min.js"></script>
<style> <style>
.grid-stack { background: #0f172a; min-height: 100vh; } /* Bestehendes CSS erweitern/korrigieren */
.grid-stack { background: #0f172a; min-height: 100vh; padding: 10px; }
.grid-stack-item-content { .grid-stack-item-content {
background: #1e293b; background: #1e293b;
color: white; color: white;
@@ -22,56 +23,43 @@
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden; /* Verhindert, dass Inhalt aus dem Widget quillt */
} }
.widget-header {
background: #334155; /* FIX: Terminal und Logs müssen 100% Höhe einnehmen */
padding: 5px 10px; .terminal-container, #terminal {
cursor: move;
font-size: 12px;
font-weight: bold;
display: flex;
justify-content: space-between;
user-select: none;
}
.terminal-container {
flex: 1; flex: 1;
width: 100%;
height: 100%;
background: black; background: black;
padding: 4px;
overflow: hidden;
} }
#install-log { #install-log {
flex: 1;
font-family: monospace; font-family: monospace;
font-size: 11px; font-size: 11px;
color: #4ade80; color: #4ade80;
padding: 10px; padding: 10px;
overflow-y: auto; overflow-y: auto;
flex: 1;
background: #0f172a; background: #0f172a;
height: 100%;
} }
/* Scrollbar Styling */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 10px; }
/* Styling für KI Markdown */ .widget-header {
.markdown-content pre { background: #334155;
background: #000; padding: 8px 12px;
padding: 8px; cursor: move;
border-radius: 4px; font-size: 12px;
border: 1px solid #334155; font-weight: bold;
overflow-x: auto; display: flex;
margin: 8px 0; justify-content: space-between;
align-items: center;
} }
.markdown-content code {
font-family: monospace; /* Markdown Styling bleibt gleich... */
color: #4ade80; .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 pre code { color: #fff; }
.markdown-content p { margin-bottom: 8px; } .markdown-content p { margin-bottom: 8px; }
.markdown-content ul { list-style-type: disc; margin-left: 20px; margin-bottom: 8px; }
.markdown-content ol { list-style-type: decimal; margin-left: 20px; margin-bottom: 8px; }
.markdown-content strong { color: #fff; font-weight: bold; }
</style> </style>
</head> </head>
<body class="bg-slate-950 text-white overflow-hidden"> <body class="bg-slate-950 text-white overflow-hidden">
@@ -137,39 +125,59 @@
</div> </div>
</div> </div>
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// --- UI Setup --- // 1. GridStack mit verbesserten Parametern
var grid = GridStack.init({ var grid = GridStack.init({
cellHeight: 70, cellHeight: 80, // Etwas höher für bessere Lesbarkeit
margin: 5, margin: 10,
float: true, float: true,
handle: '.widget-header', handle: '.widget-header',
resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }, resizable: { handles: 'se, sw, ne, nw, e, w, s, n' }
staticGrid: false
}); });
// 2. Layout-Logik (mit Sicherheitscheck)
function saveLayout() { function saveLayout() {
const data = grid.save(false); const data = grid.save(false);
localStorage.setItem('grid-layout-v1', JSON.stringify(data)); localStorage.setItem('pi-orch-layout-v2', JSON.stringify(data));
} }
function loadLayout() { function loadLayout() {
const data = localStorage.getItem('grid-layout-v1'); const data = localStorage.getItem('pi-orch-layout-v2');
if (data) grid.load(JSON.parse(data)); if (data) {
try {
grid.load(JSON.parse(data));
} catch (e) {
console.error("Layout-Laden fehlgeschlagen", e);
localStorage.removeItem('pi-orch-layout-v2');
}
}
} }
// Layout laden
loadLayout(); loadLayout();
grid.on('dragstop resizestop', function() { // Automatisches Resizen des Terminals beim Verschieben/Größe ändern
grid.on('resizestop', function() {
saveLayout(); saveLayout();
if (window.fitAddon) window.fitAddon.fit(); if (window.fitAddon) {
setTimeout(() => window.fitAddon.fit(), 100);
}
}); });
grid.on('dragstop', saveLayout);
const term = new Terminal({ theme: { background: '#000' }, fontSize: 13, cursorBlink: true }); // 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
});
window.fitAddon = new FitAddon.FitAddon(); window.fitAddon = new FitAddon.FitAddon();
term.loadAddon(window.fitAddon); term.loadAddon(window.fitAddon);
term.open(document.getElementById('terminal')); term.open(document.getElementById('terminal'));
// Verzögertes Fit, damit das Grid erst stabil steht
setTimeout(() => window.fitAddon.fit(), 500); setTimeout(() => window.fitAddon.fit(), 500);
// --- WebSockets --- // --- WebSockets ---
@@ -183,31 +191,42 @@
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`); const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold"); chatWs.onmessage = (ev) => appendChat("KI", ev.data, "text-blue-400 font-bold");
// --- NEU: Enter-Taste & Fokus Logik ---
const userInput = document.getElementById('user-input'); const userInput = document.getElementById('user-input');
// Fokus beim Laden setzen
userInput.focus(); userInput.focus();
userInput.addEventListener('keydown', (e) => {
// Auf Enter-Taste hören if (e.key === 'Enter') { e.preventDefault(); window.sendMessage(); }
userInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault(); // Verhindert Neuladen/Standardverhalten
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() { window.sendMessage = function() {
const val = userInput.value.trim(); const val = userInput.value.trim();
if(!val) return; if(!val) return;
chatWs.send(val); chatWs.send(val);
appendChat("Du", val, "text-slate-300 font-bold"); appendChat("Du", val, "text-slate-300 font-bold");
userInput.value = '';
userInput.value = ''; // Feld leeren userInput.focus();
userInput.focus(); // Fokus sofort zurücksetzen
}; };
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;
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;
}
// --- Restliche Funktionen --- // --- Restliche Funktionen ---
window.openTerminal = function(ip) { window.openTerminal = function(ip) {
if(window.termWs) window.termWs.close(); if(window.termWs) window.termWs.close();
@@ -262,4 +281,6 @@
badge.classList.add("animate-pulse"); badge.classList.add("animate-pulse");
try { try {
const response = await fetch(`/refresh_status/${nodeId}`); const response = await fetch(`/refresh_status/${nodeId}`);
});
</script>