Refonte de la page de debug MQTT pour y ajouter un UX design, rajout également du timestamp dans le retour de console

ui/src/components/MQTTDebugConsole.vue

@@ -1,8 +1,19 @@
 <template>
-  <div>
+  <v-container class="v-container-style">
-    <h1>Console MQTT</h1>
+    <v-card tile outlined width="500">
-    <div v-for="(message, index) in messages" :key="index">{{ message }}</div>
+      <v-card-title class="card__title primary centered-title">
-  </div>
+        <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>
@@ -11,13 +22,42 @@ import { subscribeToTopic } from '@/services/mqttService'
 export default {
   data() {
     return {
-      messages: [] // Initialiser un tableau pour stocker les messages MQTT
+      messageLogs: [] // Initialiser un tableau pour stocker les messages MQTT avec horodatage
     }
   },
   created() {
     subscribeToTopic('#', (topic, message) => {
-      this.messages.push(`Topic: ${topic}, Message: ${message}`) // Ajouter le message à la liste des messages
+      // 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>

ui/src/components/MQTTDebugPublish.vue

@@ -1,12 +1,18 @@
 <template>
-  <div>
+  <v-container class="v-container-style">
-    <h1>Publier sur MQTT</h1>
+      <v-card tile outlined width="500">
-    <select v-model="selectedTopic">
+        <v-card-title class="card__title primary centered-title">
-      <option v-for="topic in topics" :key="topic">{{ topic }}</option>
+          <v-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon>
-    </select>
+          Publier un message
-    <input type="text" v-model="message" placeholder="Saisissez votre message" />
+        </v-card-title>
-    <button @click="publishMessage">Publier sur MQTT</button>
+        <div class="input-style">
-  </div>
+          <v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>
+          <v-text-field label="Message" v-model="message" prepend-icon="mdi-text-box"></v-text-field>
+        </div>
+          <v-btn class="v-btn-style" height="50" @click="publishMessage">Publier</v-btn>
+      </v-card>
+    </v-container>
+
 </template>
 
 <script>
@@ -18,8 +24,8 @@ export default {
       message: '', // Initialiser la variable message
       selectedTopic: 'topic1',
       topics: [
-        'topic1',
+        '/display/control',
-        'topic2',
+        '/sound/playsound',
         'topic3',
         'topic4',
         'topic5',
@@ -38,3 +44,24 @@ export default {
   }
 }
 </script>
+
+<style>
+  .v-container-style {
+    align-items: center;
+    justify-content: center;
+  }
+  .input-style{
+    margin: 20px;
+  }
+  .v-btn-style{
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    background-color: #e91e1e; /* Changez la couleur en fonction de votre thème */
+    border-top-right-radius: 0%;
+    border-top-left-radius: 0%;
+  }
+  .centered-title {
+    text-align: center;
+  }
+</style>

ui/src/views/MQTTDebugView.vue

@@ -19,3 +19,18 @@ export default {
   }
 }
 </script>
+
+<style>
+@media (min-width: 1024px) {
+  .card__title.primary {
+      background-color: #e91e1e; /* Changez la couleur en fonction de votre thème */
+  }
+  .card__title.feedback {
+      background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
+  }
+  .btn{
+    border-radius:30px!important;
+    background-color: #e91e1e; /* Changez la couleur en fonction de votre thème */
+  }
+}
+</style>