From 7e2e41719127d0a6253406d41237b293b12bca0a 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:27:25 +0100
Subject: [PATCH] =?UTF-8?q?Cr=C3=A9ation=20du=20BuzzerWatcher=20et=20mise?=
 =?UTF-8?q?=20=C3=A0=20jour=20des=20fichiers=20associ=C3=A9s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/CardScore.vue  | 141 +++++++++++++++++++++++++----
 ui/src/components/GameStatus.vue | 149 ++++++++++++++++++++++++-------
 ui/src/config.js                 |   8 +-
 ui/src/plugins/vuetify.js        |  20 +++--
 ui/src/services/buzzerWatcher.js |  64 -------------
 5 files changed, 259 insertions(+), 123 deletions(-)
 delete mode 100644 ui/src/services/buzzerWatcher.js

diff --git a/ui/src/components/CardScore.vue b/ui/src/components/CardScore.vue
index 3e093bb..5b43d3b 100644
--- a/ui/src/components/CardScore.vue
+++ b/ui/src/components/CardScore.vue
@@ -1,8 +1,92 @@
-<template> <div class="label-pos">     <v-label class="labelTitle-style pb-4">Scores</v-label> </div>
- <!-- Équipes Rouges et Bleues côte à côte --> <v-row no-gutters class="scorebox-pos">     <!-- Équipe Rouge -->     <v-col cols="6"> <!-- Colonnes de taille 6 pour chaque équipe -->     <v-row no-gutters>         <v-col class="scorediv-style-red">         <div>             <v-label class="labelRoundScore-style pt-3">Manche</v-label>             <div>             <v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label>             </div>         </div>         <v-divider color="background"/>         <div>             <v-label class="labelTotalScore-style pt-3">Total</v-label>             <div>             <v-label class="labelTotalScore-style pb-3">{{ RedTotalScore }}</v-label>             </div>         </div>         </v-col>     </v-row>     </v-col>
-     <!-- Équipe Bleue -->     <v-col cols="6">     <v-row no-gutters>         <v-col class="scorediv-style-blue">         <div>             <v-label class="labelRoundScore-style pt-3">Manche</v-label>             <div>             <v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label>             </div>         </div>         <v-divider color="background"/>         <div>             <v-label class="labelTotalScore-style pt-3">Total</v-label>             <div>             <v-label class="labelTotalScore-style pb-3">{{ BlueTotalScore }}</v-label>             </div>         </div>         </v-col>     </v-row>     </v-col> </v-row>
- <!-- Équipes Oranges et Vertes côte à côte --> <v-row no-gutters class="scorebox-pos">     <!-- Équipe Orange -->     <v-col cols="6">     <v-row no-gutters>         <v-col class="scorediv-style-orange">         <div>             <v-label class="labelRoundScore-style pt-3">Manche</v-label>             <div>             <v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label>             </div>         </div>         <v-divider color="background"/>         <div>             <v-label class="labelTotalScore-style pt-3">Total</v-label>             <div>             <v-label class="labelTotalScore-style pb-3">{{ OrangeTotalScore }}</v-label>             </div>         </div>         </v-col>     </v-row>     </v-col>
-     <!-- Équipe Verte -->     <v-col cols="6">     <v-row no-gutters>         <v-col class="scorediv-style-green">         <div>             <v-label class="labelRoundScore-style pt-3">Manche</v-label>             <div>             <v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label>             </div>         </div>         <v-divider color="background"/>         <div>             <v-label class="labelTotalScore-style pt-3">Total</v-label>             <div>             <v-label class="labelTotalScore-style pb-3">{{ GreenTotalScore }}</v-label>             </div>         </div>         </v-col>     </v-row>     </v-col> </v-row>
+<template>  
+  <div class="label-pos">     
+    <v-label class="labelTitle-style pb-4">Scores</v-label> 
+  </div>
+ <!-- Équipes Rouges et Bleues côte à côte --> 
+  <v-row no-gutters class="scorebox-pos">     <!-- Équipe Rouge -->     
+    <v-col cols="6"> <!-- Colonnes de taille 6 pour chaque équipe -->     
+      <v-row no-gutters>         
+        <v-col class="scorediv-style-red">         
+          <div>             
+            <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
+            <div>             
+              <v-label class="labelRoundScore-style">{{ RedRoundScore }}</v-label>             
+            </div>         
+          </div>         
+          <v-divider color="background"/>         
+          <div>             
+            <v-label class="labelTotalScore-style pt-3">Total</v-label>             
+            <div>             
+              <v-label class="labelTotalScore-style pb-3">{{ RedTotalScore }}</v-label>             
+            </div>         
+          </div>         
+        </v-col>     
+      </v-row>     
+    </v-col>
+     <!-- Équipe Bleue -->     
+      <v-col cols="6">     
+        <v-row no-gutters>         
+          <v-col class="scorediv-style-blue">         
+            <div>             
+              <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
+              <div>             
+                <v-label class="labelRoundScore-style">{{ BlueRoundScore }}</v-label>             
+              </div>         
+            </div>        
+            <v-divider color="background"/>         
+            <div>             
+              <v-label class="labelTotalScore-style pt-3">Total</v-label>             
+              <div>             
+                <v-label class="labelTotalScore-style pb-3">{{ BlueTotalScore }}</v-label>             
+              </div>         
+            </div>         
+          </v-col>     
+        </v-row>     
+      </v-col> 
+    </v-row>
+ <!-- Équipes Oranges et Vertes côte à côte --> 
+  <v-row no-gutters class="scorebox-pos">     
+    <!-- Équipe Orange -->     
+    <v-col cols="6">     
+      <v-row no-gutters>         
+        <v-col class="scorediv-style-orange">         
+          <div>             
+            <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
+            <div>             
+              <v-label class="labelRoundScore-style">{{ OrangeRoundScore }}</v-label>             
+            </div>         
+          </div>         
+          <v-divider color="background"/>         
+          <div>             
+            <v-label class="labelTotalScore-style pt-3">Total</v-label>             
+            <div>             
+              <v-label class="labelTotalScore-style pb-3">{{ OrangeTotalScore }}</v-label>             
+            </div>         
+          </div>         
+        </v-col>     
+      </v-row>     
+    </v-col>
+     <!-- Équipe Verte -->     
+      <v-col cols="6">     
+        <v-row no-gutters>         
+          <v-col class="scorediv-style-green">         
+            <div>             
+              <v-label class="labelRoundScore-style pt-3">Manche</v-label>             
+              <div>             
+                <v-label class="labelRoundScore-style">{{ GreenRoundScore }}</v-label>             
+              </div>         
+            </div>         
+            <v-divider color="background"/>         
+            <div>             
+              <v-label class="labelTotalScore-style pt-3">Total</v-label>             
+              <div>             
+                <v-label class="labelTotalScore-style pb-3">{{ GreenTotalScore }}</v-label>             
+              </div>         
+            </div>         
+          </v-col>     
+        </v-row>     
+      </v-col> 
+  </v-row>
 </template>
 
 <script setup>
