55 lines
1.8 KiB
JavaScript
55 lines
1.8 KiB
JavaScript
(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();
|
||
});
|
||
})();
|