61 lines
1.9 KiB
Vue
61 lines
1.9 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>
|
|
<v-container class="text-center">
|
|
<div v-for="(log, index) in messageLogs" :key="index">
|
|
<v-label class="v-label-timestamp">{{ log.timestamp }} </v-label> -
|
|
<v-label>{{ log.message }}</v-label>
|
|
</div>
|
|
</v-container>
|
|
</v-card>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { subscribeToTopic } from '@/services/mqttService'
|
|
|
|
export default {
|
|
data() { return {
|
|
messageLogs: [] // Initialiser un tableau pour stocker les messages MQTT avec horodatage
|
|
}
|
|
},
|
|
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, message: `Topic : ${topic} - Message : ${message}` });
|
|
|
|
// Limiter la liste à 10 messages
|
|
if (this.messageLogs.length > 27) {
|
|
this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)
|
|
} }) // S'abonner à tous les topics MQTT
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.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-weight: 700;
|
|
color: #d42828;
|
|
}
|
|
</style>
|