From f1a0ed3ab10476a01d3f423096416b67e57d092d Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <mokaddem.sami@gmail.com>
Date: Mon, 8 Jul 2024 14:59:52 +0200
Subject: [PATCH] chg: [front:theme] Better support of theme choice

---
 src/App.vue                                 |  5 +-
 src/components/TheLiveLogsActivityGraph.vue | 73 +++++++++++----------
 src/components/TheThemeButton.vue           | 10 +--
 src/settings.js                             |  4 ++
 4 files changed, 54 insertions(+), 38 deletions(-)
 create mode 100644 src/settings.js

diff --git a/src/App.vue b/src/App.vue
index c4c5e51..250f925 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,10 +5,13 @@ import TheAdminPanel from './components/TheAdminPanel.vue'
 import TheSocketConnectionState from './components/TheSocketConnectionState.vue'
 import TheDahboard from './TheDahboard.vue'
 import { socketConnected } from "@/socket";
+import { darkModeEnabled } from "@/settings.js"
 
 
 onMounted(() => {
-  document.getElementsByTagName('body')[0].classList.add('dark')
+  if (darkModeEnabled.value) {
+    document.getElementsByTagName('body')[0].classList.add('dark')
+  }
 })
 
 </script>
diff --git a/src/components/TheLiveLogsActivityGraph.vue b/src/components/TheLiveLogsActivityGraph.vue
index 4b78a49..64c0d6b 100644
--- a/src/components/TheLiveLogsActivityGraph.vue
+++ b/src/components/TheLiveLogsActivityGraph.vue
@@ -1,6 +1,7 @@
 <script setup>
   import { ref, watch, computed } from "vue"
   import { notificationHistory, notificationHistoryConfig } from "@/socket";
+  import { darkModeEnabled } from "@/settings.js"
 
   const theChart = ref(null)
   const chartInitSeries = [
@@ -16,48 +17,54 @@
     return [{data: Array.from(notificationHistory.value)}]
   })
 
-  const chartOptions = {
-    chart: {
-      type: 'bar',
-      width: '100%',
-      height: 32,
-      sparkline: {
-        enabled: true
+  const chartOptions = computed(() => {
+    return {
+      chart: {
+        type: 'bar',
+        width: '100%',
+        height: 32,
+        sparkline: {
+          enabled: true
+        },
+        dropShadow: {
+            enabled: true,
+            enabledOnSeries: undefined,
+            top: 2,
+            left: 1,
+            blur: 2,
+            color: '#000',
+            opacity: darkModeEnabled.value ? 0.35 : 0.15
+        },
+        animations: {
+            enabled: false,
+            easing: 'easeinout',
+            speed: 200,
+        },
       },
-      dropShadow: {
-        enabled: true,
-        enabledOnSeries: undefined,
-        top: 2,
-        left: 1,
-        blur: 3,
-        color: '#000',
-        opacity: 0.45
+      colors: [darkModeEnabled.value ? '#008ffb' : '#1f9eff'],
+      plotOptions: {
+        bar: {
+          columnWidth: '80%'
+        }
       },
-      animations: {
+      yaxis: {
+        min: 0,
+        labels: {
+          show: false,
+        }
+      },
+      tooltip: {
         enabled: false,
-        easing: 'easeinout',
-        speed: 200,
       },
-    },
-    plotOptions: {
-      bar: {
-        columnWidth: '80%'
-      }
-    },
-    yaxis: {
-      min: 0,
-    },
-    tooltip: {
-      enabled: false,
-    },
-  }
+    }
+  })
 
 </script>
 
 <template>
-  <div class="my-2 --ml-1 bg-slate-600 py-1 pl-1 pr-3 rounded-md relative flex flex-col">
+  <div class="my-2 --ml-1 bg-slate-50 dark:bg-slate-600 py-1 pl-1 pr-3 rounded-md relative flex flex-col">
     <div :class="`${!hasActivity ? 'hidden' : 'absolute'} h-10 -mt-1 w-full z-40`">
-      <div class="text-xxs flex justify-between h-full items-center">
+      <div class="text-xxs flex justify-between h-full items-center text-slate-500 dark:text-slate-300">
         <span class="-rotate-90 w-8 -ml-3">- {{ notificationHistoryConfig.buffer_timestamp_min }}min</span>
         <span class="-rotate-90 w-8 text-xs">–</span>
         <span class="-rotate-90 w-8 text-lg">–</span>
diff --git a/src/components/TheThemeButton.vue b/src/components/TheThemeButton.vue
index 17e8b5d..683a1ef 100644
--- a/src/components/TheThemeButton.vue
+++ b/src/components/TheThemeButton.vue
@@ -2,14 +2,16 @@
   import { ref, watch } from 'vue'
   import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
   import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+  import { darkModeOn } from "@/settings.js"
 
-  const darkMode = ref(true)
+  const darkMode = ref(darkModeOn.value)
 
   watch(darkMode, (newValue) => {
+    darkModeOn.value = newValue
     if (newValue) {
-        document.getElementsByTagName('body')[0].classList.add('dark')
-      } else {
-        document.getElementsByTagName('body')[0].classList.remove('dark')
+      document.getElementsByTagName('body')[0].classList.add('dark')
+    } else {
+      document.getElementsByTagName('body')[0].classList.remove('dark')
     }
   })
 </script>
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..567cfa7
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,4 @@
+import { ref, computed } from 'vue'
+
+export const darkModeOn = ref(true)
+export const darkModeEnabled = computed(() => darkModeOn.value)
\ No newline at end of file