# Baustelle PWA Mobile Progressive Web App für die Baustellen-Doku — Foto-Upload, Sprachnotizen, Skizzen, offline-fähig. Spricht die REST-API des Dolibarr-Bericht-Moduls. ## Stack - **Vanilla JavaScript** — kein Build, keine Framework-Abhängigkeit - **Service Worker** für App-Shell-Cache (Workbox-frei, eigene Implementierung) - **IndexedDB** für JWT-Storage und Offline-Upload-Queue - **REST API** des `bericht`-Dolibarr-Moduls unter `/custom/bericht/api/` ## Features **Aufträge** - ✅ Login mit Dolibarr-Credentials → JWT (7 Tage gültig) - ✅ Auftragsliste mit Suche, gefiltert auf eigene Aufträge (Multi-User) - ✅ Toggle "Auch abgeschlossene" (Filter in localStorage persistiert) - ✅ Auftragsdetail mit Kunde, Adresse, Telefon (Click-to-Call) **Foto-Upload** - ✅ Foto-Aufnahme direkt aus der Kamera oder aus Galerie - ✅ Clientseitige Bild-Verkleinerung auf 2000px (JPEG q=0.85) - ✅ Offline-Queue: bei fehlgeschlagenem Upload landet das Foto in IndexedDB - ✅ Auto-Sync wenn wieder online (mit Status-Badge) - ✅ Foto-Viewer mit Zoom + Swipe - ✅ Foto-Skizze: Annotationen mit Pfeilen, Kreisen, Rechtecken, Text **Sprachnotizen** - ✅ Sprachaufnahme via MediaRecorder (webm) - ✅ Whisper-Transkription (serverseitig, API-Aufruf) **Berichte** - ✅ Berichte pro Auftrag anzeigen - ✅ Bericht erstellen mit Template-Auswahl - ✅ Seiten umordnen per Drag&Drop - ✅ Seite löschen, Notiz bearbeiten - ✅ Touch-Unterschrift abnehmen (mit GPS + Name) - ✅ Bericht finalisieren → PDF-Vorschau - ✅ PDF-Download **Materialliste** - ✅ Material pro Auftrag erfassen (Label, Menge, Einheit, Notiz) - ✅ Material löschen **PWA** - ✅ Service Worker für Offline-Start - ✅ Installierbar als PWA (Home-Screen-Icon) - ✅ Web Share Target API (Fotos aus anderer App teilen) - ✅ PIN-Schutz (optional) ## Geplant - Push-Notifications für neue Aufträge - Kunden-Schnellsuche ## Hosting Wird bei jedem Push nach `/srv/http/baustelle/` (lokal) bzw. `/mnt/appdata/firma/dolibarr-202509/baustelle/` (prod) deployt. Apache-Alias unter `https://awl.data-it-solution.de/baustelle/`. ## Verzeichnis-Struktur ``` baustelle-pwa/ ├── index.html App-Shell ├── manifest.webmanifest PWA Manifest ├── sw.js Service Worker ├── app.js Hauptlogik (Routes, Views) ├── app.css Mobile-first Styling ├── lib/ │ ├── idb.js IndexedDB-Wrapper │ ├── api.js REST-API-Client (JWT) │ ├── offline.js Offline-Queue + Sync │ └── router.js Hash-Router └── icons/ ├── icon-192.png └── icon-512.png ``` ## API Die App spricht die Bericht-API unter `/custom/bericht/api/`: **Auth** - `POST /auth.php` — Login mit Dolibarr-Credentials → JWT **Aufträge** - `GET /orders.php` — Aufträge des Users (Filter: `?open=1`, `?q=suche`) - `GET /orders.php?id=X` — Auftrag-Detail inkl. verknüpfte Berichte - `GET /orders.php?id=X&action=photos` — Anhang-Liste - `POST /orders.php?id=X&action=upload_photo` — Foto-Upload (multipart) **Kunden** - `GET /customers.php` — Kundenliste (Filter: `?q=suche`) - `GET /customers.php?id=X` — Kundendetail **Berichte** - `GET /reports.php` — Alle Berichte des Users - `GET /reports.php?id=X` — Bericht-Detail mit Seiten - `POST /reports.php?action=create` — Neuen Bericht anlegen - `POST /reports.php?id=X&action=finalize` — Bericht finalisieren - `DELETE /reports.php?id=X` — Bericht löschen **Seiten** - `DELETE /pages.php?id=X` — Seite löschen - `POST /pages.php?id=X` — Seite aktualisieren (note, rotation) - `POST /pages.php?action=signature&bericht_id=X` — Unterschrift hinzufügen - `POST /pages.php?action=reorder` — Seiten umordnen **Material** - `GET /materials.php?element_type=X&element_id=Y` — Materialliste - `POST /materials.php?element_type=X&element_id=Y` — Material hinzufügen - `POST /materials.php?id=X&delete=1` — Material löschen **Medien** - `GET /photo.php?relpath=X&jwt=Y` — Foto abrufen (mit Thumbnail: `&size=thumb`) - `POST /delete_photo.php` — Foto löschen - `POST /voice.php?order_id=X` — Sprachnotiz hochladen - `POST /transcribe.php` — Whisper-Transkription anfordern - `GET /pdf.php?id=X&jwt=Y` — PDF abrufen (Final oder Preview) **Templates** - `GET /templates.php` — Bericht-Vorlagen - `GET /odt_templates.php` — ODT-Deckblatt-Vorlagen ## Lizenz GPL v3+