Pausenbuchung hinzugefügt

views/dashboard.ejs

@@ -21,7 +21,7 @@
     <div class="layout">
       <section class="card entry-card">
         <h2 class="card__title"><%= editEntry ? 'Buchung bearbeiten' : 'Buchung erfassen' %></h2>
-        <form action="/entries" method="POST" class="form">
+        <form action="/entries" method="POST" class="form" id="entry-form">
           <label class="field">
             <span class="field__label">Datum</span>
             <input
@@ -31,9 +31,10 @@
               required
             />
           </label>
+
           <div class="field-row">
             <label class="field">
-              <span class="field__label">Start</span>
+              <span class="field__label">Arbeitsbeginn</span>
               <input
                 type="time"
                 name="startTime"
@@ -42,7 +43,7 @@
               />
             </label>
             <label class="field">
-              <span class="field__label">Ende</span>
+              <span class="field__label">Arbeitsende</span>
               <input
                 type="time"
                 name="endTime"
@@ -51,16 +52,34 @@
               />
             </label>
           </div>
-          <label class="field">
-            <span class="field__label">Pause (Minuten)</span>
-            <input
-              type="number"
-              name="breakMinutes"
-              min="0"
-              step="5"
-              value="<%= editEntry ? editEntry.breakMinutes : 30 %>"
-            />
-          </label>
+
+          <div class="field">
+            <span class="field__label">
+              Pausen
+              <span class="field__label-hint">(jeweils Start – Ende)</span>
+            </span>
+            <div id="breaks-container">
+              <% if (editEntry && editEntry.breaks && editEntry.breaks.length > 0) { %>
+                <% editEntry.breaks.forEach((b) => { %>
+                  <div class="break-row">
+                    <input type="time" name="breakStart" value="<%= b.start %>" />
+                    <span class="break-dash" aria-hidden="true">–</span>
+                    <input type="time" name="breakEnd" value="<%= b.end %>" />
+                    <button
+                      type="button"
+                      class="break-remove"
+                      aria-label="Pause entfernen"
+                      title="Pause entfernen"
+                    >×</button>
+                  </div>
+                <% }) %>
+              <% } %>
+            </div>
+            <button type="button" id="add-break" class="button button--ghost break-add-btn">
+              + Pause hinzufügen
+            </button>
+          </div>
+
           <label class="field">
             <span class="field__label">Notiz (optional)</span>
             <input
@@ -71,6 +90,7 @@
               placeholder="z. B. Außendienst, Homeoffice …"
             />
           </label>
+
           <button type="submit" class="button button--primary button--block">
             <%= editEntry ? 'Änderung speichern' : 'Buchung speichern' %>
           </button>
@@ -79,8 +99,8 @@
           <% } %>
         </form>
         <p class="card__footnote">
-          Ein Tag = ein Eintrag. Eine bereits vorhandene Buchung für ein Datum wird beim erneuten
-          Speichern aktualisiert.
+          Ein Tag = ein Eintrag. Pausen mit End- vor Startzeit werden ignoriert.
+          Bereits bestehende Buchungen für ein Datum werden beim erneuten Speichern aktualisiert.
         </p>
       </section>
 
@@ -96,7 +116,8 @@
                   <th>Datum</th>
                   <th>Start</th>
                   <th>Ende</th>
-                  <th>Pause</th>
+                  <th>Pausen</th>
+                  <th>Pause (ges.)</th>
                   <th>Gearbeitet</th>
                   <th>Saldo</th>
                   <th>Notiz</th>
@@ -109,7 +130,24 @@
                     <td><%= formatDateDisplay(entry.date) %></td>
                     <td class="num"><%= entry.startTime %></td>
                     <td class="num"><%= entry.endTime %></td>
-                    <td class="num"><%= entry.breakMinutes %> min</td>
+                    <td class="num">
+                      <% if (entry.breaks && entry.breaks.length > 0) { %>
+                        <span class="break-pills">
+                          <% entry.breaks.forEach((b) => { %>
+                            <span class="break-pill"><%= b.start %>–<%= b.end %></span>
+                          <% }) %>
+                        </span>
+                      <% } else { %>
+                        <span class="muted">–</span>
+                      <% } %>
+                    </td>
+                    <td class="num">
+                      <% if (entry.breakMinutes > 0) { %>
+                        <%= minutesToHM(entry.breakMinutes) %>
+                      <% } else { %>
+                        <span class="muted">–</span>
+                      <% } %>
+                    </td>
                     <td class="num"><%= minutesToHM(entry.workedMinutes) %></td>
                     <td class="num <%= entry.balanceMinutes < 0 ? 'is-negative' : 'is-positive' %>">
                       <%= formatBalance(entry.balanceMinutes) %>
@@ -160,5 +198,7 @@
       </section>
     <% } %>
   </main>
+
+  <script src="/js/app.js"></script>
 </body>
 </html>