asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Ajout du filtre de topic dans la console MQTT + la possibilité de bloquer le défilement

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-12-23 21:56:18 +01:00
parent 883215ecbe
commit 71d4445d27
1 changed files with 100 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

140
ui/src/components/MQTTDebugConsole.vue
View File

@ -1,51 +1,111 @@
<template>
<v-container class="v-container-style-console">
<v-card tile outlined width="500">
<v-card-title class="card__title primary centered-title">
<v-icon left class="pr-5 pl-2" size="40">mdi-console-line</v-icon>
Console MQTT
</v-card-title>
<v-container class="text-center">
<div v-for="(log, index) in messageLogs" :key="index">
<v-label class="v-label-timestamp">{{ log.timestamp }} -&nbsp;</v-label>
<v-label class="v-label-topic-message-title">Topic :&nbsp;</v-label><v-label class="v-label-topic-message">{{ log.topic }}&nbsp;</v-label>
<v-label class="v-label-topic-message-title">Msg :&nbsp;</v-label><v-label class="v-label-topic-message">{{ log.message }}</v-label>
</div>
</v-container>
</v-card>
<v-container class="v-container-style-console">
<v-card tile outlined width="500">
<v-card-title class="card__title primary centered-title">
<v-icon left class="pr-5 pl-2" size="40">mdi-console-line</v-icon>
Console MQTT
</v-card-title>
<div class="div_topic">
<v-select density="compact" label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>
<div class="button_div_style">
<v-btn rounded @click="resetTopicFilter" color="primary">Unfilter</v-btn>
<v-btn rounded :class="{'scrolling-paused': scrollingState, 'scrolling-active': !scrollingState}" @click="toggleScrollingState">
<v-icon>{{ scrollingState ? 'mdi-pause' : 'mdi-play' }}</v-icon>
</v-btn>
</div>
</div>
<v-container class="text-center">
<!-- Afficher les messages filtrés -->
<div v-for="(log, index) in filteredLogs" :key="index">
<v-label class="v-label-timestamp">{{ log.timestamp }} -&nbsp;</v-label>
<v-label class="v-label-topic-message-title">Topic :&nbsp;</v-label>
<v-label class="v-label-topic-message">{{ log.topic }}&nbsp;</v-label>
<v-label class="v-label-topic-message-title">Msg :&nbsp;</v-label>
<v-label class="v-label-topic-message">{{ log.message }}</v-label>
</div>
</v-container>
</v-card>
</v-container>
</template>
</template>
<script>
import { subscribeToTopic } from '@/services/mqttService'
import { subscribeToTopic } from '@/services/mqttService';
export default {
data() { return {
messageLogs: [] // Initialiser un tableau pour stocker les messages MQTT avec horodatage
export default {
data() {
return {
messageLogs: [], // Stocke les messages MQTT
selectedTopic: '', // Topic sélectionné dans la liste déroulante (vide pour afficher tous les messages)
topics: [], // Liste des topics uniques
scrollingState: true,
};
},
created() {
// S'abonner à tous les topics MQTT dès le départ
subscribeToTopic('#', (topic, message) => {
this.handleMessage(topic, message);
});
},
methods: {
// Fonction pour gérer l'ajout du message avec timestamp
handleMessage(topic, message) {
const timestamp = new Date().toLocaleString('fr-FR', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
});
if (this.scrollingState === true){
// Ajouter le topic à la liste s'il n'existe pas déjà
if (!this.topics.includes(topic)) {
this.topics.push(topic);
}
// Ajouter le message avec l'horodatage et le topic
this.messageLogs.unshift({ timestamp, topic, message });
// Limiter la liste des messages à 26 éléments
if (this.messageLogs.length > 20) {
this.messageLogs.pop();
}
},
created() {
subscribeToTopic('#', (topic, message) => { // Obtenir l'horodatage actuel
const timestamp = new Date().toLocaleString('fr-FR', {
hour12: false,
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
});
// Ajouter le message avec l'horodatage à la liste des messages
this.messageLogs.push({ timestamp, topic: `${topic}`, message: `${message}` });
//this.messageLogs.push({ timestamp, message: `${message}` });
// Limiter la liste à 10 messages
if (this.messageLogs.length > 26) {
this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)
} }) // S'abonner à tous les topics MQTT
}
}
},
// Fonction pour réinitialiser la sélection du topic et afficher tous les messages
resetTopicFilter() {
this.selectedTopic = ''; // Réinitialiser la sélection pour afficher tous les messages
},
toggleScrollingState() {
this.scrollingState = !this.scrollingState; // Réinitialiser la sélection pour afficher tous les messages
}
},
computed: {
// Filtrer les messages en fonction du topic sélectionné
filteredLogs() {
if (!this.selectedTopic) {
return this.messageLogs; // Aucun filtre, afficher tous les messages
}
return this.messageLogs.filter((log) => log.topic === this.selectedTopic);
},
},
};
</script>
<style>
<style scoped>
.scrolling-paused{
background-color: rgba(var(--v-theme-primary)) !important;
}
.scrolling-active{
background-color: rgba(var(--v-theme-success)) !important;
}
.button_div_style{
justify-content: space-evenly;
display: flex;
}
.div_topic{
text-align: center !important;
padding: 5% 4% 1% 4%;
}
.v-container-style-console {
display: flex;
justify-content: center;
@ -64,7 +124,7 @@
.v-label-topic-message-title{
opacity: 100%;
font-weight: 700;
color: #d42828;
color: rgba(var(--v-theme-primary));
}
.v-label-topic-message{
font-weight: 300;