ui/src/components/MQTTColorPublisher.vue

@@ -1,95 +0,0 @@
-<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> 
-      <v-row>
-        <v-col cols="6" class="color-picker-style">
-          <div>
-            <v-color-picker mode="hex" v-model="selectedColor" border="md" width="250"></v-color-picker>
-            <v-btn class="v-btn-style-validate" height="35" @click="publisCustomColor">Publier</v-btn>  
-        </div>
-        </v-col>
-        <v-col cols="5.5" class="button-container">
-          <v-btn color="#D42828" class="team-button" @click="publisButtonColor('#D42828')">Team Rouge</v-btn>
-          <v-btn color="#FF7518" class="team-button" @click="publisButtonColor('#FF7518')">Team Orange</v-btn>
-          <v-btn color="#00FF1F" class="team-button" @click="publisButtonColor('#00FF1F')">Team Verte</v-btn>
-          <v-btn color="#007AFF" class="team-button" @click="publisButtonColor('#007AFF')">Team Bleue</v-btn>
-          <v-btn color="#FFFC00" class="team-button" @click="publisButtonColor('#FFFC00')">Team Jaune</v-btn>
-        </v-col>
-      </v-row>
-    </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',
-        '/wled/1',
-        '/wled/2',
-        '/wled/3',
-        '/wled/4',
-        '/wled/5'
-      ]
-    }
-},
-  methods: { 
-    publisCustomColor() {   
-      publishMessage(this.selectedTopic, this.selectedColor)
-    },
-    publisButtonColor(param) {   
-      publishMessage(this.selectedTopic, param)
-    },
-    
-  }
-}
-</script>
-
-<style>
-  .v-container-style { 
-    align-items: center; 
-    justify-content: center;
-  }
-  .input-style{ 
-    margin: 20px;
-  }
-  .v-btn-style-validate{ 
-    border-top-right-radius: 0%; 
-    border-top-left-radius: 0%;
-  }
-  .centered-title { 
-    text-align: center;
-  }
-  .color-picker-style {
-    margin-left: 5%;
-    margin-bottom: 5%;
-    display: flex;
-  }
-  .button-container {
-  text-align: center;
-  margin-top: 12px;
-  margin-bottom: 27px;
-  margin-left: 15px;
-  margin-right: 13px;
-}
-  .team-button {
-    width: 140px;
-    display: block;
-    margin: 12% auto 0; /* 5% de marge en bas pour espacer les boutons */
-    background-color: #d42828;
-  }
-</style>

ui/src/components/MQTTDebugConsole.vue

@@ -1,5 +1,5 @@
 <template>
-   <v-container class="v-container-style-console"> 
+   <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>     
@@ -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 > 26) {     
+      if (this.messageLogs.length > 10) {     
       this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)   
       } }) // S'abonner à tous les topics MQTT
    }
@@ -43,11 +43,9 @@
 </script>
 
 <style>
-  .v-container-style-console { 
+  .v-container-style { 
    display: flex; 
    justify-content: center;
-   position: sticky;
-   top: 50px; /* Distance depuis le haut de la fenêtre avant de "coller" */
   }
   .centered-title { 
    text-align: center;

ui/src/components/MQTTDebugPublish.vue

@@ -8,9 +8,7 @@
       <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>       
+      </div>       <v-btn class="v-btn-style" height="50" @click="publishMessage">Publier</v-btn>   
-      <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>
 
@@ -21,22 +19,13 @@ import { publishMessage } from '@/services/mqttService'
 
 export default {
   data() { return {   message: '', // Initialiser la variable message   
-    selectedTopic: 'Selectionnez un topic',   
+    selectedTopic: 'topic1',   
-    topics: [     
+    topics: [     '/display/control',     '/sound/playsound',     'topic3',     'topic4',     'topic5',     'topic6',     'topic7',     'topic8',     'topic9',     'topic10'   ] // Liste des topics 
-      '/wled/all',     
-      '/display/control',     
-      '/sound/playsound'
-    ] // Liste des topics 
   }
 },
   methods: { 
-    publisCustomMessage() {   
+    publishMessage() {   
-      publishMessage(this.selectedTopic, this.message)
+      publishMessage(this.selectedTopic, this.message) }
-    },
-    publishBuzzerUnblock() {   
-      publishMessage('brainblast/buzzer/unlock', "0")  
-    }
-    
   }
 }
 </script>
@@ -49,12 +38,7 @@ export default {
   .input-style{ 
     margin: 20px;
   }
-  .v-btn-style-standalone{ 
+  .v-btn-style{ 
-    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%; 

ui/src/views/MQTTDebugView.vue

@@ -1,42 +1,15 @@
 <template>
-  <v-row>
+  <div> <!-- Zone pour publier sur MQTT --> <PublishMQTTComponent />
-    
+ <!-- Zone pour afficher la console MQTT --> <MQTTConsoleComponent />
-  </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 MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour la console MQTT
-import MQTTColorPublisher from '@/components/MQTTColorPublisher.vue' // Importer le composant pour publier sur MQTT
 
 export default {
-  components: { 
+  components: { PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT
-    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>