From 74f71a0ca3b134128118010092b720b559725539 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Sat, 13 Apr 2024 15:49:49 +0200
Subject: [PATCH] =?UTF-8?q?Refonte=20de=20la=20page=20de=20debug=20MQTT=20?=
 =?UTF-8?q?pour=20y=20ajouter=20un=20UX=20design,=20rajout=20=C3=A9galemen?=
 =?UTF-8?q?t=20du=20timestamp=20dans=20le=20retour=20de=20console?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/MQTTDebugConsole.vue | 52 +++++++++++++++++++++++---
 ui/src/components/MQTTDebugPublish.vue | 47 ++++++++++++++++++-----
 ui/src/views/MQTTDebugView.vue         | 15 ++++++++
 3 files changed, 98 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/MQTTDebugConsole.vue b/ui/src/components/MQTTDebugConsole.vue
index c18eb5d..cb8d9e2 100644
--- a/ui/src/components/MQTTDebugConsole.vue
+++ b/ui/src/components/MQTTDebugConsole.vue
@@ -1,8 +1,19 @@
 <template>
-  <div>
-    <h1>Console MQTT</h1>
-    <div v-for="(message, index) in messages" :key="index">{{ message }}</div>
-  </div>
+  <v-container class="v-container-style">
+    <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 }} </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>
diff --git a/ui/src/components/MQTTDebugPublish.vue b/ui/src/components/MQTTDebugPublish.vue
index e2b7e2d..d90a11b 100644
--- a/ui/src/components/MQTTDebugPublish.vue
+++ b/ui/src/components/MQTTDebugPublish.vue
@@ -1,12 +1,18 @@
 <template>
-  <div>
-    <h1>Publier sur MQTT</h1>
-    <select v-model="selectedTopic">
-      <option v-for="topic in topics" :key="topic">{{ topic }}</option>
-    </select>
-    <input type="text" v-model="message" placeholder="Saisissez votre message" />
-    <button @click="publishMessage">Publier sur MQTT</button>
-  </div>
+  <v-container class="v-container-style">
+      <v-card tile outlined width="500">
+        <v-card-title class="card__title primary centered-title">
+          <v-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon>
+          Publier un message
+        </v-card-title>
+        <div class="input-style">
+          <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',
-        'topic2',
+        '/display/control',
+        '/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>
\ No newline at end of file
diff --git a/ui/src/views/MQTTDebugView.vue b/ui/src/views/MQTTDebugView.vue
index d4ed782..3cb798a 100644
--- a/ui/src/views/MQTTDebugView.vue
+++ b/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>