41 lines
2.2 KiB
Markdown
41 lines
2.2 KiB
Markdown
# Technischer Stand – Terminbuchungskalender (Mockup)
|
||
|
||
## Komponentenform
|
||
|
||
Der Kalender ist eine browsernative JavaScript-Komponente als ES-Modul. Sie wird an einem Element mit dem Attribut `data-sufw-booking` initialisiert. Das Attribut `data-project` legt das Projekt fest; ein anderer oder fehlender Wert wird derzeit als `perspektivwerk` behandelt.
|
||
|
||
Die Darstellung ist mit eigenem CSS umgesetzt. Die Klassen beginnen mit `sufw-booking`, damit die Stile möglichst wenig mit ihrer Umgebung kollidieren.
|
||
|
||
## Zustandsverwaltung
|
||
|
||
Der Zustand existiert ausschließlich im Arbeitsspeicher des Browsers:
|
||
|
||
- ausgewähltes Projekt,
|
||
- aktuell dargestellter Monat,
|
||
- ausgewählter Tag,
|
||
- lokal geöffneter Dialog und dessen Formulareingaben.
|
||
|
||
Eine erneute Initialisierung oder ein Neuladen der Seite setzt diesen Zustand zurück.
|
||
|
||
## Datenquelle
|
||
|
||
Slots sind als statisches JavaScript-Array im Mockup hinterlegt. Jeder Slot enthält eine Kennung, ein Projekt, ein Datum, eine Startzeit, einen Titel und einen Status. Die Komponente filtert diese Daten nach Projekt und Datum.
|
||
|
||
Es gibt keine Netzwerkanfrage, keine Datenbankverbindung und keine serverseitige Geschäftslogik.
|
||
|
||
## Eingabeverarbeitung
|
||
|
||
Die Formularvalidierung findet vollständig im Browser statt. Sie prüft insbesondere Pflichtangaben, ein einfaches E-Mail-Format, optionale Telefon- und Altersangaben sowie Längenbegrenzungen. Die Slotdaten werden bei der HTML-Ausgabe maskiert. Die Formulareingaben werden nicht gespeichert oder weitergegeben.
|
||
|
||
## Zugänglichkeit und Browserverhalten
|
||
|
||
Die Komponente verwendet semantische Schaltflächen, Beschriftungen, `aria-live`-Bereiche, Statusinformationen und einen Dialog. Browser ohne Unterstützung für `dialog.showModal()` erhalten eine einfache offene Dialogvariante. Eine vollständige Prüfung mit Hilfstechnologien ist noch nicht erfolgt.
|
||
|
||
## Checkpoints
|
||
|
||
- [ ] Die künftige Datenquelle für Slots ist entschieden.
|
||
- [ ] Die serverseitigen Zustände und Regeln für Reservierung und Buchung sind definiert.
|
||
- [ ] Die Schnittstelle zwischen Oberfläche und Backend ist dokumentiert.
|
||
- [ ] Die Barrierefreiheit ist mit Tastatur, Screenreader und mobilen Geräten geprüft.
|
||
- [ ] Die Browserunterstützung des Endprodukts ist festgelegt.
|