Tauschanfragen für Teammitglieder ergänzen

Betrachter klicken ihren Tag an, wählen ihren Namen, optional Wunschperson
und Wunschtag, und schreiben eine Notiz; keine Anmeldung nötig, zehn
Anfragen je Stunde und Adresse. Offene Anfragen markieren den Tag im
Kalender. Bearbeiter sehen sie unter „Anfragen" mit Zähler und führen den
Tausch aus (über Kreuz oder Übernahme), öffnen den Tag oder lehnen ab.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

public/app.js

@@ -51,7 +51,7 @@ async function api(path, { method = 'GET', body, raw } = {}) {
 }
 
 // ---------- Anmeldung zum Bearbeiten ----------
-const EDITOR_VIEWS = ['personen', 'abwesenheiten', 'einstellungen'];
+const EDITOR_VIEWS = ['personen', 'abwesenheiten', 'anfragen', 'einstellungen'];
 function isEditor() { return !state.data || state.data.auth?.editor !== false; }
 function applyAuthUI() {
   const a = state.data?.auth || { protected: false, editor: true };
@@ -62,6 +62,11 @@ function applyAuthUI() {
   for (const link of $$('.topbar nav a')) link.hidden = !a.editor && EDITOR_VIEWS.includes(link.dataset.view);
   $('#open-plan').hidden = !a.editor;
   $('#open-nextcloud').hidden = !a.editor;
+  $('#open-request').hidden = a.editor;
+  const open = (state.data?.requests || []).filter((r) => r.status === 'offen').length;
+  const badge = $('#requests-count');
+  badge.hidden = !a.editor || open === 0;
+  badge.textContent = open;
   if (!a.editor && EDITOR_VIEWS.includes(location.hash.slice(1))) location.hash = '#kalender';
 }
 function openLogin() {
@@ -139,7 +144,7 @@ function avatarEl(p, cls = '') {
 
 // ---------- Navigation ----------
 function showView(name) {
-  const known = ['kalender', 'personen', 'abwesenheiten', 'einstellungen'];
+  const known = ['kalender', 'personen', 'abwesenheiten', 'anfragen', 'einstellungen'];
   if (!known.includes(name)) name = 'kalender';
   if (!isEditor() && EDITOR_VIEWS.includes(name)) name = 'kalender';
   if (name === 'abwesenheiten' && state.data) prepareAbsenceImport();
@@ -170,10 +175,12 @@ function renderCalendar() {
     if (cur.getDay() === 0 || cur.getDay() === 6) continue;
     const date = iso(cur);
     const outside = cur.getMonth() !== d.getMonth();
-    const editable = !outside && isEditor();
+    const assigned = assignments[date] && !assignments[date].off && !holidayFor(date) && (assignments[date].main || assignments[date].co);
+    const editable = !outside && (isEditor() || Boolean(assigned));
     const cell = document.createElement(editable ? 'button' : 'div');
     cell.className = 'day';
     if (editable) { cell.type = 'button'; cell.dataset.date = date; }
+    if (!isEditor() && assigned) cell.classList.add('requestable');
     if (outside) cell.classList.add('outside');
     if (date === today) cell.classList.add('today');
     if (date < today) cell.classList.add('past');
@@ -183,6 +190,8 @@ function renderCalendar() {
     numText.textContent = cur.getDate();
     num.appendChild(numText);
     cell.appendChild(num);
+    const hasRequest = !outside && (state.data.requestDates || []).includes(date);
+    if (hasRequest) { const m = document.createElement('span'); m.className = 'req-mark'; m.title = 'Tauschanfrage offen'; num.appendChild(m); }
     if (outside) { grid.appendChild(cell); continue; }
 
     const hol = holidayFor(date);
@@ -212,7 +221,7 @@ function renderCalendar() {
       pair.appendChild(slotEl(co, 'co', date));
       cell.appendChild(pair);
       const absentNote = (p) => (p && isAbsent(p.id, date) ? ' (abwesend)' : '');
-      cell.setAttribute('aria-label', `${fmtLong(date)}: Haupt ${fullName(main)}${absentNote(main)}, Neben ${fullName(co)}${absentNote(co)}${a.locked ? ', fixiert' : ''}`);
+      cell.setAttribute('aria-label', `${fmtLong(date)}: Haupt ${fullName(main)}${absentNote(main)}, Neben ${fullName(co)}${absentNote(co)}${a.locked ? ', fixiert' : ''}${hasRequest ? ', Tauschanfrage offen' : ''}`);
     } else {
       cell.setAttribute('aria-label', `${fmtLong(date)}, noch nicht ausgelost`);
     }
@@ -288,9 +297,128 @@ $('#next-month').addEventListener('click', () => { state.month = new Date(state.
 $('#today-month').addEventListener('click', () => { state.month = startOfMonth(new Date()); renderCalendar(); });
 $('#cal-grid').addEventListener('click', (e) => {
   const cell = e.target.closest('.day[data-date]');
-  if (cell) openDayDialog(cell.dataset.date);
+  if (!cell) return;
+  if (isEditor()) openDayDialog(cell.dataset.date); else openRequestDialog(cell.dataset.date);
 });
 
+// ---------- Tauschanfrage (für alle) ----------
+const requestDialog = $('#request-dialog');
+const requestForm = $('#request-form');
+function fillRequestPersons(date) {
+  const f = requestForm.elements;
+  const a = state.data.assignments[date] || {};
+  const active = state.data.persons.filter((p) => p.active !== false && (p.canMain || p.canCo)).sort((x, y) => fullName(x).localeCompare(fullName(y)));
+  const assigned = [a.main, a.co].map(personById).filter(Boolean);
+  f.personId.textContent = '';
+  f.personId.appendChild(new Option('– bitte wählen –', ''));
+  if (assigned.length) {
+    const g = document.createElement('optgroup');
+    g.label = 'An diesem Tag eingeteilt';
+    for (const p of assigned) g.appendChild(new Option(fullName(p), p.id));
+    f.personId.appendChild(g);
+  }
+  const g2 = document.createElement('optgroup');
+  g2.label = 'Alle';
+  for (const p of active) g2.appendChild(new Option(fullName(p), p.id));
+  f.personId.appendChild(g2);
+  const current = f.partnerId.value;
+  f.partnerId.textContent = '';
+  f.partnerId.appendChild(new Option('– noch offen –', ''));
+  for (const p of active) f.partnerId.appendChild(new Option(fullName(p), p.id));
+  f.partnerId.value = current || '';
+  $('#request-info').textContent = assigned.length
+    ? `${fmtLong(date)}: ${assigned.map((p, i) => `${i === 0 && a.main === p.id ? 'Haupt' : 'Neben'} ${fullName(p)}`).join(', ')}`
+    : `${fmtLong(date)}: kein Meeting geplant`;
+}
+function openRequestDialog(date) {
+  const f = requestForm.elements;
+  requestForm.reset();
+  f.date.value = date || '';
+  fillRequestPersons(f.date.value);
+  $('#request-result').hidden = true;
+  $('#request-submit').disabled = false;
+  requestDialog.showModal();
+}
+$('#open-request').addEventListener('click', () => openRequestDialog(''));
+$('#request-close').addEventListener('click', () => requestDialog.close());
+requestForm.elements.date.addEventListener('change', () => fillRequestPersons(requestForm.elements.date.value));
+requestForm.addEventListener('submit', async (e) => {
+  e.preventDefault();
+  const f = requestForm.elements;
+  const out = $('#request-result');
+  $('#request-submit').disabled = true;
+  try {
+    await api('api/requests', { method: 'POST', body: { personId: f.personId.value, date: f.date.value, partnerId: f.partnerId.value || null, partnerDate: f.partnerDate.value || null, note: f.note.value } });
+    out.className = 'result';
+    out.textContent = 'Danke, die Anfrage ist bei der Planung angekommen. Der Tag ist im Kalender markiert, bis sie bearbeitet ist.';
+    out.hidden = false;
+    $('#request-close').textContent = 'Schließen';
+    await load();
+  } catch (err) {
+    out.className = 'result error';
+    out.textContent = err.message;
+    out.hidden = false;
+    $('#request-submit').disabled = false;
+  }
+});
+requestDialog.addEventListener('close', () => { $('#request-close').textContent = 'Abbrechen'; });
+
+// ---------- Anfragen bearbeiten (nur Bearbeiter) ----------
+function requestRow(r) {
+  const li = document.createElement('li');
+  const p = personById(r.personId);
+  li.appendChild(avatarEl(p, 'plain small'));
+  const grow = document.createElement('div');
+  grow.className = 'grow';
+  const strong = document.createElement('strong');
+  strong.textContent = `${fullName(p)} kann am ${fmtDate(r.date)} nicht (${r.role === 'main' ? 'Haupt' : 'Neben'}moderation)`;
+  grow.appendChild(strong);
+  const meta = document.createElement('div');
+  meta.className = 'request-meta';
+  const partner = r.partnerId ? personById(r.partnerId) : null;
+  const parts = [];
+  if (partner) parts.push(`Wunsch: Tausch mit ${fullName(partner)}${r.partnerDate ? ` am ${fmtDate(r.partnerDate)}` : ' (übernimmt den Tag)'}`);
+  else parts.push('Kein Wunschpartner genannt');
+  parts.push(`gestellt am ${new Date(r.createdAt).toLocaleDateString('de-DE')}`);
+  if (r.status !== 'offen') parts.push(r.status === 'erledigt' ? 'erledigt' : 'abgelehnt');
+  meta.textContent = parts.join(' · ');
+  grow.appendChild(meta);
+  if (r.note) { const n = document.createElement('div'); n.className = 'request-note'; n.textContent = `„${r.note}"`; grow.appendChild(n); }
+  li.appendChild(grow);
+  const actions = document.createElement('div');
+  actions.className = 'request-actions';
+  const btn = (label, cls, fn) => { const b = document.createElement('button'); b.type = 'button'; b.className = cls; b.textContent = label; b.addEventListener('click', fn); actions.appendChild(b); };
+  if (r.status === 'offen') {
+    if (r.partnerId) btn('Ausführen', 'primary', () => run(async () => {
+      const res = await api(`api/requests/${r.id}/execute`, { method: 'POST' });
+      return res;
+    }, 'Tausch ausgeführt. Nextcloud danach neu schreiben, damit die Termine stimmen.'));
+    btn('Tag öffnen', '', () => { location.hash = '#kalender'; state.month = new Date(r.date + 'T12:00:00'); renderCalendar(); openDayDialog(r.date); });
+    btn('Erledigt', 'ghost', () => run(() => api(`api/requests/${r.id}`, { method: 'PUT', body: { status: 'erledigt' } }), 'Als erledigt markiert.'));
+    btn('Ablehnen', 'ghost', () => run(() => api(`api/requests/${r.id}`, { method: 'PUT', body: { status: 'abgelehnt' } }), 'Anfrage abgelehnt.'));
+  } else {
+    btn('Wieder öffnen', 'ghost', () => run(() => api(`api/requests/${r.id}`, { method: 'PUT', body: { status: 'offen' } })));
+    btn('Löschen', 'ghost', () => run(() => api(`api/requests/${r.id}`, { method: 'DELETE' })));
+  }
+  li.appendChild(actions);
+  return li;
+}
+function renderRequests() {
+  const all = state.data.requests || [];
+  const open = all.filter((r) => r.status === 'offen').sort((a, b) => a.date.localeCompare(b.date));
+  const done = all.filter((r) => r.status !== 'offen').sort((a, b) => (b.resolvedAt || '').localeCompare(a.resolvedAt || ''));
+  const list = $('#request-list');
+  list.textContent = '';
+  if (open.length === 0) list.innerHTML = '<li class="hint">Keine offenen Anfragen.</li>';
+  for (const r of open) list.appendChild(requestRow(r));
+  const doneList = $('#request-list-done');
+  doneList.textContent = '';
+  for (const r of done) doneList.appendChild(requestRow(r));
+  doneList.hidden = !$('#requests-show-done').checked || done.length === 0;
+  $('#requests-toggle').hidden = done.length === 0;
+}
+$('#requests-show-done').addEventListener('change', renderRequests);
+
 // ---------- Tag-Dialog ----------
 const dayDialog = $('#day-dialog');
 const dayForm = $('#day-form');
@@ -1014,6 +1142,7 @@ function renderAll() {
     renderPersons();
     renderPhotoField();
     renderAbsences();
+    renderRequests();
     renderSettings();
     if (!$('#view-abwesenheiten').hidden) prepareAbsenceImport();
   } else {

public/index.html

@@ -16,6 +16,7 @@
       <a href="#kalender" data-view="kalender">Kalender</a>
       <a href="#personen" data-view="personen">Personen</a>
       <a href="#abwesenheiten" data-view="abwesenheiten">Abwesenheiten</a>
+      <a href="#anfragen" data-view="anfragen">Anfragen <span id="requests-count" class="count" hidden></span></a>
       <a href="#einstellungen" data-view="einstellungen">Einstellungen</a>
     </nav>
     <button type="button" id="auth-button" class="topbar-action" hidden>Anmelden</button>
@@ -32,6 +33,7 @@
           <button type="button" id="today-month" class="ghost">Heute</button>
         </div>
         <div class="actions">
+          <button type="button" id="open-request" class="primary" hidden>Tausch anfragen …</button>
           <button type="button" id="open-plan" class="primary">Auslosen …</button>
           <button type="button" id="open-nextcloud">Nextcloud …</button>
           <a id="download-ics" class="button ghost" href="#" download>ICS-Datei</a>
@@ -49,6 +51,7 @@
         <span><span class="badge co">N</span> Nebenmoderation</span>
         <span><span class="lock" aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="1.5"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span> fixiert</span>
         <span><span class="avatar empty small" aria-hidden="true">?</span> unbesetzt</span>
+        <span><span class="req-mark" aria-hidden="true"></span> Tauschanfrage offen</span>
       </div>
       <section class="stats" aria-labelledby="stats-title">
         <h3 id="stats-title">Einsätze in diesem Monat</h3>
@@ -145,6 +148,15 @@
       <ul id="absence-list" class="list"></ul>
     </section>
 
+    <!-- Anfragen (nur Bearbeiter) -->
+    <section id="view-anfragen" class="view" hidden aria-labelledby="requests-title">
+      <h2 id="requests-title">Tauschanfragen</h2>
+      <p class="hint">Teammitglieder melden hier, wenn sie an einem Tag nicht können. Nichts wird automatisch geändert: „Ausführen" tauscht wie gewünscht, „Tag öffnen" lässt dich selbst wählen.</p>
+      <ul id="request-list" class="list"></ul>
+      <label class="inline" id="requests-toggle"><input type="checkbox" id="requests-show-done"> Erledigte und abgelehnte anzeigen</label>
+      <ul id="request-list-done" class="list" hidden></ul>
+    </section>
+
     <!-- Einstellungen -->
     <section id="view-einstellungen" class="view" hidden aria-labelledby="settings-title">
       <h2 id="settings-title">Einstellungen</h2>
@@ -256,6 +268,25 @@
     </form>
   </dialog>
 
+  <!-- Dialog: Tausch anfragen (für alle) -->
+  <dialog id="request-dialog">
+    <form method="dialog" class="dialog-form" id="request-form">
+      <h2>Tausch anfragen</h2>
+      <p id="request-info" class="hint"></p>
+      <label>Ich bin <select name="personId" required></select></label>
+      <label>Tag, an dem ich nicht kann <input type="date" name="date" required></label>
+      <label>Ich würde gern tauschen mit (optional) <select name="partnerId"><option value="">– noch offen –</option></select></label>
+      <label>Wunschtag für den Tausch (optional) <input type="date" name="partnerDate"></label>
+      <label>Notiz (optional) <input name="note" maxlength="300" placeholder="z. B. Arzttermin, bin erst ab 10 Uhr da"></label>
+      <p id="request-result" class="result" hidden></p>
+      <div class="form-actions">
+        <span class="spacer"></span>
+        <button type="button" class="ghost" id="request-close">Abbrechen</button>
+        <button type="submit" class="primary" id="request-submit">Anfrage senden</button>
+      </div>
+    </form>
+  </dialog>
+
   <!-- Dialog: Anmelden zum Bearbeiten -->
   <dialog id="login-dialog">
     <form method="dialog" class="dialog-form" id="login-form">

public/style.css

@@ -67,6 +67,15 @@ svg.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-w
 .topbar nav a:hover { color: var(--white); }
 .topbar nav a[aria-current="page"] { color: var(--white); border-bottom-color: var(--white); }
 .topbar nav a:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
+.topbar nav .count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 9px; background: var(--white); color: var(--tradeo-blue); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
+.req-mark { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tradeo-blue); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--tradeo-blue); }
+.day .num .req-mark { margin-left: auto; margin-right: 2px; }
+.day .num .lock + .req-mark, .day .num .req-mark + .lock { margin-left: 8px; }
+.request-meta { color: var(--text-2); font-size: 13px; }
+.request-note { margin-top: 4px; font-size: 14px; }
+.request-actions { display: flex; gap: 8px; flex-wrap: wrap; }
+.viewer .day.requestable { cursor: pointer; }
+.viewer .day.requestable:hover:not(.outside) { background: var(--tint-1); }
 .topbar-action { margin-left: auto; background: transparent; color: var(--white); border-color: rgba(255, 255, 255, .4); min-height: 34px; padding: 0 12px; font-size: 13px; }
 .topbar-action:hover { background: rgba(255, 255, 255, .1); }
 .topbar-action:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }