Zugangsdaten-Entitaet, Gruppen-Tabelle mit Aufklappansicht, Vor-/Nachname, Dashboard-Sektionen

- Zugangsdaten (SSH-Logins) als eigenstaendige, wiederverwendbare Entitaet
  statt direkt am Switch; inline Neuanlage beim Switch-Erstellen moeglich;
  automatische Migration bestehender Switch-Logins
- Gruppen-Seite als Tabelle mit Aufklapp-Zeile fuer Rechte (Akkordeon),
  Admin als feste Systemzeile (Mitgliederverwaltung ueber is_admin),
  Standardgruppe 'Benutzer' mit allen Ansichtsrechten (devices.view,
  switches.view), automatische Zuordnung neuer/verwaister Benutzer
- Users-Seite: Icon-Buttons statt Text, Bearbeiten+Passwortaenderung in
  einem Modal zusammengefuehrt, Gruppe/Admin-Zuweisung ueber eigenen
  Zuweisen-Button (wie Switch-Zuordnung bei Devices), Vor-/Nachname
- Dashboard: einheitliche Kachelansicht mit/ohne Login, drei sortierte
  Abschnitte (Offline/Online/Deaktiviert), Kachel-Suchfilter, Bootstrap-
  artiges Grid (max. 6 Spalten), Aktivieren-Option im Popup fuer
  deaktivierte Geraete, Countdown serverseitig korrekt geseedet
- Sidebar dauerhaft einklappbar (Desktop, persistent via localStorage)
- Devices-Tabelle: Aktions-Buttons nebeneinander statt untereinander

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

srv/poe_manager/templates/index.html

@@ -1,8 +1,12 @@
 {% extends "base.html" %}
 {% set active_page = "index" %}
 {% block page_title %}Dashboard{% endblock %}
-{% block page_sub %}<div class="topbar-sub">{{ devices|length }} Geräte{{ " im Bestand" if current_user.is_authenticated else "" }}</div>{% endblock %}
+{% block page_sub %}<div class="topbar-sub">{{ device_count }} Geräte{{ " im Bestand" if current_user.is_authenticated else "" }}</div>{% endblock %}
 {% block topbar_right %}
+<div class="search-input" style="min-width:180px;">
+  <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="tileSearch" placeholder="Gerät suchen…">
+</div>
 <span class="timer-pill"><span class="dot"></span><span id="dashboard-timer">Nächste Prüfung in --s</span></span>
 {% endblock %}
 
@@ -29,35 +33,64 @@
   </div>
 </div>
 
-{% if devices %}
-<div class="device-grid">
-  {% for d in devices %}
-  {% set st = status.get(d['mac'], 'unbekannt') %}
-  <div class="device-card {% if d['is_active'] == 0 %}is-disabled{% endif %} {% if not current_user.is_authenticated %}is-readonly{% endif %}"
-       data-status="{{ 'offline' if d['is_active'] == 0 else st }}"
-       data-mac="{{ d['mac'] }}"
-       data-name="{{ d['name'] }}"
-       data-ip="{{ d['rpi_ip'] }}"
-       data-switch="{{ d['switch_hostname'] or '-' }}"
-       data-port="{{ d['port'] or '-' }}"
-       data-active="{{ d['is_active'] }}"
-       data-checked="{{ last_checked.get(d['mac']) or '-' }}"
-       {% if last_seen.get(d['mac']) %}title="{{ last_seen[d['mac']] }}"{% endif %}>
-    <div class="dc-top">
-      <div class="dc-icon">
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2.5"/><path d="M8 2v3M16 2v3M8 19v3M16 19v3M2 8h3M2 16h3M19 8h3M19 16h3"/></svg>
-      </div>
-      {% if d['is_active'] == 0 %}
-        <span class="pill disabled">Aus</span>
-      {% else %}
-        <span class="pill {{ st }}">{{ {'online':'Online','offline':'Offline','unbekannt':'Unbekannt'}[st] }}</span>
-      {% endif %}
+{% macro device_tile(d) %}
+{% set st = status.get(d['mac'], 'unbekannt') %}
+<div class="device-card {% if d['is_active'] == 0 %}is-disabled{% endif %} {% if not current_user.is_authenticated %}is-readonly{% endif %}"
+     data-status="{{ 'offline' if d['is_active'] == 0 else st }}"
+     data-mac="{{ d['mac'] }}"
+     data-name="{{ d['name'] }}"
+     data-ip="{{ d['rpi_ip'] }}"
+     data-switch="{{ d['switch_hostname'] or '-' }}"
+     data-port="{{ d['port'] or '-' }}"
+     data-active="{{ d['is_active'] }}"
+     data-checked="{{ last_checked.get(d['mac']) or '-' }}"
+     {% if last_seen.get(d['mac']) %}title="{{ last_seen[d['mac']] }}"{% endif %}>
+  <div class="dc-top">
+    <div class="dc-icon">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2.5"/><path d="M8 2v3M16 2v3M8 19v3M16 19v3M2 8h3M2 16h3M19 8h3M19 16h3"/></svg>
     </div>
