From 183d2fcf26daa37e11d828304a8eefaf2f94d873 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Mon, 23 Dec 2024 21:56:36 +0100
Subject: [PATCH] =?UTF-8?q?Passage=20des=20couleur=20CSS=20en=20variable?=
 =?UTF-8?q?=20de=20th=C3=A8me=20vuetify,=20oui=20j'ai=20enfin=20trouv?=
 =?UTF-8?q?=C3=A9=20bordel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/views/MQTTDebugView.vue | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/ui/src/views/MQTTDebugView.vue b/ui/src/views/MQTTDebugView.vue
index 5af6c88..44cfa15 100644
--- a/ui/src/views/MQTTDebugView.vue
+++ b/ui/src/views/MQTTDebugView.vue
@@ -1,22 +1,11 @@
 <template>
-  <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>
+      <!-- Colonne gauche avec les trois composants empilés -->
+      <v-col cols="6" class="d-flex flex-column" style="align-items: stretch; height: 100%;">
+        <PublishMQTTComponent />
+        <MQTTColorPublisher />
+        <WSDebugControl />
       </v-col>
 
       <!-- Colonne droite avec le composant unique -->
@@ -31,23 +20,30 @@
 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
+import WSDebugControl from '@/components/WSDebugControl.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
+    WSDebugControl,
   }
 }
 </script>
 
 <style>
 @media (min-width: 1024px) {
-  .card__title.primary {   background-color: #d42828; /* Changez la couleur en fonction de votre thème */
+  .card__title.primary {   
+    background-color: rgba(var(--v-theme-primary)); /* Changez la couleur en fonction de votre thème */
   }
-  .card__title.feedback {   background-color: #2E7D32; /* Changez la couleur en fonction de votre thème */
+  .card__title.feedback {   
+    background-color: rgba(var(--v-theme-success)); /* Changez la couleur en fonction de votre thème */
   }
-  .btn{ border-radius:30px!important; background-color: #d42828; /* Changez la couleur en fonction de votre thème */
+  .btn{ 
+    border-radius:30px!important; 
+    background-color: rgba(var(--v-theme-primary)); /* Changez la couleur en fonction de votre thème */
   }
 }
 </style>