@@ -22,24 +106,51 @@ const GreenRoundScore = ref(variables.GreenRoundScore);
 </script>
 
 <style>
-  .label-pos { padding-top: 15px; text-align: center;
+  .label-pos { 
+    padding-top: 15px; 
+    text-align: center;
   }
-  .labelTitle-style { font-size: 20px !important; font-weight: 500; color: #d42828 !important; opacity: 90% !important;
+  .labelTitle-style { 
+    font-size: 20px !important; 
+    font-weight: 500; 
+    color: #d42828 !important; 
+    opacity: 90% !important;
   }
-  .labelRoundScore-style { opacity: 100% !important; font-size: 25px !important; font-weight: 500;
+  .labelRoundScore-style { 
+    opacity: 100% !important; 
+    font-size: 25px !important; 
+    font-weight: 500;
   }
-  .labelTotalScore-style { opacity: 100% !important; font-size: 15px !important; font-weight: 500;
+  .labelTotalScore-style { 
+    opacity: 100% !important; 
+    font-size: 15px !important; 
+    font-weight: 500;
   }
-  .button-pos { padding-top: 10px; padding-bottom: 15px;
+  .button-pos { 
+    padding-top: 10px; 
+    padding-bottom: 15px;
   }
-  .scorebox-pos { text-align: center;
+  .scorebox-pos { 
+    text-align: center;
   }
-  .scorediv-style-red { background-color: #d42828 !important; padding: 15px; border-top-left-radius: 10%;
+  .scorediv-style-red { 
+    background-color: #d42828 !important; 
+    padding: 15px; 
+    border-top-left-radius: 10%;
   }
-  .scorediv-style-orange { background-color: #d48f28 !important; padding: 15px; border-bottom-left-radius: 10%;
+  .scorediv-style-orange { 
+    background-color: #d48f28 !important; 
+    padding: 15px; 
+    border-bottom-left-radius: 10%;
   }
-  .scorediv-style-blue { background-color: #2867d4 !important; padding: 15px; border-top-right-radius: 10%;    
+  .scorediv-style-blue { 
+    background-color: #2867d4 !important; 
+    padding: 15px; 
+    border-top-right-radius: 10%;    
   }
-  .scorediv-style-green { background-color: #28d42e !important; padding: 15px; border-bottom-right-radius: 10%;
+  .scorediv-style-green { 
+    background-color: #28d42e !important; 
+    padding: 15px; 
+    border-bottom-right-radius: 10%;
   }
 </style>
\ No newline at end of file
diff --git a/ui/src/components/GameStatus.vue b/ui/src/components/GameStatus.vue
index 2882ec7..eeadb5d 100644
--- a/ui/src/components/GameStatus.vue
+++ b/ui/src/components/GameStatus.vue
@@ -1,41 +1,126 @@
 <template>
-	<v-navigation-drawer width="250"> <!-- Augmenter la largeur pour deux équipes côte à côte --> 
-	<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 color="BuzzerRed">mdi-radiobox-marked</v-icon>   
-		<v-icon color="BuzzerBlue">mdi-radiobox-marked</v-icon>   
-		<v-icon color="BuzzerOrange">mdi-radiobox-marked</v-icon>   
-		<v-icon color="BuzzerGreen">mdi-radiobox-marked</v-icon> 
-	</v-row>
-	<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
-	<CardScore/>
-	<CardTimer/>
+	<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"/>
+		<CardScore/>
+		<CardTimer/>
 	</v-navigation-drawer>
 </template>
 
 <script setup>
-	import CardTimer from '@/components/CardTimer.vue'
-	import CardScore from '@/components/CardScore.vue'
-	import { ref } from 'vue'; // Import des fonctions de Vue 3
-	import variables from '@/variables.js';
+import CardTimer from '@/components/CardTimer.vue'
+import CardScore from '@/components/CardScore.vue'
+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>
\ No newline at end of file
+.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/config.js b/ui/src/config.js
index 89ae1b1..d480b20 100644
--- a/ui/src/config.js
+++ b/ui/src/config.js
@@ -7,10 +7,10 @@ export default {
   mqttBrokerUrl: 'ws://192.168.1.78:9001',
 
   // Buzzer
-  redBuzzerIP: '',
-  blueBuzzerIP: '',
-  orangeBuzzerIP: '',
-  greenBuzzerIP: ''
+  redBuzzerIP: '192.168.73.40',
+  blueBuzzerIP: '192.168.73.41',
+  orangeBuzzerIP: '192.168.73.42',
+  greenBuzzerIP: '192.168.73.43'
 
   // Light
 };
diff --git a/ui/src/plugins/vuetify.js b/ui/src/plugins/vuetify.js
index cd1192a..b3443ac 100644
--- a/ui/src/plugins/vuetify.js
+++ b/ui/src/plugins/vuetify.js
@@ -22,10 +22,12 @@ const CustomThemeDark = {
     warning: '#FFC107', 
     info: '#607D8B', 
     success: '#e91e1e', 
-    BuzzerBlue: '#2867d4', 
-    BuzzerOrange: '#d48f28', 
-    BuzzerRed: '#d42828', 
-    BuzzerGreen: '#28d42e',
+    BlueBuzzer: '#2867d4', 
+    OrangeBuzzer: '#d48f28', 
+    YellowBuzzer: '#C0DE00', 
+    RedBuzzer: '#d42828', 
+    GreenBuzzer: '#28d42e',
+    DisconnectedBuzzer: '#595959',
   }
 }
 const CustomThemeLight = {
@@ -39,10 +41,12 @@ const CustomThemeLight = {
     warning: '#FFC107', 
     info: '#607D8B', 
     success: '#4CAF50', 
-    BuzzerBlue: '#2867d4', 
-    BuzzerOrange: '#d48f28', 
-    BuzzerRed: '#d42828', 
-    BuzzerGreen: '#28d42e',
+    BlueBuzzer: '#2867d4', 
+    OrangeBuzzer: '#d48f28', 
+    YellowBuzzer: '#C0DE00', 
+    RedBuzzer: '#d42828', 
+    GreenBuzzer: '#28d42e',
+    DisconnectedBuzzer: '#595959',
   }
 }
 
diff --git a/ui/src/services/buzzerWatcher.js b/ui/src/services/buzzerWatcher.js
deleted file mode 100644
index a1bdcb3..0000000
--- a/ui/src/services/buzzerWatcher.js
+++ /dev/null
@@ -1,64 +0,0 @@
-// index.js
-import Vue from 'vue';
-import Vuex from 'vuex';
-import ping from 'ping';
-
-Vue.use(Vuex);
-
-const store = new Vuex.Store({
-  state: { 
-    buzzerRedState: '', 
-    buzzerBlueState: '', 
-    buzzerOrangeState: '', 
-    buzzerGreenState: ''
-  },
-  mutations: { 
-    setBuzzerRedState(state, newState) {   
-      state.buzzerRedState = newState; 
-    }, 
-    setBuzzerBlueState(state, newState) {   
-      state.buzzerBlueState = newState; 
-    }, 
-    setBuzzerOrangeState(state, newState) {   
-      state.buzzerOrangeState = newState; 
-    }, 
-    setBuzzerGreenState(state, newState) {   
-      state.buzzerGreenState = newState; 
-    }
-  },
-  actions: { 
-    updateBuzzerStates({ commit }, { index, newState }) {   
-      switch (index) {     
-        case 0:       
-          commit('setBuzzerRedState', newState);       
-          break;     
-        case 1:      
-          commit('setBuzzerBlueState', newState);       
-          break;     
-        case 2:       
-          commit('setBuzzerOrangeState', newState);       
-          break;     
-        case 3:       
-          commit('setBuzzerGreenState', newState);       
-          break;     
-        default:       
-          console.error('Index de buzzer invalide:', index);   
-      }
-    }
-  }
-});
-
-const hosts = ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'];
-
-async function pingHosts() {
-  hosts.forEach(async (host, index) => { try {   
-    const res = await ping.promise.probe(host);   
-    store.dispatch('updateBuzzerStates', {index, newState: res.alive ? 'ON' : 'OFF' }); } 
-    catch (error) {   
-      console.error(`Erreur lors du ping de ${host}:`, error.message); }
-  });
-}
-
-pingHosts();
-
-module.exports = store;