Terminplaner: Portal-Ansicht – Nachbesserungen (1/2: Module getrennt)

public/termine.js in Huelle und Module zerlegt, Verhalten unveraendert (R48): termine-dom.js (Helfer ohne Zustand), termine-tab-termine.js (Liste, Kopf, Zeilen), termine-aktionen.js (Aktionen mit Rueckfrage), termine-formulare.js (Uhrzeiten, Termin eintragen, Zeit sperren). Reiter bekommen Zustand und aktuell() nur ueber ctx; die Huelle haengt sie ueber die Registry REITER ein. Statiktest prueft alle public/termine*.js. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-03 08:17:44 +00:00
1 parent 43e4826ae3
commit 9c07f6a8c5
@@ -0,0 +1,167 @@
+/* Terminplaner im Kundenbereich: Aktionen auf Terminen mit Rueckfrage in der Seite (kein confirm()).
+   starteAktion(t, li, b, art, knopf) oeffnet die Rueckfrage unter dem Termin, fuehreAus schickt sie an /api/termine ab.
+   t ist der Zustand des Reiters "Termine": { ctx, offen, nachAenderung() } – nachAenderung laedt Liste und Zahl der Anfragen neu
+   (der Reiter setzt sie; so kennt dieses Modul den Reiter nicht). Fehler: 400 und belegte Zeit bleiben in der Rueckfrage,
+   alles andere erscheint als Meldung ueber den Reitern. */
+
+import { MAX, ABSAGE_GRUENDE, datumKurz, heuteBerlin } from './termine-view.js'
+import { allgemeinerFehler, feld, h, setzeFehler, zeigeFehler } from './termine-dom.js'
+import { zeitWahl } from './termine-formulare.js'
+
+export const AKTION_TEXT = {
+  annehmen: 'Annehmen', ablehnen: 'Ablehnen', verschieben: 'Verschieben', absagen: 'Absagen', nichterschienen: 'Nicht erschienen',
+  anonymisieren: 'Gastdaten löschen', entsperren: 'Sperre aufheben',
+}
+
+export function schliesseFrage(t, fokus = false) {
+  if (!t.offen) return
+  const { li, knopf } = t.offen
+  li.querySelector('[data-frage]')?.replaceChildren()
+  li.classList.remove('tm-offen')
+  t.offen = null
+  if (fokus && knopf?.isConnected) knopf.focus()
+}
+
+export function starteAktion(t, li, b, art, knopf) {
+  t.ctx.meldung('')
+  if (art === 'annehmen') {
+    schliesseFrage(t)
+    fuehreAus(t, b, { aktion: 'annehmen' }, b.gastEmail ? `Anfrage angenommen. ${b.gastName} bekommt eine Bestätigung per E-Mail.` : 'Anfrage angenommen.', null, knopf)
+    return
+  }
+  schliesseFrage(t)
+  const zu = () => schliesseFrage(t, true)
+  const fragen = { ablehnen: frageAblehnen, absagen: frageAbsagen, verschieben: frageVerschieben, nichterschienen: frageNichtErschienen, anonymisieren: frageAnonymisieren, entsperren: frageEntsperren }
+  const box = fragen[art](t, b, zu)
+  li.querySelector('[data-frage]').replaceChildren(box)
+  li.classList.add('tm-offen')
+  t.offen = { li, knopf, art }
+  // Fokus ins erste Eingabefeld; ohne Eingabefeld auf die Rueckfrage selbst, damit ein Enter nichts bestaetigt
+  const erster = box.querySelector('select, textarea, input') || box
+  erster.focus()
+}
+
+/**
+ * Aktion an die Schnittstelle schicken. erfolg = Text der Meldung. form = Rueckfrage-Formular fuer Fehler (400 und belegte Zeit
+ * bleiben dort), sonst Meldung ueber den Reitern; bei Fehlern, die auf einen geaenderten Stand deuten (404, 409), wird die Liste neu geladen.
+ */
+async function fuehreAus(t, b, body, erfolg, form, knopf) {
+  const { ctx } = t
+  knopf.disabled = true
+  try {
+    const entsperren = body.aktion === 'entsperren'
+    const antwort = entsperren
+      ? await ctx.api.send('DELETE', `/buchungen/${encodeURIComponent(b.id)}`)
+      : await ctx.api.send('POST', `/buchungen/${encodeURIComponent(b.id)}/aktion`, body)
+    await t.nachAenderung() // erst die Liste, dann die Meldung: wer die Meldung sieht, sieht auch den neuen Stand
+    ctx.meldung(antwort.schon ? 'Das war schon so erledigt.' : erfolg)
+  } catch (err) {
+    const imFormular = form && (err.status === 400 || err.code === 'SLOT_VERGEBEN')
+    if (imFormular) {
+      zeigeFehler(form, err)
+      knopf.disabled = false
+      return
+    }
+    ctx.meldung(err.message, 'fehler')
+    if (err.status === 404 || err.status === 409) await t.nachAenderung()
+    else knopf.disabled = false
+  }
+}
+
+const mailHinweis = (b, text) => (b.gastEmail ? text : 'Der Gast bekommt keine E-Mail, weil keine Adresse hinterlegt ist.')
+
+function frage(titel, ...inhalt) {
+  return h('form', { class: 'tm-frage-box', novalidate: true, tabindex: '-1', 'aria-label': titel, onsubmit: (ev) => ev.preventDefault() }, h('strong', null, titel), ...inhalt)
+}
+
+/** Knopfzeile einer Rueckfrage: Bestaetigen (ok, schickt das Formular ab) und Abbrechen. */
+function knopfZeile(bestaetigen, zu) {
+  const ok = h('button', { type: 'submit', class: 'kb-btn-primary' }, bestaetigen)
+  return { ok, zeile: h('div', { class: 'tm-frage-knoepfe' }, ok, h('button', { type: 'button', class: 'kb-btn-outline', onclick: zu }, 'Abbrechen')) }
+}
+
+function frageAblehnen(t, b, zu) {
+  const nachricht = h('textarea', { rows: '3', maxlength: String(MAX.nachricht) })
+  const { ok, zeile } = knopfZeile('Anfrage ablehnen', zu)
+  const form = frage('Anfrage ablehnen?',
+    h('p', null, mailHinweis(b, 'Der Gast bekommt eine E-Mail, dass der Termin nicht möglich ist. Die Zeit wird wieder frei.')),
+    feld('nachricht', 'Nachricht an den Gast (optional)', nachricht),
+    allgemeinerFehler(),
+    zeile)
+  form.addEventListener('submit', () => fuehreAus(t, b, { aktion: 'ablehnen', nachricht: nachricht.value }, 'Anfrage abgelehnt.', form, ok))
+  return form
+}
+
+function frageAbsagen(t, b, zu) {
+  const grund = h('select', null, h('option', { value: '' }, 'Bitte wählen'), ABSAGE_GRUENDE.map((g) => h('option', { value: g }, g)))
+  const nachricht = h('textarea', { rows: '3', maxlength: String(MAX.nachricht) })
+  const { ok, zeile } = knopfZeile('Termin absagen', zu)
+  const form = frage('Termin absagen?',
+    h('p', null, mailHinweis(b, 'Der Gast bekommt eine E-Mail mit dem Grund. Die Zeit wird wieder frei.')),
+    feld('grund', 'Grund', grund),
+    feld('nachricht', 'Nachricht an den Gast (optional)', nachricht),
+    allgemeinerFehler(),
+    zeile)
+  form.addEventListener('submit', () => {
+    if (!grund.value) {
+      setzeFehler(form, { grund: 'Bitte wähle einen Grund aus.' })
+      grund.focus()
+      return
+    }
+    fuehreAus(t, b, { aktion: 'absagen', grund: grund.value, nachricht: nachricht.value }, 'Termin abgesagt.', form, ok)
+  })
+  return form
+}
+
+function frageNichtErschienen(t, b, zu) {
+  const { ok, zeile } = knopfZeile('Ja, nicht erschienen', zu)
+  const form = frage('Als „nicht erschienen“ markieren?',
+    h('p', null, 'Der Termin bleibt in der Liste und wird als „Nicht erschienen“ geführt. Der Gast bekommt keine E-Mail.'),
+    allgemeinerFehler(),
+    zeile)
+  form.addEventListener('submit', () => fuehreAus(t, b, { aktion: 'nichterschienen' }, 'Als „nicht erschienen“ markiert.', form, ok))
+  return form
+}
+
+function frageAnonymisieren(t, b, zu) {
+  const { ok, zeile } = knopfZeile('Gastdaten löschen', zu)
+  const form = frage('Gastdaten löschen?',
+    h('p', null, 'Name, E-Mail, Telefon und Nachricht werden gelöscht. Das lässt sich nicht rückgängig machen. Der Termin bleibt ohne Namen bestehen, die Links in alten E-Mails funktionieren danach nicht mehr.'),
+    allgemeinerFehler(),
+    zeile)
+  form.addEventListener('submit', () => fuehreAus(t, b, { aktion: 'anonymisieren' }, 'Gastdaten gelöscht.', form, ok))
+  return form
+}
+
+function frageEntsperren(t, b, zu) {
+  const { ok, zeile } = knopfZeile('Sperre aufheben', zu)
+  const form = frage('Sperre aufheben?',
+    h('p', null, 'Die Zeit ist danach wieder buchbar.'),
+    allgemeinerFehler(),
+    zeile)
+  form.addEventListener('submit', () => fuehreAus(t, b, { aktion: 'entsperren' }, 'Sperre aufgehoben.', form, ok))
+  return form
+}
+
+function frageVerschieben(t, b, zu) {
+  const { ctx } = t
+  const datum = h('input', { type: 'date', value: b.datum, min: heuteBerlin() })
+  const zeiten = zeitWahl(ctx, () => ({ ohne: b.id, tag: datum.value }))
+  const { ok, zeile } = knopfZeile('Verschieben', zu)
+  const form = frage('Termin verschieben',
+    h('p', null, mailHinweis(b, 'Der Gast bekommt eine E-Mail mit der neuen Zeit. Es gelten keine Fristen und kein Vorlauf.')),
+    feld('tag', 'Neuer Tag', datum),
+    zeiten.el,
+    allgemeinerFehler(),
+    zeile)
+  datum.addEventListener('change', () => zeiten.laden())
+  zeiten.laden()
+  form.addEventListener('submit', () => {
+    if (!zeiten.wert()) {
+      setzeFehler(form, { zeit: 'Bitte wähle eine Uhrzeit aus.' })
+      return
+    }
+    fuehreAus(t, b, { aktion: 'verschieben', tag: datum.value, zeit: zeiten.wert() }, `Termin verschoben auf ${datumKurz(datum.value)}, ${zeiten.wert()} Uhr.`, form, ok)
+  })
+  return form
+}