From 723b6ce9f597fcaf53a9e7e24f44459cf70d9972 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 22:00:11 +0100
Subject: [PATCH] =?UTF-8?q?Cr=C3=A9ation=20du=20composant=20WebSocket=20po?=
 =?UTF-8?q?ur=20dialoguer=20avec=20le=20service=20DMX=20Manager?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/WSDebugControl.vue | 102 +++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 ui/src/components/WSDebugControl.vue

diff --git a/ui/src/components/WSDebugControl.vue b/ui/src/components/WSDebugControl.vue
new file mode 100644
index 0000000..688872b
--- /dev/null
+++ b/ui/src/components/WSDebugControl.vue
@@ -0,0 +1,102 @@
+<template>
+   <v-container class="v-container-style-console-dmx"> 
+      <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>     
+            Console DMX
+         </v-card-title>   
+         <v-container class="text-center">     
+            <v-label v-if="!isConnected">Connecting...</v-label>
+            <div class="button-container">
+                <v-btn class="v-btn-dmx white" @click="handleButtonPress(2, 1)" :disabled="!isConnected">Rouge</v-btn>
+                <v-btn class="v-btn-dmx red" @click="handleButtonPress(7, 1)" :disabled="!isConnected">Rouge</v-btn>
+                <v-btn class="v-btn-dmx green" @click="handleButtonPress(8, 1)" :disabled="!isConnected">Vert</v-btn>
+                <v-btn class="v-btn-dmx blue" @click="handleButtonPress(9, 1)" :disabled="!isConnected">Blue</v-btn>
+            </div>
+         </v-container> 
+      </v-card>
+   </v-container>
+</template>
+
+  <script>
+  import { ref, onMounted } from 'vue';
+  import { connectWebSocket, sendButtonPress } from '../../../services/light-manager-DMX.js';
+  
+  export default {
+    setup() {
+      const websocketUrl = 'ws://192.168.1.78:9999/qlcplusWS';
+      const isConnected = ref(false);
+  
+      // Fonction pour connecter le WebSocket et mettre à jour l'état de la connexion
+      const connect = () => {
+        connectWebSocket(websocketUrl);
+        isConnected.value = true;  // Mettre à jour l'état de la connexion
+      };
+  
+      onMounted(() => {
+        connect();
+      });
+  
+      const handleButtonPress = (id, state) => {
+        sendButtonPress(id, state);
+              // Pause de 2 secondes
+        setTimeout(() => {
+            sendButtonPress(id, !state);
+        }, 500); // 2000 millisecondes = 2 secondes
+  
+      };
+  
+      return {
+        handleButtonPress,
+        isConnected,
+      };
+    },
+  };
+  </script>
+  
+<style scoped>
+  .v-container-style-console-dmx { 
+      justify-content: center;
+      position: sticky;
+      top: 50px; /* Distance depuis le haut de la fenêtre avant de "coller" */
+  }
+  .centered-title { 
+      text-align: center;
+  }
+  .v-label-timestamp{ 
+      opacity: 100%; 
+      font-style: oblique;
+      font-weight: 400; 
+      color: #838383;
+  }
+  .button-container{
+    display: flex; /* Active le mode Flexbox */
+    justify-content: space-around; /* Répartit les boutons équitablement */
+    align-items: center; /* Aligne les boutons verticalement */
+    text-align: center;
+    margin-top: 12px;
+    margin-bottom: 27px;
+    margin-left: 15px;
+    margin-right: 13px;
+    }
+  .v-btn-dmx{
+    width: 100px;
+    margin: 2% auto 0; /* 5% de marge en bas pour espacer les boutons */
+    
+  }
+  .v-btn-dmx.white{ 
+    background-color:#ffffff;
+    color: #000000;
+  }
+  .v-btn-dmx.red{ 
+    background-color: rgba(var(--v-theme-primary));
+  }
+
+  .v-btn-dmx.green{ 
+    background-color: rgba(var(--v-theme-GreenBuzzer));
+  }
+
+  .v-btn-dmx.blue{ 
+    background-color: rgba(var(--v-theme-BlueBuzzer));
+  }
+  </style>
\ No newline at end of file