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