295ac82f43
All checks were successful
Deploy baustelle-pwa / deploy (push) Successful in 5s
PWA: - Checkbox in /orders Route hinzugefügt - Filter in localStorage persistiert - CSS für .filter-toggle Doku: - README.md komplett aktualisiert mit allen Features - API-Dokumentation erweitert [deploy] Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
127 lines
4.4 KiB
Markdown
127 lines
4.4 KiB
Markdown
# 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+
|