Mobile PWA für Baustellen-Doku — Foto-Upload, Sprachnotizen, Skizzen, offline-fähig. SvelteKit + Workbox.
Eduard Wisch
3dad52367c
All checks were successful
Deploy baustelle-pwa / deploy (push) Successful in 1s
5.4 Mess-Werkzeug mit Skala-Kalibrierung: - Zwei neue Sketch-Tools: 📏⚙ Kalibrieren + 📏 Messen - Kalibrieren: 2 Punkte ziehen → reale Länge eingeben (cm/m/mm) - Messen: 2 Punkte ziehen → Live-Distanz-Label mit berechnetem Wert - pxPerUnit + unit werden im State gehalten, Linie im Canvas gezeichnet 5.9 Materialliste pro Auftrag: - 📦 Materialliste-Button im Auftrags-Detail - Modal: Bezeichnung + Menge + Einheit (Stk/m/m²/kg/l/Set/Pa/h) + Notiz - Live-Liste mit Löschen pro Eintrag 5.8 Tages-Baustellen-Map: - Neuer Bottom-Nav-Tab ☀️ Heute (ganz links) - Filtert Aufträge nach heutigem Datum - Route-Button öffnet Google Maps mit allen heutigen Adressen als Waypoints - Darunter noch die offenen Aufträge als Backup 4.d Benachrichtigungen via ntfy (statt VAPID): - Settings → Benachrichtigungen: ntfy-Server + Topic - EventSource auf /topic/sse → native Browser-Notifications - Test-Nachricht-Button sendet POST an das Topic - Auto-Reconnect bei Fehlern nach 10s - Auto-Start beim Boot wenn Topic gesetzt und Permission granted Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> [deploy] |
||
|---|---|---|
| .forgejo/workflows | ||
| icons | ||
| lib | ||
| .gitignore | ||
| app.css | ||
| app.js | ||
| index.php | ||
| manifest.webmanifest | ||
| README.md | ||
| share.html | ||
| sw.js | ||
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 (MVP)
- ✅ Login mit Dolibarr-Credentials → JWT (7 Tage gültig)
- ✅ Auftragsliste mit Suche, gefiltert auf eigene Aufträge (Multi-User)
- ✅ Auftragsdetail mit Kunde, Adresse, Telefon (Click-to-Call)
- ✅ 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)
- ✅ Service Worker für Offline-Start
- ✅ Installierbar als PWA (Home-Screen-Icon)
Geplant (Phase 4)
- Sprachnotizen via MediaRecorder
- Touch-Skizzen-Editor für Bilder
- Schnell-Bericht direkt in der PWA erstellen
- Touch-Unterschrift abnehmen
- PIN-Schutz / WebAuthn
- Push-Notifications für neue Aufträge
- Web Share Target API
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 ausschließlich die Bericht-API:
POST /api/auth.php— Login mit Dolibarr-CredentialsGET /api/orders.php— Aufträge des UsersGET /api/orders.php?id=X— Auftrag-DetailGET /api/orders.php?id=X&action=photos— Anhang-ListePOST /api/orders.php?id=X&action=upload_photo— Foto-UploadGET /api/reports.php?id=X— Bericht-Detail
Lizenz
GPL v3+