From 4f50f3a7c37fe917b69d2e35baa5e110ffb7dfef Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Tue, 2 Jul 2024 11:01:44 +0200
Subject: [PATCH] fix:#20 first fix auto dark mode switch

---
 frontend/src/App.vue                          | 24 ++++++++++--
 frontend/src/components/DarkModeSwitcher.vue  | 38 ++++---------------
 frontend/src/components/LocaleSwitcher.vue    |  6 +--
 frontend/src/helpers/theme.ts                 | 35 +++++++++++++++++
 frontend/src/i18n/index.ts                    |  4 +-
 frontend/src/main.ts                          | 10 +++--
 .../{localeStore.ts => settingsStore.ts}      | 11 +++++-
 7 files changed, 83 insertions(+), 45 deletions(-)
 create mode 100644 frontend/src/helpers/theme.ts
 rename frontend/src/store/{localeStore.ts => settingsStore.ts} (83%)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 16c3545..843c0d8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -21,8 +21,13 @@ import MenuBar from "./components/MenuBar.vue";
 import { RouteRecordName, RouterView } from "vue-router";
 import CalendarPreview from "./components/CalendarPreview.vue";
 import moduleStore from "./store/moduleStore.ts";
-import { provide, ref } from "vue";
+import { onMounted, provide, ref } from "vue";
 import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
+import settingsStore from "@/store/settingsStore.ts";
+import { setTheme } from "@/helpers/theme.ts";
+import { usePrimeVue } from "primevue/config";
+
+const primeVue = usePrimeVue();
 
 const disabledPages = [
   "room-finder",
@@ -33,7 +38,7 @@ const disabledPages = [
   "edit-calendar",
   "rooms",
   "free-rooms",
-  "room-schedule",
+  "room-schedule"
 ];
 
 const store = moduleStore();
@@ -51,12 +56,25 @@ const updateMobile = () => {
 updateMobile();
 
 window.addEventListener("resize", updateMobile);
+
+const settings = settingsStore();
+const emit = defineEmits(["dark-mode-toggled"]);
+
+onMounted(() => {
+// set theme matching browser preference
+  setTheme(settings, primeVue, emit, (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches));
+
+  window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
+    setTheme(settings, primeVue, emit, e.matches);
+  });
+});
+
 </script>
 
 <template>
   <MenuBar />
   <RouterView v-slot="{ Component, route }">
-    <transition name="scale" mode="out-in">
+    <transition mode="out-in" name="scale">
       <div :key="route.name ?? ''" class="origin-near-top">
         <component :is="Component" />
       </div>
diff --git a/frontend/src/components/DarkModeSwitcher.vue b/frontend/src/components/DarkModeSwitcher.vue
index 1d163c3..452825e 100644
--- a/frontend/src/components/DarkModeSwitcher.vue
+++ b/frontend/src/components/DarkModeSwitcher.vue
@@ -17,43 +17,19 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
 
 <script lang="ts" setup>
-import { ref, onMounted } from "vue";
+import { toggleTheme } from "@/helpers/theme.ts";
+import settingsStore from "@/store/settingsStore.ts";
+import { computed } from "vue";
 import { usePrimeVue } from "primevue/config";
 
-const PrimeVue = usePrimeVue();
+const primeVue = usePrimeVue();
 
 const emit = defineEmits(["dark-mode-toggled"]);
 
-const isDark = ref(true);
-const darkTheme = ref("lara-dark-blue"),
-  lightTheme = ref("lara-light-blue");
+const store = settingsStore();
 
-function toggleTheme() {
-  isDark.value = !isDark.value;
-  setTheme(isDark.value);
-}
+const isDark = computed(() => store.isDark);
 
-function setTheme(shouldBeDark: boolean) {
-  isDark.value = shouldBeDark;
-  const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
-    oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
-  PrimeVue.changeTheme(oldTheme, newTheme, "theme-link", () => {});
-  emit("dark-mode-toggled", isDark.value);
-}
-
-onMounted(() => {
-  // set theme matching browser preference
-  setTheme(
-    window.matchMedia &&
-      window.matchMedia("(prefers-color-scheme: dark)").matches,
-  );
-
-  window
-    .matchMedia("(prefers-color-scheme: dark)")
-    .addEventListener("change", (e) => {
-      setTheme(e.matches);
-    });
-});
 </script>
 
 <template>
