État et méthodes de Vue — Le réactif ch objet et méthodes de modèle disponibles.
Voir aussi : Balisage et structure des modèles | Mise en forme et variables CSS
Le modèle de la salle d'attente s'appuie sur un seul objet Vue 3 réactif appelé ch. Cet objet contient tous les états de la file d'attente — position, temps d'attente estimé, comptes à rebours, données de formulaire et indicateurs de fonctionnalités — et se met automatiquement à jour lorsque l'application interroge l'API CrowdHandler. Vous n'avez pas besoin de gérer vous-même ces états ; il vous suffit de vous lier à ses propriétés à l'aide des directives Vue standard (v-if, v-else, {{ }} interpolation, :style, etc.) et votre modèle s'adaptera en temps réel aux modifications. Pensez à ch sous la forme d'une API de données en lecture seule qui décrit l'état actuel de la file d'attente.
État d'origine : ch#
| Propriété |
Type |
Description |
ch.isLoaded |
booléen |
vrai lors du chargement des données initiales |
ch.isActive |
booléen |
vrai lorsque l'utilisateur se trouve dans la file d'attente active |
ch.isCountdown |
booléen |
vrai lorsque la file d'attente n'est pas encore ouverte |
ch.isBlocked |
booléen |
vrai lorsque l'utilisateur est bloqué |
ch.isRoomFull |
booléen |
vrai lorsque la file d'attente est pleine |
ch.isError |
booléen |
vrai lorsqu'une erreur s'est produite |
ch.captchaRequired |
booléen |
vrai lorsqu'il faut remplir le captcha |
ch.position |
nombre | null |
Position actuelle dans la file d'attente (comptage à partir de 1). null lors de l'enregistrement |
ch.estimate |
nombre | null |
Temps d'attente estimé en minutes |
ch.eta |
chaîne | null |
Heure d'arrivée prévue (chaîne de caractères au format horaire) |
titre du chapitre |
chaîne de caractères |
Titre de l'événement/de la salle |
ch.message |
chaîne de caractères |
Message personnalisé issu de la configuration de la salle |
ch.logo |
chaîne de caractères |
URL de l'image du logo |
ch.stock |
nombre | null |
Stock disponible (si configuré) |
ch.onsale |
chaîne de caractères |
Date ISO d'ouverture de la file d'attente |
ch.demandé |
chaîne de caractères |
Horodatage de la dernière requête API |
ch.sessionsExpire |
nombre |
Si les sessions expirent (valeur non nulle = vrai) |
ch.sessionsTimeout |
nombre |
Minutes avant l'expiration de la session |
ch.emailAvailable |
nombre |
Si les notifications par e-mail sont activées (valeur différente de zéro = vrai) |
ch.annonce |
chaîne de caractères |
Texte d'annonce pour lecteur d'écran |
ch.progress |
nombre |
Pourcentage de la barre de progression (0–100) |
ch.nextPoll |
nombre |
Secondes écoulées depuis le dernier sondage |
ch.pollTTL |
nombre |
Intervalle actuel entre les interrogations, en secondes (valeur par défaut : 60, variable) |
ch.css.title |
chaîne de caractères |
Classe de taille de titre dynamique ("", « ch-title-lg », ou « ch-title-xl ») |
État du jeton : ch.token#
| Propriété |
Type |
Description |
ch.token.value |
chaîne | null |
Valeur totale du jeton |
ch.token.obfuscated |
chaîne | null |
Jeton partiellement masqué à afficher |
ch.token.copied |
booléen |
vrai immédiatement après que l'utilisateur a copié le jeton |
ch.token.copy(event, ch) |
fonction |
Copier le jeton dans le presse-papiers |
Statut de l'e-mail : ch.email#
| Propriété |
Type |
Description |
ch.email.value |
chaîne de caractères |
Adresse e-mail saisie |
ch.email.valid |
booléen |
Si le format de l'adresse e-mail est valide |
ch.email.submitted |
booléen |
Si l'e-mail a bien été envoyé |
ch.email.submitting |
booléen |
vrai lors de la soumission |
ch.email.modification |
booléen |
vrai lorsque l'utilisateur modifie une adresse e-mail déjà saisie |
Code de priorité : ch.priorité#
| Propriété |
Type |
Description |
ch.priority.available |
nombre | null |
Si les codes de priorité sont activés (valeur différente de zéro = vrai) |
ch.priorité.code |
chaîne | null |
Code de priorité saisi |
ch.priority.valid |
booléen | null |
Si le format du code est valide |
ch.priority.submitted |
booléen |
Si du code a été soumis |
ch.priority.submitting |
booléen |
vrai lors de la soumission |
ch.priorité.succès |
booléen |
vrai si le code a été accepté |
ch.priorité.erreur |
booléen |
vrai si le code a été rejeté |
État du compte à rebours : ch.compte à rebours#
Disponible à partir du ch.isCountdown est vrai.
| Propriété |
Type |
Description |
ch.countdown.sHours |
chaîne de caractères |
Heures, avec zéros d'alignement (« 02 ») ou « -- » avant l'initialisation |
ch.countdown.sMinutes |
chaîne de caractères |
Minutes, complétées par des zéros (« 05 ») ou « -- » avant « init » |
ch.countdown.sSeconds |
chaîne de caractères |
Secondes, complétées par des zéros (« 30 ») ou « -- » avant l'initialisation |
ch.countdown.hours |
nombre |
Heures exprimées sous forme de nombre |
ch.countdown.minutes |
nombre |
Minutes sous forme de nombre |
ch.countdown.seconds |
nombre |
Les secondes exprimées sous forme de nombre |
ch.countdown.totalseconds |
nombre |
Nombre total de secondes restantes |
| Méthode |
Description |
validateEmail() |
Vérifie le format de l'adresse e-mail, met à jour ch.email.valid |
submitEmail() |
Enregistre une adresse e-mail pour recevoir des notifications |
changeEmail() |
Passe à l'état « modification de l'adresse e-mail » |
cancelChangeEmail() |
Annule la modification de l'adresse e-mail et revient à la page de confirmation |
checkValidPriorityCode() |
Vérifie le format du code de priorité |
prioritySubmit() |
Envoie le code de priorité |
formatDate(date, format) |
Mise en forme d'une chaîne de date (voir ci-dessous) |
Options de formatDate#
formatDate(ch.requested, 'toLocaleString') // « 27/01/2026, 14 h 30 min 00 s »
formatDate(ch.requested, 'toLocaleDateString') // « 27/01/2026 »
formatDate(ch.requested, 'toLocaleTimeString') // « 14 h 30 min 00 s »
formatDate(ch.requested, 'dayMonth') // « 27 janvier »
formatDate(ch.requested, 'weekdayMonthDay') // « mardi 27 janvier »
formatDate(ch.requested, 'iso') // « 2026-01-27T14:30:00.000Z »
formatDate(ch.requested, 'YYYY-MM-dd HH:mm:ss') // « 27 janvier 2026 14 h 30 min 00 s »