Widget Minuteur

Aperçu#Lien direct vers 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.

Options de Configuration#Lien direct vers Options de Configuration

Configuration de Base#Lien direct vers Configuration de Base

Identité du Widget#Lien direct vers 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#Lien direct vers Paramètres du Minuteur

Type de Compte#Lien direct vers 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#Lien direct vers 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)

Paramètres de Validation#Lien direct vers 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#Lien direct vers 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 Avancée#Lien direct vers 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

Options de Style#Lien direct vers Options de Style

Mise en Page#Lien direct vers 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#Lien direct vers 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

Règles et Validation#Lien direct vers Règles et Validation

Règles de Validation Personnalisées#Lien direct vers 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

Instructions d'Utilisation#Lien direct vers Instructions d'Utilisation

Configuration de Base#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Modèle de Données

Variables Générées#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Fonctionnalités Avancées

Gestion du Temps d'Interruption#Lien direct vers 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#Lien direct vers Logique de Calcul du Temps

Mode Compte à Partir de Zéro#Lien direct vers Mode Compte à Partir de Zéro

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

Mode Compte à Rebours#Lien direct vers Mode Compte à Rebours

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

Intégration avec les Formulaires#Lien direct vers 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#Lien direct vers Gestion des Événements

Événements onClick#Lien direct vers É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#Lien direct vers 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#Lien direct vers Meilleures Pratiques

Optimisation des Performances#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Dépannage

Problèmes Courants#Lien direct vers Problèmes Courants

Minuteur ne Démarre Pas#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers 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#Lien direct vers Implémentation Technique

Dépendances#Lien direct vers Dépendances

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

Exigences du Navigateur#Lien direct vers Exigences du Navigateur

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

Considérations de Sécurité#Lien direct vers 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