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/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>