From 745532c1b8bb886495f61ff123e10771c3a712eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Sun, 17 Mar 2024 15:47:42 +0100
Subject: [PATCH] =?UTF-8?q?Remplacement=20des=20checkbox=20par=20des=20swi?=
 =?UTF-8?q?tch=20+=20cr=C3=A9ation=20du=20th=C3=A8me?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/BrainBlastBar.vue |  2 +-
 ui/src/plugins/vuetify.js           | 52 ++++++++++--------
 ui/src/views/SettingsView.vue       | 81 +++++++++++++++--------------
 3 files changed, 73 insertions(+), 62 deletions(-)

diff --git a/ui/src/components/BrainBlastBar.vue b/ui/src/components/BrainBlastBar.vue
index cbd981a..55b8bf4 100644
--- a/ui/src/components/BrainBlastBar.vue
+++ b/ui/src/components/BrainBlastBar.vue
@@ -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>
diff --git a/ui/src/plugins/vuetify.js b/ui/src/plugins/vuetify.js
index 673ca3d..418eb2c 100644
--- a/ui/src/plugins/vuetify.js
+++ b/ui/src/plugins/vuetify.js
@@ -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',
-  }
+  },
 })
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index 3b81b45..5f7f720 100644
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -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>
\ No newline at end of file