feat:#20 added settings page

frontend/src/components/MenuBar.vue

@@ -17,13 +17,11 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import LocaleSwitcher from "./LocaleSwitcher.vue";
-import DarkModeSwitcher from "./DarkModeSwitcher.vue";
 const { t } = useI18n({ useScope: "global" });
 
-const isDark = ref(true);
+
 
 const items = computed(() => [
   {
@@ -86,13 +84,6 @@ const items = computed(() => [
     url: "https://www.htwk-leipzig.de/hochschule/kontakt/datenschutzerklaerung/",
   },
 ]);
-
-function handleDarkModeToggled(isDarkVar: boolean) {
-  // Do something with isDark value
-  // For example, update the root isDark value
-  // Assuming the root component has an isDark ref
-  isDark.value = isDarkVar;
-}
 </script>
 
 <template>
@@ -140,10 +131,10 @@ function handleDarkModeToggled(isDarkVar: boolean) {
     </template>
     <template #end>
       <div class="flex align-items-stretch justify-content-center">
-        <DarkModeSwitcher
-          @dark-mode-toggled="handleDarkModeToggled"
-        ></DarkModeSwitcher>
-        <LocaleSwitcher></LocaleSwitcher>
+        <!-- Settings Button with Gear Icon -->
+        <router-link v-slot="{ navigate }" :to="`/settings`" custom>
+          <Button icon="pi pi-cog" severity="secondary" rounded text size="large" aria-label="Settings" @click="navigate" />
+        </router-link>
       </div>
     </template>
   </Menubar>

frontend/src/i18n/translations/de.json

@@ -249,5 +249,9 @@
     "subTitle": "Hier findest du die Kalenderansicht von deinem persönlichen Feed.",
     "searchPlaceholder": "Token",
     "searchButton": "Kalender laden"
+  },
+  "settings": {
+    "headline": "Einstellungen",
+    "subTitle": "Hier kannst du deine Einstellungen bearbeiten."
   }
 }

frontend/src/i18n/translations/en.json

@@ -249,5 +249,9 @@
     "subTitle": "Here you can find the calendar view of your personal feed.",
     "searchPlaceholder": "calendar token",
     "searchButton": "load calendar"
+  },
+  "settings": {
+    "headline": "Settings",
+    "subTitle": "Here you can change your settings."
   }
 }

frontend/src/i18n/translations/ja.json

@@ -249,5 +249,9 @@
     "subTitle": "ここでは、個人のフィードのカレンダー表示を見つけることができます。",
     "searchPlaceholder": "カレンダートークン",
     "searchButton": "ロードカレンダー"
+  },
+  "settings": {
+    "headline": "設定",
+    "subTitle": "ここで設定を編集できます。"
   }
 }

frontend/src/router/index.ts

@@ -29,6 +29,7 @@ const EditModules = () => import("../view/editCalendar/EditModules.vue");
 const CourseSelection = () => import("../view/CourseSelection.vue");
 const FreeRooms = () => import("../view/FreeRooms.vue");
 const CalenderViewer = () => import("../view/UserCalendar.vue");
+const SettingsView = () => import("../view/SettingsView.vue");
 
 import i18n from "../i18n";
 
@@ -118,6 +119,11 @@ const router = createRouter({
       name: "rename-modules",
       component: RenameModules,
     },
+    {
+      path: "/settings",
+      name: "settings",
+      component: SettingsView,
+    }
   ],
 });
 

frontend/src/view/SettingsView.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+
+import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
+import {ref} from "vue";
+import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
+
+const icon = "pi pi-cog";
+const isDark = ref(true);
+
+function handleDarkModeToggled(isDarkVar: boolean) {
+  // Do something with isDark value
+  // For example, update the root isDark value
+  // Assuming the root component has an isDark ref
+  isDark.value = isDarkVar;
+}
+
+</script>
+
+<template>
+  <div class="flex flex-column align-items-center mt-0">
+    <div
+        class="flex align-items-center justify-content-center gap-3 mx-2 mb-4 transition-rolldown md:mt-8"
+    >
+      <h3 class="text-4xl">
+        {{ $t('settings.headline') }}
+      </h3>
+      <i v-if="icon" :class="icon" style="font-size: 2rem"></i>
+    </div>
+    <div v-if="$t('settings.subTitle')" class="flex justify-content-center">
+      <h5 class="text-2xl m-2">{{ $t('settings.subTitle') }}</h5>
+    </div>
+    <div class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8">
+      <slot name="selection" flex-specs="flex-1 m-0"></slot>
+    </div>
+    <div
+                :class="[
+              'opacity-100',
+              'transition-all',
+              'transition-duration-500',
+              'transition-ease-in-out',
+                   'w-full',
+        'lg:w-8',
+      ]"
+    >
+
+        <DarkModeSwitcher
+            @dark-mode-toggled="handleDarkModeToggled"
+        ></DarkModeSwitcher>
+        <LocaleSwitcher></LocaleSwitcher>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>