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>
|
||||
<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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user