From 62bd29d75204aa18707faf223cb98e28759a6558 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Tue, 5 Nov 2024 18:26:59 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20du=20colorpicker=20sur=20la=20page=20de?=
 =?UTF-8?q?=20d=C3=A9bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/MQTTColorPublisher.vue | 72 ++++++++++++++++++++++++
 ui/src/components/MQTTDebugConsole.vue   |  4 +-
 ui/src/components/MQTTDebugPublish.vue   | 28 +++++++--
 ui/src/views/MQTTDebugView.vue           | 29 +++++++++-
 4 files changed, 123 insertions(+), 10 deletions(-)
 create mode 100644 ui/src/components/MQTTColorPublisher.vue

diff --git a/ui/src/components/MQTTColorPublisher.vue b/ui/src/components/MQTTColorPublisher.vue
new file mode 100644
index 0000000..b423c54
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/ui/src/components/MQTTDebugConsole.vue b/ui/src/components/MQTTDebugConsole.vue
index 6d233ec..7a162f6 100644
--- a/ui/src/components/MQTTDebugConsole.vue
+++ b/ui/src/components/MQTTDebugConsole.vue
@@ -32,10 +32,10 @@
       });
       
       // Ajouter le message avec l'horodatage à la liste des messages   
-      this.messageLogs.push({ timestamp, message: `Topic: ${topic}, Message: ${message}` });
+      this.messageLogs.push({ timestamp, message: `Topic : ${topic} - Message : ${message}` });
       
       // Limiter la liste à 10 messages   
-      if (this.messageLogs.length > 10) {     
+      if (this.messageLogs.length > 27) {     
       this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)   
       } }) // S'abonner à tous les topics MQTT
    }
diff --git a/ui/src/components/MQTTDebugPublish.vue b/ui/src/components/MQTTDebugPublish.vue
index 7e32a44..4f5356a 100644
--- a/ui/src/components/MQTTDebugPublish.vue
+++ b/ui/src/components/MQTTDebugPublish.vue
@@ -8,7 +8,9 @@
       <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>   
+      </div>       
+      <v-btn class="v-btn-style-standalone" height="40" @click="publishBuzzerUnblock">Déblocage<br>Buzzer</v-btn>
+      <v-btn class="v-btn-style-validate" height="50" @click="publisCustomMessage">Publier</v-btn>   
     </v-card> 
   </v-container>
 
@@ -19,13 +21,22 @@ import { publishMessage } from '@/services/mqttService'
 
 export default {
   data() { return {   message: '', // Initialiser la variable message   
-    selectedTopic: 'topic1',   
-    topics: [     '/display/control',     '/sound/playsound',     'topic3',     'topic4',     'topic5',     'topic6',     'topic7',     'topic8',     'topic9',     'topic10'   ] // Liste des topics 
+    selectedTopic: 'Selectionnez un topic',   
+    topics: [     
+      '/wled/all',     
+      '/display/control',     
+      '/sound/playsound'
+    ] // Liste des topics 
   }
 },
   methods: { 
-    publishMessage() {   
-      publishMessage(this.selectedTopic, this.message) }
+    publisCustomMessage() {   
+      publishMessage(this.selectedTopic, this.message)
+    },
+    publishBuzzerUnblock() {   
+      publishMessage('brainblast/buzzer/unlock', "0")  
+    }
+    
   }
 }
 </script>
@@ -38,7 +49,12 @@ export default {
   .input-style{ 
     margin: 20px;
   }
-  .v-btn-style{ 
+  .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%; 
diff --git a/ui/src/views/MQTTDebugView.vue b/ui/src/views/MQTTDebugView.vue
index 5a53101..5af6c88 100644
--- a/ui/src/views/MQTTDebugView.vue
+++ b/ui/src/views/MQTTDebugView.vue
@@ -1,17 +1,42 @@
 <template>
-  <div> <!-- Zone pour publier sur MQTT --> <PublishMQTTComponent />
- <!-- Zone pour afficher la console MQTT --> <MQTTConsoleComponent />
+  <v-row>
+    
+  </v-row>
+  <div> <!-- Zone pour publier sur MQTT --> 
+ <!-- Zone pour afficher la console MQTT --> 
   </div>
+  <v-container>
+    <v-row>
+      <!-- Colonne gauche avec les deux composants empilés -->
+      <v-col cols="6">
+        <!-- Composant 1 -->
+        <v-row>
+          <v-col>
+            <PublishMQTTComponent />
+            <MQTTColorPublisher />
+
+          </v-col>
+        </v-row>
+      </v-col>
+
+      <!-- Colonne droite avec le composant unique -->
+      <v-col cols="6">
+        <MQTTConsoleComponent />
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
 import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue' // Importer le composant pour publier sur MQTT
 import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour publier sur MQTT
+import MQTTColorPublisher from '@/components/MQTTColorPublisher.vue' // Importer le composant pour publier sur MQTT
 
 export default {
   components: { 
     PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT
     MQTTConsoleComponent, // Composant pour la console MQTT
+    MQTTColorPublisher, // Composant pour publier une couleur custom dans un topic
   }
 }
 </script>