Pausenbuchung hinzugefügt

public/js/app.js

@@ -0,0 +1,54 @@
+(function () {
+  'use strict';
+
+  const container = document.getElementById('breaks-container');
+  const addBtn    = document.getElementById('add-break');
+
+  if (!container || !addBtn) return;
+
+  /** Erzeugt eine neue Pausen-Zeile und gibt das DOM-Element zurück. */
+  function createBreakRow(start, end) {
+    const row = document.createElement('div');
+    row.className = 'break-row';
+
+    const startInput = document.createElement('input');
+    startInput.type  = 'time';
+    startInput.name  = 'breakStart';
+    startInput.value = start || '';
+
+    const dash = document.createElement('span');
+    dash.className   = 'break-dash';
+    dash.textContent = '–';
+    dash.setAttribute('aria-hidden', 'true');
+
+    const endInput = document.createElement('input');
+    endInput.type  = 'time';
+    endInput.name  = 'breakEnd';
+    endInput.value = end || '';
+
+    const removeBtn = document.createElement('button');
+    removeBtn.type      = 'button';
+    removeBtn.className = 'break-remove';
+    removeBtn.setAttribute('aria-label', 'Pause entfernen');
+    removeBtn.setAttribute('title', 'Pause entfernen');
+    removeBtn.textContent = '×';
+    removeBtn.addEventListener('click', () => row.remove());
+
+    row.append(startInput, dash, endInput, removeBtn);
+    return row;
+  }
+
+  // Bestehende Zeilen aus dem server-seitig gerenderten Formular (Bearbeitungs-
+  // modus) ebenfalls mit dem Entfernen-Handler ausstatten.
+  container.querySelectorAll('.break-row .break-remove').forEach((btn) => {
+    btn.addEventListener('click', () => btn.closest('.break-row').remove());
+  });
+
+  // Neue Pausenzeile anfügen.
+  addBtn.addEventListener('click', () => {
+    container.appendChild(createBreakRow());
+    // Fokus auf das erste Input der neuen Zeile setzen.
+    const row = container.lastElementChild;
+    row?.querySelector('input[type="time"]')?.focus();
+  });
+})();