fix:#18 reroute for default page only applies to empty paths

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>
 

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>

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

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

frontend/src/i18n/translations/ja.json

@@ -11,6 +11,10 @@
   "english": "英語",
   "german": "ドイツ語",
   "japanese": "日本語",
+  "notFound": {
+    "headline": "404",
+    "subTitle": "ページが見つかりません"
+  },
   "courseSelection": {
     "headline": "HTWカレンダーへようこそ",
     "winterSemester": "冬学期",

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();
+  }
 });
 
 export default router;

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,16 +36,28 @@ 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,
+            });
             }
           }
         });

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>