Gestion des Scénarios

L'onglet "Scénario" vous permet de gérer tous les scénarios associés à un équipement. Vous pouvez créer, modifier, supprimer et activer/désactiver vos scénarios depuis cette interface en cartes visuelles.

Accéder à l'onglet Scénario

Pour accéder à la gestion des scénarios d'un équipement :

1. Cliquez sur "Configurer l'équipement" dans le listing de vos équipements
2. Cliquez ensuite sur l'onglet "Scénario"
3. Les scénarios s'affichent sous forme de cartes organisées en grille.

Vue d'ensemble de l'interface

L'interface se compose de deux zones principales :

En-tête (barre supérieure)

À gauche : Les "Scénarios configurés"

À droite : Deux boutons d'action

• 🔄 "Synchroniser avec l'équipement" : Ouvre la modal de synchronisation
  • Désactivé si l'équipement n'est pas joignable via MQTT
• ➕ "Nouveau scénario" : Crée un nouveau scénario

Zone de cartes

Lorsque vous avez des scénarios configurés, ils s'affichent sous forme de grille de cartes.

Fonctionnalité Premium

Abonnement requis

Les scénarios sont une fonctionnalité disponible uniquement avec un abonnement Premium ou Démo.

Si vous n'avez pas les permissions, vous verrez :

• Un message de verrouillage avec icône 🔒
• Un bouton "Mettre à niveau mon abonnement"
• Les cartes de scénarios existants seront affichées en opacité réduite (lecture seule)

Les cartes de scénarios

Chaque scénario est représenté par une carte visuelle contenant toutes les informations et actions.

Structure d'une carte

1. En-tête de la carte

Nom du scénario (cliquable pour édition) :

• Cliquez sur le nom pour éditer rapidement le nom du scénario

Badges à droite :

• 🟡 Badge "À sync" (orange) : Affiché si le scénario doit être synchronisé
  • Apparaît si jamais synchronisé
  • Apparaît si modifié depuis la dernière sync
  • Au survol : tooltip expliquant la raison
• 🟢 Badge "Actif" (vert) ou 🔘 Badge "Inactif" (gris)

2. Informations du scénario

Trois lignes d'information :

Ligne 1 : Composition

• Icône diagramme
• "[X] blocs • [Y] paramètres"
• Exemple : "5 blocs • 2 paramètres"

Ligne 2 : Dernière modification

• Icône horloge
• "Modifié [date relative]"
• Exemple : "Modifié il y a 2 heures"
• Au survol : date exacte au format "DD/MM/YYYY à HH:mm:ss"

Ligne 3 : État de synchronisation

• 🟢 Si synchronisé :
  • Icône flèche circulaire
  • "Synchronisé [date relative]" en vert
  • Exemple : "Synchronisé il y a 10 minutes"
• 🟡 Si jamais synchronisé :
  • Icône triangle d'avertissement
  • "Jamais synchronisé" en orange

4. Section Actions (pied de carte)

À gauche : Switch d'activation/désactivation

• Label "Activé" (si actif) ou "Désactivé" (si inactif)
• Désactivé pendant l'opération (spinner)

À droite : Boutons d'actions

• 🖊️ Bouton Éditer (icône crayon, vert au survol)
  • Ouvre le canva avec le scénario chargé
• 🗑️ Bouton Supprimer (icône poubelle, rouge au survol)
  • Ouvre une modal de confirmation

Créer un nouveau scénario

Méthode 1 : Bouton "Nouveau scénario"

1. Cliquez sur le bouton "Nouveau scénario" en à droite
2. Le canva s'ouvre directement en mode création

Méthode 2 : Premier scénario

Si vous n'avez aucun scénario, un écran vide s'affiche avec :

• Message "Aucun scénario configuré"
• Bouton "Créer mon premier scénario"

Conseil de nommage

Choisissez des noms clairs et descriptifs pour vos scénarios. Cela facilitera leur gestion lorsque vous en aurez plusieurs.

Éditer un scénario

Trois façons d'éditer un scénario :

1. Via le bouton crayon sur la carte

1. Localisez la carte du scénario
2. Cliquez sur le bouton avec icône crayon (vert)
3. Le canva s'ouvre avec le scénario chargé
4. Modifiez les blocs, paramètres, connexions
5. Enregistrez les modifications (Ctrl+S ou bouton)

2. Via le nom du scénario (édition rapide)

Pour modifier uniquement le nom :