-    <div class="dc-name">{{ d['name'] }}</div>
-    <div class="dc-ip">{{ d['rpi_ip'] }}</div>
+    {% if d['is_active'] == 0 %}
+      <span class="pill disabled">Aus</span>
+    {% else %}
+      <span class="pill {{ st }}">{{ {'online':'Online','offline':'Offline','unbekannt':'Unbekannt'}[st] }}</span>
+    {% endif %}
   </div>
-  {% endfor %}
+  <div class="dc-name">{{ d['name'] }}</div>
+  <div class="dc-ip">{{ d['rpi_ip'] }}</div>
 </div>
+{% endmacro %}
+
+{% if device_count %}
+
+  {% if offline_devices %}
+  <div class="dash-section">
+    <div class="dash-section-title">Offline <span class="pill offline">{{ offline_devices|length }}</span></div>
+    <div class="device-grid">
+      {% for d in offline_devices %}{{ device_tile(d) }}{% endfor %}
+    </div>
+  </div>
+  {% endif %}
+
+  {% if online_devices %}
+  <div class="dash-section">
+    <div class="dash-section-title">Online <span class="pill online">{{ online_devices|length }}</span></div>
+    <div class="device-grid">
+      {% for d in online_devices %}{{ device_tile(d) }}{% endfor %}
+    </div>
+  </div>
+  {% endif %}
+
+  {% if disabled_devices %}
+  <div class="dash-section">
+    <div class="dash-section-title">Deaktiviert <span class="pill disabled">{{ disabled_devices|length }}</span></div>
+    <div class="device-grid">
+      {% for d in disabled_devices %}{{ device_tile(d) }}{% endfor %}
+    </div>
+  </div>
+  {% endif %}
+
+  <p id="noSearchResults" class="text-faint hidden" style="text-align:center; padding:30px 0;">Kein Gerät gefunden.</p>
+
 {% else %}
 <div class="card card-pad" style="text-align:center; color:var(--text-faint);">
   {% if current_user.is_authenticated %}
@@ -95,8 +128,14 @@
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-close-modal>Schließen</button>
+      {% if current_user.has_permission('devices.toggle') %}
+      <button type="button" class="btn btn-success" id="activateButton" style="display:none;">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>
+        Aktivieren
+      </button>
+      {% endif %}
       {% if current_user.has_permission('devices.restart') %}
-      <button type="button" class="btn btn-primary" id="restartButton">
+      <button type="button" class="btn btn-primary" id="restartButton" style="display:none;">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 11-3.2-6.9M21 4v5h-5"/></svg>
         Neustarten
       </button>
