<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>
</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, 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
      }
   }
</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-style: oblique;
      font-weight: 400; 
      color: #838383;
  }
  .v-label-topic-message-title{ 
      opacity: 100%; 
      font-weight: 700; 
      color: #d42828;
  }
  .v-label-topic-message{ 
      font-weight: 300; 
  }

</style>
