570 lines
28 KiB
HTML
570 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>J.A.R.V.I.S. AI Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<link href="/static/gridstack.min.css" rel="stylesheet"/>
|
|
<script src="/static/gridstack-all.js"></script>
|
|
|
|
<link rel="stylesheet" href="/static/xterm.css" />
|
|
<script src="/static/xterm.js"></script>
|
|
<script src="/static/xterm-addon-fit.js"></script>
|
|
<script src="/static/marked.min.js"></script>
|
|
|
|
<style>
|
|
body { margin: 0; background: #0f172a; }
|
|
|
|
.grid-stack {
|
|
background: transparent;
|
|
min-height: calc(100vh - 60px);
|
|
padding: 10px;
|
|
}
|
|
|
|
.grid-stack-item-content {
|
|
background: #1e293b;
|
|
color: white;
|
|
border: 1px solid #334155;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.terminal-container {
|
|
flex: 1;
|
|
width: 100%;
|
|
background: black;
|
|
}
|
|
|
|
#install-log {
|
|
flex: 1;
|
|
font-family: monospace;
|
|
font-size: 11px;
|
|
color: #4ade80;
|
|
padding: 10px;
|
|
overflow-y: auto;
|
|
background: #0f172a;
|
|
}
|
|
|
|
.widget-header {
|
|
background: #334155;
|
|
padding: 8px 12px;
|
|
cursor: move;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.top-toolbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: #1e293b;
|
|
color: white;
|
|
height: 55px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
box-sizing: border-box;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
|
|
z-index: 1000;
|
|
border-bottom: 1px solid #334155;
|
|
}
|
|
|
|
.toolbar-title { font-weight: bold; font-size: 1.1em; color: #38bdf8; }
|
|
.toolbar-controls { display: flex; align-items: center; gap: 10px; }
|
|
.toolbar-controls label { white-space: nowrap; font-size: 12px; color: #94a3b8; }
|
|
|
|
#ollama-url-container {
|
|
display: none;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-left: 1px solid #475569;
|
|
padding-left: 12px;
|
|
flex: 1;
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
.btn-tool {
|
|
height: 32px; padding: 0 12px; border-radius: 4px; font-size: 12px;
|
|
font-weight: bold; display: flex; align-items: center; gap: 5px;
|
|
}
|
|
.save-btn { background-color: #059669; color: white; }
|
|
.add-node-btn { background-color: #2563eb; color: white; }
|
|
|
|
.node-badge {
|
|
background: #334155; padding: 2px 5px; border-radius: 4px;
|
|
font-size: 8px; text-transform: uppercase; font-weight: bold; color: #94a3b8;
|
|
}
|
|
.timestamp {
|
|
font-size: 0.7em;
|
|
color: #888; /* Ein dezentes Grau */
|
|
text-align: right;
|
|
margin-top: 4px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Optional: Falls der KI-Text dunkel und der User-Text auf farbigem Grund ist */
|
|
.message.user .timestamp {
|
|
color: #e0e0e0; /* Helleres Grau, falls deine User-Bubble z.B. blau ist */
|
|
}
|
|
|
|
.markdown-content pre { background: #000; padding: 8px; border-radius: 4px; border: 1px solid #334155; overflow-x: auto; margin: 8px 0; }
|
|
</style>
|
|
</head>
|
|
<body class="text-white">
|
|
|
|
<div class="top-toolbar">
|
|
<div class="toolbar-title">🤖 J.A.R.V.I.S. AI Dashboard</div>
|
|
<div class="toolbar-controls">
|
|
<button onclick="addNode()" class="btn-tool add-node-btn"><span>+</span> Node</button>
|
|
<div class="h-6 w-px bg-slate-700 mx-1"></div>
|
|
<label>Provider:</label>
|
|
<select id="ai-provider" onchange="updateModelDropdown(false)">
|
|
<option value="google">Google Gemini</option>
|
|
<option value="openai">OpenAI</option>
|
|
<option value="nvidia">NVIDIA</option>
|
|
<option value="ollama">Ollama</option>
|
|
</select>
|
|
<label>Modell:</label>
|
|
<select id="ai-model"></select>
|
|
<div id="ollama-url-container">
|
|
<input type="text" id="ollama-url" onblur="updateModelDropdown(false)" placeholder="URL: http://...">
|
|
</div>
|
|
<button class="btn-tool save-btn" onclick="saveSettings()">Speichern</button>
|
|
<span id="settings-status"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex min-h-screen pt-[55px]">
|
|
|
|
<div class="w-64 bg-slate-900 border-r border-slate-800 p-4 flex flex-col fixed left-0 top-[55px] bottom-0 z-10">
|
|
<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" id="node-card-{{ node.id }}">
|
|
<div class="flex justify-between items-start">
|
|
<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">
|
|
<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">
|
|
<span id="os-{{ node.id }}" class="node-badge truncate max-w-[80px]">{{ node.os }}</span>
|
|
<span id="arch-{{ node.id }}" class="node-badge">{{ node.arch }}</span>
|
|
</div>
|
|
<div class="mt-1 flex items-center gap-2">
|
|
<span id="led-{{ node.id }}" class="h-2 w-2 rounded-full {% if 'Aktiv' in node.status %} 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">Konsole</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<button onclick="localStorage.removeItem('pi-orch-layout-v2'); location.reload();" class="mt-4 text-[10px] text-slate-500 hover:text-white uppercase">Layout Reset</button>
|
|
</div>
|
|
|
|
<div class="flex-1 ml-64 bg-slate-950 overflow-y-auto">
|
|
<div class="grid-stack">
|
|
<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>💬 J.A.R.V.I.S. - 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">
|
|
<textarea id="user-input"
|
|
class="flex-1 bg-slate-900 p-2 rounded text-xs outline-none border border-slate-700 focus:border-blue-500 resize-none overflow-y-hidden"
|
|
placeholder="Frage eingeben... (Shift+Enter für neue Zeile)"
|
|
rows="1"
|
|
oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px'"></textarea>
|
|
<button onclick="sendMessage()" class="ml-2 bg-blue-600 hover:bg-blue-500 px-4 py-1 rounded text-xs">Senden</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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 Daten...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<div id="add-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">Neuen Node hinzufügen</h3>
|
|
<form action="/add_node" method="post" class="space-y-4">
|
|
<input type="text" name="name" placeholder="Name" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
|
|
<input type="text" name="ip" placeholder="IP Adresse" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
|
|
<input type="text" name="user" placeholder="SSH Benutzer" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
|
|
<input type="password" name="password" placeholder="Passwort" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm" required>
|
|
<div class="flex justify-end gap-2 pt-2">
|
|
<button type="button" onclick="closeAddNode()" class="px-4 py-2 text-sm text-slate-400">Abbrechen</button>
|
|
<button type="submit" class="bg-blue-600 px-4 py-2 text-sm rounded font-bold">Koppeln</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="edit-node-modal" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-[2000] p-4">
|
|
<div class="bg-slate-800 p-6 rounded-lg border border-slate-600 w-full max-w-xl">
|
|
<h3 class="text-lg font-bold mb-4 text-sky-400">Node-Konfiguration bearbeiten</h3>
|
|
<input type="hidden" id="edit-node-id">
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="space-y-3">
|
|
<div>
|
|
<label class="text-[10px] uppercase text-slate-400 font-bold">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 focus:border-sky-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] uppercase text-slate-400 font-bold">SSH Benutzer</label>
|
|
<input type="text" id="edit-node-user" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm text-white focus:border-sky-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] uppercase text-slate-400 font-bold">Betriebssystem</label>
|
|
<input type="text" id="edit-node-os" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm text-white focus:border-sky-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] uppercase text-slate-400 font-bold">Status-Text</label>
|
|
<input type="text" id="edit-node-status" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm text-white focus:border-sky-500 outline-none">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<div>
|
|
<label class="text-[10px] uppercase text-slate-400 font-bold">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 focus:border-sky-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] uppercase text-slate-400 font-bold">Sudo Passwort</label>
|
|
<input type="password" id="edit-node-password" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm text-white focus:border-sky-500 outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] uppercase text-slate-400 font-bold">Architektur</label>
|
|
<input type="text" id="edit-node-arch" class="w-full bg-slate-900 border border-slate-700 p-2 rounded text-sm text-white focus:border-sky-500 outline-none">
|
|
</div>
|
|
<div class="flex items-center h-full pt-4">
|
|
<label class="flex items-center gap-3 cursor-pointer group">
|
|
<input type="checkbox" id="edit-node-docker" class="w-4 h-4 rounded border-slate-700 bg-slate-900 text-sky-600 focus:ring-sky-500">
|
|
<span class="text-sm text-slate-300 group-hover:text-white transition-colors">Docker installiert</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 mt-6 pt-4 border-t border-slate-700">
|
|
<button type="button" onclick="closeEditNode()" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors">Abbrechen</button>
|
|
<button type="button" onclick="updateNode()" class="bg-sky-600 hover:bg-sky-500 px-6 py-2 text-sm rounded font-bold transition-all shadow-lg shadow-sky-900/20">Änderungen speichern</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentSettings = {};
|
|
let termDataDisposable = null;
|
|
let term, fitAddon;
|
|
|
|
// 1. CHAT LOGIK
|
|
function initChat(chatWs) {
|
|
const input = document.getElementById('user-input');
|
|
|
|
window.sendMessage = function() {
|
|
const msg = input.value.trim();
|
|
if(!msg) return;
|
|
chatWs.send(msg);
|
|
appendChat("Du", msg, "text-slate-400 font-bold");
|
|
|
|
// Input zurücksetzen
|
|
input.value = '';
|
|
input.style.height = 'auto'; // Höhe wieder einklappen
|
|
input.focus();
|
|
};
|
|
|
|
input.addEventListener('keydown', (e) => {
|
|
// Wenn ENTER gedrückt wird OHNE Shift -> Senden
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault(); // Verhindert den Zeilenumbruch
|
|
sendMessage();
|
|
}
|
|
// Wenn ENTER + Shift gedrückt wird -> Standardverhalten (neue Zeile) bleibt
|
|
});
|
|
}
|
|
|
|
// 2. MODAL LOGIK
|
|
window.addNode = () => document.getElementById('add-node-modal').classList.remove('hidden');
|
|
window.closeAddNode = () => document.getElementById('add-node-modal').classList.add('hidden');
|
|
|
|
// EDIT LOGIK
|
|
// Ruft alle Daten ab, bevor das Modal öffnet
|
|
window.editNode = async (id) => {
|
|
try {
|
|
const res = await fetch(`/api/node/${id}`);
|
|
const node = await res.json();
|
|
|
|
document.getElementById('edit-node-id').value = node.id;
|
|
document.getElementById('edit-node-name').value = node.name;
|
|
document.getElementById('edit-node-ip').value = node.ip;
|
|
document.getElementById('edit-node-user').value = node.user;
|
|
document.getElementById('edit-node-password').value = node.sudo_password;
|
|
document.getElementById('edit-node-os').value = node.os;
|
|
document.getElementById('edit-node-arch').value = node.arch;
|
|
document.getElementById('edit-node-status').value = node.status;
|
|
document.getElementById('edit-node-docker').checked = node.docker_installed === 1;
|
|
|
|
document.getElementById('edit-node-modal').classList.remove('hidden');
|
|
} catch (e) { alert("Fehler beim Laden der Node-Daten"); }
|
|
};
|
|
window.closeEditNode = () => document.getElementById('edit-node-modal').classList.add('hidden');
|
|
|
|
window.updateNode = async function() {
|
|
const id = document.getElementById('edit-node-id').value;
|
|
const payload = {
|
|
name: document.getElementById('edit-node-name').value,
|
|
ip: document.getElementById('edit-node-ip').value,
|
|
user: document.getElementById('edit-node-user').value,
|
|
sudo_password: document.getElementById('edit-node-password').value,
|
|
os: document.getElementById('edit-node-os').value,
|
|
arch: document.getElementById('edit-node-arch').value,
|
|
status: document.getElementById('edit-node-status').value,
|
|
docker_installed: document.getElementById('edit-node-docker').checked ? 1 : 0
|
|
};
|
|
|
|
try {
|
|
const res = await fetch(`/api/node/${id}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
if(res.ok) {
|
|
location.reload(); // Einfachste Methode, um alle Badges zu aktualisieren
|
|
}
|
|
} 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}`);
|
|
const osEl = document.getElementById(`os-${nodeId}`);
|
|
const archEl = document.getElementById(`arch-${nodeId}`);
|
|
const card = document.getElementById(`node-card-${nodeId}`);
|
|
|
|
badge.textContent = "PRÜFE...";
|
|
card.style.opacity = "0.7";
|
|
|
|
try {
|
|
const response = await fetch(`/refresh_status/${nodeId}`);
|
|
const data = await response.json();
|
|
|
|
badge.textContent = data.status;
|
|
osEl.textContent = data.os;
|
|
archEl.textContent = data.arch;
|
|
|
|
if (data.status.includes("Aktiv")) {
|
|
led.className = "h-2 w-2 rounded-full bg-blue-500 shadow-[0_0_8px_#3b82f6]";
|
|
} else if (data.status === "Offline") {
|
|
led.className = "h-2 w-2 rounded-full bg-red-500 shadow-[0_0_8px_#ef4444]";
|
|
} else {
|
|
led.className = "h-2 w-2 rounded-full bg-yellow-500";
|
|
}
|
|
} catch (e) {
|
|
badge.textContent = "FEHLER";
|
|
led.className = "h-2 w-2 rounded-full bg-red-500";
|
|
} finally {
|
|
card.style.opacity = "1";
|
|
}
|
|
};
|
|
|
|
// 4. SETTINGS & MODEL LOGIK
|
|
async function loadSettings() {
|
|
try {
|
|
const res = await fetch('/api/settings');
|
|
currentSettings = await res.json();
|
|
document.getElementById('ai-provider').value = currentSettings.provider;
|
|
document.getElementById('ollama-url').value = currentSettings.ollama_base_url || "http://127.0.0.1:11434/v1";
|
|
updateModelDropdown(true);
|
|
} catch (e) {}
|
|
}
|
|
|
|
async function updateModelDropdown(isInitialLoad = false) {
|
|
const provider = document.getElementById('ai-provider').value;
|
|
const modelSelect = document.getElementById('ai-model');
|
|
const urlContainer = document.getElementById('ollama-url-container');
|
|
const ollamaUrl = document.getElementById('ollama-url').value;
|
|
|
|
urlContainer.style.display = (provider === "ollama") ? "flex" : "none";
|
|
modelSelect.innerHTML = '<option>Lade...</option>';
|
|
|
|
try {
|
|
let queryUrl = `/api/models?provider=${provider}`;
|
|
if (provider === "ollama") {
|
|
queryUrl += `&url=${encodeURIComponent(ollamaUrl)}`;
|
|
}
|
|
|
|
const res = await fetch(queryUrl);
|
|
const data = await res.json();
|
|
modelSelect.innerHTML = '';
|
|
|
|
if (data.models && data.models.length > 0) {
|
|
data.models.forEach(m => {
|
|
const opt = document.createElement('option');
|
|
opt.value = opt.textContent = m;
|
|
modelSelect.appendChild(opt);
|
|
});
|
|
|
|
if (isInitialLoad && currentSettings) {
|
|
const savedModel = currentSettings[`${provider}_model`];
|
|
if (savedModel) modelSelect.value = savedModel;
|
|
}
|
|
}
|
|
} catch (e) {
|
|
modelSelect.innerHTML = '<option>Fehler beim Laden</option>';
|
|
}
|
|
}
|
|
|
|
async function saveSettings() {
|
|
const provider = document.getElementById('ai-provider').value;
|
|
const model = document.getElementById('ai-model').value;
|
|
const ollama_base_url = document.getElementById('ollama-url').value;
|
|
const statusEl = document.getElementById('settings-status');
|
|
try {
|
|
await fetch('/api/settings', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ provider, model, ollama_base_url })
|
|
});
|
|
statusEl.textContent = "✅ Gespeichert";
|
|
setTimeout(() => statusEl.textContent = "", 2000);
|
|
} catch (e) { statusEl.textContent = "❌ Fehler"; }
|
|
}
|
|
|
|
// 5. INITIALISIERUNG
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var grid = GridStack.init({
|
|
cellHeight: 80,
|
|
margin: 10,
|
|
float: true,
|
|
handle: '.widget-header',
|
|
resizable: { handles: 'all' }
|
|
});
|
|
|
|
const savedLayout = localStorage.getItem('pi-orch-layout-v2');
|
|
if (savedLayout) { try { grid.load(JSON.parse(savedLayout)); } catch(e){} }
|
|
grid.on('resizestop dragstop', () => {
|
|
localStorage.setItem('pi-orch-layout-v2', JSON.stringify(grid.save(false)));
|
|
});
|
|
|
|
// Terminal Setup
|
|
term = new Terminal({ theme: { background: '#000' }, fontSize: 13, convertEol: true });
|
|
fitAddon = new FitAddon.FitAddon();
|
|
term.loadAddon(fitAddon);
|
|
term.open(document.getElementById('terminal'));
|
|
fitAddon.fit();
|
|
|
|
// WICHTIG: Wenn das Widget in GridStack vergrößert wird
|
|
grid.on('resizestop', function(event, el) {
|
|
if (el.getAttribute('gs-id') === 'term-widget') {
|
|
setTimeout(() => {
|
|
fitAddon.fit();
|
|
// Sende neue Größe an das Backend
|
|
if (window.termWs && window.termWs.readyState === WebSocket.OPEN) {
|
|
window.termWs.send(JSON.stringify({
|
|
type: "resize",
|
|
cols: term.cols,
|
|
rows: term.rows
|
|
}));
|
|
}
|
|
}, 100);
|
|
}
|
|
});
|
|
|
|
const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
|
|
logWs.onmessage = (ev) => {
|
|
const div = document.createElement('div');
|
|
div.textContent = `> ${ev.data}`;
|
|
document.getElementById('install-log').appendChild(div);
|
|
document.getElementById('install-log').scrollTop = document.getElementById('install-log').scrollHeight;
|
|
};
|
|
|
|
const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
|
|
chatWs.onmessage = (ev) => appendChat("J.A.R.V.I.S.", ev.data, "text-blue-400 font-bold");
|
|
initChat(chatWs);
|
|
|
|
window.appendChat = function(user, msg, classes) {
|
|
const now = new Date();
|
|
const timeString = now.toLocaleDateString('de-DE') + " " + now.toLocaleTimeString('de-DE', {hour: '2-digit', minute:'2-digit'});
|
|
const win = document.getElementById('chat-window');
|
|
const msgDiv = document.createElement("div");
|
|
msgDiv.className = `message ${role}`;
|
|
msgDiv.innerHTML = `
|
|
<div class="message-content">${text}</div>
|
|
<div class="timestamp">${timeString}</div>
|
|
`;
|
|
chatBox.appendChild(msgDiv);
|
|
chatBox.scrollTop = chatBox.scrollHeight; // Automatisch nach unten scrollen
|
|
let formattedMsg = (user === "J.A.R.V.I.S.") ? marked.parse(msg) : msg;
|
|
win.innerHTML += `<div class="mb-4"><span class="${classes} block mb-1 text-[10px] uppercase">${user}</span><div class="markdown-content text-slate-300 text-sm">${formattedMsg}</div></div>`;
|
|
win.scrollTop = win.scrollHeight;
|
|
};
|
|
|
|
window.openTerminal = function(ip) {
|
|
if (window.termWs) window.termWs.close();
|
|
if (termDataDisposable) termDataDisposable.dispose();
|
|
term.clear();
|
|
fitAddon.fit(); // Einmal anpassen beim Öffnen
|
|
|
|
window.termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
|
|
|
|
window.termWs.onopen = () => {
|
|
// Initiale Größe nach dem Verbinden senden
|
|
window.termWs.send(JSON.stringify({
|
|
type: "resize",
|
|
cols: term.cols,
|
|
rows: term.rows
|
|
}));
|
|
};
|
|
|
|
window.termWs.onmessage = (ev) => term.write(ev.data);
|
|
|
|
termDataDisposable = term.onData(data => {
|
|
if (window.termWs?.readyState === WebSocket.OPEN) {
|
|
// Normale Tastatureingaben senden wir direkt
|
|
window.termWs.send(data);
|
|
}
|
|
});
|
|
};
|
|
|
|
loadSettings();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |