Merge branch '20-settings-page' into 'main'

Resolve "settings page"

Closes #20

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

frontend/src/components/DarkModeSwitcher.vue

@@ -60,7 +60,7 @@ onMounted(() => {
   <Button
     id="dark-mode-switcher"
     size="small"
-    class="p-button-rounded w-full md:w-auto"
+    class="p-button-rounded md:w-auto"
     style="margin-right: 1rem"
     :severity="isDark ? 'warning' : 'success'"
     @click="toggleTheme()"

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,11 @@
     "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.",
+    "language": "Sprache einstellen",
+    "darkMode": "Design auswählen"
   }
 }

frontend/src/i18n/translations/en.json

@@ -249,5 +249,11 @@
     "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.",
+    "language": "Choose your language",
+    "darkMode": "Switch page theme"
   }
 }

frontend/src/i18n/translations/ja.json

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

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,69 @@
+<script lang="ts" setup>
+
+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 flex-specs="flex-1 m-0" name="selection"></slot>
+    </div>
+    <div
+class="opacity-100 transition-all transition-duration-500 transition-ease-in-out w-full lg:w-8"
+    >
+      <div class="flex flex-column justify-content-center">
+        <div class="grid my-2">
+          <div class="col text-center">
+            {{ $t("settings.language") }}
+          </div>
+          <div class="col text-center">
+            <LocaleSwitcher />
+          </div>
+        </div>
+        <div class="grid my-2">
+          <div class="col text-center">
+            {{ $t("settings.darkMode") }}
+          </div>
+          <div class="col text-center">
+            <DarkModeSwitcher
+              @dark-mode-toggled="handleDarkModeToggled"
+            ></DarkModeSwitcher>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+
+.col {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>