Skip to main content

Widget Minuteur

Aperçu​

Le widget Minuteur fournit une solution complète de suivi du temps qui peut compter à partir de zéro ou faire un compte à rebours à partir d'une durée spécifiée. Il affiche le temps au format HH:MM:SS et inclut des fonctionnalités de démarrage, d'arrêt et de suivi à la fois du temps d'exécution actif et des périodes d'interruption.

Widget Minuteur

Options de Configuration​

Configuration de Base​

Identité du Widget​

  • Nom: Nom d'affichage du widget
  • Variable/Modèle: Le nom du modèle de données qui stocke les valeurs du minuteur

Paramètres du Minuteur​

Type de Compte​

Choisissez comment le minuteur doit se comporter :

  • Haut: Le minuteur compte à partir de 00:00:00

    • Affiche le préfixe (+) lorsque la durée définie est dépassée
    • Utile pour suivre le temps écoulé avec des limites de temps optionnelles

  • Bas: Le minuteur compte à rebours à partir de la durée définie

    • Affiche le préfixe (-) lorsqu'il descend en dessous de zéro
    • Utile pour les minuteurs de compte à rebours et le suivi des délais
Durée​
  • Entrée: Nombre de secondes pour la durée du minuteur
  • Objectif:
    • Pour le mode compte à partir de zéro : Définit le temps cible/limite
    • Pour le mode compte à rebours : Définit la valeur de départ du compte à rebours
  • Format: Entrez la valeur en secondes (par exemple, 3600 pour 1 heure)
Configuration du Minuteur

Paramètres de Validation​

Le widget minuteur supporte des règles de validation complètes sur différents écrans :

Validation Basée sur l'Écran​

Configurez des comportements différents pour chaque écran de votre application :

  • Disponible: Si le widget apparaît sur l'écran
  • Visible: Si le widget est visible (supporte les conditions dynamiques)
  • Requis: Si l'interaction avec le minuteur est obligatoire
  • Désactiver: Si les contrôles du minuteur sont désactivés
Validation de Base du Minuteur

Validation Avancée​

  • Conditions Dynamiques: Utilisez des expressions JavaScript avec des variables de modèle
  • Exemple: {{userRole}} === 'admin' pour afficher le minuteur uniquement pour les utilisateurs administrateur
Validation Avancée du Minuteur

Options de Style​

Mise en Page​

  • Largeur: Définissez une largeur personnalisée pour l'affichage du minuteur
  • Noms de Classes: Ajouter des classes CSS personnalisées pour le style
  • Classes Dynamiques: Expressions JavaScript pour le style conditionnel

Apparence​

  • Placeholder: Non applicable pour le widget minuteur
  • Bordure: Activer/désactiver la bordure autour du minuteur
  • Mise en Page Inline: Afficher le minuteur inline avec d'autres éléments
Style du Minuteur

Règles et Validation​

Règles de Validation Personnalisées​

Ajoutez des règles de validation pour assurer une utilisation appropriée du minuteur :

  • Requis: Rendre l'interaction du minuteur obligatoire
  • Règles Personnalisées: Fonctions de validation basées sur JavaScript
  • Messages d'Erreur: Messages d'erreur personnalisés pour les échecs de validation
Règles de Validation du Minuteur

Instructions d'Utilisation​

Configuration de Base​

  1. Ajouter le Widget Minuteur: Faites glisser le widget Minuteur vers votre interface
  2. Définir le Nom du Modèle: Choisissez un nom de variable unique (par exemple, workTimer)
  3. Configurer le Type de Compte: Sélectionnez « Haut » ou « Bas » selon vos besoins
  4. Définir la Durée: Entrez la durée en secondes

Exemple de Minuteur Compte à Partir de Zéro​

Configuration :

  • Type de Compte : Haut
  • Durée : 3600 (1 heure)
  • Modèle : workSession

Comportement :

  • Commence à 00:00:00
  • Compte à partir de zéro : 00:00:01, 00:00:02, etc.
  • Affiche « (+) 01:00:01 » lorsque l'heure est dépassée

Exemple de Minuteur Compte à Rebours​

Configuration :

  • Type de Compte : Bas
  • Durée : 1800 (30 minutes)
  • Modèle : breakTimer

Comportement :

  • Commence à 00:30:00
  • Compte à rebours : 00:29:59, 00:29:58, etc.
  • Affiche « (-) 00:00:01 » lorsqu'il descend en dessous de zéro

Contrôles du Minuteur​

Le widget minuteur fournit les méthodes suivantes qui peuvent être appelées par programmation :

  • startTimer(): Démarre ou reprend le minuteur
  • stopTimer(): Met en pause le minuteur et commence le suivi du temps d'interruption

