Ajustement du menu router pour cacher le debugger, il est désormais accessible depuis la page paramètre, onglet MQTT

This commit is contained in:
Jérémy CHOMAZ 2024-04-05 16:01:13 +02:00
parent 8b012757f3
commit 76383c1a3d
2 changed files with 24 additions and 11 deletions

View File

@ -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>

View File

@ -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')) {