Terminplaner: Portal-Ansicht Leistungen, Team, Einstellungen

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

public/termine-dom.js

@@ -56,6 +56,14 @@ export function feld(name, label, steuer, hinweis) {
     h('p', { class: 'tm-fehler', 'data-fehler': name, role: 'alert' }))
 }
 
+/** Ankreuzfeld (Wert steuert der Aufrufer: input type=checkbox) mit Beschriftung, Hinweis und Platz fuer den Fehler. */
+export function hakenFeld(name, steuer, text, hinweis) {
+  steuer.dataset.feld = name
+  return h('div', { class: 'tm-feld tm-feld-haken' },
+    h('label', { class: 'tm-haken' }, steuer, h('span', null, text, hinweis ? h('small', { class: 'tm-hinweis' }, hinweis) : null)),
+    h('p', { class: 'tm-fehler', 'data-fehler': name, role: 'alert' }))
+}
+
 /** Platz fuer Fehler, die zu keinem Feld gehoeren (Feldname „_“). */
 export const allgemeinerFehler = () => h('p', { class: 'tm-fehler', 'data-fehler': '_', role: 'alert' })
 
@@ -64,7 +72,8 @@ export function setzeFehler(form, fehler) {
   for (const el of form.querySelectorAll('[aria-invalid]')) el.removeAttribute('aria-invalid')
   const rest = []
   for (const [name, text] of Object.entries(fehler || {})) {
-    const ziel = form.querySelector(`[data-fehler="${CSS.escape(name)}"]`)
+    // „_“ und Namen ohne Platz im Formular werden allgemein gezeigt
+    const ziel = name === '_' ? null : form.querySelector(`[data-fehler="${CSS.escape(name)}"]`)
     if (ziel) {
       ziel.textContent = text
       form.querySelector(`[data-feld="${CSS.escape(name)}"]`)?.setAttribute('aria-invalid', 'true')
@@ -83,6 +92,29 @@ export function zeigeFehler(form, err) {
   form.querySelector('[aria-invalid]')?.focus()
 }
 
+/** Rueckfrage in der Seite (kein confirm()): Formular mit Titel; der Fokus gehoert dem Aufrufer. */
+export 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 (schickt das Formular ab) und Abbrechen. */
+export 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')) }
+}
+
+/** Abschnitt eines Reiters: Karte mit Ueberschrift und einem erklaerenden Satz (hinweis darf fehlen). */
+export const abschnitt = (titel, hinweis, ...inhalt) => h('section', { class: 'kb-panel tm-abschnitt' },
+  h('h3', null, titel),
+  hinweis ? h('p', { class: 'tm-hinweis tm-abschnitt-text' }, hinweis) : null,
+  ...inhalt)
+
+/** Felder einer abgeschalteten Funktion: gesperrt (fieldset disabled sperrt alle Felder darin), sonst unveraendert. */
+export const gesperrt = (nurLesen, felder) => (nurLesen ? h('fieldset', { class: 'tm-gruppe-felder', disabled: true }, felder) : felder)
+
+/** Link zum CSV-Export der Termine. */
+export const exportLink = (projectId, text) => h('a', { href: exportUrl(projectId), download: 'termine.csv' }, text)
+
 export const infoKarte = (titel, text, { chat = false } = {}) => h('div', { class: 'kb-panel tm-info' },
   h('h3', null, titel),
   text ? h('p', null, text) : null,