Merge branch 'main' of https://projects.cloudsucks.net/asco.fablab/BrainBlast

ui/src/components/MQTTColorPublisher.vue

@@ -0,0 +1,95 @@
+<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"> 
+   <v-container class="v-container-style-console"> 
       <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 > 10) {     
+      if (this.messageLogs.length > 26) {     
       this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)   
       } }) // S'abonner à tous les topics MQTT
    }
@@ -43,9 +43,11 @@
 </script>
 
 <style>
-  .v-container-style { 
+  .v-container-style-console { 
    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,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',   
+    selectedTopic: 'Selectionnez un topic',   
-    topics: [     '/display/control',     '/sound/playsound',     'topic3',     'topic4',     'topic5',     'topic6',     'topic7',     'topic8',     'topic9',     'topic10'   ] // Liste des topics 
+    topics: [     
+      '/wled/all',     
+      '/display/control',     
+      '/sound/playsound'
+    ] // Liste des topics 
   }
 },
   methods: { 
-    publishMessage() {   
+    publisCustomMessage() {   
-      publishMessage(this.selectedTopic, this.message) }
+      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%; 

ui/src/views/MQTTDebugView.vue

@@ -1,15 +1,42 @@
 <template>
-  <div> <!-- Zone pour publier sur MQTT --> <PublishMQTTComponent />
+  <v-row>
- <!-- 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 la console 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
+  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>