feat:#18 added default page setting

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>
 

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>

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", () => { });

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"
   }
 }

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"
   }
 }

frontend/src/i18n/translations/ja.json

@@ -254,6 +254,7 @@
     "headline": "設定",
     "subTitle": "ここで設定を編集できます。",
     "language": "言語",
-    "darkMode": "ダークモード"
+    "darkMode": "ダークモード",
+    "defaultPage": "デフォルトページ"
   }
 }

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,7 +35,22 @@ 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;
+    },
   },
 });
 

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") }}