asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
ui/src/components/RouterMenu.vue
View File

@ -2,23 +2,28 @@
<v-app-bar-nav-icon v-on:click="menu = !menu"></v-app-bar-nav-icon> <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-menu v-model="menu" class="menu-below-bar">
<v-list> <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-list>
</v-menu> </v-menu>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref, computed } from 'vue';
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router';
const router = useRouter() const router = useRouter();
const routes = router.options.routes 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> </script>
<style scoped> <style scoped>
.menu-below-bar { .menu-below-bar {
margin-top: 48px; /* La hauteur de la barre d'application */ margin-top: 48px; /* La hauteur de la barre d'application */
} }
</style> </style>

10
ui/src/views/SettingsView.vue
View File

@ -17,9 +17,11 @@
<v-divider /> <v-divider />
<v-label class="title-style-2">MQTT</v-label> <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-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-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> </div>
<v-divider /> <v-divider />
</template> </template>
@ -27,12 +29,18 @@
<script setup> <script setup>
import { ref, onMounted, watch } from 'vue'; 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 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 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 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 MQTTBrokerState = ref(false); // Définition d'une référence pour la case à cocher. Initialement décochée.
const SattelitesDisplay = ref(false); const SattelitesDisplay = ref(false);
const router = useRouter();
const goToDebugRoute = () => {
router.push({ name: 'Debugger MQTT' }); // Redirige vers la route nommée 'debugger'
};
onMounted(() => { onMounted(() => {
if (localStorage.getItem('EmbeddedSound')) { if (localStorage.getItem('EmbeddedSound')) {