reptil1990/SDSStundenerfassung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Einklappbare sectionen

Browse Source
This commit is contained in:
Carsten Graf
2026-01-23 11:16:37 +01:00
parent 0f10f35149
commit 33c62a7a2a
3 changed files with 122 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
views/admin.ejs
View File

@@ -29,8 +29,15 @@
<div class="admin-panel">
<h2>Benutzerverwaltung</h2>
<div class="add-user-form">
<h3>Neuen Benutzer anlegen</h3>
<!-- Benutzer anlegen - Zusammenklappbar -->
<div class="add-user-section" style="margin-top: 20px;">
<div class="collapsible-header" onclick="toggleAddUserSection()" style="cursor: pointer; padding: 15px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
<h3 style="margin: 0;">Neuen Benutzer anlegen</h3>
<span id="addUserToggleIcon" style="font-size: 18px; transition: transform 0.3s;">▼</span>
</div>
<div id="addUserContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
<div class="add-user-form">
<form id="addUserForm">
<div class="form-row">
<div class="form-group">
@@ -94,10 +101,19 @@
<button type="submit" class="btn btn-primary">Benutzer anlegen</button>
</form>
</div>
</div>
</div>
<div class="user-list">
<h3>Benutzer-Liste</h3>
<!-- Benutzer-Liste - Zusammenklappbar -->
<div class="user-list-section" style="margin-top: 20px;">
<div class="collapsible-header" onclick="toggleUserListSection()" style="cursor: pointer; padding: 15px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
<h3 style="margin: 0;">Benutzer-Liste</h3>
<span id="userListToggleIcon" style="font-size: 18px; transition: transform 0.3s;">▼</span>
</div>
<div id="userListContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
<div class="user-list">
<table>
<thead>
<tr>
@@ -178,11 +194,17 @@
<% }); %>
</tbody>
</table>
</div>
</div>
</div>
<div class="ldap-sync-section" style="margin-top: 40px;">
<h2>LDAP-Synchronisation</h2>
<div class="collapsible-header" onclick="toggleLDAPSection()" style="cursor: pointer; padding: 15px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
<h2 style="margin: 0;">LDAP-Synchronisation</h2>
<span id="ldapToggleIcon" style="font-size: 18px; transition: transform 0.3s;">▼</span>
</div>
<div id="ldapContent" style="display: none; padding: 20px; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
<div class="ldap-config-form">
<h3>LDAP-Konfiguration</h3>
<form id="ldapConfigForm">
@@ -298,12 +320,55 @@
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script src="/js/admin.js"></script>
<script>
// Benutzer anlegen Sektion ein-/ausklappen
function toggleAddUserSection() {
const content = document.getElementById('addUserContent');
const icon = document.getElementById('addUserToggleIcon');
if (content.style.display === 'none') {
content.style.display = 'block';
icon.style.transform = 'rotate(180deg)';
} else {
content.style.display = 'none';
icon.style.transform = 'rotate(0deg)';
}
}
// Benutzer-Liste Sektion ein-/ausklappen
function toggleUserListSection() {
const content = document.getElementById('userListContent');
const icon = document.getElementById('userListToggleIcon');
if (content.style.display === 'none') {
content.style.display = 'block';
icon.style.transform = 'rotate(180deg)';
} else {
content.style.display = 'none';
icon.style.transform = 'rotate(0deg)';
}
}
// LDAP-Sektion ein-/ausklappen
function toggleLDAPSection() {
const content = document.getElementById('ldapContent');
const icon = document.getElementById('ldapToggleIcon');
if (content.style.display === 'none') {
content.style.display = 'block';
icon.style.transform = 'rotate(180deg)';
} else {
content.style.display = 'none';
icon.style.transform = 'rotate(0deg)';
}
}
// Rollenwechsel-Handler
document.addEventListener('DOMContentLoaded', function() {
const roleSwitcher = document.getElementById('roleSwitcher');