Ajout du colorpicker sur la page de débug

ui/src/components/MQTTColorPublisher.vue

@@ -0,0 +1,72 @@
+<template>
+  <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 une couleur    
+      </v-card-title>     
+      <div class="input-style">       
+        <v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>   
+      </div> 
+      <div class="color-picker-style">
+        <v-color-picker mode="hex" v-model="selectedColor"></v-color-picker>
+      </div> 
+      <v-btn class="v-btn-style-validate" height="50" @click="publisCustomColor">Publier</v-btn>  
+    </v-card> 
+  </v-container>
+
+</template>
+
+<script>
+import { publishMessage } from '@/services/mqttService'
+
+export default {
+  data() { return {   message: '', // Initialiser la variable message   
+    selectedTopic: 'Selectionnez un topic',   
+    selectedColor: "#FF0000",   
+    topics: [     
+      '/wled/all'
+    ] // Liste des topics 
+  }
+},
+  methods: { 
+    publisCustomColor() {   
+      publishMessage(this.selectedTopic, this.selectedColor)
+    },
+    
+  }
+}
+</script>
+
+<style>
+  .v-container-style { 
+    align-items: center; 
+    justify-content: center;
+  }
+  .input-style{ 
+    margin: 20px;
+  }
+  .v-btn-style-standalone{ 
+    background-color: #d42828; /* Changez la couleur en fonction de votre thème */ 
+    margin-bottom: 5%;
+    margin-left: 5%;
+  }
+  .v-btn-style-validate{ 
+    align-items: center; 
+    justify-content: center; 
+    width: 100%; 
+    background-color: #d42828; /* Changez la couleur en fonction de votre thème */ 
+    border-top-right-radius: 0%; 
+    border-top-left-radius: 0%;
+  }
+  .centered-title { 
+    text-align: center;
+  }
+  .color-picker-style {
+    display: flex;
+    align-items: left; /* Centre verticalement */
+    height: 100%; /* Ajuste selon la hauteur désirée */
+    width: 100%; /* Ajuste selon la hauteur désirée */
+    padding-left: 5%;
+  }
+</style>