From 6c4c7f1bc487acacc2ba72e3c83fbbee62b820ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Sun, 10 Nov 2024 11:47:32 +0100
Subject: [PATCH] =?UTF-8?q?Ajustement=20de=20l'interface=20de=20console=20?=
 =?UTF-8?q?MQTT,=20couleur=20appliqu=C3=A9s=20au=20Topic=20et=20Msg=20pour?=
 =?UTF-8?q?=20bien=20trancher=20toute=20la=20ligne=20(plus=20facile=20?=
 =?UTF-8?q?=C3=A0=20lire)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/MQTTDebugConsole.vue | 34 +++++++++++++++++---------
 1 file changed, 23 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/MQTTDebugConsole.vue b/ui/src/components/MQTTDebugConsole.vue
index cc8806d..4c08da3 100644
--- a/ui/src/components/MQTTDebugConsole.vue
+++ b/ui/src/components/MQTTDebugConsole.vue
@@ -7,8 +7,9 @@
          </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>     
+               <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>
@@ -32,7 +33,8 @@
       });
       
       // Ajouter le message avec l'horodatage à la liste des messages   
-      this.messageLogs.push({ timestamp, message: `Topic : ${topic} - Message : ${message}` });
+      this.messageLogs.push({ timestamp, topic: `${topic}`, message: `${message}`  });
+      //this.messageLogs.push({ timestamp, message: `${message}` });
       
       // Limiter la liste à 10 messages   
       if (this.messageLogs.length > 26) {     
@@ -44,17 +46,27 @@
 
 <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" */
+      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;
+      text-align: center;
   }
   .v-label-timestamp{ 
-   opacity: 100%; 
-   font-weight: 700; 
-    color: #d42828;
+      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>