Mise à jour du watcher de buzzer pour le transformer en composant
This commit is contained in:
parent
8aeafd56d6
commit
c3d0650d9e
120
ui/src/components/BuzzerWatcherCard.vue
Normal file
120
ui/src/components/BuzzerWatcherCard.vue
Normal file
@ -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>
|
||||||
@ -1,126 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-navigation-drawer width="250">
|
<v-navigation-drawer width="250">
|
||||||
<div class="label-pos">
|
<BuzzerWatcherCard/>
|
||||||
<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/>
|
<CardScore/>
|
||||||
<CardTimer/>
|
<CardTimer/>
|
||||||
</v-navigation-drawer>
|
</v-navigation-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import CardTimer from '@/components/CardTimer.vue'
|
import CardTimer from '@/components/CardTimer.vue'
|
||||||
import CardScore from '@/components/CardScore.vue'
|
import CardScore from '@/components/CardScore.vue'
|
||||||
import { subscribeToTopic } from '@/services/mqttService'
|
import BuzzerWatcherCard from '@/components/BuzzerWatcherCard.vue'
|
||||||
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>
|
</script>
|
||||||
|
|
||||||
<style>
|
<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>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user