Dokumentation: PWA-API und Phase 4 Block 1 aktualisiert

- CLAUDE.md auf Stand 2026-04-17 gebracht
- Phase 3 (PWA MVP) und Phase 4 Block 1 als  abgeschlossen dokumentiert
- Alle neuen REST-API-Endpoints aufgelistet (auth, orders, photo, pdf, pages)
- README.md: Neue PWA-Integration-Sektion mit API-Dokumentation
- Architektur erweitert um api/-Ordner mit JWT-Auth-Endpoints

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Eduard Wisch 2026-04-17 17:30:20 +02:00
parent 74e4509eee
commit e462134a17
2 changed files with 102 additions and 51 deletions

View file

@ -1,8 +1,8 @@
# Bericht-Modul — Projekt-Status & Architektur
## Stand 2026-04-08
## Stand 2026-04-17
Dolibarr-Custom-Modul für Arbeitsberichte mit Browser-PDF-Editor.
Dolibarr-Custom-Modul für Arbeitsberichte mit Browser-PDF-Editor + PWA-API-Layer.
## Architektur (final)
@ -86,60 +86,54 @@ Speichert: color, stroke, fontFamily, fontSize, bold, italic, zoom
---
## Phase 4 Block 1 ✅ (2026-04-09)
PWA-Usability-Features:
- 4.g Seite löschen in PWA (ajax /api/pages.php DELETE)
- 4.h Notiz pro Seite (POST /api/pages.php {note})
- 4.j PDF-Vorschau-Modal nach Finalize (api/pdf.php liefert Blob mit JWT)
- 4.b Touch-Unterschrift (openSignatureModal → api/pages.php?action=signature)
- 4.e Web Share Target API (manifest + share.html + SW-Interception in IDB)
Neue API-Endpoints:
- api/pages.php — DELETE/POST (note, rotation) + ?action=signature&bericht_id=
- api/pdf.php — liefert Final-PDF oder on-the-fly Preview, JWT via Query-Param
PWA neue Modals (alle in app.js):
- openPageActionsModal — tap auf Report-Page-Thumb, Notiz + Löschen
- openPdfModal — iframe mit Blob-URL + Download-Link
- openSignatureModal — Touch-Canvas 2:1, Clear, Save als PNG
- openHelpModal — komplette Anleitung (bereits in v4 gebaut)
Service Worker v5 (Share Target), manifest.webmanifest mit share_target.
## Phase 2 — Mobile-Vorbereitung + API-Layer (geplant)
- 2.1 Mobile-Upload-Token Tabelle + Cleanup-Cron
- 2.2 QR-Upload Lite Modal im Editor
- 2.3 API-Layer unter `bericht/api/` mit JWT-Auth
- 2.4 REST-Endpoints: /auth/login, /orders, /orders/{id}, /orders/{id}/photos, /reports, /reports/{id}/pages
JWT-Secret aus `$dolibarr_main_instance_unique_id`, 7 Tage Lifetime, Multi-Device OK (stateless).
Auftragsfilter pro User: `fk_user_author`, `fk_user_valid`, `fk_user_modif` ODER `llx_element_contact` mit "intern verantwortlich".
---
## Phase 3 — PWA MVP (geplant)
- Repo: `data-it/baustelle-pwa` (separates SvelteKit-Projekt)
## Phase 3 — PWA MVP ✅ (2026-04-17)
- Repo: `data-it/baustelle-pwa` (SvelteKit-Projekt)
- Hosting: `awl.data-it-solution.de/baustelle/` (Apache-Alias)
- Stack: SvelteKit + Workbox + idb-keyval
- MVP: Login → Auftragsliste → Detail → Foto-Aufnahme → Offline-Queue → Sync
- Features: Login → Auftragsliste → Order-Detail → Foto/Sprachnotiz/Materialliste → PDF-Viewing
- **PDF-Viewer implementiert**: PDF.js Canvas-Rendering, Datei-Typ-Unterscheidung (Bilder/Audio/PDFs/Dokumente)
- **Weitere Dokumente**: Order-Dateien aus `commande/<ref>/` als Inline-Viewer (PDF.js) oder Download
---
## Phase 4 Block 1 ✅ (2026-04-09 bis 2026-04-17)
## Phase 4 — PWA Voll (geplant)
- Sprachnotizen (MediaRecorder)
- Touch-Skizzen-Editor
- Schnell-Bericht in PWA
- Touch-Unterschrift
PWA-API-Layer + Usability-Features:
- ✅ 2.3 API-Layer unter `bericht/api/` mit JWT-Auth (Login, Orders, Photos, Reports)
- ✅ 2.4 REST-Endpoints: /auth.php, /orders, /orders/{id}, /orders/{id}/photos, /photo.php (Whitelist)
- ✅ 4.j PDF-Vorschau-Modal + Inline-Viewing (PDF.js Canvas)
- ✅ 4.g Seite löschen in PWA (DELETE /api/pages.php)
- ✅ 4.h Notiz pro Seite (POST /api/pages.php {note})
- ✅ 4.b Touch-Unterschrift (POST /api/pages.php?action=signature)
- ✅ Datei-Typ-Unterscheidung: Bilder (Modal), Audio (Player), PDFs (Canvas), Dokumente (Download)
API-Endpoints (neue):
- POST /api/auth.php — JWT-Login (username, password)
- GET /api/orders.php — Aufträge des Users (filter: q, open)
- GET /api/orders.php?id=<id> — Order-Detail
- GET /api/orders.php?id=<id>&action=photos — Order-Dateien (Bilder/Audio/PDFs/Dokumente)
- POST /api/orders.php?action=create — Neuer Order (socid, title, ref_client, date)
- GET /api/photo.php?relpath=<path> — Datei-Serving (JWT via Header oder Query-Param, Whitelist: facture|commande|propal|bericht)
- POST /api/pages.php?action=signature&bericht_id=<id> — Touch-Unterschrift
- DELETE /api/pages.php?id=<id> — Seite löschen
- POST /api/pages.php?id=<id> — Seite-Notiz / Rotation
PWA neue Komponenten (app.js):
- openFileViewer() — Generischer Dateibetrachter (Bilder/PDFs/Audio/Download)
- openPdfViewer() — PDF.js Canvas mit Zoom/Seitennavigation/Download
- docIconFor(), formatFileSize(), formatShortDate() — Hilfsfunktionen
- Unterschrift-Modal, Notiz-Modal, Seiten-Verwaltung
Service Worker v5: Offline-Queue, Sync, Share Target API.
## Phase 5 — PWA Erweiterungen (geplant)
- Sprachnotizen-Transkription via Whisper (POST /api/transcribe.php)
- PIN-Schutz / WebAuthn
- Push-Notifications
- Web Share Target API
- Push-Notifications bei neuen Aufträgen
- Offline-Queue Optimierung (Sync bei Netzwechsel)
- QR-Code Scanner (Order-Lookup)
- Batch-Unterschriften (mehrere Orders auf einmal)
---
## Phase 5 — Optional Später
Stamps, Vorher/Nachher, Versionierung, Mess-Werkzeug, Bericht-Vorlagen, Batch-Modus, Whisper-Transkription, Offline-Map
## Phase 6 — Optional Später
Stamps, Vorher/Nachher, Versionierung, Mess-Werkzeug, Bericht-Vorlagen, Offline-Map, Geofencing
---

