From c3d0650d9e97395bafff5cfdea29b9804f578672 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Mon, 11 Nov 2024 14:37:40 +0100
Subject: [PATCH] =?UTF-8?q?Mise=20=C3=A0=20jour=20du=20watcher=20de=20buzz?=
 =?UTF-8?q?er=20pour=20le=20transformer=20en=20composant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/BuzzerWatcherCard.vue | 120 ++++++++++++++++++++++++
 ui/src/components/GameStatus.vue        | 117 +----------------------
 2 files changed, 124 insertions(+), 113 deletions(-)
 create mode 100644 ui/src/components/BuzzerWatcherCard.vue

diff --git a/ui/src/components/BuzzerWatcherCard.vue b/ui/src/components/BuzzerWatcherCard.vue
new file mode 100644
index 0000000..569f15c
--- /dev/null
+++ b/ui/src/components/BuzzerWatcherCard.vue
@@ -0,0 +1,120 @@
+<template>
+		<div class="label-pos">
+			<v-label class="labelTitle-style">Buzzer connectés</v-label>
+		</div>
+		<v-row no-gutters justify="space-around" class="button-pos">
+			<v-icon v-bind:color="redBuzzerState == 1 ? 'RedBuzzer' : 'DisconnectedBuzzer'">mdi-radiobox-marked</v-icon>   
+			<v-icon v-bind:color="blueBuzzerState == 1 ? 'BlueBuzzer' : 'DisconnectedBuzzer'">mdi-radiobox-marked</v-icon>   
+			<v-icon v-bind:color="yellowBuzzerState == 1 ? 'YellowBuzzer' : 'DisconnectedBuzzer'">mdi-radiobox-marked</v-icon>   
+			<v-icon v-bind:color="greenBuzzerState == 1 ? 'GreenBuzzer' : 'DisconnectedBuzzer'">mdi-radiobox-marked</v-icon> 
+		</v-row>
+		<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
+</template>
+
+<script setup>
+import { subscribeToTopic } from '@/services/mqttService'
+import { onMounted, ref, onUnmounted } from 'vue';
+
+// États réactifs pour chaque buzzer
+let redBuzzerState = ref(0);
+let blueBuzzerState = ref(0);
+let greenBuzzerState = ref(0);
+let yellowBuzzerState = ref(0);
+
+// État pour surveiller la connexion générale
+let connectionStatus = ref("connected"); // "connected" ou "disconnected"
+
+// Variable pour gérer le timeout global
+let globalTimeoutHandle = null;
+
+// Fonction pour réinitialiser le timeout global
+function resetGlobalTimeout() {
+	// Effacer le timeout précédent, s'il existe
+	if (globalTimeoutHandle) {
+		clearTimeout(globalTimeoutHandle);
+	}
+
+	// Redémarrer un timeout de 5 minutes (300000 ms)
+	globalTimeoutHandle = setTimeout(() => {
+		handleGlobalTimeout(); // Appel si aucun message MQTT reçu depuis 5 minutes
+	}, 60000);
+}
+
+// Fonction à exécuter si le timeout global est atteint
+function handleGlobalTimeout() {
+	console.log("Aucun message MQTT reçu depuis plus de 5 minutes !");
+	connectionStatus.value = "disconnected"; // Indiquer que la connexion est perdue
+	redBuzzerState.value = 0;
+	blueBuzzerState.value = 0;
+	yellowBuzzerState.value = 0;
+	greenBuzzerState.value = 0;
+
+	// Tu peux ajouter ici d'autres actions, comme afficher une alerte
+}
+
+// Fonction pour traiter chaque message reçu et réinitialiser le timeout
+function handleMessage(topic, message) {
+	let parsedMessage;
+	try {
+		parsedMessage = JSON.parse(message);
+	} catch (e) {
+		console.error("Erreur d'analyse JSON:", e);
+		return;
+	}
+
+	// Extraire les informations
+	const { buzzer, status } = parsedMessage;
+
+	// Mettre à jour l'état des buzzers en fonction des messages
+	switch (buzzer) {
+		case 'redBuzzerIP':
+			redBuzzerState.value = status === "online" ? 1 : 0;
+			break;
+		case 'blueBuzzerIP':
+			blueBuzzerState.value = status === "online" ? 1 : 0;
+			break;
+		case 'yellowBuzzerIP':
+			yellowBuzzerState.value = status === "online" ? 1 : 0;
+			break;
+		case 'greenBuzzerIP':
+			greenBuzzerState.value = status === "online" ? 1 : 0;
+			break;
+	}
+
+	// Réinitialiser le timeout global car un message a été reçu
+	connectionStatus.value = "connected"; // Rétablir le statut de connexion
+	resetGlobalTimeout();
+}
+
+// S'abonner au topic lorsque le composant est monté
+onMounted(() => {
+	subscribeToTopic('buzzer/watcher', (topic, message) => {
+		handleMessage(topic, message);
+		resetGlobalTimeout(); // Réinitialiser le timeout global au démarrage
+	});
+});
+
+// Nettoyer le timeout global lorsque le composant est démonté
+onUnmounted(() => {
+	if (globalTimeoutHandle) {
+		clearTimeout(globalTimeoutHandle);
+	}
+});
+</script>
+
+<style>
+.label-pos { 
+	padding-top: 15px; 
+	text-align: center;
+}
+.labelTitle-style { 
+	font-size: 20px !important; 
+	font-weight: 500; 
+	color: #e91e1e !important; 
+	opacity: 90% !important;
+}
+.button-pos { 
+	padding-top: 10px; 
+	padding-bottom: 15px;
+}
+</style>
diff --git a/ui/src/components/GameStatus.vue b/ui/src/components/GameStatus.vue
index eeadb5d..3145855 100644
--- a/ui/src/components/GameStatus.vue
+++ b/ui/src/components/GameStatus.vue
@@ -1,126 +1,17 @@
 <template>
 	<v-navigation-drawer width="250">
