alientimandClaude Sonnet 5
9a390e740d
- permission_tree() bekommt einen dritten Parameter compact=false, der nur im Dropdown der Hauptseite (Admin-/System-/editierbare Gruppen) auf true gesetzt wird, nicht im "Neue Gruppe"-Modal. - .permission-groups-row--compact verkleinert Zeilen-/Spalten-Padding und die Einrueckung der Unterpunkte (32px statt 48px) NUR fuer diese Instanzen - das Modal behaelt exakt sein bisheriges Aussehen. - Modal und Dropdown nutzen weiterhin denselben Code/dieselbe Struktur (permission_table()-Macro, Kill-Switch-Logik, JS-Gating), nur die Abstaende unterscheiden sich ueber die Zusatzklasse. - Verifiziert per Screenshot: Dropdown jetzt sichtbar kompakter (engere Zellen, kuerzere Zeilen), Modal unveraendert; Gruppen anlegen-mit- Rechten und Gruppen-Bearbeiten-Regression funktionieren weiterhin. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
339 lines
16 KiB
HTML
339 lines
16 KiB
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 %}
|
|
|
|
{# compact=true (Gruppen-Dropdown auf der Hauptseite) verkleinert Zellen-
|
|
Padding/Abstände gegenüber dem "Neue Gruppe"-Modal (compact=false, bleibt
|
|
unverändert) — gleicher Aufbau, nur enger, da im Dropdown mehr Breite
|
|
zur Verfügung steht als im schmalen Modal und es sonst auseinandergezogen wirkt. #}
|
|
{% macro permission_tree(checked_keys, readonly, compact=false) %}
|
|
<div class="permission-groups-row{{ ' permission-groups-row--compact' if compact }}">
|
|
{% 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, 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, true) }}
|
|
<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, 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>×</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>×</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:1000px;">
|
|
<form method="post">
|
|
<div class="modal-header">
|
|
<h3>Neue Gruppe</h3>
|
|
<button type="button" class="modal-close" data-close-modal>×</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 %}
|