scripte/zmb-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor: Tab-Switching von JavaScript auf HTMX + Jinja2 umgestellt

Browse Source 
Shares- und Identities-Seite nutzen jetzt ?tab= Query-Parameter statt
clientseitigem JS. Der Server steuert aktiven Tab via Jinja2, kein
<script>-Block mehr nötig.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Patrick
2026-06-05 19:18:47 +02:00
parent 909c32f087
commit 56b1ab9970
3 changed files with 24 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/templates/identities.html
+6 -12
View File
@@ -4,12 +4,14 @@
<h2>Benutzer &amp; Gruppen</h2>
<div style="display:flex;gap:0.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--pico-muted-border-color);padding-bottom:0.5rem">
<button onclick="showTab('users')" id="tab-users" class="outline">Benutzer</button>
<button onclick="showTab('groups')" id="tab-groups" class="outline secondary">Gruppen</button>
<a href="/identities?tab=users" hx-get="/identities?tab=users" hx-target="body" hx-push-url="true"
class="outline{% if tab != 'users' %} secondary{% endif %}">Benutzer</a>
<a href="/identities?tab=groups" hx-get="/identities?tab=groups" hx-target="body" hx-push-url="true"
class="outline{% if tab != 'groups' %} secondary{% endif %}">Gruppen</a>
</div>
<!-- Users -->
<div id="panel-users">
<div id="panel-users"{% if tab != 'users' %} style="display:none"{% endif %}>
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
<h3 style="margin:0">Systembenutzer</h3>
<button onclick="document.getElementById('new-user-form').style.display='block'">&#43; Neu</button>
@@ -35,18 +37,10 @@
</div>
<!-- Groups -->
<div id="panel-groups" style="display:none">
<div id="panel-groups"{% if tab != 'groups' %} style="display:none"{% endif %}>
<div id="group-list" hx-get="/fragments/groups" hx-trigger="load">
<p aria-busy="true">Lade...</p>
</div>
</div>
<script>
function showTab(name) {
['users','groups'].forEach(t => {
document.getElementById('panel-' + t).style.display = t === name ? 'block' : 'none';
document.getElementById('tab-' + t).className = t === name ? 'outline' : 'outline secondary';
});
}
</script>
{% endblock %}
backend/templates/shares.html
+10 -16
View File
@@ -3,15 +3,18 @@
{% block content %}
<h2>File Sharing</h2>
<!-- Tabs via CSS -->
<!-- Tabs via HTMX -->
<div role="tablist" style="display:flex;gap:0.5rem;margin-bottom:1.5rem;border-bottom:1px solid var(--pico-muted-border-color);padding-bottom:0.5rem">
<button role="tab" onclick="showTab('samba')" id="tab-samba" class="outline">Samba (SMB)</button>
<button role="tab" onclick="showTab('nfs')" id="tab-nfs" class="outline secondary">NFS</button>
<button role="tab" onclick="showTab('config')" id="tab-config" class="outline secondary">Samba Config</button>
<a role="tab" href="/shares?tab=samba" hx-get="/shares?tab=samba" hx-target="body" hx-push-url="true"
class="outline{% if tab != 'samba' %} secondary{% endif %}">Samba (SMB)</a>
<a role="tab" href="/shares?tab=nfs" hx-get="/shares?tab=nfs" hx-target="body" hx-push-url="true"
class="outline{% if tab != 'nfs' %} secondary{% endif %}">NFS</a>
<a role="tab" href="/shares?tab=config" hx-get="/shares?tab=config" hx-target="body" hx-push-url="true"
class="outline{% if tab != 'config' %} secondary{% endif %}">Samba Config</a>
</div>
<!-- Samba Shares -->
<div id="panel-samba">
<div id="panel-samba"{% if tab != 'samba' %} style="display:none"{% endif %}>
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
<h3 style="margin:0">Samba Shares</h3>
<button onclick="document.getElementById('new-samba-form').style.display='block'">&#43; Neu</button>
@@ -40,7 +43,7 @@
</div>
<!-- NFS -->
<div id="panel-nfs" style="display:none">
<div id="panel-nfs"{% if tab != 'nfs' %} style="display:none"{% endif %}>
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem">
<h3 style="margin:0">NFS Exports</h3>
<button onclick="document.getElementById('new-nfs-form').style.display='block'">&#43; Neu</button>
@@ -69,7 +72,7 @@
</div>
<!-- Samba Config -->
<div id="panel-config" style="display:none">
<div id="panel-config"{% if tab != 'config' %} style="display:none"{% endif %}>
<div id="samba-config"
hx-get="/fragments/samba-config"
hx-trigger="load">
@@ -77,13 +80,4 @@
</div>
</div>
<script>
function showTab(name) {
['samba','nfs','config'].forEach(t => {
document.getElementById('panel-' + t).style.display = t === name ? 'block' : 'none';
const btn = document.getElementById('tab-' + t);
btn.className = t === name ? 'outline' : 'outline secondary';
});
}
</script>
{% endblock %}