Initial commit: PoE Manager modern UI rebuild

- Neues, eigenständiges Frontend (Sidebar, zentriertes Logo in der Topbar,
  Dark/Light-Theme, Karten-Dashboard, Toasts/Modals statt Bootstrap)
- Oeffentliches Kurz-Dashboard ohne Login (Status-Uebersicht)
- Browser-SSH-Terminal (paramiko, plattformunabhaengig) zum Testen von
  Switch-Zugangsdaten inkl. interaktiver Host-Key-Bestaetigung
- Granulares Rechtesystem mit Gruppen (Devices/Switches-Berechtigungen)
- Aufgeraeumtes Backend mit konfigurierbaren Pfaden, auto-generierten
  Secrets statt hart codierter Werte im Original

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

srv/poe_manager/templates/devices.html

@@ -0,0 +1,267 @@
+{% extends "base.html" %}
+{% set active_page = "devices" %}
+{% set can_toggle = current_user.has_permission('devices.toggle') %}
+{% 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.delete') %}
+{% 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 %}Devices{% endblock %}
+{% block page_sub %}<div class="topbar-sub">{{ devices|length }} Geräte</div>{% endblock %}
+{% block topbar_right %}
+{% 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 %}
+{% endblock %}
+
+{% block content %}
+
+<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">
+    <thead>
+      <tr>
+        <th>Hostname</th>
+        <th>IP-Adresse</th>
+        <th>MAC-Adresse</th>
+        <th>Switch</th>
+        <th>Port</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>
+        <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 '' }}')">
+              <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">
+    <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>&times;</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>Port</label>
+          <input type="text" name="port" placeholder="z.B. 3">
+        </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>
+      <div class="modal-footer">
+        <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">
+    <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>&times;</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>Port</label>
+          <input type="text" name="port" id="edit_port">
+        </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>
+
+<!-- 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>&times;</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 %}
+
+{% endblock %}
+
+{% block scripts %}
+<script>
+function resetDeviceForm() {
+    document.querySelector("#deviceModal form").reset();
+}
+function openEditDeviceModal(mac, name, ip, port) {
+    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;
+    PoeUI.openModal("editDeviceModal");
+}
+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 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;
+    return valid;
+}
+document.addEventListener("input", (e) => {
+    if (e.target.name === "rpi_ip") validateIP(e.target);
+    if (e.target.name === "mac") validateMAC(e.target);
+});
+
+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 %}