feat:#60 added localization for more pages

frontend/src/components/CourseSelection.vue

@@ -7,8 +7,7 @@ import {
 import ModuleSelection from "./ModuleSelection.vue";
 import { Module } from "../model/module.ts";
 import { useI18n } from "vue-i18n";
-const { t } = useI18n({ useScope: 'global' })
-
+const { t } = useI18n({ useScope: "global" });
 
 const courses = async () => {
   return await fetchCourse();
@@ -16,10 +15,12 @@ const courses = async () => {
 
 const selectedCourse: Ref<{ name: string }> = ref({ name: "" });
 const countries: Ref<{ name: string }[]> = ref([]);
-const semesters: ComputedRef<{ name: string; value: string }[]> = computed(() =>[
-  { name: t('courseSelection.winterSemester'), value: "ws" },
-  { name: t('courseSelection.summerSemester'), value: "ss" },
-]);
+const semesters: ComputedRef<{ name: string; value: string }[]> = computed(
+  () => [
+    { name: t("courseSelection.winterSemester"), value: "ws" },
+    { name: t("courseSelection.summerSemester"), value: "ss" },
+  ],
+);
 
 const selectedSemester: Ref<{ name: string; value: string }> = ref(
   semesters.value[0],
@@ -46,7 +47,7 @@ async function getModules() {
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <h3 class="text-4xl">
-        Welcome to HTWKalender
+        {{$t("courseSelection.headline")}}
         <i
           class="pi pi-calendar vertical-align-baseline"
           style="font-size: 2rem"
@@ -56,7 +57,7 @@ async function getModules() {
     <div
       class="flex align-items-center justify-content-center h-4rem border-round m-2"
     >
-      <h5 class="text-2xl">{{ $t('courseSelection.selectCourse') }}</h5>
+      <h5 class="text-2xl">{{ $t("courseSelection.subTitle") }}</h5>
     </div>
     <div
       class="flex align-items-center justify-content-center border-round m-2"
@@ -67,7 +68,8 @@ async function getModules() {
         class="w-full md:w-25rem mx-2"
         filter
         option-label="name"
-        placeholder="Select a Course"
+        :placeholder="$t('courseSelection.courseDropDown')"
+        :empty-message="$t('courseSelection.noCoursesAvailable')"
         @change="getModules()"
         :autoFilterFocus="true"
       ></Dropdown>
@@ -76,7 +78,7 @@ async function getModules() {
         :options="semesters"
         class="w-full md:w-25rem mx-2"
         option-label="name"
-        placeholder="Select a Semester"
+        :placeholder="$t('courseSelection.semesterDropDown')"
         @change="getModules()"
       ></Dropdown>
     </div>
@@ -91,4 +93,4 @@ async function getModules() {
       </div>
     </div>
   </div>
-</template>
+</template>

frontend/src/components/MenuBar.vue

@@ -8,40 +8,52 @@ const items = computed(() => [
   {
     label: t("createCalendar"),
     icon: "pi pi-fw pi-plus",
-    to: "/",
+    route: "/",
   },
   {
     label: t("editCalendar"),
     icon: "pi pi-fw pi-pencil",
-    to: "/edit",
+    route: "/edit",
   },
   {
     label: t("roomFinder"),
     icon: "pi pi-fw pi-calendar",
-    to: `rooms`,
+    route: `rooms`,
   },
   {
     label: t("faq"),
     icon: "pi pi-fw pi-book",
-    to: `faq`,
+    route: `faq`,
   },
   {
     label: t("imprint"),
     icon: "pi pi-fw pi-id-card",
-    to: `imprint`,
+    route: `imprint`,
   },
   {
     label: t("privacy"),
     icon: "pi pi-fw pi-exclamation-triangle",
-    to: `privacy-policy`,
+    route: `privacy-policy`,
   },
 ]);
 
 </script>
 
 <template>
-  <Menubar :model="items" class="menubar justify-content-center">
-    <template #start>
+  <Menubar :model="items" class="menubar justify-content-between">
+    <template #start class="mr-2">
+        <img
+          width="35" height="40"
+          src="../../public/htwk.svg"
+          alt="Logo"
+          class="h-10 w-10 mr-6"
+          style="margin-left: 1rem"
+        />
+    </template>
+    <template #item="{ item }">
+      <router-link v-slot="{ navigate }" :to="item.route" custom>
+        <Button :label='String(item.label)' :icon="item.icon" severity="secondary" @click="navigate" text />
+      </router-link>
     </template>
     <template #end>
       <LocaleSwitcher></LocaleSwitcher>

frontend/src/components/ModuleInformation.vue

@@ -12,13 +12,13 @@ const module = dialogRef.value.data.module as Module;
     <h2>{{ module.name }}</h2>
     <table>
       <tr>
-        <td>Course: {{ module.course }}</td>
+        <td>{{$t('moduleInformation.course')}}: {{ module.course }}</td>
       </tr>
       <tr>
-        <td>Person: {{ module.prof }}</td>
+        <td>{{$t('moduleInformation.person')}}: {{ module.prof }}</td>
       </tr>
       <tr>
-        <td>Semester: {{ module.semester }}</td>
+        <td>{{$t('moduleInformation.semester')}}: {{ module.semester }}</td>
       </tr>
       <tr>
         <td>

frontend/src/components/ModuleSelection.vue

@@ -64,7 +64,7 @@ function nextStep() {
         :disabled="selectedModules.length < 1"
         class="col-4 justify-content-center"
         @click="nextStep()"
-        >Next Step
+        >{{ $t("moduleSelection.nextStep") }}
       </Button>
     </div>
     <div class="flex align-items-center justify-content-center">
@@ -72,16 +72,16 @@ function nextStep() {
         <template #header>
           <div class="flex justify-content-between flex-wrap">
             <div class="flex align-items-center justify-content-center">
-              <h3>Modules - {{ selectedModules.length }}</h3>
+              <h3>{{$t('moduleSelection.modules')}} - {{ selectedModules.length }}</h3>
             </div>
             <div class="flex align-items-center justify-content-center">
               <ToggleButton
                 v-model="allSelected"
                 class="w-12rem"
                 off-icon="pi pi-times"
-                off-label="Unselect All"
+                :off-label="$t('moduleSelection.deselectAll')"
                 on-icon="pi pi-check"
-                on-label="Select All"
+                :on-label="$t('moduleSelection.selectAll')"
                 @click="selectAllModules(!allSelected)"
               />
             </div>
@@ -89,7 +89,7 @@ function nextStep() {
         </template>
         <template #empty>
           <p class="p-4 text-2xl font-bold text-900 empty-message">
-            No Modules found for this course
+            {{$t("moduleSelection.noModulesAvailable")}}
           </p>
         </template>
         <template #list="slotProps">
@@ -112,9 +112,9 @@ function nextStep() {
                     v-model="modulesWithSelection[slotProps.index].selected"
                     class="w-9rem"
                     off-icon="pi pi-times"
-                    off-label="Unselected"
+                    :off-label="$t('moduleSelection.unselected')"
                     on-icon="pi pi-check"
-                    on-label="Selected"
+                    :on-label="$t('moduleSelection.selected')"
                   />
                 </div>
               </div>
@@ -132,4 +132,4 @@ function nextStep() {
     width: 50rem;
   }
 }
-</style>
+</style>

frontend/src/components/RoomOccupation.vue

@@ -3,9 +3,11 @@ import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import timeGridPlugin from "@fullcalendar/timegrid";
-import { computed, ref, Ref, watch } from "vue";
+import { computed, ComputedRef, ref, Ref, watch } from "vue";
 import { CalendarOptions, EventInput } from "@fullcalendar/core";
 import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: 'global' })
 
 const props = defineProps({
   room: {
@@ -53,7 +55,14 @@ async function getOccupation() {
   calendar?.refetchEvents();
 }
 
-const calendarOptions: CalendarOptions = {
+import allLocales from "@fullcalendar/core/locales-all";
+
+
+const calendarOptions: ComputedRef<CalendarOptions> = computed(() =>
+  {
+    return {
+  locales: allLocales,
+  locale: t('languageCode'),
   plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
   initialView: "week",
   dayHeaderFormat: { weekday: "short", omitCommas: true },
@@ -65,6 +74,7 @@ const calendarOptions: CalendarOptions = {
   },
   views: {
     week: {
+      description: "Wochenansicht",
       type: "timeGrid",
       slotLabelFormat: {
         hour: "numeric",
@@ -77,7 +87,6 @@ const calendarOptions: CalendarOptions = {
       titleFormat: { month: "short", day: "numeric" },
       slotMinTime: "06:00:00",
       slotMaxTime: "22:00:00",
-
       duration: { days: 7 },
       firstDay: 1,
       allDaySlot: false,
@@ -106,7 +115,7 @@ const calendarOptions: CalendarOptions = {
     start: "week,Day",
   },
 
-  datesSet: function (dateInfo) {
+  datesSet: function (dateInfo: any) {
     const view = dateInfo.view;
     const offset = new Date().getTimezoneOffset();
     const startDate = new Date(view.activeStart.getTime() - offset * 60 * 1000);
@@ -115,7 +124,7 @@ const calendarOptions: CalendarOptions = {
     currentDateTo.value = endDate.toISOString().split("T")[0];
     getOccupation();
   },
-  events: function (_info, successCallback, failureCallback) {
+  events: function (_info: any, successCallback: any, failureCallback: any) {
     if (occupations.value.length === 0) {
       failureCallback(new Error("no events"));
     } else {
@@ -130,8 +139,8 @@ const calendarOptions: CalendarOptions = {
       );
     }
   },
-};
+}})
 </script>
 <template>
-  <FullCalendar ref="fullCalendar" :options="calendarOptions" />
+  <FullCalendar ref="fullCalendar" :options="calendarOptions"/>
 </template>

frontend/src/i18n/translations/de.json

@@ -1,15 +1,51 @@
 {
-   "createCalendar": "Kalender erstellen",
+  "languageCode": "de",
+  "createCalendar": "Kalender erstellen",
   "editCalendar": "Kalender bearbeiten",
   "roomFinder": "Raumfinder",
   "faq": "FAQ",
   "imprint": "Impressum",
   "privacy": "Datenschutz",
   "english": "Englisch",
-    "german": "Deutsch",
+  "german": "Deutsch",
   "courseSelection": {
+    "headline": "Willkommen beim HTWKalender",
     "winterSemester": "Wintersemester",
     "summerSemester": "Sommersemester",
-    "selectCourse": "Bitte wähle eine Gruppe und das Semester aus"
+    "subTitle": "Bitte wähle eine Gruppe und das Semester aus.",
+    "courseDropDown": "Gruppe",
+    "noCoursesAvailable": "Keine Gruppen verfügbar",
+    "semesterDropDown": "Semester"
+  },
+  "roomFinderPage": {
+    "headline": "Raumfinder",
+    "detail": "Bitte wähle einen Raum aus, um die Belegung einzusehen",
+    "dropDownSelect": "Bitte wähle einen Raum aus",
+    "noRoomsAvailable": "Keine Räume verfügbar"
+  },
+  "moduleSelection":{
+    "nextStep": "Weiter",
+    "selectAll": "Wähle alle aus",
+    "deselectAll": "Alle abwählen",
+    "noModulesAvailable": "Keine Module verfügbar",
+    "modules": "Module"
+  },
+  "moduleInformation": {
+    "course": "Kurs",
+    "person": "Person",
+    "semester": "Semester"
+  },
+  "editCalendarView": {
+    "error": "Fehler",
+    "invalidToken": "Ungültiger Token",
+    "headline": "Bearbeite deinen HTWKalender",
+    "subTitle": "Füge deinen Link oder Token ein um den Kalender zu bearbeiten"
+  },
+  "additionalModules": {
+    "subTitle": "Füge weitere Module hinzu die nicht in deinem Studiengang enthalten sind.",
+    "dropDown": "Wähle weitere Module aus",
+    "dropDownFooterItem": "Module",
+    "dropDownFooterSelected": "ausgewählt",
+    "nextStep": "Weiter"
   }
 }

frontend/src/i18n/translations/en.json

@@ -1,15 +1,53 @@
 {
-  "createCalendar": "Create Calendar",
-  "editCalendar": "Edit Calendar",
-  "roomFinder": "Room Finder",
-  "faq": "FAQ",
-  "imprint": "Imprint",
-  "privacy": "Privacy",
+  "languageCode": "en",
+  "createCalendar": "create calendar",
+  "editCalendar": "edit calendar",
+  "roomFinder": "room finder",
+  "faq": "faq",
+  "imprint": "imprint",
+  "privacy": "privacy",
   "english": "English",
   "german": "German",
   "courseSelection": {
+    "headline": "Welcome to HTWKalender",
     "winterSemester": "winter semester",
     "summerSemester": "summer semester",
-    "selectCourse": "Please select a course and semester"
+    "subTitle": "Please select a course and semester",
+    "courseDropDown": "Please select a course",
+    "noCoursesAvailable": "No courses listed",
+    "semesterDropDown": "Please select a semester"
+  },
+  "roomFinderPage": {
+    "headline": "room finder",
+    "detail": "Please select a room to view the occupancy",
+    "dropDownSelect": "Please select a room",
+    "noRoomsAvailable": "No rooms listed"
+  },
+  "moduleSelection":{
+    "nextStep": "next step",
+    "selectAll": "select all",
+    "deselectAll": "deselect all",
+    "selected": "selected",
+    "unselected": "unselected",
+    "noModulesAvailable": "no modules available",
+    "modules": "modules"
+  },
+  "moduleInformation": {
+    "course": "course",
+    "person": "person",
+    "semester": "semester"
+  },
+  "editCalendarView": {
+    "error": "error",
+    "invalidToken": "invalid token",
+    "headline": "edit your HTWKalender",
+    "subTitle": "please enter your link or calendar token"
+  },
+  "additionalModules": {
+    "subTitle": "Select additional Modules that are not listed in the regular semester for your Course",
+    "dropDown": "Select additional modules",
+    "dropDownFooterItem": "modules",
+    "dropDownFooterSelected": "selected",
+    "nextStep": "next step"
   }
 }

frontend/src/router/index.ts

@@ -1,12 +1,12 @@
 import { createRouter, createWebHistory } from "vue-router";
 import Faq from "../components/FaqPage.vue";
-import AdditionalModules from "../components/AdditionalModules.vue";
+import AdditionalModules from "../view/AdditionalModules.vue";
 import CalendarLink from "../components/CalendarLink.vue";
-import Imprint from "../components/ImprintPage.vue";
-import PrivacyPolicy from "../components/PrivacyPolicy.vue";
+import Imprint from "../view/ImprintPage.vue";
+import PrivacyPolicy from "../view/PrivacyPolicy.vue";
 import RenameModules from "../components/RenameModules.vue";
-import RoomFinder from "../components/RoomFinder.vue";
-import EditCalendarView from "../view/editCalendarView.vue";
+import RoomFinder from "../view/RoomFinder.vue";
+import EditCalendarView from "../view/EditCalendarView.vue";
 import EditAdditionalModules from "../components/editCalendar/EditAdditionalModules.vue";
 import EditModules from "../components/editCalendar/EditModules.vue";
 import CourseSelection from "../components/CourseSelection.vue";

frontend/src/view/AdditionalModules.vue

@@ -4,12 +4,10 @@ import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
 import { MultiSelectAllChangeEvent } from "primevue/multiselect";
-
-import { useDialog } from "primevue/usedialog";
-const dialog = useDialog();
-
 import router from "../router";
 import { fetchModule } from "../api/fetchModule.ts";
+import { useDialog } from "primevue/usedialog";
+const dialog = useDialog();
 
 const fetchedModules = async () => {
   return await fetchAllModules();
@@ -35,7 +33,7 @@ async function nextStep() {
 }
 
 const ModuleInformation = defineAsyncComponent(
-  () => import("./ModuleInformation.vue"),
+  () => import("../components/ModuleInformation.vue"),
 );
 
 async function showInfo(module: Module) {
@@ -79,8 +77,7 @@ function selectChange() {
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <h3>
-        Select additional Modules that are not listed in the regular semester
-        for your Course
+        {{ $t("additionalModules.subTitle") }}
       </h3>
     </div>
     <div class="card flex align-items-center justify-content-center m-2">
@@ -93,10 +90,11 @@ function selectChange() {
         :virtual-scroller-options="{ itemSize: 70 }"
         class="custom-multiselect"
         filter
-        placeholder="Select additional modules"
+        :placeholder="$t('additionalModules.dropDown')"
         @change="selectChange()"
         @selectall-change="onSelectAllChange($event)"
         :autoFilterFocus="true"
+        :showToggleAll="false"
       >
         <template #option="slotProps">
           <div class="flex justify-content-between w-full">
@@ -121,16 +119,15 @@ function selectChange() {
         <template #footer>
           <div class="py-2 px-3">
             <b>{{ selectedModules ? selectedModules.length : 0 }}</b>
-            item{{
-              (selectedModules ? selectedModules.length : 0) > 1 ? "s" : ""
-            }}
-            selected.
+            {{$t("additionalModules.dropDownFooterItem")}}
+            {{ (selectedModules ? selectedModules.length : 0) > 1 ? "s" : "" }}
+            {{$t("additionalModules.dropDownFooterSelected")}}
           </div>
         </template>
       </MultiSelect>
     </div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">Next Step</Button>
+      <Button @click="nextStep()">{{$t("additionalModules.nextStep")}}</Button>
     </div>
   </div>
 </template>
@@ -143,4 +140,4 @@ function selectChange() {
 :deep(.custom-multiselect li) {
   height: unset;
 }
-</style>
+</style>

frontend/src/view/EditCalendarView.vue

@@ -6,6 +6,9 @@ import { getCalender } from "../api/loadCalendar";
 import router from "../router";
 import tokenStore from "../store/tokenStore";
 import { useToast } from "primevue/usetoast";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: 'global' })
+
 const toast = useToast();
 
 const token: Ref<string> = ref("");
@@ -13,7 +16,7 @@ const modules: Ref<Module[]> = ref(moduleStore().modules);
 
 function extractToken(token: string): string {
   const tokenRegex = /^[a-z0-9]{15}$/;
-  const tokenUriRegex = /(?:\?|&)token=([a-z0-9]{15})(?:&|$)/;
+  const tokenUriRegex = /[?&]token=([a-z0-9]{15})(?:&|$)/;
 
   if (tokenRegex.test(token)) {
     return token;
@@ -33,8 +36,8 @@ function loadCalendar(): void {
   } catch (e) {
     toast.add({
       severity: "error",
-      summary: "Error",
-      detail: "Invalid token",
+      summary: t("editCalendarView.error"),
+      detail: t("editCalendarView.invalidToken"),
       life: 3000,
     });
     return;
@@ -58,10 +61,10 @@ function loadCalendar(): void {
   <Toast />
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem mt-2">
-      <h3 class="text-2xl">
-        Edit your HTWKalender
+      <h3 class="text-4xl">
+        {{$t("editCalendarView.headline")}}
         <i
-          class="pi pi-calendar vertical-align-baseline"
+          class="pi pi-pencil vertical-align-baseline ml-2"
           style="font-size: 2rem"
         ></i>
       </h3>
@@ -69,7 +72,7 @@ function loadCalendar(): void {
     <div
       class="flex align-items-center justify-content-center h-4rem border-round"
     >
-      <p class="text-2xl">Please enter your existing calendar token</p>
+      <p class="text-2xl">{{$t("editCalendarView.subTitle")}}</p>
     </div>
     <div
       class="flex align-items-center justify-content-center border-round m-2"

frontend/src/view/RoomFinder.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { Ref, ref } from "vue";
-import { fetchRoom } from "../api/fetchRoom.ts";
-import RoomOccupation from "./RoomOccupation.vue";
+import { fetchRoom } from "@/api/fetchRoom.ts";
+import RoomOccupation from "@/components/RoomOccupation.vue";
 
 const rooms = async () => {
   return await fetchRoom();
@@ -21,12 +21,16 @@ rooms().then(
 <template>
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3 class="text-4xl">Raumfinder</h3>
+      <h3 class="text-4xl">{{$t('roomFinderPage.headline')}}</h3>
+      <i
+        class="pi pi-search vertical-align-baseline ml-3"
+        style="font-size: 2rem"
+      ></i>
     </div>
     <div
       class="flex align-items-center justify-content-center h-4rem border-round m-2"
     >
-      <h5 class="text-2xl">Please select a room</h5>
+      <h5 class="text-2xl">{{$t('roomFinderPage.detail')}}</h5>
     </div>
     <div
       class="flex align-items-center justify-content-center border-round m-2"
@@ -37,7 +41,8 @@ rooms().then(
         class="w-full md:w-25rem mx-2"
         filter
         option-label="name"
-        placeholder="Select a Room"
+        :placeholder="$t('roomFinderPage.dropDownSelect')"
+        :empty-message="$t('roomFinderPage.noRoomsAvailable')"
         :autoFilterFocus="true"
       />
     </div>