Ajout de la fonctionnalité de réduction de card lorsque l'on clique sur une des trois card dans le gamecontrol

ui/src/components/CardControl.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-card tile outlined class="card">
-    <v-card-title class="card__title primary">
+  <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
+    <v-card-title class="card__title primary" @click="toggleCardSize">
       <v-icon left class="white--text pr-5 pl-2" size="40">mdi-camera-control</v-icon>
       Contrôles
     </v-card-title>
@@ -33,4 +33,22 @@
 
 <script setup>
   import MqttButton from './MqttButton.vue';
+  import { ref } from 'vue';
+
+  // Variable pour contrôler l'état de la carte
+  const isCardReduced = ref(false);
+
+  // Méthode pour basculer l'état de la carte
+  function toggleCardSize() {
+    isCardReduced.value = !isCardReduced.value;
+  }
 </script>
+
+<style>
+.card--reduced {
+    height: 56px; /* Réglez la hauteur réduite selon vos besoins */
+    width: 170px;
+    overflow: hidden;
+    transition: height 0.3s ease-in-out;
+  }
+</style>

ui/src/components/CardSolution.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-card tile outlined class="card">
-    <v-card-title class="card__title feedback">
+  <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
+    <v-card-title class="card__title feedback" @click="toggleCardSize">
       <v-icon left class="white--text pr-5 pl-2" size="40">mdi-play-network-outline</v-icon>
       Solution
     </v-card-title>
@@ -27,4 +27,22 @@
     display: block; /* Pour éviter l'espace réservé pour les images */
   }
 }
+.card--reduced {
+    height: 56px; /* Réglez la hauteur réduite selon vos besoins */
+    width: 160px;
+    overflow: hidden;
+    transition: height 0.6s ease-in-out;
+  }
 </style>
+
+<script setup>
+  import { ref } from 'vue';
+
+  // Variable pour contrôler l'état de la carte
+  const isCardReduced = ref(false);
+
+  // Méthode pour basculer l'état de la carte
+  function toggleCardSize() {
+    isCardReduced.value = !isCardReduced.value;
+  }
+</script>

ui/src/components/CardSoundboard.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-card tile outlined class="card">
-    <v-card-title class="card__title primary">
+  <v-card tile outlined :class="{ 'card--reduced': isCardReduced }">
+    <v-card-title class="card__title primary" @click="toggleCardSize">
       <v-icon left class="white--text pr-5 pl-2" size="40">mdi-music-box-multiple</v-icon>
       Soundboard
     </v-card-title>
@@ -40,4 +40,22 @@
 
 <script setup>
   import MqttButton from './MqttButton.vue';
+  import { ref } from 'vue';
+
+  // Variable pour contrôler l'état de la carte
+  const isCardReduced = ref(false);
+
+  // Méthode pour basculer l'état de la carte
+  function toggleCardSize() {
+    isCardReduced.value = !isCardReduced.value;
+  }
 </script>
+
+<style scoped>
+  .card--reduced {
+    height: 56px; /* Réglez la hauteur réduite selon vos besoins */
+    width: 190px;
+    overflow: hidden;
+    transition: height 0.3s ease-in-out;
+  }
+</style>

ui/src/config.js

@@ -4,5 +4,13 @@
 
 // config.js
 export default {
-  mqttBrokerUrl: 'ws://192.168.1.78:9001'
+  mqttBrokerUrl: 'ws://192.168.1.78:9001',
+
+  // Buzzer
+  redBuzzerIP: '',
+  blueBuzzerIP: '',
+  orangeBuzzerIP: '',
+  greenBuzzerIP: ''
+
+  // Light
 };

ui/src/services/buzzerWatcher.js

@@ -0,0 +1,66 @@
+// index.js
+import Vue from 'vue';
+import Vuex from 'vuex';
+import ping from 'ping';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  state: {
+    buzzerRedState: '',
+    buzzerBlueState: '',
+    buzzerOrangeState: '',
+    buzzerGreenState: ''
+  },
+  mutations: {
+    setBuzzerRedState(state, newState) {
+      state.buzzerRedState = newState;
+    },
+    setBuzzerBlueState(state, newState) {
+      state.buzzerBlueState = newState;
+    },
+    setBuzzerOrangeState(state, newState) {
+      state.buzzerOrangeState = newState;
+    },
+    setBuzzerGreenState(state, newState) {
+      state.buzzerGreenState = newState;
+    }
+  },
+  actions: {
+    updateBuzzerStates({ commit }, { index, newState }) {
+      switch (index) {
+        case 0:
+          commit('setBuzzerRedState', newState);
+          break;
+        case 1:
+          commit('setBuzzerBlueState', newState);
+          break;
+        case 2:
+          commit('setBuzzerOrangeState', newState);
+          break;
+        case 3:
+          commit('setBuzzerGreenState', newState);
+          break;
+        default:
+          console.error('Index de buzzer invalide:', index);
+      }
+    }
+  }
+});
+
+const hosts = ['192.168.1.1', '192.168.1.2', '192.168.1.3', '192.168.1.4'];
+
+async function pingHosts() {
+  hosts.forEach(async (host, index) => {
+    try {
+      const res = await ping.promise.probe(host);
+      store.dispatch('updateBuzzerStates', { index, newState: res.alive ? 'ON' : 'OFF' });
+    } catch (error) {
+      console.error(`Erreur lors du ping de ${host}:`, error.message);
+    }
+  });
+}
+
+pingHosts();
+
+module.exports = store;