From e462134a17d1d3c0a43eef10e9be57844068d560 Mon Sep 17 00:00:00 2001 From: Eduard Wisch Date: Fri, 17 Apr 2026 17:30:20 +0200 Subject: [PATCH] Dokumentation: PWA-API und Phase 4 Block 1 aktualisiert MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- CLAUDE.md | 94 ++++++++++++++++++++++++++----------------------------- README.md | 59 +++++++++++++++++++++++++++++++++- 2 files changed, 102 insertions(+), 51 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 207cc41..fc37927 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -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//` 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= — Order-Detail +- GET /api/orders.php?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= — Datei-Serving (JWT via Header oder Query-Param, Whitelist: facture|commande|propal|bericht) +- POST /api/pages.php?action=signature&bericht_id= — Touch-Unterschrift +- DELETE /api/pages.php?id= — Seite löschen +- POST /api/pages.php?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 --- diff --git a/README.md b/README.md index ddb4248..f81b9d4 100644 --- a/README.md +++ b/README.md @@ -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= +GET /custom/bericht/api/orders.php?id=&action=photos +POST /custom/bericht/api/orders.php?action=create +``` + +### Dateien +``` +GET /custom/bericht/api/photo.php?relpath=&jwt= + 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=&jwt= + Liefert finalisiertes Bericht-PDF als Blob +``` + +### Seiten-Verwaltung (PWA) +``` +DELETE /custom/bericht/api/pages.php?id= +POST /custom/bericht/api/pages.php?id= Body: { note: string } +POST /custom/bericht/api/pages.php?action=signature&bericht_id= + Body: FormData mit file=, 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)