Auf dieser Seite
Auftrag erstellen
Kunden erstellen einen Auftrag auf nodika.de oder über ein eingebettetes Widget auf Partner-Websites. Der Ablauf ist in 4 Schritte unterteilt:
1
Adresse & Dienstleistung wählen
Der Kunde gibt seine Adresse ein und wählt eine Dienstleistung (z. B. Türöffnung, Elektriker, Sanitär).
- Adresseingabe mit Google Places Autocomplete (Vorschläge ab 3 Zeichen)
- Button: 📍 Aktuellen Standort verwenden — GPS-Ortung direkt im Browser
- Dienste werden als anklickbare Karten angezeigt; ausgewählter Dienst erhält Markierung Ausgewählt
- Button: Weiter zur Monteurauswahl (deaktiviert, bis Adresse + Dienst gewählt)
2
Monteur auswählen
Verfügbare Online-Monteure in der Nähe werden geladen und nach Distanz sortiert angezeigt.
Details → Monteur-Auswahl
3
Kontaktdaten eingeben
Pflichtfelder: Vorname, Nachname, Telefonnummer
- Button: ← Zurück zur Monteurauswahl
- Button: Jetzt bestellen — erstellt den Auftrag und wählt sofort den Monteur aus (startet 45s-Timer)
Kein Account erforderlich. Der Auftrag wird als Gastbestellung angelegt.
4
45-Sekunden-Warte-Screen
Der Monteur hat 45 Sekunden, um den Auftrag anzunehmen. Ein animierter Countdown-Kreis wird angezeigt.
Details → 45-Sekunden-Warte-Screen
Monteur auswählen
Pro verfügbarem Monteur wird eine Karte angezeigt mit:
| Element | Beschreibung |
|---|---|
| Profilfoto / Initialen | Rundes Foto (80×80px) oder Initialen als Fallback |
| Name + Firma | Vor- und Nachname, darunter Partner-Firmenname |
| 📍 2,3 km | Entfernung zum Kundenstandort in km |
| ⏱️ ca. 15 Min. | Geschätzte Ankunftszeit (ETA) |
| Online | Monteur ist gerade verfügbar |
| 1 Auftrag vor Ihnen | Monteur ist beschäftigt, nimmt aber weitere Aufträge an |
| Servicepreis + Anfahrt | Aufschlüsselung: Grundpreis + Anfahrtskosten (km × €/km) |
| Gesamtpreis | Rot hervorgehoben, z. B. 101,00 € |
| Zusatzoptionen | Checkboxen (nur bei Festpreis+ Diensten) — siehe unten |
Buttons am Ende der Monteur-Liste:
- ← Zurück — zurück zur Adress-/Dienst-Auswahl
- Weiter zu den Kontaktdaten — nur aktiv wenn Monteur ausgewählt
Retry-Modus: Wenn ein Monteur abgelehnt hat oder die Zeit abgelaufen ist, kehrt der Kunde zur Monteur-Auswahl zurück. Abgelehnte Monteure werden mit Abgelehnt markiert und sind auswählbar, aber mit Hinweis.
45-Sekunden-Warte-Screen
Nach Bestellabschluss erscheint der Warte-Screen:
- Großer animierter Countdown-Kreis (⏳) mit sekundengenauem Rückzählen
- Farbe wechselt: blau (> 15s) → gelb (6–15s) → rot (≤ 5s)
- Fortschrittsbalken unter dem Kreis
- Hinweistext: „Der Monteur hat X Sekunden Zeit zu antworten"
- Automatische Weiterleitung bei Annahme → Live-Tracking
- Bei Ablehnung/Timeout: Zurück zur Monteur-Auswahl
Live-Tracking
Seite: /order/{orderId} — nach Annahme des Auftrags automatisch aufgerufen.
Status-Banner (oben, kontextabhängig)
| Status | Banner-Farbe | Inhalt |
|---|---|---|
| Angenommen | Grün | ✅ Name des Monteurs + ETA in Minuten |
| Unterwegs | Blau | 🚗 Monteur fährt + ETA |
| Angekommen | Lila | 📍 Monteur ist vor Ort |
| Abgeschlossen | Grau | ✅ Abschlusszeit + optionaler „Zahlung bestätigen"-Button |
| Storniert | Rot | ❌ Stornierungsgrund + Zeitstempel |
Layout (3-spaltig auf Desktop, 1-spaltig auf Mobil)
- Links (1/3): Status-Card + Auftragsdetails + Chat
- Rechts (2/3): Google Maps (Live-Tracking) + Auftragsverlauf-Fortschrittsbalken
Google Maps
- Roter Marker: Kundenstandort
- Blauer Marker: Live-Position des Monteurs (aktualisiert sich per WebSocket)
- Automatisches Fit-Bounds wenn beide Marker vorhanden
Auftragsverlauf-Fortschrittsbalken
5 Schritte mit farblichen Status-Indikatoren: Ausstehend → Angenommen → Unterwegs → Angekommen → Fertig
Auftragsdetails-Card
| Feld | Inhalt |
|---|---|
| Dienstleistung | Name des gebuchten Services |
| Adresse | Kundenadresse |
| Gesamtpreis | Rot, z. B. 101,00 €, mit Aufschlüsselung (Servicepreis + Anfahrt + Extras) |
| Geplante Route | Falls Monteur mehrere Aufträge in der Queue hat (Dispatch-Route) |
| Erstellt am | Datum + Uhrzeit |
| Angenommen am | Zeitstempel der Annahme |
| Geschätzte Ankunft | ETA in Minuten |
Chat mit dem Monteur
Nur sichtbar wenn Status: Angenommen, Unterwegs oder Angekommen.
- Text-Input + ➤ Senden-Button
- Senden auch per Enter (ohne Shift)
- Eigene Nachrichten: rechts, dunkel. Monteur-Nachrichten: links, hellgrau
- Button: 🔔 Benachrichtigungen aktivieren — Browser-Push + Audio-Bing bei neuen Nachrichten
- Wenn aktiviert: 🔔 Benachrichtigungen an
Monteur-Card (bei aktivem Auftrag)
- Foto/Initialen + Name + Firma
- Button: 📞 Anrufen: [Nummer] — öffnet tel:-Link
Stornierung
- Button: Auftrag stornieren — nur sichtbar wenn Auftrag noch nicht COMPLETED/CANCELLED
- Öffnet Modal mit Radio-Buttons für vordefinierte Stornogründe
- Option „Anderer Grund" → Freitext-Eingabe
- Buttons im Modal: Abbrechen Stornieren
Monteur-Storno: Wenn der Monteur storniert, erscheint eine Meldung und der Kunde wird automatisch nach 2,5 Sekunden zurück zur Monteur-Auswahl weitergeleitet (Re-Dispatching).
Zahlung
- Nach Abschluss erscheint Banner: 💳 Zahlung angefordert (Betrag + Zahlungsmethode)
- Button: Zahlung bestätigen — öffnet PaymentConfirmDialog
- Nach Bestätigung: ✅ Zahlung abgeschlossen – Danke!
- Aktuell: Barzahlung vor Ort. Online-Zahlung in Vorbereitung (Phase 2)
Auftragsstatus-Referenz
| Status | Bedeutung | Badge-Farbe |
|---|---|---|
PENDING | Wartet auf Antwort des Monteurs (45s-Countdown) | Gelb |
EN_ROUTE | Angenommen, Monteur kommt | Grün |
IN_PROGRESS | Monteur ist unterwegs | Blau |
ARRIVED | Monteur ist angekommen | Lila |
COMPLETED | Auftrag abgeschlossen | Grau |
CANCELLED | Storniert (Kunde oder Monteur) | Rot |
EXPIRED | 45s-Timer abgelaufen ohne Annahme | Rot |
Zusatzoptionen (Festpreis+ Flow)
Bei manchen Diensten (z. B. Türöffnung) können optionale Zusatzpositionen gewählt werden:
- Checkboxen pro Zusatzoption (z. B. „Standard-Zylinder inkl. 3 Schlüssel — 45,00 €")
- Standardmäßig angehakt (da typischerweise benötigt)
- Abwählbar (z. B. wenn Kunde eigenen Zylinder hat)
- Gesamtpreis aktualisiert sich sofort
- Preisspanne möglich:
30,00–60,00 €
Screenshots
📸 nodika.de — Schritt 1: Adresse und Dienstleistung wählen