From 5e0f26f24a6b65922154b0b1bd574a1676eec42e Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Mon, 1 Jul 2024 19:54:09 +0200
Subject: [PATCH 1/2] feat:#20 added settings page

---
 frontend/src/components/MenuBar.vue    | 21 +++-------
 frontend/src/i18n/translations/de.json |  4 ++
 frontend/src/i18n/translations/en.json |  4 ++
 frontend/src/i18n/translations/ja.json |  4 ++
 frontend/src/router/index.ts           |  6 +++
 frontend/src/view/SettingsView.vue     | 57 ++++++++++++++++++++++++++
 6 files changed, 81 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/view/SettingsView.vue

diff --git a/frontend/src/components/MenuBar.vue b/frontend/src/components/MenuBar.vue
index 5e78d46..ab8fb6b 100644
--- a/frontend/src/components/MenuBar.vue
+++ b/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>
diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
index 6e62d2a..916a6f9 100644
--- a/frontend/src/i18n/translations/de.json
+++ b/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."
   }
 }
diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json
index e64e9ff..c0786bb 100644
--- a/frontend/src/i18n/translations/en.json
+++ b/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."
   }
 }
diff --git a/frontend/src/i18n/translations/ja.json b/frontend/src/i18n/translations/ja.json
index 455bb34..42fb3cd 100644
--- a/frontend/src/i18n/translations/ja.json
+++ b/frontend/src/i18n/translations/ja.json
@@ -249,5 +249,9 @@
     "subTitle": "ここでは、個人のフィードのカレンダー表示を見つけることができます。",
     "searchPlaceholder": "カレンダートークン",
     "searchButton": "ロードカレンダー"
+  },
+  "settings": {
+    "headline": "設定",
+    "subTitle": "ここで設定を編集できます。"
   }
 }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 7aff183..3c6c214 100644
--- a/frontend/src/router/index.ts
+++ b/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,
+    }
   ],
 });
 
diff --git a/frontend/src/view/SettingsView.vue b/frontend/src/view/SettingsView.vue
new file mode 100644
index 0000000..1c056eb
--- /dev/null
+++ b/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>
\ No newline at end of file

From 112a692790fc177cf38f0b331263c0f232f5ae51 Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Mon, 1 Jul 2024 22:28:54 +0200
Subject: [PATCH 2/2] fix:#20 rearranged page layout

---
 frontend/src/components/DarkModeSwitcher.vue |  2 +-
 frontend/src/i18n/translations/de.json       |  4 +-
 frontend/src/i18n/translations/en.json       |  4 +-
 frontend/src/i18n/translations/ja.json       |  4 +-
 frontend/src/view/SettingsView.vue           | 54 ++++++++++++--------
 5 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/DarkModeSwitcher.vue b/frontend/src/components/DarkModeSwitcher.vue
index 3a0a6ab..1d163c3 100644
--- a/frontend/src/components/DarkModeSwitcher.vue
+++ b/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()"
diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
index 916a6f9..70af13d 100644
--- a/frontend/src/i18n/translations/de.json
+++ b/frontend/src/i18n/translations/de.json
@@ -252,6 +252,8 @@
   },
   "settings": {
     "headline": "Einstellungen",
-    "subTitle": "Hier kannst du deine Einstellungen bearbeiten."
+    "subTitle": "Hier kannst du deine Einstellungen bearbeiten.",
+    "language": "Sprache einstellen",
+    "darkMode": "Design auswählen"
   }
 }
diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json
index c0786bb..5db0af9 100644
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@@ -252,6 +252,8 @@
   },
   "settings": {
     "headline": "Settings",
-    "subTitle": "Here you can change your settings."
+    "subTitle": "Here you can change your settings.",
+    "language": "Choose your language",
+    "darkMode": "Switch page theme"
   }
 }
diff --git a/frontend/src/i18n/translations/ja.json b/frontend/src/i18n/translations/ja.json
index 42fb3cd..b223c11 100644
--- a/frontend/src/i18n/translations/ja.json
+++ b/frontend/src/i18n/translations/ja.json
@@ -252,6 +252,8 @@
   },
   "settings": {
     "headline": "設定",
-    "subTitle": "ここで設定を編集できます。"
+    "subTitle": "ここで設定を編集できます。",
+    "language": "言語",
+    "darkMode": "ダークモード"
   }
 }
diff --git a/frontend/src/view/SettingsView.vue b/frontend/src/view/SettingsView.vue
index 1c056eb..d6ec895 100644
--- a/frontend/src/view/SettingsView.vue
+++ b/frontend/src/view/SettingsView.vue
@@ -1,7 +1,7 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 
 import LocaleSwitcher from "@/components/LocaleSwitcher.vue";
-import {ref} from "vue";
+import { ref } from "vue";
 import DarkModeSwitcher from "@/components/DarkModeSwitcher.vue";
 
 const icon = "pi pi-cog";
@@ -19,39 +19,51 @@ function handleDarkModeToggled(isDarkVar: boolean) {
 <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"
+      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') }}
+        {{ $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>
+      <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>
+      <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',
-      ]"
+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 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>
\ No newline at end of file