@@ -153,11 +192,35 @@ document.addEventListener("DOMContentLoaded", () => {
     setInterval(updateTimer, 1000);
     updateTimer();
 
+    // Suchfilter über alle Abschnitte hinweg; Abschnitt wird komplett
+    // ausgeblendet, wenn keine seiner Kacheln mehr passt.
+    const searchInput = document.getElementById("tileSearch");
+    if (searchInput) {
+        searchInput.addEventListener("input", () => {
+            const q = searchInput.value.trim().toLowerCase();
+            let anyVisible = false;
+            document.querySelectorAll(".dash-section").forEach(section => {
+                let sectionHasMatch = false;
+                section.querySelectorAll(".device-card").forEach(card => {
+                    const match = card.dataset.name.toLowerCase().includes(q);
+                    card.classList.toggle("hidden", !match);
+                    if (match) sectionHasMatch = true;
+                });
+                section.classList.toggle("hidden", !sectionHasMatch);
+                if (sectionHasMatch) anyVisible = true;
+            });
+            const noResults = document.getElementById("noSearchResults");
+            if (noResults) noResults.classList.toggle("hidden", anyVisible || q === "");
+        });
+    }
+
     if (!isAuthenticated) {
         return;
     }
 
     let selectedCard = null, selectedMac = null, selectedName = null;
+    const restartButton = document.getElementById("restartButton");
+    const activateButton = document.getElementById("activateButton");
 
     document.querySelectorAll(".device-card").forEach(card => {
         const mac = card.dataset.mac;
@@ -171,11 +234,11 @@ document.addEventListener("DOMContentLoaded", () => {
             }
         }
         card.addEventListener("click", function () {
-            if (this.dataset.active == "0") return;
             if (sessionStorage.getItem("restart_" + this.dataset.mac)) return;
             selectedCard = this;
             selectedMac = this.dataset.mac;
             selectedName = this.dataset.name;
+            const isActive = this.dataset.active != "0";
             document.getElementById("deviceModalTitle").innerText = this.dataset.name;
             document.getElementById("deviceIp").innerText = this.dataset.ip || "-";
             document.getElementById("deviceSwitch").innerText = this.dataset.switch || "-";
@@ -183,11 +246,12 @@ document.addEventListener("DOMContentLoaded", () => {
             document.getElementById("deviceChecked").innerText = this.dataset.checked || "-";
             const pill = this.querySelector(".pill");
             document.getElementById("deviceStatus").innerText = pill ? pill.innerText.trim() : "-";
+            if (restartButton) restartButton.style.display = isActive ? "" : "none";
+            if (activateButton) activateButton.style.display = isActive ? "none" : "";
             PoeUI.openModal("deviceModal");
         });
     });
 
-    const restartButton = document.getElementById("restartButton");
     if (restartButton) {
         restartButton.addEventListener("click", function () {
             PoeUI.closeModal(document.getElementById("deviceModal"));
@@ -219,6 +283,26 @@ document.addEventListener("DOMContentLoaded", () => {
                 .catch(err => { button.disabled = false; showToast("Fehler beim Starten des Neustarts.", "danger"); });
         });
     }
+
+    if (activateButton) {
+        activateButton.addEventListener("click", function () {
+            const button = this;
+            button.disabled = true;
+            fetch("/devices/toggle/" + encodeURIComponent(selectedMac), { method: "POST" })
+                .then(r => r.json())
+                .then(data => {
+                    button.disabled = false;
+                    if (!data.success) {
+                        showToast(data.msg || "Aktivieren fehlgeschlagen.", "danger");
+                        return;
+                    }
+                    PoeUI.closeModal(document.getElementById("deviceModal"));
+                    showToast(data.msg, "success");
+                    setTimeout(() => window.location.reload(), 500);
+                })
+                .catch(() => { button.disabled = false; showToast("Fehler beim Aktivieren.", "danger"); });
+        });
+    }
 });
 </script>
 {% endblock %}