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

Merge branch 'SettingsView'

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-03-17 15:49:14 +01:00
commit 56bf47b91a
3 changed files with 73 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,7 +21,7 @@
function toggleTheme() {
darkTheme.value = !darkTheme.value
theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
theme.global.name.value = theme.global.current.value.dark ? 'CustomThemeLight' : 'CustomThemeDark'
}
</script>

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

@ -11,30 +11,40 @@ import 'vuetify/styles'
// Composables
import { createVuetify } from 'vuetify'
const CustomThemeDark = {
dark: true,
colors: {
background: '#121212',
primary: '#e91e1e',
secondary: '#F44336',
accent: '#FFC107',
error: '#FF5722',
warning: '#FFC107',
info: '#607D8B',
success: '#4CAF50'
}
}
const CustomThemeLight = {
dark: false,
colors: {
background: '#ffffff',
primary: '#e91e1e',
secondary: '#F44336',
accent: '#FFC107',
error: '#FF5722',
warning: '#FFC107',
info: '#607D8B',
success: '#4CAF50'
}
}
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
theme: {
defaultTheme: 'CustomThemeDark',
themes: {
light: {
background: '#212121',
primary: '#cc0000',
controls: '#cc0000',
soundboard: '#9A2779',
secondary: '#b0bec5',
feedback: '#2E7D32',
accent: '#8c9eff',
error: '#b71c1c',
},
dark: {
background: '#121212',
primary: '#2979FF',
controls: '#AB47B',
secondary: '#90a4ae',
feedback: '#2E7D32',
accent: '#8c9eff',
error: '#b71c1c',
},
CustomThemeDark,
CustomThemeLight,
},
defaultTheme: 'dark',
}
},
})

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

@ -1,50 +1,51 @@
<template>
<v-container class="ml-5">
<h1 class="title mb-4">Paramètres</h1>
<h2 class="title ml-10 mb-5">Son</h2>
<h1 class="title mb-4 ml-5 mt-5">Paramètres</h1>
<hr/>
<h2 class="title ml-10 mb-5 mt-5">Son</h2>
<div style="display: flex; align-items: center;">
<v-checkbox label="Activer le son intégré" v-model="EmbeddedSound" class="ml-10"/>
<v-switch label="Activer le son intégré" v-model="EmbeddedSound" class="ml-10" color="primary"/>
<div style="width: 250px; margin-left: 16px;">
<v-slider class="ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume"/>
<v-slider class="ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume" color="primary"/>
</div>
</div>
<v-checkbox label="Activer le son MQTT" v-model="MQTTSound" class="ml-10"/>
</v-container>
<v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-10" color="primary"/>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
<script setup>
import { ref, onMounted, watch } from 'vue';
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.
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
}
if (localStorage.getItem('MQTTSound')) {
MQTTSound.value = localStorage.getItem('MQTTSound') === 'true'; // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
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
}
});
watch(EmbeddedSound, (EmbeddedSoundNewValue) => {
if (EmbeddedSoundNewValue !== null) {
localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => {
if (EmbeddedSoundVolumeNewValue !== null) {
localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(MQTTSound, (MQTTSoundNewValue) => {
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.
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
}
if (localStorage.getItem('MQTTSound')) {
MQTTSound.value = localStorage.getItem('MQTTSound') === 'true'; // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
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
}
});
watch(EmbeddedSound, (EmbeddedSoundNewValue) => {
if (EmbeddedSoundNewValue !== null) {
localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => {
if (EmbeddedSoundVolumeNewValue !== null) {
localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(MQTTSound, (MQTTSoundNewValue) => {
if (MQTTSoundNewValue !== null) {
localStorage.setItem('MQTTSound', MQTTSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
</script>
if (MQTTSoundNewValue !== null) {
localStorage.setItem('MQTTSound', MQTTSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
</script>