View file

@ -16,6 +16,8 @@ Bilder und PDFs lassen sich im Browser annotieren (Pfeile, Kreise, Rechtecke, Te
- **Auftragsnummer** wird automatisch aus dem Extrafield `options_auftragsnummer` der Rechnung gezogen
- **Mehrere Berichte pro Dokument** möglich
- Berichte als **Entwurf** speichern (jederzeit wieder editierbar) oder **finalisieren** (PDF erzeugen)
- **PWA-API** für Mobile-Nutzung: Aufträge, Fotos, Sprachnotizen, Materiallisten, Signaturen
- **PDF-Viewer in PWA** mit PDF.js Canvas-Rendering (Zoom, Seitennummerierung, Download)
## Voraussetzungen
@ -59,6 +61,48 @@ Bilder und PDFs lassen sich im Browser annotieren (Pfeile, Kreise, Rechtecke, Te
| `{bericht_titel}` | Titel des Berichts |
| `{ersteller}` | Login-Name des erstellenden Users |
## PWA-Integration (Baustelle Mobile App)
Die **Baustelle-PWA** (`https://awl.data-it-solution.de/baustelle/`) nutzt die folgenden API-Endpoints des Bericht-Moduls:
### Authentifizierung
```
POST /custom/bericht/api/auth.php
Body: { login: string, password: string }
Response: { ok: true, token: JWT, user: {...} }
```
JWT-Token hat 7 Tage Gültigkeit und enthält: `sub` (user id), `login`, `name`, `perms` (read/write/delete/admin).
### Order-APIs
```
GET /custom/bericht/api/orders.php
GET /custom/bericht/api/orders.php?id=<id>
GET /custom/bericht/api/orders.php?id=<id>&action=photos
POST /custom/bericht/api/orders.php?action=create
```
### Dateien
```
GET /custom/bericht/api/photo.php?relpath=<path>&jwt=<token>
Liefert Dateien aus DOL_DATA_ROOT (Whitelist: facture/, commande/, propal/, bericht/)
Optional: ?size=small|mini (Thumbnails), ?download=1 (Attachment-Header)
```
### PDF-Ansicht
```
GET /custom/bericht/api/pdf.php?id=<bericht_id>&jwt=<token>
Liefert finalisiertes Bericht-PDF als Blob
```
### Seiten-Verwaltung (PWA)
```
DELETE /custom/bericht/api/pages.php?id=<page_id>
POST /custom/bericht/api/pages.php?id=<page_id> Body: { note: string }
POST /custom/bericht/api/pages.php?action=signature&bericht_id=<id>
Body: FormData mit file=<PNG-Blob>, signer_name, gps_lat, gps_lon
```
## Architektur
```
@ -68,7 +112,7 @@ bericht/
├── lib/bericht.lib.php Helper (Anhänge sammeln, Auftragsnr., Templates)
├── bericht_card.php Editor-Seite (Tab-Inhalt)
├── admin/setup.php Admin: ODT-Templates, Konstanten
├── ajax/ Endpoints (Token-geschützt)
├── ajax/ Legacy Endpoints (Token-geschützt)
│ ├── _inc.php Gemeinsamer Header
│ ├── add_attachment.php Anhang als Seite hinzufügen
│ ├── upload_extra.php Direkter Upload
@ -78,6 +122,19 @@ bericht/
│ ├── delete_page.php
│ ├── reorder_pages.php
│ └── generate_pdf.php Finalisierung: TCPDF + FPDI + ODT-Deckblatt
├── api/ REST-API (JWT-Auth)
│ ├── _inc.php JWT-Authentifizierung + Dolibarr-Init
│ ├── _jwt.php JWT encoding/decoding
│ ├── auth.php Login-Endpoint
│ ├── orders.php Order-Liste, Detail, Fotos, Create
│ ├── photo.php Datei-Serving mit Whitelist
│ ├── pdf.php Finalized Bericht-PDF
│ ├── pages.php Seiten-Verwaltung (Note, Rotation, Signature)
│ ├── reports.php Bericht-CRUD
│ ├── templates.php ODT-Templates
│ ├── materials.php Materiallisten
│ ├── voice.php Sprachnotizen (Upload + Transkription)
│ └── transcribe.php Whisper-Transkription
├── js/
│ ├── editor.js PDF.js + Fabric.js Integration
│ └── lib/ PDF.js, Fabric.js, SortableJS (lokal)