From 5aab02495703198d790c4d66e8e78fe4a60c8795 Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Sun, 7 Jul 2024 23:03:25 +0200
Subject: [PATCH 1/3] feat:#18 added default page setting

---
 frontend/src/App.vue                          | 13 ++++--
 .../src/components/DefaultPageSwitcher.vue    | 41 +++++++++++++++++++
 frontend/src/helpers/theme.ts                 | 13 ++----
 frontend/src/i18n/translations/de.json        |  3 +-
 frontend/src/i18n/translations/en.json        |  3 +-
 frontend/src/i18n/translations/ja.json        |  3 +-
 frontend/src/store/settingsStore.ts           | 21 +++++++++-
 frontend/src/view/SettingsView.vue            |  9 ++++
 8 files changed, 89 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/components/DefaultPageSwitcher.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ff32417..faf17a4 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -26,6 +26,7 @@ import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
 import settingsStore from "@/store/settingsStore.ts";
 import { setTheme } from "@/helpers/theme.ts";
 import { usePrimeVue } from "primevue/config";
+import router from "@/router";
 
 const primeVue = usePrimeVue();
 
@@ -56,17 +57,23 @@ const updateMobile = () => {
 updateMobile();
 window.addEventListener("resize", updateMobile);
 
-const settings = settingsStore();
+const settings = settingsStore;
 const emit = defineEmits(["dark-mode-toggled"]);
 
 onMounted(() => {
 // set theme matching browser preference
-  settings.setDarkMode(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches)
+  settings().setDarkMode(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches)
   setTheme(settings, primeVue, emit);
   window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
-    settings.setDarkMode(e.matches)
+    settings().setDarkMode(e.matches)
     setTheme(settings, primeVue, emit);
   });
+
+  // check if default page is set
+  if (settings().defaultPage != "") {
+    router.push({ name: settings().defaultPage });
+  }
+
 });
 </script>
 
diff --git a/frontend/src/components/DefaultPageSwitcher.vue b/frontend/src/components/DefaultPageSwitcher.vue
new file mode 100644
index 0000000..6055ec0
--- /dev/null
+++ b/frontend/src/components/DefaultPageSwitcher.vue
@@ -0,0 +1,41 @@
+<!--
+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/>.
+-->
+
+<script lang="ts" setup>
+import {computed, ref} from "vue";
+import settingsStore from "../store/settingsStore.ts";
+
+const pageOptions = computed(() => [{ label: "None", value: "" }, ...settingsStore().getDefaultPageOptions()]);
+
+const selectedPage = ref(settingsStore().defaultPage);
+
+function updateDefaultPage(page: string) {
+  settingsStore().setDefaultPage(page);
+}
+
+updateDefaultPage(settingsStore().defaultPage);
+</script>
+<template>
+  <Dropdown
+    v-model="selectedPage"
+    :options="pageOptions"
+    placeholder="Select a Page"
+    class="w-full md:w-14rem"
+    @change="updateDefaultPage($event.value)"
+  ></Dropdown>
+</template>
diff --git a/frontend/src/helpers/theme.ts b/frontend/src/helpers/theme.ts
index 43b0c8f..07f5643 100644
--- a/frontend/src/helpers/theme.ts
+++ b/frontend/src/helpers/theme.ts
@@ -15,26 +15,21 @@
 //along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import { ref } from "vue";
-import { Store } from "pinia";
 import { PrimeVueChangeTheme } from "primevue/config";
 import { EmitFn } from "primevue/ts-helpers";
-import { RemovableRef } from "@vueuse/core";
+import settingsStore from "@/store/settingsStore.ts";
 
 const darkTheme = ref("lara-dark-blue"),
     lightTheme = ref("lara-light-blue");
 
-type SettingsStore = Store<"settingsStore", { locale: RemovableRef<string>, isDark: boolean }, NonNullable<unknown>, {
-    setLocale(locale: string): void,
-    setDarkMode(isDark: boolean): void,
-    getDarkMode(): boolean
-}>;
+export type SettingsStore = typeof settingsStore;
 
 export function toggleTheme(
     store: SettingsStore,
     primeVue: { changeTheme: PrimeVueChangeTheme },
     emit: EmitFn<"dark-mode-toggled"[]>,
 ): void {
-    store.setDarkMode(!store.isDark);
+    store().setDarkMode(!store().isDark);
     setTheme(store, primeVue, emit);
 }
 
