Einklappbare sectionen

public/js/dashboard.js

@@ -248,8 +248,8 @@ function renderWeek() {
   let totalHours = 0;
   let allWeekdaysFilled = true;
   
-  // 7 Tage (Montag bis Sonntag)
-  for (let i = 0; i < 7; i++) {
+  // Hilfsfunktion zum Rendern eines einzelnen Tages
+  function renderDay(i) {
     const date = new Date(startDate);
     date.setDate(date.getDate() + i);
     const dateStr = formatDate(date);
@@ -290,7 +290,7 @@ function renderWeek() {
     const timeFieldsDisabled = (isFullDayVacation || isSick) ? 'disabled' : '';
     const disabled = '';
     
-    html += `
+    return `
       <tr>
         <td><strong>${getWeekday(dateStr)}</strong></td>
         <td>${formatDateDE(dateStr)}${isFullDayVacation ? ' <span style="color: #28a745;">(Urlaub - ganzer Tag)</span>' : ''}${isSick ? ' <span style="color: #e74c3c;">(Krank)</span>' : ''}</td>
@@ -418,6 +418,39 @@ function renderWeek() {
     `;
   }
   
+  // Werktage (Montag bis Freitag) rendern
+  for (let i = 0; i < 5; i++) {
+    html += renderDay(i);
+  }
+  
+  // Wochenende (Samstag und Sonntag) in zusammenklappbarer Sektion
+  html += `
+    <tr>
+      <td colspan="6" style="padding: 0; border: none;">
+        <div class="weekend-section" style="margin-top: 10px;">
+          <div class="collapsible-header" onclick="toggleWeekendSection()" style="cursor: pointer; padding: 12px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; display: flex; justify-content: space-between; align-items: center;">
+            <h4 style="margin: 0; font-size: 14px; font-weight: 600;">Wochenende</h4>
+            <span id="weekendToggleIcon" style="font-size: 16px; transition: transform 0.3s;">▼</span>
+          </div>
+          <div id="weekendContent" style="display: none; border: 1px solid #ddd; border-top: none; border-radius: 0 0 4px 4px; background-color: #fff;">
+            <table style="width: 100%; border-collapse: collapse;">
+              <tbody>
+  `;
+  
+  // Samstag und Sonntag rendern
+  for (let i = 5; i < 7; i++) {
+    html += renderDay(i);
+  }
+  
+  html += `
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </td>
+    </tr>
+  `;
+  
   html += `
         </tbody>
       </table>

views/admin.ejs

@@ -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');

views/dashboard.ejs

@@ -95,6 +95,22 @@
 
   <script src="/js/dashboard.js"></script>
   <script>
+    // Wochenende-Sektion ein-/ausklappen
+    function toggleWeekendSection() {
+      const content = document.getElementById('weekendContent');
+      const icon = document.getElementById('weekendToggleIcon');
+      
+      if (content && icon) {
+        if (content.style.display === 'none') {
+          content.style.display = 'block';
+          icon.style.transform = 'rotate(180deg)';
+        } else {
+          content.style.display = 'none';
+          icon.style.transform = 'rotate(0deg)';
+        }
+      }
+    }
+    
     // URL-Kopier-Funktion
     function copyToClipboard(inputId) {
       const input = document.getElementById(inputId);