@@ -63,7 +39,7 @@ onMounted(() => {
     class="p-button-rounded md:w-auto"
     style="margin-right: 1rem"
     :severity="isDark ? 'warning' : 'success'"
-    @click="toggleTheme()"
+    @click="toggleTheme(store, primeVue, emit)"
   >
     <i v-if="isDark" class="pi pi-sun"></i>
     <i v-else class="pi pi-moon"></i>
diff --git a/frontend/src/components/LocaleSwitcher.vue b/frontend/src/components/LocaleSwitcher.vue
index 1b5b316..f274c39 100644
--- a/frontend/src/components/LocaleSwitcher.vue
+++ b/frontend/src/components/LocaleSwitcher.vue
@@ -18,7 +18,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 <script lang="ts" setup>
 import { computed } from "vue";
-import localeStore from "../store/localeStore.ts";
+import settingsStore from "../store/settingsStore.ts";
 import { useI18n } from "vue-i18n";
 import { usePrimeVue } from "primevue/config";
 import primeVue_de from "@/i18n/translations/primevue/prime_vue_local_de.json";
@@ -43,7 +43,7 @@ function displayCountry(code: string) {
 const primeVueConfig = usePrimeVue();
 
 function updateLocale(locale: string) {
-  localeStore().setLocale(locale);
+  settingsStore().setLocale(locale);
 
   if (locale === "de") {
     primeVueConfig.config.locale = primeVue_de;
@@ -54,7 +54,7 @@ function updateLocale(locale: string) {
   }
 }
 
-updateLocale(localeStore().locale);
+updateLocale(settingsStore().locale);
 </script>
 <template>
   <Dropdown
diff --git a/frontend/src/helpers/theme.ts b/frontend/src/helpers/theme.ts
new file mode 100644
index 0000000..221e735
--- /dev/null
+++ b/frontend/src/helpers/theme.ts
@@ -0,0 +1,35 @@
+//Calendar implementation for the HTWK Leipzig timetable. Evaluation and display of the individual dates in iCal format.
+//Copyright (C) 2024 HTWKalender support@htwkalender.de
+
+//This program is free software: you can redistribute it and/or modify
+//it under the terms of the GNU Affero General Public License as published by
+//the Free Software Foundation, either version 3 of the License, or
+//(at your option) any later version.
+
+//This program is distributed in the hope that it will be useful,
+//but WITHOUT ANY WARRANTY; without even the implied warranty of
+//MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//GNU Affero General Public License for more details.
+
+//You should have received a copy of the GNU Affero General Public License
+//along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { ref } from "vue";
+
+const darkTheme = ref("lara-dark-blue"),
+  lightTheme = ref("lara-light-blue");
+
+
+export function toggleTheme(store, primeVue, emit): void {
+  store.setDarkMode(!store.isDark);
+  setTheme(store, primeVue, emit);
+}
+
+export function setTheme(store, primeVue, emit, shouldBeDark: boolean) {
+  store.setDarkMode(shouldBeDark);
+  const isDark = ref(store.isDark);
+  const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
+    oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
+  primeVue.changeTheme(oldTheme, newTheme, "theme-link", () => {});
+  emit("dark-mode-toggled", isDark.value);
+}
diff --git a/frontend/src/i18n/index.ts b/frontend/src/i18n/index.ts
index 75ee450..4db4b2f 100644
--- a/frontend/src/i18n/index.ts
+++ b/frontend/src/i18n/index.ts
@@ -18,7 +18,7 @@ import { createI18n } from "vue-i18n";
 import en from "./translations/en.json";
 import de from "./translations/de.json";
 import ja from "./translations/ja.json";
-import localeStore from "../store/localeStore.ts";
+import settingsStore from "../store/settingsStore.ts";
 
 // Private instance of VueI18n object
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -27,7 +27,7 @@ let _i18n: any;
 function setup() {
   _i18n = createI18n({
     legacy: false,
-    locale: localeStore().locale,
+    locale: settingsStore().locale,
     fallbackLocale: "en",
     messages: {
       en,
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index a22c319..e39265d 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -58,6 +58,8 @@ import i18n from "./i18n";
 import { VueQueryPlugin } from "@tanstack/vue-query";
 import { polyfillCountryFlagEmojis } from "country-flag-emoji-polyfill";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
+import { setTheme } from "@/helpers/theme.ts";
+import settingsStore from "@/store/settingsStore.ts";
 
 polyfillCountryFlagEmojis();
 
@@ -70,10 +72,10 @@ app.use(VueQueryPlugin, {
   queryClientConfig: {
     defaultOptions: {
       queries: {
-        refetchOnWindowFocus: false,
-      },
-    },
-  },
+        refetchOnWindowFocus: false
+      }
+    }
+  }
 });
 
 app.use(PrimeVue);
diff --git a/frontend/src/store/localeStore.ts b/frontend/src/store/settingsStore.ts
similarity index 83%
rename from frontend/src/store/localeStore.ts
rename to frontend/src/store/settingsStore.ts
index 4598a64..55021be 100644
--- a/frontend/src/store/localeStore.ts
+++ b/frontend/src/store/settingsStore.ts
@@ -17,17 +17,24 @@
 import { defineStore } from "pinia";
 import { useLocalStorage } from "@vueuse/core";
 
-const localeStore = defineStore("localeStore", {
+const settingsStore = defineStore("settingsStore", {
   state: () => {
     return {
       locale: useLocalStorage("locale", "en"), //useLocalStorage takes in a key of 'count' and default value of 0
+      isDark: true,
     };
   },
   actions: {
     setLocale(locale: string) {
       this.locale = locale;
     },
+    setDarkMode(isDark: boolean) {
+      this.isDark = isDark;
+    },
+    getDarkMode(): boolean {
+      return this.isDark;
+    }
   },
 });
 
-export default localeStore;
+export default settingsStore;