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

Merge branch 'theme'

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-03-17 16:50:41 +01:00
commit e6a89c1561
3 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
<template>
<v-card tile outlined class="card">
<v-card-title class="card__title primary">
<v-card-title class="card__title primary" color="primary">
<v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon>
Contrôles
</v-card-title>

6
ui/src/plugins/vuetify.js
View File

@ -18,10 +18,10 @@ const CustomThemeDark = {
primary: '#e91e1e',
secondary: '#F44336',
accent: '#FFC107',
error: '#FF5722',
error: '#e91e1e',
warning: '#FFC107',
info: '#607D8B',
success: '#4CAF50'
success: '#e91e1e'
}
}
const CustomThemeLight = {
@ -31,7 +31,7 @@ const CustomThemeLight = {
primary: '#e91e1e',
secondary: '#F44336',
accent: '#FFC107',
error: '#FF5722',
error: '#e91e1e',
warning: '#FFC107',
info: '#607D8B',
success: '#4CAF50'

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

@ -1,16 +1,25 @@
<template>
<h1 class="title mb-4 ml-5 mt-5">Paramètres</h1>
<hr/>
<v-divider :thickness="2" class="border-opacity-100" color="primary"/>
<h2 class="title ml-10 mb-5 mt-5">Son</h2>
<div style="display: flex; align-items: center;">
<v-switch label="Activer le son intégré" v-model="EmbeddedSound" class="ml-10" color="primary"/>
<v-switch label="Activer le son intégré" v-model="EmbeddedSound" class="ml-15" color="primary"/>
<div style="width: 250px; margin-left: 16px;">
<v-slider class="ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume" color="primary"/>
</div>
</div>
<v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-10" color="primary"/>
<v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-15" color="primary"/>
<v-divider />
<h2 class="title ml-10 mb-5 mt-5">Affichage</h2>
<v-switch label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15" color="primary"/>
<v-divider />
<h2 class="title ml-10 mb-5 mt-5">MQTT</h2>
<div style="display: flex; align-items: center;">
<v-icon v-model="MQTTBrokerState" class="ml-15" color="error" icon="record">mdi-record</v-icon>
<v-label class="ml-2 mb-5 mt-5">Etat du serveur MQTT</v-label>
</div>
<v-divider />
</template>
@ -20,7 +29,9 @@
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);
onMounted(() => {
if (localStorage.getItem('EmbeddedSound')) {
EmbeddedSound.value = localStorage.getItem('EmbeddedSound') === 'true'; // Si l'état de la case à cocher est stocké, le mettre dans la référence
@ -31,6 +42,9 @@
if (localStorage.getItem('EmbeddedSoundVolume')) {
EmbeddedSoundVolume.value = localStorage.getItem('EmbeddedSoundVolume'); // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
if (localStorage.getItem('SattelitesDisplay')) {
SattelitesDisplay.value = localStorage.getItem('SattelitesDisplay') === 'true'; // Added a default value for this switch
}
});
watch(EmbeddedSound, (EmbeddedSoundNewValue) => {
if (EmbeddedSoundNewValue !== null) {
@ -48,4 +62,10 @@
localStorage.setItem('MQTTSound', MQTTSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(SattelitesDisplay, (SattelitesDisplaynewValue) => {
if (SattelitesDisplaynewValue !== null) {
localStorage.setItem('SattelitesDisplay', SattelitesDisplaynewValue); // Added a default value for this switch
}
});
</script>