Vue-Zustand und Methoden — Das reaktive ch Objekt und verfügbare Vorlagenmethoden.
Siehe auch: Markup und Struktur von Vorlagen | Gestaltung und CSS-Variablen
Die Vorlage für den Warteraum basiert auf einem einzigen reaktiven Vue-3-Objekt namens ch. Dieses Objekt enthält den gesamten Status der Warteschlange – Position, geschätzte Wartezeit, Countdown-Timer, Formulardaten und Feature-Flags – und wird automatisch aktualisiert, sobald die Anwendung die CrowdHandler-API abfragt. Sie müssen diesen Status nicht selbst verwalten; binden Sie einfach die Eigenschaften mithilfe von Standard-Vue-Direktiven (v-if, v-else, {{ }} Interpolation, :style, usw.) und Ihre Vorlage reagiert in Echtzeit auf Änderungen. Stellen Sie sich das so vor: ch als schreibgeschützte Daten-API, die den aktuellen Zustand der Warteschlange beschreibt.
Zustandsobjekte#
Hauptstaat: ch#
| Eigenschaft |
Typ |
Beschreibung |
ch.isLoaded |
boolesch |
wahr beim Laden der Anfangsdaten |
ch.isActive |
boolesch |
wahr wenn sich der Benutzer in der aktiven Warteschlange befindet |
ch.isCountdown |
boolesch |
wahr wenn die Warteschlange noch nicht geöffnet ist |
ch.isBlocked |
boolesch |
wahr wenn der Benutzer gesperrt ist |
ch.isRoomFull |
boolesch |
wahr wenn die Warteschlange voll ist |
ch.isError |
boolesch |
wahr wenn ein Fehler aufgetreten ist |
ch.captchaRequired |
boolesch |
wahr wenn das Captcha ausgefüllt werden muss |
ch.position |
Zahl | null |
Aktuelle Position in der Warteschlange (ab 1). null beim Einchecken |
ch.estimate |
Zahl | null |
Geschätzte Wartezeit in Minuten |
ch.eta |
Zeichenkette | null |
Voraussichtliche Ankunftszeit (formatierte Zeitangabe) |
Kapitelüberschrift |
Zeichenkette |
Veranstaltungs-/Raumbezeichnung |
ch.message |
Zeichenkette |
Benutzerdefinierte Meldung aus der Raumkonfiguration |
ch.logo |
Zeichenkette |
URL zum Logo-Bild |
ch.stock |
Zahl | null |
Verfügbarer Lagerbestand (sofern konfiguriert) |
ch.onsale |
Zeichenkette |
ISO-Datum, an dem die Warteschlange eröffnet wird |
ch.requested |
Zeichenkette |
Zeitstempel der letzten API-Anfrage |
ch.sessionsExpire |
Zahl |
Ob Sitzungen ablaufen (Wert ungleich Null = wahr) |
ch.sessionsTimeout |
Zahl |
Minuten bis zum Ablauf der Sitzung |
ch.emailAvailable |
Zahl |
Ob E-Mail-Benachrichtigungen aktiviert sind (Wert ungleich Null = wahr) |
ch.ankündigung |
Zeichenkette |
Text für die Ansage durch den Bildschirmleser |
ch.progress |
Zahl |
Prozentangabe des Fortschrittsbalkens (0–100) |
ch.nextPoll |
Zahl |
Sekunden seit der letzten Umfrage |
ch.pollTTL |
Zahl |
Aktuelles Abfrageintervall in Sekunden (Standardwert 60, variabel) |
ch.css.title |
Zeichenkette |
Dynamische Titelgrößenklasse ("", "ch-title-lg", oder "ch-title-xl") |
Token-Status: ch.token#
| Eigenschaft |
Typ |
Beschreibung |
ch.token.value |
Zeichenkette | null |
Gesamtwert des Tokens |
ch.token.verschleiert |
Zeichenkette | null |
Teilweise verdecktes Symbol zur Anzeige |
ch.token.copied |
boolesch |
wahr unmittelbar nachdem der Benutzer das Token kopiert hat |
ch.token.copy(event, ch) |
Funktion |
Token in die Zwischenablage kopieren |
E-Mail-Status: ch.email#
| Eigenschaft |
Typ |
Beschreibung |
ch.email.value |
Zeichenkette |
Eingegebene E-Mail-Adresse |
ch.email.valid |
boolesch |
Ob das E-Mail-Format gültig ist |
ch.email.submitted |
boolesch |
Ob die E-Mail erfolgreich gesendet wurde |
ch.email.submitting |
boolesch |
wahr während der Einreichung |
ch.email.changing |
boolesch |
wahr wenn der Benutzer eine zuvor übermittelte E-Mail-Adresse ändert |
Prioritätscode: ch.priority#
| Eigenschaft |
Typ |
Beschreibung |
ch.priority.available |
Zahl | null |
Ob Prioritätscodes aktiviert sind (Wert ungleich Null = wahr) |
ch.priority.code |
Zeichenkette | null |
Prioritätscode eingegeben |
ch.priority.valid |
bool | null |
Ob das Codeformat gültig ist |
ch.priority.submitted |
boolesch |
Ob Code eingereicht wurde |
ch.priority.submitting |
boolesch |
wahr während der Einreichung |
ch.priority.success |
boolesch |
wahr falls der Code akzeptiert wurde |
ch.priority.error |
boolesch |
wahr falls der Code abgelehnt wurde |
Status des Countdowns: ch.countdown#
Verfügbar ab ch.isCountdown stimmt.
| Eigenschaft |
Typ |
Beschreibung |
ch.countdown.sHours |
Zeichenkette |
Stunden, mit Nullen aufgefüllt („02“) oder „--“ vor der Initialisierung |
ch.countdown.sMinutes |
Zeichenkette |
Minuten, mit Nullen aufgefüllt („05“) oder „--“ vor der Init-Funktion |
ch.countdown.sSeconds |
Zeichenkette |
Sekunden, mit Nullen aufgefüllt („30“) oder „--“ vor der Initialisierung |
ch.countdown.hours |
Zahl |
Stunden als Zahl |
ch.countdown.minutes |
Zahl |
Minuten als Zahl |
ch.countdown.seconds |
Zahl |
Sekunden als Zahl |
ch.countdown.Gesamtsekunden |
Zahl |
Verbleibende Sekunden insgesamt |
Verfügbare Methoden#
| Verfahren |
Beschreibung |
validateEmail() |
Überprüft das E-Mail-Format, aktualisiert ch.email.valid |
submitEmail() |
E-Mail-Adresse für Benachrichtigungen angeben |
changeEmail() |
Wechselt in den Status „E-Mail-Adresse wird geändert“ |
cancelChangeEmail() |
E-Mail-Änderung wird rückgängig gemacht, kehrt zur Bestätigung zurück |
checkValidPriorityCode() |
Überprüft das Format des Prioritätscodes |
prioritySubmit() |
Übermittelt den Prioritätscode |
formatDate(date, format) |
Formatiert die Datumszeichenfolge (siehe unten) |
Optionen für „formatDate“#
formatDate(ch.requested, 'toLocaleString') // „27.01.2026, 14:30:00 Uhr“
formatDate(ch.requested, 'toLocaleDateString') // „27.01.2026“
formatDate(ch.requested, 'toLocaleTimeString') // „14:30:00 Uhr“
formatDate(ch.requested, 'dayMonth') // „27. Januar“
formatDate(ch.requested, 'weekdayMonthDay') // „Dienstag, 27. Jan.“
formatDate(ch.requested, 'iso') // „2026-01-27T14:30:00.000Z“
formatDate(ch.requested, 'YYYY-MM-dd HH:mm:ss') // „2026-01-27 14:30:00“