1. Cliquez sur le nom du scénario dans la carte
2. Une modal s'ouvre avec un champ de texte
3. Modifiez le nom
4. Validez avec Entrée ou le bouton de sauvegarde
5. Annulez avec Échap ou le bouton d'annulation

Sauvegarde automatique

L'édition du nom est sauvegardée immédiatement, indépendamment du contenu du scénario.

3. Double-clic sur la carte

Vous pouvez également double-cliquer n'importe où sur la carte pour ouvrir le canva.

Attention

Après avoir modifié un scénario, n'oubliez pas de le synchroniser avec l'équipement pour que les changements soient appliqués ! Un badge "À sync" orange apparaîtra automatiquement.

Supprimer un scénario

Processus de suppression

1. Localisez la carte du scénario à supprimer
2. Cliquez sur le bouton poubelle (rouge)
3. Une modal de confirmation s'ouvre

Modal de confirmation

La modal affiche :

• Icône poubelle dans un cercle rouge transparent
• Titre : "Supprimer le scénario"
• Message : "Êtes-vous sûr de vouloir supprimer ce scénario ? Cette action est irréversible."
• Encadré avec le nom du scénario à supprimer
• Deux boutons :
  • "Annuler" (gris) - Ferme la modal sans supprimer
  • "Supprimer" (rouge) - Confirme la suppression

Pendant la suppression

• Le bouton affiche "Suppression..." avec un spinner
• Les boutons sont désactivés
• La suppression est exécutée côté serveur

Suppression définitive

⚠️ La suppression d'un scénario de la BDD est irréversible !

Si vous souhaitez simplement arrêter l'exécution temporairement :

• ✅ Désactivez le scénario (switch)
• ❌ Ne le supprimez pas

Que se passe-t-il après la suppression ?

1. ✅ Le scénario est supprimé de la base de données
2. ❌ Le scénario reste présent dans l'équipement
3. 🔄 Il apparaîtra comme "orphelin" lors de la prochaine synchronisation
4. 🗑️ Vous pourrez le supprimer de l'équipement via la modal de synchronisation

Activer / Désactiver un scénario

L'activation et la désactivation permettent de contrôler l'exécution des scénarios sans les supprimer.

Switch d'activation

Chaque carte dispose d'un switch toggle en bas à gauche :

État activé :

• Switch en position droite (bleu/vert)
• Label "Activé"
• Badge vert "Actif" en haut
• Bordure gauche verte

État désactivé :

• Switch en position gauche (gris)
• Label "Désactivé"
• Badge gris "Inactif" en haut
• Bordure gauche grise

Basculer l'état

1. Cliquez sur le switch ou son label
2. L'état bascule instantanément dans la BDD
3. Le switch est désactivé pendant l'opération (évite les doubles-clics)
4. Un badge "À sync" orange apparaît automatiquement
5. Le scénario doit être synchronisé pour que le changement soit appliqué à l'équipement

Synchronisation requise

Le changement d'état actif/inactif est enregistré immédiatement en BDD, mais ne prend effet sur l'équipement qu'après synchronisation.

Le badge "À sync" vous rappelle qu'une synchronisation est nécessaire.

Utilité de l'activation/désactivation

Cette fonctionnalité est très utile pour :

• ✅ Tester un scénario avant de l'activer définitivement
• ✅ Désactiver temporairement un scénario saisonnier
  • Exemple : Chauffage en été, climatisation en hiver
• ✅ Déboguer en isolant des scénarios problématiques
• ✅ Gérer des situations exceptionnelles sans perdre la configuration
  • Exemple : Désactiver pendant des travaux
• ✅ Économiser de la mémoire sur l'équipement sans perdre le scénario

Badge "À sync" (À synchroniser)

Quand apparaît-il ?

Le badge orange "À sync" avec icône triangle d'avertissement apparaît automatiquement dans deux cas :

1. Jamais synchronisé : lastSyncAt est null

   • Tooltip : "Ce scénario n'a jamais été synchronisé avec l'automate"

2. Modifié depuis la dernière sync : updatedAt > lastSyncAt

   • Tooltip : "Ce scénario a été modifié et doit être synchronisé avec l'automate"

Que faire quand vous voyez ce badge ?

1. Notez les scénarios avec ce badge
2. Cliquez sur "Synchroniser avec l'équipement"
3. Dans la modal, ces scénarios apparaîtront en état "À mettre à jour" ou "Non synchronisé"
4. Effectuez la synchronisation
5. Le badge disparaît une fois synchronisé

Bonne pratique

