alientimandClaude Sonnet 5
63ca7782ba
- credentials: neue Spalte 'category' (Switch/Linux-Client/ Windows-Client/Router), Grundlage für die geplante SSH-basierte Wartungsfunktion (Bulk-Updates); Löschschutz prüft jetzt zusätzlich devices.credential_id, nicht mehr nur switches.credential_id - devices: optionale SSH-Zugangsdaten + SSH-Port je Gerät, inkl. "Verbindung testen"-Terminal wie bei Switches - Dashboard: PoE-Neustart-Button wird für Geräte ohne zugewiesenen Switch/Port komplett ausgeblendet (nicht nur ausgegraut), da für diese kein PoE-Reset über poe.sh möglich ist; Button bleibt ausschließlich für den PoE-Neustart über den Switch zuständig - Schließen-Button im Geräte-Modal immer rechts, unabhängig davon welche Aktions-Buttons gerade sichtbar sind - "Port" im Geräte-Formular zu "Switchport" umbenannt und von "SSH-Port" klar abgegrenzt (unterschiedliche Konzepte: physischer Switch-Port fürs PoE vs. TCP-Port für SSH) - .btn:disabled greift jetzt echtes Grau statt nur reduzierter Deckkraft der jeweiligen Button-Farbe Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
528 lines
24 KiB
HTML
528 lines
24 KiB
HTML
{% extends "base.html" %}
|
|
{% block extra_head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/vendor/xterm.css') }}">
|
|
{% endblock %}
|
|
{% set active_page = "devices" %}
|
|
{% set can_toggle = current_user.has_permission('devices.edit') %}
|
|
{% set can_create = current_user.has_permission('devices.create') %}
|
|
{% set can_edit = current_user.has_permission('devices.edit') %}
|
|
{% set can_delete = current_user.has_permission('devices.edit') %}
|
|
{% set show_actions_col = can_edit or can_delete %}
|
|
{% set col_count = 5 + (1 if can_toggle else 0) + (1 if show_actions_col else 0) %}
|
|
{% block page_title %}Clients{% endblock %}
|
|
{% block page_sub %}<div class="topbar-sub">{{ devices|length }} Geräte</div>{% endblock %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="section-head">
|
|
<div>
|
|
<h2 style="font-size:16px;">Geräte</h2>
|
|
<div class="hint">PoE-Geräte mit IP, MAC und zugeordnetem Switch-Port.</div>
|
|
</div>
|
|
{% if can_create %}
|
|
<button type="button" class="btn btn-primary" data-open-modal="deviceModal" onclick="resetDeviceForm()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
|
|
Neues Gerät
|
|
</button>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="table-wrap">
|
|
<div class="table-toolbar">
|
|
<div class="search-input">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
|
|
<input type="text" id="deviceSearch" placeholder="Geräte durchsuchen…" oninput="filterTable('deviceSearch','devicesTable')">
|
|
</div>
|
|
</div>
|
|
<div style="overflow-x:auto;">
|
|
<table class="data-table" id="devicesTable" data-sortable>
|
|
<thead>
|
|
<tr>
|
|
<th data-sort-key="hostname">Hostname</th>
|
|
<th data-sort-key="ip">IP-Adresse</th>
|
|
<th data-sort-key="mac">MAC-Adresse</th>
|
|
<th data-sort-key="switch">Switch</th>
|
|
<th data-sort-key="port">Switchport</th>
|
|
{% if can_toggle %}<th>Status</th>{% endif %}
|
|
{% if show_actions_col %}<th style="width:1%;">Aktionen</th>{% endif %}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for d in devices %}
|
|
<tr data-sort-hostname="{{ d['name']|lower }}" data-sort-ip="{{ d['rpi_ip']|lower }}" data-sort-mac="{{ d['mac']|lower }}" data-sort-switch="{{ (d['switch_hostname'] or '')|lower }}" data-sort-port="{{ (d['port'] or '')|lower }}">
|
|
<td class="cell-name">{{ d['name'] }}</td>
|
|
<td class="mono">{{ d['rpi_ip'] }}</td>
|
|
<td class="mono">{{ d['mac'] }}</td>
|
|
<td>{{ d['switch_hostname'] or '—' }}</td>
|
|
<td>{{ d['port'] or '—' }}</td>
|
|
{% if can_toggle %}
|
|
<td>
|
|
<label class="switch-check">
|
|
<input type="checkbox" {% if d['is_active'] %}checked{% endif %} onchange="toggleDevice('{{ d['mac'] }}', this)">
|
|
<span class="track"></span>
|
|
</label>
|
|
</td>
|
|
{% endif %}
|
|
{% if show_actions_col %}
|
|
<td>
|
|
<div class="row-actions">
|
|
{% if can_edit %}
|
|
<button class="icon-btn" title="Bearbeiten"
|
|
onclick="openEditDeviceModal('{{ d['mac'] }}','{{ d['name'] }}','{{ d['rpi_ip'] }}','{{ d['port'] or '' }}','{{ d['ssh_port'] or '' }}','{{ d['credential_id'] or '' }}')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4z"/></svg>
|
|
</button>
|
|
<button class="icon-btn" title="Switch ändern"
|
|
onclick="openSwitchModal('{{ d['mac'] }}','{{ d['switch_hostname'] or '' }}')">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="19" r="2.5"/><path d="M8.2 10.7l7.6-4.4M8.2 13.3l7.6 4.4"/></svg>
|
|
</button>
|
|
{% endif %}
|
|
{% if can_delete %}
|
|
<form method="post" data-confirm="Willst du „{{ d['name'] }}“ wirklich löschen?">
|
|
<input type="hidden" name="delete_device" value="{{ d['mac'] }}">
|
|
<button type="submit" class="icon-btn" style="color:var(--danger);" title="Löschen">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0l-1 14a2 2 0 01-2 2H7a2 2 0 01-2-2L4 6"/></svg>
|
|
</button>
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
{% endif %}
|
|
</tr>
|
|
{% else %}
|
|
<tr class="empty-row"><td colspan="{{ col_count }}">Noch keine Geräte vorhanden.</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{% if can_create %}
|
|
<!-- Modal: Neues Gerät -->
|
|
<div class="modal-overlay" id="deviceModal">
|
|
<div class="modal" style="max-width:1000px;">
|
|
<form method="post" onsubmit="return validateDeviceForm(this);">
|
|
<div class="modal-header">
|
|
<h3>Neues Gerät hinzufügen</h3>
|
|
<button type="button" class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<input type="hidden" name="add_device" value="1">
|
|
<div class="field"><label>Hostname</label>
|
|
<input type="text" name="name" required placeholder="z.B. Sensor01">
|
|
</div>
|
|
<div class="field"><label>IP-Adresse</label>
|
|
<input type="text" name="rpi_ip" required placeholder="z.B. 192.168.1.100">
|
|
<div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben.</div>
|
|
</div>
|
|
<div class="field"><label>MAC-Adresse</label>
|
|
<input type="text" name="mac" required placeholder="z.B. AA:BB:CC:DD:EE:FF">
|
|
<div class="invalid-feedback">Bitte eine gültige MAC-Adresse eingeben (xx:xx:xx:xx:xx:xx).</div>
|
|
</div>
|
|
<div class="field"><label>Switchport</label>
|
|
<input type="text" name="port" placeholder="z.B. 3">
|
|
<div class="field-hint">Physische Port-Nummer AM SWITCH (z.B. Port 3 von 48), an dem das Gerät eingesteckt ist — für den PoE-Neustart. Kein Netzwerk-/TCP-Port, keine SSH-Anmeldung.</div>
|
|
</div>
|
|
<div class="field"><label>Switch (optional)</label>
|
|
<select name="switch_hostname">
|
|
<option value="">Kein Switch</option>
|
|
{% for sw in switches %}<option value="{{ sw['hostname'] }}">{{ sw['hostname'] }}</option>{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="permission-group-title">SSH-Zugriff (optional, z.B. für Update-Aktionen unter „Wartung“)</div>
|
|
<div class="field"><label>SSH-Port</label>
|
|
<input type="number" name="ssh_port" min="1" max="65535" placeholder="22 (Standard)">
|
|
<div class="field-hint">TCP-Netzwerk-Port für die SSH-Anmeldung an der IP-Adresse dieses Geräts (siehe Feld „IP-Adresse“ oben). Leer lassen, wenn Standard-Port 22 verwendet wird.</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Zugangsdaten</label>
|
|
<select name="credential_choice" class="credential-select" onchange="toggleNewCredentialFields(this)">
|
|
<option value="">Keine (nicht per SSH verwaltet)</option>
|
|
{% for c in all_credentials %}
|
|
<option value="{{ c['id'] }}" data-username="{{ c['username'] }}">{{ c['name'] }} ({{ c['category'] }})</option>
|
|
{% endfor %}
|
|
<option value="new">+ Neue Zugangsdaten anlegen</option>
|
|
</select>
|
|
</div>
|
|
<div class="new-credential-fields hidden">
|
|
<div class="field"><label>Name der Zugangsdaten</label>
|
|
<input type="text" name="new_credential_name" placeholder="z.B. Linux-Clients">
|
|
</div>
|
|
<div class="field"><label>Username</label>
|
|
<input type="text" name="new_credential_username" placeholder="z.B. admin">
|
|
</div>
|
|
<div class="field"><label>Passwort</label>
|
|
<input type="password" name="new_credential_password">
|
|
</div>
|
|
<div class="field"><label>Passwort bestätigen</label>
|
|
<input type="password" name="new_credential_password_confirm">
|
|
<div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" style="margin-right:auto;" onclick="openTerminal(this.closest('form'))">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 9l4 3-4 3M13 15h5"/></svg>
|
|
Verbindung testen
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
|
|
<button type="submit" class="btn btn-primary">Hinzufügen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if can_edit %}
|
|
<!-- Modal: Bearbeiten -->
|
|
<div class="modal-overlay" id="editDeviceModal">
|
|
<div class="modal" style="max-width:1000px;">
|
|
<form method="post" onsubmit="return validateDeviceForm(this);">
|
|
<input type="hidden" name="edit_device" value="1">
|
|
<input type="hidden" name="old_mac" id="edit_old_mac">
|
|
<div class="modal-header">
|
|
<h3>Gerät bearbeiten</h3>
|
|
<button type="button" class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="field"><label>Hostname</label>
|
|
<input type="text" name="name" id="edit_name" required>
|
|
</div>
|
|
<div class="field"><label>IP-Adresse</label>
|
|
<input type="text" name="rpi_ip" id="edit_ip" required>
|
|
<div class="invalid-feedback">Bitte eine gültige IP-Adresse eingeben.</div>
|
|
</div>
|
|
<div class="field"><label>MAC-Adresse</label>
|
|
<input type="text" name="mac" id="edit_mac" required>
|
|
<div class="invalid-feedback">Bitte eine gültige MAC-Adresse eingeben (xx:xx:xx:xx:xx:xx).</div>
|
|
</div>
|
|
<div class="field"><label>Switchport</label>
|
|
<input type="text" name="port" id="edit_port">
|
|
<div class="field-hint">Portnummer am zugeordneten Switch, für den PoE-Neustart. Hat nichts mit dem SSH-Port unten zu tun.</div>
|
|
</div>
|
|
<div class="permission-group-title">SSH-Zugriff (optional, z.B. für Update-Aktionen unter „Wartung“)</div>
|
|
<div class="field"><label>SSH-Port</label>
|
|
<input type="number" name="ssh_port" id="edit_ssh_port" min="1" max="65535" placeholder="22 (Standard)">
|
|
<div class="field-hint">TCP-Netzwerk-Port für die SSH-Anmeldung an der IP-Adresse dieses Geräts (siehe Feld „IP-Adresse“ oben). Leer lassen, wenn Standard-Port 22 verwendet wird.</div>
|
|
</div>
|
|
<div class="field">
|
|
<label>Zugangsdaten</label>
|
|
<select name="credential_choice" id="edit_credential_choice" class="credential-select" onchange="toggleNewCredentialFields(this)">
|
|
<option value="">Keine (nicht per SSH verwaltet)</option>
|
|
{% for c in all_credentials %}
|
|
<option value="{{ c['id'] }}" data-username="{{ c['username'] }}">{{ c['name'] }} ({{ c['category'] }})</option>
|
|
{% endfor %}
|
|
<option value="new">+ Neue Zugangsdaten anlegen</option>
|
|
</select>
|
|
</div>
|
|
<div class="new-credential-fields hidden">
|
|
<div class="field"><label>Name der Zugangsdaten</label>
|
|
<input type="text" name="new_credential_name" placeholder="z.B. Linux-Clients">
|
|
</div>
|
|
<div class="field"><label>Username</label>
|
|
<input type="text" name="new_credential_username" placeholder="z.B. admin">
|
|
</div>
|
|
<div class="field"><label>Passwort</label>
|
|
<input type="password" name="new_credential_password">
|
|
</div>
|
|
<div class="field"><label>Passwort bestätigen</label>
|
|
<input type="password" name="new_credential_password_confirm">
|
|
<div class="invalid-feedback">Passwörter stimmen nicht überein!</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" style="margin-right:auto;" onclick="openTerminal(this.closest('form'))">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 9l4 3-4 3M13 15h5"/></svg>
|
|
Verbindung testen
|
|
</button>
|
|
<button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
|
|
<button type="submit" class="btn btn-primary">Speichern</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal: Switch ändern -->
|
|
<div class="modal-overlay" id="switchModal">
|
|
<div class="modal" style="max-width:380px;">
|
|
<form method="post">
|
|
<input type="hidden" name="edit_device" value="1">
|
|
<input type="hidden" name="old_mac" id="switch_mac">
|
|
<div class="modal-header">
|
|
<h3>Switch ändern</h3>
|
|
<button type="button" class="modal-close" data-close-modal>×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="field">
|
|
<label>Zugeordneter Switch</label>
|
|
<select name="switch_hostname" id="switch_select">
|
|
<option value="">Kein Switch</option>
|
|
{% for sw in switches %}<option value="{{ sw['hostname'] }}">{{ sw['hostname'] }}</option>{% endfor %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
|
|
<button type="submit" class="btn btn-primary">Speichern</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if can_create or can_edit %}
|
|
<!-- Modal: SSH-Verbindungstest (echtes Terminal, zum Akzeptieren von Host-Keys
|
|
und Prüfen der Zugangsdaten, bevor das Gerät gespeichert wird) -->
|
|
<div class="modal-overlay" id="terminalModal">
|
|
<div class="modal" style="max-width:720px;">
|
|
<div class="modal-header">
|
|
<h3>SSH-Verbindungstest</h3>
|
|
<button type="button" class="modal-close" data-close-modal onclick="closeTerminal()">×</button>
|
|
</div>
|
|
<div class="modal-body" style="padding:0;">
|
|
<div class="term-toolbar">
|
|
<div class="flex gap-2" style="align-items:center;">
|
|
<span id="termStatus" class="pill unknown">Bereit</span>
|
|
<span id="termTarget" class="text-faint mono" style="font-size:12px;"></span>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-secondary" id="termPastePassword">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
|
|
Passwort einfügen
|
|
</button>
|
|
</div>
|
|
<div id="terminal" class="xterm-container"></div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<p class="text-faint" style="font-size:11.5px; margin-right:auto;">
|
|
Unbekannter Host-Key: "yes" bestätigt und merkt sich ihn dauerhaft.
|
|
</p>
|
|
<button type="button" class="btn btn-secondary" data-close-modal onclick="closeTerminal()">Schließen</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/vendor/xterm.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='js/vendor/xterm-addon-fit.js') }}"></script>
|
|
<script>
|
|
function resetDeviceForm() {
|
|
document.querySelector("#deviceModal form").reset();
|
|
resetCredentialChoice("add");
|
|
}
|
|
function openEditDeviceModal(mac, name, ip, port, sshPort, credentialId) {
|
|
document.getElementById("edit_old_mac").value = mac;
|
|
document.getElementById("edit_name").value = name;
|
|
document.getElementById("edit_ip").value = ip;
|
|
document.getElementById("edit_mac").value = mac;
|
|
document.getElementById("edit_port").value = port;
|
|
document.getElementById("edit_ssh_port").value = sshPort || "";
|
|
document.getElementById("edit_credential_choice").value = credentialId || "";
|
|
PoeUI.openModal("editDeviceModal");
|
|
resetCredentialChoice("edit");
|
|
}
|
|
function openSwitchModal(mac, switchHostname) {
|
|
document.getElementById("switch_mac").value = mac;
|
|
document.getElementById("switch_select").value = switchHostname;
|
|
PoeUI.openModal("switchModal");
|
|
}
|
|
|
|
const ipPattern = /^(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}$/;
|
|
const macPattern = /^([0-9A-Fa-f]{2}:){5}[0-9A-Fa-f]{2}$/;
|
|
|
|
function validateIP(input) {
|
|
const ok = ipPattern.test(input.value);
|
|
input.classList.toggle("is-invalid", !ok);
|
|
return ok;
|
|
}
|
|
function validateMAC(input) {
|
|
const ok = macPattern.test(input.value);
|
|
input.classList.toggle("is-invalid", !ok);
|
|
return ok;
|
|
}
|
|
function validateNewCredentialPassword(form) {
|
|
const select = form.querySelector(".credential-select");
|
|
if (!select || select.value !== "new") return true;
|
|
const pass = form.querySelector("input[name='new_credential_password']");
|
|
const confirm = form.querySelector("input[name='new_credential_password_confirm']");
|
|
if (!pass || !confirm) return true;
|
|
if (pass.value !== confirm.value) { confirm.classList.add("is-invalid"); return false; }
|
|
confirm.classList.remove("is-invalid");
|
|
return true;
|
|
}
|
|
function validateDeviceForm(form) {
|
|
const ipInput = form.querySelector("input[name='rpi_ip']");
|
|
const macInput = form.querySelector("input[name='mac']");
|
|
let valid = true;
|
|
if (ipInput) valid = validateIP(ipInput) && valid;
|
|
if (macInput) valid = validateMAC(macInput) && valid;
|
|
valid = validateNewCredentialPassword(form) && valid;
|
|
return valid;
|
|
}
|
|
document.addEventListener("input", (e) => {
|
|
if (e.target.name === "rpi_ip") validateIP(e.target);
|
|
if (e.target.name === "mac") validateMAC(e.target);
|
|
if (e.target.name === "new_credential_password_confirm") {
|
|
const form = e.target.closest("form");
|
|
const pass = form.querySelector("input[name='new_credential_password']");
|
|
if (pass) e.target.classList.toggle("is-invalid", pass.value !== e.target.value);
|
|
}
|
|
});
|
|
|
|
function toggleNewCredentialFields(select) {
|
|
const fields = select.closest(".modal-body").querySelector(".new-credential-fields");
|
|
if (fields) fields.classList.toggle("hidden", select.value !== "new");
|
|
}
|
|
function resetCredentialChoice(id) {
|
|
// Beim Öffnen sicherstellen, dass die "Neue Zugangsdaten"-Felder passend
|
|
// zur aktuellen Auswahl ein-/ausgeblendet sind (relevant v.a. nach
|
|
// vorherigem Umschalten auf "neu" ohne zu speichern).
|
|
setTimeout(() => {
|
|
const select = document.querySelector(`#${id === 'add' ? 'deviceModal' : 'editDeviceModal'} .credential-select`);
|
|
if (select) toggleNewCredentialFields(select);
|
|
}, 0);
|
|
}
|
|
|
|
// -------------------------------------------------------------------------
|
|
// SSH-Verbindungstest (Web-Terminal via /ws/ssh_terminal) — identisch zum
|
|
// Muster in switches.html, nur mit rpi_ip statt ip als Feldname.
|
|
// -------------------------------------------------------------------------
|
|
let term = null, fitAddon = null, termSocket = null, activePasswordInput = null;
|
|
|
|
function ensureTerminal() {
|
|
if (term) return;
|
|
term = new Terminal({
|
|
convertEol: true,
|
|
fontSize: 13,
|
|
fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace",
|
|
cursorBlink: true,
|
|
theme: { background: "#0a0c10", foreground: "#c7ccd6" },
|
|
});
|
|
fitAddon = new FitAddon.FitAddon();
|
|
term.loadAddon(fitAddon);
|
|
term.open(document.getElementById("terminal"));
|
|
fitAddon.fit();
|
|
term.onData((data) => {
|
|
if (termSocket && termSocket.readyState === WebSocket.OPEN) {
|
|
termSocket.send(JSON.stringify({ type: "input", data }));
|
|
}
|
|
});
|
|
term.onResize(({ cols, rows }) => {
|
|
if (termSocket && termSocket.readyState === WebSocket.OPEN) {
|
|
termSocket.send(JSON.stringify({ type: "resize", cols, rows }));
|
|
}
|
|
});
|
|
window.addEventListener("resize", () => fitAddon && fitAddon.fit());
|
|
}
|
|
|
|
function setTermStatus(text, cls) {
|
|
const el = document.getElementById("termStatus");
|
|
el.className = "pill " + cls;
|
|
el.innerText = text;
|
|
}
|
|
|
|
function getCredentialInfo(form) {
|
|
const select = form.querySelector(".credential-select");
|
|
if (!select || select.value === "new") {
|
|
return {
|
|
username: (form.querySelector("input[name='new_credential_username']") || {}).value?.trim(),
|
|
passwordInput: form.querySelector("input[name='new_credential_password']"),
|
|
};
|
|
}
|
|
const option = select.selectedOptions[0];
|
|
return { username: option ? option.dataset.username : null, passwordInput: null };
|
|
}
|
|
|
|
function openTerminal(form) {
|
|
const host = (form.querySelector("input[name='rpi_ip']") || {}).value?.trim();
|
|
const port = parseInt((form.querySelector("input[name='ssh_port']") || {}).value, 10) || 22;
|
|
const { username, passwordInput } = getCredentialInfo(form);
|
|
activePasswordInput = passwordInput;
|
|
|
|
if (!host || !username) {
|
|
showToast("Bitte IP-Adresse ausfüllen und Zugangsdaten auswählen/anlegen, bevor du die Verbindung testest.", "danger");
|
|
return;
|
|
}
|
|
|
|
PoeUI.openModal("terminalModal");
|
|
ensureTerminal();
|
|
term.reset();
|
|
document.getElementById("termTarget").innerText = `${username}@${host}:${port}`;
|
|
setTermStatus("Verbinde…", "unknown");
|
|
setTimeout(() => fitAddon && fitAddon.fit(), 60);
|
|
|
|
if (termSocket) { try { termSocket.close(); } catch (e) {} }
|
|
|
|
const proto = location.protocol === "https:" ? "wss:" : "ws:";
|
|
termSocket = new WebSocket(`${proto}//${location.host}/ws/ssh_terminal`);
|
|
|
|
termSocket.onopen = () => {
|
|
termSocket.send(JSON.stringify({ host, username, port }));
|
|
setTermStatus("Verbunden", "online");
|
|
};
|
|
termSocket.onmessage = (event) => term.write(event.data);
|
|
termSocket.onclose = () => setTermStatus("Getrennt", "offline");
|
|
termSocket.onerror = () => setTermStatus("Fehler", "offline");
|
|
}
|
|
|
|
function closeTerminal() {
|
|
if (termSocket) {
|
|
try { termSocket.close(); } catch (e) {}
|
|
termSocket = null;
|
|
}
|
|
}
|
|
|
|
const termPasteBtn = document.getElementById("termPastePassword");
|
|
if (termPasteBtn) {
|
|
termPasteBtn.addEventListener("click", () => {
|
|
if (!activePasswordInput || !activePasswordInput.value) {
|
|
showToast("Kein Passwort bekannt — bitte manuell im Terminal eingeben.", "danger");
|
|
return;
|
|
}
|
|
if (!termSocket || termSocket.readyState !== WebSocket.OPEN) {
|
|
showToast("Keine aktive Terminal-Verbindung.", "danger");
|
|
return;
|
|
}
|
|
termSocket.send(JSON.stringify({ type: "input", data: activePasswordInput.value + "\n" }));
|
|
});
|
|
}
|
|
|
|
const terminalModalEl = document.getElementById("terminalModal");
|
|
if (terminalModalEl) {
|
|
terminalModalEl.addEventListener("click", (e) => {
|
|
if (e.target.id === "terminalModal") closeTerminal();
|
|
});
|
|
document.addEventListener("keydown", (e) => {
|
|
if (e.key === "Escape" && terminalModalEl.classList.contains("open")) closeTerminal();
|
|
});
|
|
}
|
|
|
|
function toggleDevice(mac, checkbox) {
|
|
checkbox.disabled = true;
|
|
fetch(`/devices/toggle/${mac}`, { method: "POST" })
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
checkbox.disabled = false;
|
|
if (data.success) {
|
|
checkbox.checked = data.new_status === 1;
|
|
showToast(data.msg, "success");
|
|
} else {
|
|
checkbox.checked = !checkbox.checked;
|
|
showToast(data.msg, "danger");
|
|
}
|
|
})
|
|
.catch(() => { checkbox.disabled = false; checkbox.checked = !checkbox.checked; showToast("Fehler beim Umschalten.", "danger"); });
|
|
}
|
|
|
|
function filterTable(inputId, tableId) {
|
|
const q = document.getElementById(inputId).value.trim().toLowerCase();
|
|
document.querySelectorAll(`#${tableId} tbody tr`).forEach(row => {
|
|
if (row.classList.contains("empty-row")) return;
|
|
row.style.display = row.innerText.toLowerCase().includes(q) ? "" : "none";
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|