-		<div class="label-pos">
-			<v-label class="labelTitle-style">Buzzer connectés</v-label>
-		</div>
-		<v-row no-gutters justify="space-around" class="button-pos">
-			<v-icon v-bind:color="redBuzzerState == 1 ? 'RedBuzzer' : 'DisconnectedBuzzer'">mdi-radiobox-marked</v-icon>   
-			<v-icon v-bind:color="blueBuzzerState == 1 ? 'BlueBuzzer' : 'DisconnectedBuzzer'">mdi-radiobox-marked</v-icon>   
-			<v-icon v-bind:color="yellowBuzzerState == 1 ? 'YellowBuzzer' : 'DisconnectedBuzzer'">mdi-radiobox-marked</v-icon>   
-			<v-icon v-bind:color="greenBuzzerState == 1 ? 'GreenBuzzer' : 'DisconnectedBuzzer'">mdi-radiobox-marked</v-icon> 
-		</v-row>
-		<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
+		<BuzzerWatcherCard/>
 		<CardScore/>
 		<CardTimer/>
 	</v-navigation-drawer>
 </template>
 
 <script setup>
-import CardTimer from '@/components/CardTimer.vue'
-import CardScore from '@/components/CardScore.vue'
-import { subscribeToTopic } from '@/services/mqttService'
-import { onMounted, ref, onUnmounted } from 'vue';
+	import CardTimer from '@/components/CardTimer.vue'
+	import CardScore from '@/components/CardScore.vue'
+	import BuzzerWatcherCard from '@/components/BuzzerWatcherCard.vue'
 
-// États réactifs pour chaque buzzer
-let redBuzzerState = ref(0);
-let blueBuzzerState = ref(0);
-let greenBuzzerState = ref(0);
-let yellowBuzzerState = ref(0);
-
-// État pour surveiller la connexion générale
-let connectionStatus = ref("connected"); // "connected" ou "disconnected"
-
-// Variable pour gérer le timeout global
-let globalTimeoutHandle = null;
-
-// Fonction pour réinitialiser le timeout global
-function resetGlobalTimeout() {
-	// Effacer le timeout précédent, s'il existe
-	if (globalTimeoutHandle) {
-		clearTimeout(globalTimeoutHandle);
-	}
-
-	// Redémarrer un timeout de 5 minutes (300000 ms)
-	globalTimeoutHandle = setTimeout(() => {
-		handleGlobalTimeout(); // Appel si aucun message MQTT reçu depuis 5 minutes
-	}, 60000);
-}
-
-// Fonction à exécuter si le timeout global est atteint
-function handleGlobalTimeout() {
-	console.log("Aucun message MQTT reçu depuis plus de 5 minutes !");
-	connectionStatus.value = "disconnected"; // Indiquer que la connexion est perdue
-	redBuzzerState.value = 0;
-	blueBuzzerState.value = 0;
-	yellowBuzzerState.value = 0;
-	greenBuzzerState.value = 0;
-
-	// Tu peux ajouter ici d'autres actions, comme afficher une alerte
-}
-
-// Fonction pour traiter chaque message reçu et réinitialiser le timeout
-function handleMessage(topic, message) {
-	let parsedMessage;
-	try {
-		parsedMessage = JSON.parse(message);
-	} catch (e) {
-		console.error("Erreur d'analyse JSON:", e);
-		return;
-	}
-
-	// Extraire les informations
-	const { buzzer, status } = parsedMessage;
-
-	// Mettre à jour l'état des buzzers en fonction des messages
-	switch (buzzer) {
-		case 'redBuzzerIP':
-			redBuzzerState.value = status === "online" ? 1 : 0;
-			break;
-		case 'blueBuzzerIP':
-			blueBuzzerState.value = status === "online" ? 1 : 0;
-			break;
-		case 'yellowBuzzerIP':
-			yellowBuzzerState.value = status === "online" ? 1 : 0;
-			break;
-		case 'greenBuzzerIP':
-			greenBuzzerState.value = status === "online" ? 1 : 0;
-			break;
-	}
-
-	// Réinitialiser le timeout global car un message a été reçu
-	connectionStatus.value = "connected"; // Rétablir le statut de connexion
-	resetGlobalTimeout();
-}
-
-// S'abonner au topic lorsque le composant est monté
-onMounted(() => {
-	subscribeToTopic('buzzer/watcher', (topic, message) => {
-		handleMessage(topic, message);
-		resetGlobalTimeout(); // Réinitialiser le timeout global au démarrage
-	});
-});
-
-// Nettoyer le timeout global lorsque le composant est démonté
-onUnmounted(() => {
-	if (globalTimeoutHandle) {
-		clearTimeout(globalTimeoutHandle);
-	}
-});
 </script>
 
 <style>
-.label-pos { 
-	padding-top: 15px; 
-	text-align: center;
-}
-.labelTitle-style { 
-	font-size: 20px !important; 
-	font-weight: 500; 
-	color: #e91e1e !important; 
-	opacity: 90% !important;
-}
-.button-pos { 
-	padding-top: 10px; 
-	padding-bottom: 15px;
-}
 </style>