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

Ajustement de la section Son pourque les emplacements soient plus optimisés

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-04-05 15:48:39 +02:00
parent 0dea30e8a6
commit 8b012757f3
4 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/components/BrainBlastBar.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<v-app-bar :elevation="5" height="50"> <v-app-bar :elevation="5" height="50">
<RouterMenu /> <RouterMenu />
<v-app-bar-title v-if="$route.name !== 'Home'">Brain Blast</v-app-bar-title> <v-app-bar-title v-if="$route.name !== 'Accueil'">Brain Blast</v-app-bar-title>
<template v-slot:append> <template v-slot:append>
<v-btn icon @click="toggleTheme"> <v-btn icon @click="toggleTheme">

2
ui/src/plugins/router.js
View File

@ -6,7 +6,7 @@ const router = createRouter({
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'Home', name: 'Accueil',
component: HomeView component: HomeView
}, },
{ {

3
ui/src/views/GameDisplay.vue
View File

@ -0,0 +1,3 @@
<template>
</template>

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

@ -1,20 +1,22 @@
<template> <template>
<v-label class="title-style-1">Paramètres</v-label>
<h1 class="title mb-4 ml-5 mt-5">Paramètres</h1>
<v-divider :thickness="2" class="border-opacity-100" color="primary"/> <v-divider :thickness="2" class="border-opacity-100" color="primary"/>
<h2 class="title ml-10 mb-5 mt-5">Son</h2> <v-label class="title-style-2">Son</v-label>
<div style="display: flex; align-items: center;"> <div class="mutltiple-per-line">
<v-switch label="Activer le son intégré" v-model="EmbeddedSound" class="ml-15" color="primary"/> <v-switch hide-details label="Activer le son intégré" v-model="EmbeddedSound" class="ml-15" color="primary"/>
<div style="width: 250px; margin-left: 16px;"> <div>
<v-slider class="ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume" color="primary"/> <v-slider hide-details class="v-slider-style ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume" color="primary"/>
</div> </div>
</div> </div>
<v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-15" color="primary"/> <v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-15" color="primary"/>
<v-divider /> <v-divider />
<h2 class="title ml-10 mb-5 mt-5">Affichage</h2> <v-label class="title-style-2">Affichage</v-label>
<v-switch label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15" color="primary"/> <v-switch label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15" color="primary"/>
<v-divider /> <v-divider />
<h2 class="title ml-10 mb-5 mt-5">MQTT</h2> <v-label class="title-style-2">MQTT</v-label>
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<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>
@ -68,4 +70,32 @@
} }
}); });
</script> </script>
<style>
.title-style-1{
margin-top: 20px;
margin-bottom: 16px;
margin-left: 20px;
font-size: 30px;
opacity: 100%;
font-weight: 500;
}
.title-style-2{
margin-top: 20px;
margin-bottom: 10px;
margin-left: 40px;
font-size: 25px;
opacity: 100%;
font-weight: 500;
}
.mutltiple-per-line{
display: flex;
align-items: center;
}
.v-slider-style{
width: 250px;
margin-left: 16px;
padding-top: px;
}
</style>