@@ -43,7 +38,7 @@ export function setTheme(
     { changeTheme }: { changeTheme: PrimeVueChangeTheme },
     emit: EmitFn<"dark-mode-toggled"[]>
 ) {
-    const isDark = ref(store.isDark);
+    const isDark = ref(store().isDark);
     const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
         oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
     changeTheme(oldTheme, newTheme, "theme-link", () => { });
diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
index 70af13d..42d7a80 100644
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@@ -254,6 +254,7 @@
     "headline": "Einstellungen",
     "subTitle": "Hier kannst du deine Einstellungen bearbeiten.",
     "language": "Sprache einstellen",
-    "darkMode": "Design auswählen"
+    "darkMode": "Design auswählen",
+    "defaultPage": "Standardseite"
   }
 }
diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json
index 5db0af9..ecfe217 100644
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@@ -254,6 +254,7 @@
     "headline": "Settings",
     "subTitle": "Here you can change your settings.",
     "language": "Choose your language",
-    "darkMode": "Switch page theme"
+    "darkMode": "Switch page theme",
+    "defaultPage": "Default page"
   }
 }
diff --git a/frontend/src/i18n/translations/ja.json b/frontend/src/i18n/translations/ja.json
index b223c11..76e6751 100644
--- a/frontend/src/i18n/translations/ja.json
+++ b/frontend/src/i18n/translations/ja.json
@@ -254,6 +254,7 @@
     "headline": "設定",
     "subTitle": "ここで設定を編集できます。",
     "language": "言語",
-    "darkMode": "ダークモード"
+    "darkMode": "ダークモード",
+    "defaultPage": "デフォルトページ"
   }
 }
diff --git a/frontend/src/store/settingsStore.ts b/frontend/src/store/settingsStore.ts
index 55021be..106f675 100644
--- a/frontend/src/store/settingsStore.ts
+++ b/frontend/src/store/settingsStore.ts
@@ -16,12 +16,14 @@
 
 import { defineStore } from "pinia";
 import { useLocalStorage } from "@vueuse/core";
+import router from "@/router";
 
 const settingsStore = defineStore("settingsStore", {
   state: () => {
     return {
       locale: useLocalStorage("locale", "en"), //useLocalStorage takes in a key of 'count' and default value of 0
       isDark: true,
+      defaultPage: useLocalStorage("defaultPage", ""),
     };
   },
   actions: {
@@ -33,8 +35,23 @@ const settingsStore = defineStore("settingsStore", {
     },
     getDarkMode(): boolean {
       return this.isDark;
-    }
+    },
+    setDefaultPage(page: string) {
+      this.defaultPage = page;
+    },
+    getDefaultPageOptions(): string[] {
+      // get a string array of all the route names
+      const options: string[] = [];
+      router.getRoutes().forEach((route) => {
+        if (route.name) {
+          if (typeof route.name === "string") {
+            options.push(route.name);
+          }
+        }
+      });
+        return options;
+    },
   },
 });
 
-export default settingsStore;
+export default settingsStore;
\ No newline at end of file
diff --git a/frontend/src/view/SettingsView.vue b/frontend/src/view/SettingsView.vue
index b52550f..65a3cb4 100644
--- a/frontend/src/view/SettingsView.vue
+++ b/frontend/src/view/SettingsView.vue
@@ -3,6 +3,7 @@
 import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
 import { ref } from "vue";
 import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
+import DefaultPageSwitcher from "@/components/DefaultPageSwitcher.vue";
 
 const icon = "pi pi-cog";
 const isDark = ref(true);
@@ -44,6 +45,14 @@ class="opacity-100 transition-all transition-duration-500 transition-ease-in-out
             <LocaleSwitcher />
           </div>
         </div>
+        <div class="grid my-2">
+          <div class="col text-center">
+            {{ $t("settings.defaultPage") }}
+          </div>
+          <div class="col text-center">
+            <DefaultPageSwitcher />
+          </div>
+        </div>
         <div class="grid my-2">
           <div class="col text-center">
             {{ $t("settings.darkMode") }}

From 059b8ca24bb680c5a1884dcc7d3b89e93d16b47a Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Sun, 7 Jul 2024 23:08:04 +0200
Subject: [PATCH 2/3] feat:#18 fixed type

