BrainBlast/ui/src/components/MQTTDebugConsole.vue

<template>
  <v-container class="v-container-style">
    <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 > 10) {
        this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)
      }
    }) // S'abonner à tous les topics MQTT
  }
}
</script>

<style>
  .v-container-style {
    display: flex;
    justify-content: center;
  }
  .centered-title {
    text-align: center;
  }
  .v-label-timestamp{
    opacity: 100%;
    font-weight: 700;
    color: #e91e1e;
  }
</style>