From 3f1b462105841ec9adc5e4a1ec9e1a30c94b294c Mon Sep 17 00:00:00 2001 From: Eduard Wisch Date: Thu, 9 Apr 2026 00:46:52 +0200 Subject: [PATCH] feat: Hilfe-Button in Topbar mit kompletter Anleitung MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ❓-Button oben rechts öffnet ein Vollbild-Modal mit: - Auftragsfindung und Suche - Fotos aufnehmen (Kamera/Galerie), Hinweis auf Entwurf-Akkumulation - Skizzen-Editor (Pen/Pfeil/Rect/Ellipse, Undo, speichern) - Sprachnotizen aufnehmen + abspielen - Berichte finalisieren + Status-Erklärung - Offline-Modus + Status-Badge-Legende - Installation auf Home-Screen (Android + iOS) - Einstellungen Service Worker v4. Co-Authored-By: Claude Opus 4.6 (1M context) [deploy] --- app.css | 60 +++++++++++++++++++++++++++ app.js | 120 ++++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 1 + sw.js | 2 +- 4 files changed, 181 insertions(+), 2 deletions(-) diff --git a/app.css b/app.css index 774e159..2fa81d6 100644 --- a/app.css +++ b/app.css @@ -438,3 +438,63 @@ body { .audio-item audio { width: 100%; flex-basis: 100%; } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } + +/* Hilfe-Modal */ +.help-modal .help-body { + flex: 1; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + padding: 20px; + color: #e0e0e0; + max-width: 780px; + margin: 0 auto; + width: 100%; + box-sizing: border-box; + background: #1a1a1f; +} +.help-modal h2 { + color: #7aa2f7; + margin: 0 0 20px; + font-size: 22px; +} +.help-modal section { + background: #25252b; + border-radius: 10px; + padding: 14px 18px; + margin-bottom: 14px; +} +.help-modal section h3 { + color: #7aa2f7; + font-size: 16px; + margin: 0 0 10px; +} +.help-modal p { margin: 6px 0; line-height: 1.5; font-size: 14px; } +.help-modal ul { margin: 6px 0 6px 20px; padding: 0; } +.help-modal li { margin: 4px 0; font-size: 14px; line-height: 1.5; } +.help-modal strong { color: #fff; } +.help-modal .tip { + background: rgba(122, 162, 247, 0.1); + border-left: 3px solid #7aa2f7; + padding: 10px 12px; + border-radius: 4px; + margin: 10px 0; + font-size: 13px; +} +.help-modal .status-badge-help { + background: #2a2a30; + padding: 2px 8px; + border-radius: 10px; + font-size: 12px; + border: 1px solid #444; +} +.help-modal .help-footer { + margin-top: 24px; + padding-top: 16px; + border-top: 1px solid #333; + text-align: center; + opacity: 0.6; + font-size: 12px; +} + +/* help-btn in Topbar kleiner machen */ +#help-btn { font-size: 18px; padding: 4px 8px; } diff --git a/app.js b/app.js index a3f3d43..8a913cc 100644 --- a/app.js +++ b/app.js @@ -428,13 +428,131 @@ router.on('/settings', async () => { }; }); -/* Bottom nav */ +/* Bottom nav + Hilfe-Button */ document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('#bottom-nav button').forEach(b => { b.addEventListener('click', () => router.go('#/' + b.dataset.route)); }); + const helpBtn = document.getElementById('help-btn'); + if (helpBtn) helpBtn.addEventListener('click', openHelpModal); }); +function openHelpModal() { + const modal = document.createElement('div'); + modal.className = 'fullscreen-modal help-modal'; + modal.innerHTML = ` +
+ +
❓ Hilfe / Anleitung
+ +
+
+

📋 So funktioniert die Baustelle-App

+ +
+

1. Aufträge finden

+

Im Reiter Aufträge siehst du alle offenen Aufträge, die dir zugewiesen sind. + Oben kannst du per Suchfeld nach Auftragsnummer oder Kundenname filtern.

+

Auf einen Auftrag tippen → Detail-Ansicht mit Kunde, Adresse, Telefon.

+
+ +
+

2. Fotos aufnehmen

+

Im Auftrag-Detail:

+
    +
  • 📷 Foto aufnehmen — öffnet direkt die Kamera
    • +
  • 📂 Aus Galerie wählen — mehrere Bilder auf einmal möglich
    • +
+

Die Bilder werden automatisch auf 2000px verkleinert und hochgeladen. + Sie landen in einem Entwurf-Bericht, der automatisch zum Auftrag angelegt wird.

+

💡 Alle weiteren Fotos werden an denselben Entwurf angehängt — + du hast also einen Bericht mit mehreren Seiten, bis du ihn finalisierst.

+
+ +
+

3. Fotos bearbeiten (Skizzen)

+

Tippe auf ein hochgeladenes Foto im Grid → Vollbild-Ansicht.

+
    +
  • ✏️ (oben) öffnet den Skizzen-Editor
    • +
  • 🗑️ (oben) löscht das Foto
    • +
+

Im Skizzen-Editor:

+
    +
  • ✏️ Stift (Freihand)
    • +
  • ↗ Pfeil mit Spitze (von Start bis Ende ziehen)
    • +
  • ▭ Rechteck
    • +
  • ○ Ellipse
    • +
  • Farbe + Linienstärke rechts daneben
    • +
  • ↶ Undo / 🗑 Alles zurücksetzen
    • +
+

Oben rechts ✓ → Skizze wird als eigenständige neue Bericht-Seite gespeichert. + Das Original-Foto bleibt unverändert.

+
+ +
+

4. Sprachnotizen

+

🎙 Sprachnotiz aufnehmen im Auftrag-Detail:

+
    +
  • Aufnahme starten, reden
    • +
  • Stopp → Vorhören
    • +
  • Senden → Audio landet im Auftrags-Anhang
    • +
+

Unter der Foto-Liste erscheint eine eigene Sektion „🎙 Sprachnotizen" mit Play-Button je Eintrag.

+
+ +
+

5. Berichte finalisieren

+

Im Reiter Berichte siehst du alle deine Berichte mit Status.

+
    +
  • Entwurf — kannst du noch erweitern
    • +
  • Final — PDF wurde erzeugt, der Bericht ist eingefroren
    • +
+

Bericht öffnen → 📑 Bericht finalisieren → erzeugt das PDF und legt es + unter „Verknüpfte Dokumente" des Auftrags ab. In Dolibarr siehst du den Bericht dann direkt beim Auftrag.

+

💡 Wenn du nach dem Finalisieren neue Fotos machst, wird automatisch ein + neuer Entwurf angelegt. Der finalisierte bleibt unberührt.

+
+ +
+

6. Offline arbeiten

+

Die App funktioniert auch ohne Internet:

+
    +
  • Fotos werden in einer lokalen Warteschlange gespeichert
    • +
  • Sobald wieder Empfang da ist, werden sie automatisch hochgeladen
    • +
  • Oben rechts siehst du den Status: 🟢 online, + 🟡 N (N Uploads werden synchronisiert), + 🔴 N (offline, N warten)
    • +
+
+ +
+

7. Auf dem Handy installieren

+

So wird die PWA zur echten App:

+
    +
  • Android/Chrome: Menü → „Zum Startbildschirm hinzufügen"
    • +
  • iPhone/Safari: Teilen-Symbol → „Zum Home-Bildschirm"
    • +
+

Danach startet sie wie eine normale App, ohne Browser-Leiste.

+
+ +
+

8. Einstellungen

+

Im Reiter ⚙️:

+
    +
  • 🔄 Offline-Queue manuell synchronisieren
    • +
  • 🚪 Abmelden
    • +
+
+ +
+

Baustelle PWA v1.0 · Fragen? → Eddy

+
+
+ `; + document.body.appendChild(modal); + modal.querySelector('#help-close').onclick = () => modal.remove(); +} + function escapeHtml(s) { return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); } diff --git a/index.html b/index.html index 5a9cd0e..28d79ec 100644 --- a/index.html +++ b/index.html @@ -17,6 +17,7 @@

Baustelle

+ 🟢
diff --git a/sw.js b/sw.js index 9c7e7f8..46306a1 100644 --- a/sw.js +++ b/sw.js @@ -4,7 +4,7 @@ * - API-Calls: network-first, kein offline-cache (da auth-pflichtig) */ -const CACHE = 'baustelle-v3'; +const CACHE = 'baustelle-v4'; const SHELL = [ './', './index.html',