---
 frontend/src/components/DarkModeSwitcher.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DarkModeSwitcher.vue b/frontend/src/components/DarkModeSwitcher.vue
index 452825e..cba77f8 100644
--- a/frontend/src/components/DarkModeSwitcher.vue
+++ b/frontend/src/components/DarkModeSwitcher.vue
@@ -26,9 +26,9 @@ const primeVue = usePrimeVue();
 
 const emit = defineEmits(["dark-mode-toggled"]);
 
-const store = settingsStore();
+const store = settingsStore;
 
-const isDark = computed(() => store.isDark);
+const isDark = computed(() => store().isDark);
 
 </script>
 

From 5330ade54e1766eb88ff6c74e9b41efbb9e0f084 Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Sun, 21 Jul 2024 22:21:14 +0200
Subject: [PATCH 3/3] fix:#18 reroute for default page only applies to empty
 paths

---
 frontend/src/App.vue                          |  8 -----
 .../src/components/DefaultPageSwitcher.vue    | 10 ++++--
 frontend/src/i18n/translations/de.json        |  4 +++
 frontend/src/i18n/translations/en.json        |  4 +++
 frontend/src/i18n/translations/ja.json        |  4 +++
 frontend/src/router/index.ts                  | 31 ++++++++++++++++---
 frontend/src/store/settingsStore.ts           | 26 +++++++++++-----
 frontend/src/view/NotFound.vue                | 16 ++++++++++
 8 files changed, 80 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/view/NotFound.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index faf17a4..c617135 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -26,8 +26,6 @@ import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
 import settingsStore from "@/store/settingsStore.ts";
 import { setTheme } from "@/helpers/theme.ts";
 import { usePrimeVue } from "primevue/config";
-import router from "@/router";
-
 const primeVue = usePrimeVue();
 
 const disabledPages = [
@@ -68,12 +66,6 @@ onMounted(() => {
     settings().setDarkMode(e.matches)
     setTheme(settings, primeVue, emit);
   });
-
-  // check if default page is set
-  if (settings().defaultPage != "") {
-    router.push({ name: settings().defaultPage });
-  }
-
 });
 </script>
 
diff --git a/frontend/src/components/DefaultPageSwitcher.vue b/frontend/src/components/DefaultPageSwitcher.vue
index 6055ec0..8e44937 100644
--- a/frontend/src/components/DefaultPageSwitcher.vue
+++ b/frontend/src/components/DefaultPageSwitcher.vue
@@ -17,14 +17,17 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
 
 <script lang="ts" setup>
-import {computed, ref} from "vue";
+import { computed, ComputedRef, ref } from "vue";
 import settingsStore from "../store/settingsStore.ts";
 
-const pageOptions = computed(() => [{ label: "None", value: "" }, ...settingsStore().getDefaultPageOptions()]);
+const pageOptions: ComputedRef<(string | {
+  label: string;
+  value: string;
+})[]> = computed(() => [...settingsStore().getDefaultPageOptions()]);
 
 const selectedPage = ref(settingsStore().defaultPage);
 
