134 lines
4.3 KiB
Vue
134 lines
4.3 KiB
Vue
<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>
|
|
<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 }} - </v-label>
|
|
<v-label class="v-label-topic-message-title">Topic : </v-label>
|
|
<v-label class="v-label-topic-message">{{ log.topic }} </v-label>
|
|
<v-label class="v-label-topic-message-title">Msg : </v-label>
|
|
<v-label class="v-label-topic-message">{{ log.message }}</v-label>
|
|
</div>
|
|
</v-container>
|
|
</v-card>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { subscribeToTopic } from '@/services/mqttService';
|
|
|
|
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();
|
|
}
|
|
}
|
|
},
|
|
// 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 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;
|
|
position: sticky;
|
|
top: 50px; /* Distance depuis le haut de la fenêtre avant de "coller" */
|
|
}
|
|
.centered-title {
|
|
text-align: center;
|
|
}
|
|
.v-label-timestamp{
|
|
opacity: 100%;
|
|
font-style: oblique;
|
|
font-weight: 400;
|
|
color: #838383;
|
|
}
|
|
.v-label-topic-message-title{
|
|
opacity: 100%;
|
|
font-weight: 700;
|
|
color: rgba(var(--v-theme-primary));
|
|
}
|
|
.v-label-topic-message{
|
|
font-weight: 300;
|
|
}
|
|
|
|
</style>
|