tesm/srv/poe_manager/templates/groups.html

{% extends "base.html" %}
{% set active_page = "groups" %}
{% block page_title %}Gruppen{% endblock %}
{% block page_sub %}<div class="topbar-sub">{{ groups|length + 1 }} Gruppen · Rechteverwaltung</div>{% endblock %}

{% block content %}

{# Rendert einen Bereich (Geräte/Logs/Einstellungen) als kompakte, schmale
   Spalte: eigene Kopfzeile mit Bereichsname + einem Kästchen (der
   Kill-Switch, "Bereich sichtbar"), darunter eine kleine Tabelle mit den
   Unterpunkten (Clients, Switche, ...) als Zeilen und nur den für diesen
   Bereich tatsächlich genutzten Rechten (group_row_types[group_key]) als
   Spalten — Logs/Einstellungen zeigen z.B. nur R/W/E, nur Geräte zeigt
   zusätzlich D (PoE-Neustart über Dashboard, ausschließlich bei Clients).
   "Ändern" (E) deckt Löschen überall mit ab — es gibt nirgends ein eigenes
   Löschen-Recht. Zellen ohne passendes Recht für die jeweilige Zeile (z.B.
   "D" bei Switche/Zugangsdaten) werden als ausgegraute, nicht anklickbare
   Checkbox dargestellt statt zu fehlen — dadurch bleiben alle Spalten
   bündig untereinander. readonly=true zeigt nur den aktuellen Stand
   (Admin/Systemgruppen bzw. fehlendes groups.edit). Die JS-Funktion
   applyPermissionGating() sperrt Kind-Rechte, solange das Bereich-Lesen
   (Kill-Switch) nicht gesetzt ist. Mehrere Bereiche stehen per Flexbox
   nebeneinander (siehe .permission-groups-row), damit die ganze
   Rechteübersicht einer Gruppe in einer kompakten Zeile Platz hat. #}
{% macro permission_table(group, group_key, checked_keys, readonly) %}
{% set row_types = group_row_types[group_key] %}
<div class="permission-group-col">
  <div style="overflow-x:auto;">
  <table class="permission-table">
    <thead>
      <tr>
        <th class="permission-group-header-cell">
          <label class="permission-group-toggle">
            <input type="checkbox" name="permissions" value="{{ group['view_key'] }}"
                   title="{{ permission_labels.get(group['view_key'], group['label']) }}"
                   {% if group['view_key'] in checked_keys %}checked{% endif %}
                   {% if readonly %}disabled{% endif %}
                   class="permission-area-toggle-cb">
            <span class="permission-group-name">{{ group['label'] }}</span>
          </label>
        </th>
        {% for row_key, row_letter, row_label in row_types %}
        <th title="{{ row_label }}">{{ row_letter }}</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for child_key, child in group['children'].items() %}
      <tr>
        <td class="permission-row-label">{{ child['label'] }}</td>
        {% for row_key, row_letter, row_label in row_types %}
        {% set perm_key = child['rows'].get(row_key) %}
        <td>
          {% if perm_key %}
          <input type="checkbox" name="permissions" value="{{ perm_key }}"
                 title="{{ permission_labels.get(perm_key, perm_key) }}"
                 {% if perm_key in checked_keys %}checked{% endif %}
                 {% if readonly %}disabled{% endif %}
                 class="permission-child-cb">
          {% else %}
          <input type="checkbox" disabled class="permission-cb-na" tabindex="-1">
          {% endif %}
        </td>
        {% endfor %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
  </div>
</div>
{% endmacro %}

{% macro permission_tree(checked_keys, readonly) %}
<div class="permission-groups-row">
  {% for group_key, group in permission_catalog.items() %}
    {{ permission_table(group, group_key, checked_keys, readonly) }}
  {% endfor %}
</div>
<div class="permission-legend">
  <strong>R</strong> = Read (Lesen) · <strong>W</strong> = Write (Anlegen) ·
  <strong>E</strong> = Edit (Ändern, inkl. Löschen) ·
  <strong>D</strong> = Dashboard (PoE-Neustart über das Dashboard-Popup, nur bei Clients)
</div>
{% endmacro %}

<div class="section-head">
  <div>
    <h2 style="font-size:16px;">Gruppen</h2>
    <div class="hint">
      Über Gruppen lassen sich Rechte für jeden Bereich der App granular vergeben.
      Ein Benutzer kann mehreren Gruppen angehören — die Rechte addieren sich. Auf „Rechte“ klicken,
      um eine Gruppe aufzuklappen und die Berechtigungen im Detail zu sehen bzw. zu ändern.
      „Admin“ und „Benutzer“ sind feste Systemgruppen und nicht veränderbar. Das Kästchen neben dem
      Bereichsnamen (Geräte/Logs/Einstellungen) muss gesetzt sein, bevor die Rechte darunter greifen —
      automatische Neustarts bei Ausfall bleiben von „D“ unberührt. Legende direkt bei den Rechten.
    </div>
  </div>
  {% if current_user.has_permission('groups.create') %}
  <button type="button" class="btn btn-primary" data-open-modal="addGroupModal">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
    Neue Gruppe
  </button>
  {% endif %}
</div>

<div class="table-wrap">
  <div style="overflow-x:auto;">
  <table class="data-table" data-sortable>
    <thead><tr>
      <th data-sort-key="name">Gruppe</th>
      <th data-sort-key="members">Mitglieder</th>
      <th style="width:1%;">Aktionen</th>
    </tr></thead>

    <!-- Virtuelle "Admin"-Gruppe: Rechte sind fix (alles), Mitgliedschaft
         wird direkt über is_admin gesteuert. Bleibt beim Sortieren immer
         oben (eigenes <tbody data-sort-pinned>). -->
    <tbody data-sort-pinned>
      <tr>
        <td class="cell-name">Admin <span class="pill admin">Systemrolle</span></td>
        <td class="text-dim">{{ admin_virtual_group.member_names|length }}</td>
        <td>
          <div class="row-actions">
            <button class="icon-btn" title="Rechte anzeigen" onclick="toggleDetail('detail-admin')">
              <svg id="chev-admin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
            </button>
            <button class="icon-btn" title="Mitglieder verwalten" data-open-modal="adminMembersModal">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6"/><circle cx="17.5" cy="8.5" r="2.4"/><path d="M15.8 14.2c2.7.3 4.7 2.4 4.7 5.3"/></svg>
            </button>
          </div>
        </td>
      </tr>
      <tr class="group-detail-row hidden" id="detail-admin">
        <td colspan="3">
          {{ permission_tree(admin_virtual_group.permissions, true) }}
          <p class="text-faint" style="font-size:11.5px; margin:12px 0 0;">Admins dürfen immer alles — diese Rechte sind fest und nicht änderbar.</p>
        </td>
      </tr>
    </tbody>

    {% for g in groups %}
    {% set can_edit_this = current_user.has_permission('groups.edit') and not g.is_system %}
    <!-- Jede Gruppe (Haupt- + Detail-Zeile) in einem eigenen <tbody>, damit
         die Sortierung beide Zeilen gemeinsam verschiebt. -->
    <tbody data-sort-name="{{ g.name|lower }}" data-sort-members="{{ g.member_names|length }}">
      <tr>
        <td class="cell-name">
          {{ g.name }}
          {% if g.is_system %}<span class="pill user" style="white-space:nowrap;">Standard</span>{% endif %}
        </td>
        <td class="text-dim">{{ g.member_names|length }}</td>
        <td>
          <div class="row-actions">
            <button class="icon-btn" title="Rechte anzeigen{{ '/bearbeiten' if can_edit_this else '' }}" onclick="toggleDetail('detail-{{ g.id }}')">
              <svg id="chev-{{ g.id }}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
            </button>
            <button class="icon-btn" title="Mitglieder verwalten" data-open-modal="membersModal{{ loop.index }}">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8" r="3.2"/><path d="M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6"/><circle cx="17.5" cy="8.5" r="2.4"/><path d="M15.8 14.2c2.7.3 4.7 2.4 4.7 5.3"/></svg>
            </button>
            {% if current_user.has_permission('groups.edit') and not g.is_default and not g.is_system %}
            <form method="post" data-confirm="Gruppe „{{ g.name }}“ wirklich löschen? Mitglieder verlieren die zugehörigen Rechte.">
              <input type="hidden" name="delete_group" value="{{ g.id }}">
              <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>
      </tr>
      <tr class="group-detail-row hidden" id="detail-{{ g.id }}">
        <td colspan="3">
          {% if can_edit_this %}
          <form method="post">
            <input type="hidden" name="save_group" value="1">
            <input type="hidden" name="permissions_submitted" value="1">
            <input type="hidden" name="group_id" value="{{ g.id }}">
            <input type="hidden" name="name" value="{{ g.name }}">
            {{ permission_tree(g.permissions, false) }}
            <div class="flex" style="justify-content:flex-end; margin-top:16px;">
              <button type="submit" class="btn btn-primary btn-sm">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
                Rechte speichern
              </button>
            </div>
          </form>
          {% else %}
          {{ permission_tree(g.permissions, true) }}
          {% if g.is_system %}
          <p class="text-faint" style="font-size:11.5px; margin:12px 0 0;">Die Standardgruppe „Benutzer“ ist eine Systemgruppe — ihre Rechte sind fest und nicht änderbar.</p>
          {% endif %}
          {% endif %}
        </td>
      </tr>
    </tbody>
    {% else %}
    <tbody data-sort-pinned>
      <tr class="empty-row"><td colspan="3">Noch keine weiteren Gruppen angelegt.</td></tr>
    </tbody>
    {% endfor %}
  </table>
  </div>
</div>

<!-- Modal: Admin-Mitglieder verwalten -->
<div class="modal-overlay" id="adminMembersModal">
  <div class="modal" style="max-width:380px;">
    <form method="post">
      <input type="hidden" name="assign_admins" value="1">
      <div class="modal-header">
        <h3>Admin-Mitglieder</h3>
        <button type="button" class="modal-close" data-close-modal>&times;</button>
      </div>
      <div class="modal-body">
        <p class="text-faint" style="font-size:11.5px; margin:0 0 12px;">Mindestens ein Admin muss bestehen bleiben.</p>
        <div class="check-list" style="max-height:320px; overflow-y:auto; padding-right:4px;">
          {% for u in all_users_all %}
          <label class="check-row">
            <input type="checkbox" name="members" value="{{ u['id'] }}" {% if u['is_admin'] %}checked{% endif %}>
            {{ u['username'] }}
          </label>
          {% endfor %}
        </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>

<!-- Modals: Mitglieder pro Gruppe verwalten -->
{% for g in groups %}
<div class="modal-overlay" id="membersModal{{ loop.index }}">
  <div class="modal" style="max-width:380px;">
    <form method="post">
      <input type="hidden" name="save_group" value="1">
      <input type="hidden" name="members_submitted" value="1">
      <input type="hidden" name="group_id" value="{{ g.id }}">
      <input type="hidden" name="name" value="{{ g.name }}">
      <div class="modal-header">
        <h3>Mitglieder — {{ g.name }}</h3>
        <button type="button" class="modal-close" data-close-modal>&times;</button>
      </div>
      <div class="modal-body">
        <div class="check-list" style="max-height:320px; overflow-y:auto; padding-right:4px;">
          {% for u in all_users %}
          <label class="check-row">
            <input type="checkbox" name="members" value="{{ u['id'] }}" {% if u['id'] in g.members %}checked{% endif %}>
            {{ u['username'] }}
          </label>
          {% else %}
          <p class="text-faint" style="font-size:12px;">Keine Nicht-Admin-Benutzer vorhanden.</p>
          {% endfor %}
        </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>
{% endfor %}

<!-- Modal: Neue Gruppe — Rechte direkt beim Anlegen setzbar, Mitglieder
     werden danach über die Gruppentabelle zugeordnet (die Gruppe muss
     dafür erst existieren). -->
<div class="modal-overlay" id="addGroupModal">
  <div class="modal" style="max-width:900px;">
    <form method="post">
      <div class="modal-header">
        <h3>Neue Gruppe</h3>
        <button type="button" class="modal-close" data-close-modal>&times;</button>
      </div>
      <div class="modal-body">
        <input type="hidden" name="add_group" value="1">
        <div class="field">
          <label>Name</label>
          <input type="text" name="name" required placeholder="z.B. Facility-Team">
          <div class="field-hint">Mitglieder werden danach über die Gruppentabelle zugeordnet.</div>
        </div>
        {{ permission_tree([], false) }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-close-modal>Abbrechen</button>
        <button type="submit" class="btn btn-primary">Anlegen</button>
      </div>
    </form>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
function toggleDetail(id) {
    const row = document.getElementById(id);
    if (!row) return;
    row.classList.toggle("hidden");
    const chev = document.getElementById(id.replace("detail-", "chev-"));
    if (chev) chev.style.transform = row.classList.contains("hidden") ? "" : "rotate(180deg)";
}

// Kind-Rechte einer Kategorie sind erst vergebbar, wenn das übergeordnete
// "Bereich anzeigen"-Recht (Kill-Switch, erste Spalte/L-Zeile) gesetzt ist —
// spiegelt serverseitig User.has_permission() (PERMISSION_PARENT_GROUP).
// Bearbeitbare Tabellen bekommen einen Live-Listener, Nur-Lese-Tabellen
// (Admin/Systemgruppen) bleiben unangetastet, deren Checkboxen sind ohnehin
// alle disabled.
function applyPermissionGating() {
    document.querySelectorAll(".permission-group-col").forEach(function (area) {
        const toggle = area.querySelector(".permission-area-toggle-cb");
        if (!toggle || toggle.disabled) return;
        const tbody = area.querySelector("tbody");
        const children = area.querySelectorAll(".permission-child-cb");
        const sync = function () {
            children.forEach(function (cb) {
                cb.disabled = !toggle.checked;
                if (!toggle.checked) cb.checked = false;
            });
            // Zusätzlich zum disabled-Attribut (das der Browser nur dezent
            // abblendet) sichtbar ausgrauen, wie gefordert — sonst fällt
            // "Bereich gesperrt" auf den ersten Blick kaum auf.
            if (tbody) tbody.classList.toggle("permission-locked", !toggle.checked);
        };
        toggle.addEventListener("change", sync);
        sync();
    });
}
document.addEventListener("DOMContentLoaded", applyPermissionGating);
</script>
{% endblock %}