Modèle de Données​

Variables Générées​

Lorsque vous créez un minuteur avec le nom de modèle timerName, le système crée automatiquement :

Variables Principales​

  • timerName: Chaîne de temps formatée (format HH:MM:SS)
  • timerName_runTime: Temps d'exécution total en secondes
  • timerName_breakTime: Temps d'interruption total en secondes

Utilisation dans d'Autres Composants​

Accédez aux données du minuteur dans d'autres widgets ou actions :

// Obtenir le temps formaté
let currentTime = {{timerName}};

// Obtenir le temps d'exécution brut en secondes
let runSeconds = {{timerName_runTime}};

// Calculer le temps de travail net (temps d'exécution moins les interruptions)
let netTime = {{timerName_runTime}} - {{timerName_breakTime}};

Fonctionnalités Avancées​

Gestion du Temps d'Interruption​

Le minuteur suit automatiquement les périodes d'interruption :

  • Lorsque stopTimer() est appelée, le suivi du temps d'interruption commence
  • Le temps d'interruption continue jusqu'à ce que startTimer() soit appelée à nouveau
  • Le temps d'exécution et le temps d'interruption augmentent tous les deux pendant les périodes d'interruption

Logique de Calcul du Temps​

Mode Compte à Partir de Zéro​

time = runTime - breakTime;
if (duration && time > duration) {
  prefix = "(+) ";
}

Mode Compte à Rebours​

time = duration - (runTime - breakTime);
if (time < 0) {
  time = Math.abs(time);
  prefix = "(-) ";
}

Intégration avec les Formulaires​

Le minuteur s'intègre facilement à la validation des formulaires :

  • Peut être marqué comme champ requis
  • Supporte la soumission du formulaire avec les données du minuteur
  • Valide l'état du minuteur avant le traitement du formulaire

Gestion des Événements​

Événements onClick​

Configurez les actions pour se déclencher lorsque l'affichage du minuteur est cliqué :

  • Naviguer vers la page de suivi détaillé du temps
  • Afficher les statistiques du minuteur
  • Exporter les données de temps

Intégration au Formulaire​

Le minuteur met à jour automatiquement les données du formulaire lorsque :

  • Le minuteur démarre ou s'arrête
  • Les valeurs de temps changent
  • Le formulaire est soumis

Meilleures Pratiques​

Optimisation des Performances​

  • Utilisez des valeurs de durée appropriées (évitez les nombres extrêmement grands)
  • Considérez l'impact de plusieurs minuteurs sur les performances de la page
  • Implémentez un nettoyage approprié lorsque les minuteurs ne sont pas nécessaires

Expérience Utilisateur​

  • Fournissez des indicateurs visuels clairs pour l'état du minuteur
  • Utilisez le type de compte approprié pour le cas d'utilisation
  • Incluez des instructions pour les utilisateurs sur la façon d'utiliser le minuteur

Gestion des Données​

  • Enregistrez régulièrement les données du minuteur pour éviter les pertes
  • Considérez la synchronisation côté serveur pour les données de timing importantes
  • Implémentez des mécanismes de sauvegarde pour le suivi du temps critique

Dépannage​

Problèmes Courants​

Minuteur ne Démarre Pas​

  • Vérifiez si le widget est activé et visible
  • Vérifiez la console JavaScript pour les erreurs
  • Assurez-vous d'une configuration correcte du nom du modèle

Affichage du Temps Incorrect​

  • Vérifiez que la durée est définie en secondes
  • Vérifiez que le type de compte correspond au comportement prévu
  • Validez la logique de calcul du temps

Problèmes de Performance​

  • Limitez le nombre de minuteurs actifs par page
  • Vérifiez les fuites mémoire dans la gestion des intervalles
  • Surveillez les performances du navigateur avec les outils de développement

Compatibilité des Navigateurs​

  • Supporte tous les navigateurs modernes
  • Utilise les fonctions de timing JavaScript standard
  • La conception réactive fonctionne sur les appareils mobiles

Implémentation Technique​

Dépendances​

  • Framework Vue.js
  • Composants Element UI
  • Fonctions de timing JavaScript standard

Exigences du Navigateur​

  • Navigateur moderne avec JavaScript activé
  • Support des fonctions setInterval/clearInterval
  • Support CSS3 pour le style

Considérations de Sécurité​

  • Les données du minuteur doivent être validées côté serveur
  • Considérez la limitation du débit pour les opérations du minuteur
  • Implémentez une gestion appropriée des sessions pour les minuteurs persistants