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

ui/src/components/MQTTDebugConsole.vue

@@ -5,47 +5,107 @@
          <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">
-            <div v-for="(log, index) in messageLogs" :key="index">       
+         <!-- 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">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>     
+           <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 {
+export default {
-      data() { return {   
+  data() {
-            messageLogs: [] // Initialiser un tableau pour stocker les messages MQTT avec horodatage 
+    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() {
-         subscribeToTopic('#', (topic, message) => {   // Obtenir l'horodatage actuel   
+    // 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'   
+        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 à la liste des messages   
+         // Ajouter le message avec l'horodatage et le topic
-         this.messageLogs.push({ timestamp, topic: `${topic}`, message: `${message}`  });
+         this.messageLogs.unshift({ timestamp, topic, message });
-         //this.messageLogs.push({ timestamp, message: `${message}` });
 
-         // Limiter la liste à 10 messages   
+         // Limiter la liste des messages à 26 éléments
-         if (this.messageLogs.length > 26) {     
+         if (this.messageLogs.length > 20) {
-         this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)   
+         this.messageLogs.pop();
-         } }) // 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;