From 76383c1a3ded45c2732fa21625c9f170f8f3b08e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Fri, 5 Apr 2024 16:01:13 +0200
Subject: [PATCH] =?UTF-8?q?Ajustement=20du=20menu=20router=20pour=20cacher?=
 =?UTF-8?q?=20le=20debugger,=20il=20est=20d=C3=A9sormais=20accessible=20de?=
 =?UTF-8?q?puis=20la=20page=20param=C3=A8tre,=20onglet=20MQTT?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/RouterMenu.vue | 25 +++++++++++++++----------
 ui/src/views/SettingsView.vue    | 10 +++++++++-
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/RouterMenu.vue b/ui/src/components/RouterMenu.vue
index 4624988..4bf991d 100644
--- a/ui/src/components/RouterMenu.vue
+++ b/ui/src/components/RouterMenu.vue
@@ -2,23 +2,28 @@
   <v-app-bar-nav-icon v-on:click="menu = !menu"></v-app-bar-nav-icon>
   <v-menu v-model="menu" class="menu-below-bar">
     <v-list>
-      <v-list-item v-for="route in routes" :key="route.name" :to="route.path">{{ route.name }}</v-list-item>
+      <v-list-item v-for="route in filteredRoutes" :key="route.name" :to="route.path">{{ route.name }}</v-list-item>
     </v-list>
   </v-menu>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
-  import { useRouter } from 'vue-router'
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
 
-  const router = useRouter()
-  const routes = router.options.routes
+const router = useRouter();
+const routes = router.options.routes;
 
-  let menu = ref(false)
+let menu = ref(false);
+
+// Filtrer les routes pour masquer une route spécifique (par exemple, 'RouteA')
+const filteredRoutes = computed(() => {
+  return routes.filter(route => route.name !== 'Debugger MQTT');
+});
 </script>
 
 <style scoped>
-  .menu-below-bar {
-    margin-top: 48px; /* La hauteur de la barre d'application */
-  }
-</style>
+.menu-below-bar {
+  margin-top: 48px; /* La hauteur de la barre d'application */
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index 5a3ad49..d3362d1 100644
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -17,9 +17,11 @@
     <v-divider />
     <v-label class="title-style-2">MQTT</v-label>
     
-    <div style="display: flex; align-items: center;">
+    <div class="mutltiple-per-line">
       <v-icon v-model="MQTTBrokerState" class="ml-15 mb-5" color="error" icon="record">mdi-record</v-icon>
       <v-label class="ml-2 mb-10 mt-5">Etat du serveur MQTT</v-label>
+      <v-btn class="ml-15 mb-5" color="primary" @click="goToDebugRoute">Debugger</v-btn>
+
     </div>
     <v-divider />
 </template>
@@ -27,12 +29,18 @@
   
 <script setup>
   import { ref, onMounted, watch } from 'vue';
+  import { useRouter } from 'vue-router';
 
   const EmbeddedSound = ref(false);  // Définition d'une référence pour la case à cocher. Initialement décochée.
   const EmbeddedSoundVolume = ref(50);  // Définition d'une référence pour la case à cocher. Initialement décochée.
   const MQTTSound = ref(false);  // Définition d'une référence pour la case à cocher. Initialement décochée.
   const MQTTBrokerState = ref(false);  // Définition d'une référence pour la case à cocher. Initialement décochée.
   const SattelitesDisplay = ref(false);
+  const router = useRouter();
+
+  const goToDebugRoute = () => {
+      router.push({ name: 'Debugger MQTT' }); // Redirige vers la route nommée 'debugger'
+    };
 
   onMounted(() => {
       if (localStorage.getItem('EmbeddedSound')) {