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>