Merge branch '18-setup-default-page' into 'main'

Resolve "setup default page"

Closes #18

See merge request htwk-software/htwkalender-pwa!13

frontend/src/App.vue

@@ -26,7 +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";
-
 const primeVue = usePrimeVue();
 
 const disabledPages = [
@@ -56,15 +55,15 @@ 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);
   });
 });

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>
 

frontend/src/components/DefaultPageSwitcher.vue

@@ -0,0 +1,45 @@
+<!--
+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, ComputedRef, ref } from "vue";
+import settingsStore from "../store/settingsStore.ts";
+
+const pageOptions: ComputedRef<(string | {
+  label: string;
+  value: string;
+})[]> = computed(() => [...settingsStore().getDefaultPageOptions()]);
+
+const selectedPage = ref(settingsStore().defaultPage);
+
+function updateDefaultPage(page: { label: string; value: 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"
+    option-label="label"
+    @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>, {
+export type SettingsStore = typeof settingsStore;
-    setLocale(locale: string): void,
-    setDarkMode(isDark: boolean): void,
-    getDarkMode(): boolean
-}>;
 
 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

@@ -11,6 +11,10 @@
   "english": "Englisch",
   "german": "Deutsch",
   "japanese": "Japanisch",
+  "notFound": {
+    "headline": "404",
+    "subTitle": "Seite nicht gefunden"
+  },
   "courseSelection": {
     "headline": "Willkommen beim HTWKalender",
     "winterSemester": "Wintersemester",
@@ -254,6 +258,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

@@ -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",
@@ -254,6 +258,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

@@ -11,6 +11,10 @@
   "english": "英語",
   "german": "ドイツ語",
   "japanese": "日本語",
+  "notFound": {
+    "headline": "404",
+    "subTitle": "ページが見つかりません"
+  },
   "courseSelection": {
     "headline": "HTWカレンダーへようこそ",
     "winterSemester": "冬学期",
@@ -254,6 +258,7 @@
     "headline": "設定",
     "subTitle": "ここで設定を編集できます。",
     "language": "言語",
-    "darkMode": "ダークモード"
+    "darkMode": "ダークモード",
+    "defaultPage": "デフォルトページ"
   }
 }

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) {
+  if (!(newLocale === prevLocale)) {
-    return;
+    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;

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",  {label: "Home", value: "/home"}),
     };
   },
   actions: {
@@ -33,7 +35,34 @@ const settingsStore = defineStore("settingsStore", {
     },
     getDarkMode(): boolean {
       return this.isDark;
-    }
+    },
+    setDefaultPage(page: {
+      label: string;
+      value: string;
+    }) {
+      this.defaultPage = page;
+    },
+    getDefaultPageOptions(): {
+      label: string;
+      value: string;
+    }[] {
+      // get a string array of all the route names
+      const options: {
+        label: string;
+        value: string;
+      }[] = [];
+      router.getRoutes().forEach((route) => {
+        if (route.name) {
+          if (typeof route.name === "string") {
+            options.push({
+              label: route.name,
+              value: route.path,
+            });
+            }
+          }
+        });
+        return options;
+    },
   },
 });
 

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>

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