Synchronisez régulièrement vos scénarios pour éviter d'accumuler trop de modifications non synchronisées. Cela facilite le débogage en cas de problème.

Informations de date

Format d'affichage

Les dates utilisent moment.js pour un affichage relatif convivial :

• "il y a quelques secondes"
• "il y a 2 minutes"
• "il y a 1 heure"
• "il y a 3 jours"
• "il y a 2 mois"

Au survol (tooltip)

Survolez la date pour voir le format exact :

• Format : "DD/MM/YYYY à HH:mm:ss"
• Exemple : "20/10/2025 à 14:32:45"

Codes couleurs

• 🔵 Gris : Date de modification (neutre)
• 🟢 Vert : Date de synchronisation (succès)
• 🟡 Orange : "Jamais synchronisé" (avertissement)

Design et expérience utilisateur

Style visuel

Les cartes utilisent un design moderne avec :

• Fond sombre avec effet de verre (backdrop-filter)
• Dégradés subtils pour la profondeur
• Bordures translucides qui deviennent plus visibles au survol
• Effets de transition fluides sur toutes les interactions

Responsive design

La grille s'adapte automatiquement :

• Mobile (< 768px) : 1 colonne
• Tablette (768-992px) : 2 colonnes
• Desktop (992-1200px) : 3 colonnes
• Large desktop (> 1200px) : 4 colonnes

-->

Animations

• Hover sur carte : Légère élévation (-2px) et éclaircissement
• Hover sur boutons : Agrandissement (scale 1.05) et changement de couleur
• Transitions : 0.2s ease pour toutes les animations

Accessibilité

• ✅ Tooltips informatifs sur tous les éléments interactifs
• ✅ Curseur pointer sur les éléments cliquables
• ✅ Feedback visuel immédiat sur les actions
• ✅ États désactivés clairement identifiables
• ✅ Contraste suffisant pour la lisibilité

État vide (Aucun scénario)

Quand aucun scénario n'existe, l'interface affiche :

• Grande icône diagramme (bi-diagram-3) en gris
• Titre : "Aucun scénario configuré"
• Message : "Créez votre premier scénario pour automatiser votre équipement."
• Bouton CTA : "Créer mon premier scénario" avec icône +

Premier scénario

C'est le moment idéal pour commencer ! Cliquez sur le bouton et créez votre premier scénario d'automatisation. Vous pouvez commencer simplement et complexifier progressivement.

Raccourcis et astuces

Raccourcis clavier

Quand une modal d'édition de nom est ouverte :

• Entrée : Valider et sauvegarder
• Échap : Annuler et fermer

Interactions rapides

• Clic sur le nom : Éditer rapidement le nom
• Clic sur le crayon : Ouvrir le canva complet
• Clic sur le switch : Basculer actif/inactif
• Double-clic sur la carte : Ouvrir le canva

Indicateurs visuels rapides

• Bordure verte = Actif
• Bordure grise = Inactif
• Badge orange = À synchroniser
• Texte orange = Jamais synchronisé
• Texte vert = Dernière sync

Bonnes pratiques

Pour une gestion efficace de vos scénarios :

✅ Nommez clairement : Utilisez des noms descriptifs et explicites ✅ Ajoutez des descriptions : Documentez les scénarios complexes ✅ Synchronisez régulièrement : Ne laissez pas s'accumuler les badges "À sync" ✅ Désactivez plutôt que supprimer : Pour les scénarios temporaires ✅ Organisez par fonction : Groupez mentalement les scénarios par zone ou fonction ✅ Testez après modification : Vérifiez le comportement après chaque changement ✅ Surveillez les badges : Les indicateurs visuels vous guident ✅ Nettoyez régulièrement : Supprimez les scénarios vraiment obsolètes

Limitations et considérations

Permissions

• ❌ Sans abonnement Premium/Démo : Lecture seule (opacité 50%)
• ✅ Avec abonnement : Toutes les fonctionnalités disponibles

Performance

• La grille charge tous les scénarios d'un coup (pas de pagination actuellement)
• Recommandé : Gardez un nombre raisonnable de scénarios (< 50) pour des performances optimales

Synchronisation

• Les modifications sont sauvegardées en BDD immédiatement
• Mais ne prennent effet sur l'équipement qu'après synchronisation
• Pensez toujours à synchroniser après vos modifications

---

Prochaine étape

Maintenant que vous savez gérer vos scénarios, découvrez comment les créer et les modifier dans l'interface de création : Interface de création (Canva)