Erstellen einer ersten test-Komponente die in der Mockup-HTML-Seite und in Contao eingebunden werden kann

development-system/README.md

@@ -1,6 +1,6 @@
 # Perspektivwerk Terminbuchung – lokales Entwicklungssystem
 
-Dieser Ordner enthält eine lokale Contao-4.13.58-Entwicklungsumgebung mit Apache, MariaDB sowie die im Frontend verbreiteten Komponenten Bootstrap 5, jQuery und Slick Carousel.
+Dieser Ordner enthält eine lokale Contao-4.13.58-Entwicklungsumgebung mit Apache, MariaDB und Bootstrap 5. Die Buchungskomponente verwendet browsernative DOM-APIs und keine jQuery-Abhängigkeit.
 
 ## Contao-Version und Sicherheitsstatus
 
@@ -10,7 +10,7 @@ Contao 4.13.58 ist ausschließlich als lokale Kompatibilitätsumgebung vorgesehe
 
 ## Start
 
-Voraussetzungen: Docker Desktop (Compose v2) und optional Node.js 20+ für die TypeScript-Assets.
+Voraussetzungen: Docker Desktop (Compose v2) und optional Node.js 20+ zum Ausführen der JavaScript-Regressionstests.
 
 ```powershell
 docker compose up --build
@@ -39,11 +39,11 @@ Danach den versionierten Seitenzustand importieren:
 - Contao-Login: <http://localhost:8080/contao/login>
 - Datenbankinspektor: <http://localhost:8081> (Server `db`, Benutzer `perspektivwerk`, Passwort `perspektivwerk`, Datenbank `perspektivwerk`)
 
-Für die Frontend-Logik:
+Für die Frontend-Regressionstests:
 
 ```powershell
 npm install
-npm run build
+npm test
 ```
 
 **Seite öffnen:**
@@ -58,7 +58,42 @@ http://localhost:8080/perspektivwerk/
 
 Die genaue Contao-, PHP- und Template-Version der öffentlichen Seite ist nicht verlässlich aus dem ausgelieferten HTML ableitbar. Das Setup bildet daher die wahrscheinlichste Komponentenfamilie nach; es ist kein Dump der Produktivinstallation. IONOS/Hosting, Matomo-Konfiguration, Inhalte, Templates und Erweiterungen müssen bei Bedarf separat ergänzt werden.
 
-Die Terminlogik liegt zunächst in `src/booking.ts`. Eine spätere Google-Calendar- oder Exchange-Anbindung sollte über eine Backend-API erfolgen, damit keine Secrets im Browser landen.
+Die Terminlogik liegt zunächst in `public/booking/booking.js` als browsernatives ES-Modul.
+
+## Zwei Einbindungswege
+
+Die Terminbuchungskomponente hat eine Vorschau auf einem Webseiten-Nachbau der Orginalseite:
+
+**Apache-Vorschau:** auf der statischen Perspektivwerk-Seite unter <http://localhost:8080/perspektivwerk/>. Die Seite liegt in `public/perspektivwerk/`; ihre Referenzen auf die Komponente verwenden die öffentlichen Pfade `/booking/booking.css` und `/booking/booking.js`.
+2. **Contao:** als eigenständiges Inhaltselement vom Typ **HTML** auf einer Contao-Seite. Es enthält das kombinierte Snippet mit CSS, Komponentenplatzhalter und JavaScript.
+
+`public/` ist der Apache-Webroot der lokalen Entwicklungsumgebung. Daher ist kein Kopieren der Komponentenassets nach `files/terminbuchung/` erforderlich.
+
+## Statische Buchungsvorschau in Contao einbinden
+
+Die erste Komponente ist absichtlich datenbankfrei. Sie zeigt Test-Slots, rendert einen Monatskalender und unterscheidet freie von belegten Terminen. Eine Buchung wird noch nicht gespeichert.
+
+Die Komponente benötigt keinen TypeScript-Compiler und keinen Build-Schritt. Regressionstests ausführen:
+
+```powershell
+npm run test
+```
+### Einbinden in Contao
+
+Ein **neues** Inhaltselement vom Typ **HTML** anlegen. Im Feld **HTML-Code** den vollständigen Inhalt aus [integration/contao-html-element.html](integration/contao-html-element.html) einfügen und speichern. Nicht das Inhaltselement **Text** und keinen TinyMCE-Editor verwenden: Diese können `link`- und `script`-Tags als Text maskieren. Für die Produktionsschule wird `data-project="produktionsschule"` gesetzt.
+
+In der Seitenvorschau muss der HTML-Quelltext die Tags als `<link ...>` und `<script ...>` enthalten. Erscheinen stattdessen `&lt;link` oder `&lt;script`, wurde nicht das unmaskierte Feld **HTML-Code** verwendet und die Komponente kann nicht starten.
+
+### Erforderliche Contao-Sicherheitseinstellung
+
+Contao maskiert nicht freigegebene HTML-Tags auch im Inhaltselement **HTML**. Vor dem Einfügen der Komponente unter **System → Einstellungen → Sicherheit** die folgenden Einträge ergänzen:
+
+- **Erlaubte HTML-Tags:** `script`, `link`
+- **Erlaubte HTML-Attribute:** für `script` die Attribute `src`, `type`; für `link` die Attribute `href`, `rel`; für den Komponentenplatzhalter auf `div` entweder `data-*` oder mindestens `data-sufw-booking`, `data-project`.
+
+Danach den Contao-Cache über **Systemwartung** leeren und das Inhaltselement erneut speichern. Keine globale Freigabe mit `*` verwenden. Wer ein HTML-Inhaltselement bearbeiten darf, kann mit dem freigegebenen `script`-Tag JavaScript auf der Website ausführen; diese Bearbeitungsrechte müssen daher auf vertrauenswürdige Backend-Nutzer beschränkt bleiben.
+
+Die Beispieltermine stehen ausschließlich in `public/booking/booking.js`. Der spätere serverseitige Endpunkt muss sie ersetzen; Datenbankzugänge oder SQL gehören niemals in das HTML oder das Browser-JavaScript.
 
 ## Versionierter Contao-Seitenzustand