-function updateDefaultPage(page: string) {
+function updateDefaultPage(page: { label: string; value: string }) {
   settingsStore().setDefaultPage(page);
 }
 
@@ -36,6 +39,7 @@ updateDefaultPage(settingsStore().defaultPage);
     :options="pageOptions"
     placeholder="Select a Page"
     class="w-full md:w-14rem"
+    option-label="label"
     @change="updateDefaultPage($event.value)"
   ></Dropdown>
 </template>
diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
index 42d7a80..806504f 100644
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@@ -11,6 +11,10 @@
   "english": "Englisch",
   "german": "Deutsch",
   "japanese": "Japanisch",
+  "notFound": {
+    "headline": "404",
+    "subTitle": "Seite nicht gefunden"
+  },
   "courseSelection": {
     "headline": "Willkommen beim HTWKalender",
     "winterSemester": "Wintersemester",
diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json
index ecfe217..5a22d8c 100644
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@@ -11,6 +11,10 @@
   "english": "English",
   "german": "German",
   "japanese": "Japanese",
+  "notFound": {
+    "headline": "404",
+    "subTitle": "page not found"
+  },
   "courseSelection": {
     "headline": "welcome to HTWKalender",
     "winterSemester": "winter semester",
diff --git a/frontend/src/i18n/translations/ja.json b/frontend/src/i18n/translations/ja.json
index 76e6751..ffd1870 100644
--- a/frontend/src/i18n/translations/ja.json
+++ b/frontend/src/i18n/translations/ja.json
@@ -11,6 +11,10 @@
   "english": "英語",
   "german": "ドイツ語",
   "japanese": "日本語",
+  "notFound": {
+    "headline": "404",
+    "subTitle": "ページが見つかりません"
+  },
   "courseSelection": {
     "headline": "HTWカレンダーへようこそ",
     "winterSemester": "冬学期",
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 3c6c214..5412600 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -30,14 +30,22 @@ const CourseSelection = () => import("../view/CourseSelection.vue");
 const FreeRooms = () => import("../view/FreeRooms.vue");
 const CalenderViewer = () => import("../view/UserCalendar.vue");
 const SettingsView = () => import("../view/SettingsView.vue");
+const NotFound = () => import("../view/NotFound.vue");
 
 import i18n from "../i18n";
+import settingsStore from "@/store/settingsStore.ts";
+
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: "/",
+      name: "default",
+      component: CourseSelection,
+    },
+    {
+      path: "/home",
       name: "home",
       component: CourseSelection,
     },
@@ -123,18 +131,31 @@ const router = createRouter({
       path: "/settings",
       name: "settings",
       component: SettingsView,
-    }
+    },
+    {
+      path: "/:catchAll(.*)", // Catch all undefined routes
+      name: "not-found",
+      component: NotFound, // Replace with your NotFound component
+    },
   ],
 });
 
-router.beforeEach(async (to, from) => {
+router.beforeEach(async (to, from, next) => {
   const newLocale = to.params.locale;
   const prevLocale = from.params.locale;
   // If the locale hasn't changed, do nothing
-  if (newLocale === prevLocale) {
-    return;
+  if (!(newLocale === prevLocale)) {
+    i18n.setLocale(newLocale);
+  }
+
+  const userSettings = settingsStore();
+  const defaultPath = userSettings.defaultPage || "/home";
+
+  if (to.path === "/") {
+    next(defaultPath.value);
+  } else {
+    next();
   }
-  i18n.setLocale(newLocale);
 });
 
 export default router;
diff --git a/frontend/src/store/settingsStore.ts b/frontend/src/store/settingsStore.ts
index 106f675..5551c95 100644
--- a/frontend/src/store/settingsStore.ts
+++ b/frontend/src/store/settingsStore.ts
@@ -23,7 +23,7 @@ const settingsStore = defineStore("settingsStore", {
     return {
       locale: useLocalStorage("locale", "en"), //useLocalStorage takes in a key of 'count' and default value of 0
       isDark: true,
-      defaultPage: useLocalStorage("defaultPage", ""),
+      defaultPage: useLocalStorage("defaultPage",  {label: "Home", value: "/home"}),
     };
   },
   actions: {
@@ -36,19 +36,31 @@ const settingsStore = defineStore("settingsStore", {
     getDarkMode(): boolean {
       return this.isDark;
     },
-    setDefaultPage(page: string) {
+    setDefaultPage(page: {
+      label: string;
+      value: string;
+    }) {
       this.defaultPage = page;
     },
-    getDefaultPageOptions(): string[] {
+    getDefaultPageOptions(): {
+      label: string;
+      value: string;
+    }[] {
       // get a string array of all the route names
-      const options: string[] = [];
+      const options: {
+        label: string;
+        value: string;
+      }[] = [];
       router.getRoutes().forEach((route) => {
         if (route.name) {
           if (typeof route.name === "string") {
-            options.push(route.name);
+            options.push({
+              label: route.name,
+              value: route.path,
+            });
+            }
           }
-        }
-      });
+        });
         return options;
     },
   },
diff --git a/frontend/src/view/NotFound.vue b/frontend/src/view/NotFound.vue
new file mode 100644
index 0000000..8e215cc
--- /dev/null
+++ b/frontend/src/view/NotFound.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import DynamicPage from "@/view/DynamicPage.vue";
+</script>
+
+<template>
+  <DynamicPage
+    hide-content
+    :headline="$t('notFound.headline')"
+    :sub-title="$t('notFound.subTitle')"
+  >
+  </DynamicPage>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file