From 71d4445d27e23b08767bdb84da0d95a127508d33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Mon, 23 Dec 2024 21:56:18 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20du=20filtre=20de=20topic=20dans=20la=20?=
 =?UTF-8?q?console=20MQTT=20+=20la=20possibilit=C3=A9=20de=20bloquer=20le?=
 =?UTF-8?q?=20d=C3=A9filement?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/MQTTDebugConsole.vue | 140 ++++++++++++++++++-------
 1 file changed, 100 insertions(+), 40 deletions(-)

diff --git a/ui/src/components/MQTTDebugConsole.vue b/ui/src/components/MQTTDebugConsole.vue
index d4457bc..f5fea07 100644
--- a/ui/src/components/MQTTDebugConsole.vue
+++ b/ui/src/components/MQTTDebugConsole.vue
@@ -1,51 +1,111 @@
 <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 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 }} -&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>
+ </template>
 
 <script>
-   import { subscribeToTopic } from '@/services/mqttService'
+import { subscribeToTopic } from '@/services/mqttService';
 
-   export default {
-      data() { return {   
-            messageLogs: [] // Initialiser un tableau pour stocker les messages MQTT avec horodatage 
+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();
          }
-      },
-      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
       }
-   }
+    },
+    // 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;