feat:#60 added more localization

frontend/src/components/CalendarLink.vue

@@ -3,6 +3,9 @@ import tokenStore from "../store/tokenStore.ts";
 import { useToast } from "primevue/usetoast";
 import { onMounted } from "vue";
 import router from "../router";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: 'global' })
+
 const toast = useToast();
 
 const domain = window.location.hostname;
@@ -12,8 +15,8 @@ const getLink = () => "https://" + domain + "/api/feed?token=" + tokenStore().to
 const show = () => {
   toast.add({
     severity: "info",
-    summary: "Info",
+    summary: t('calendarLink.copyToastSummary'),
-    detail: "Link copied to clipboard",
+    detail: t('calendarLink.copyToastNotification'),
     life: 3000,
   });
 };
@@ -36,8 +39,8 @@ function copyToClipboard() {
       console.error("Could not copy text: ", err);
       toast.add({
         severity: "error",
-        summary: "Error",
+        summary: t('calendarLink.copyToastError'),
-        detail: "Could not copy text",
+        detail: t('calendarLink.copyToastErrorDetail'),
         life: 3000,
       });
     },
@@ -54,17 +57,17 @@ const forwardToMicrosoft = () => {
 
 const actions = [
   {
-    label: "Copy to Clipboard",
+    label: t('calendarLink.copyToClipboard'),
     icon: "pi pi-copy",
     command: copyToClipboard,
   },
   {
-    label: "To Google Calendar",
+    label: t('calendarLink.toGoogleCalendar'),
     icon: "pi pi-google",
     command: forwardToGoogle,
   },
   {
-    label: "To Microsoft Calendar",
+    label: t('calendarLink.toMicrosoftCalendar'),
     icon: "pi pi-microsoft",
     command: forwardToMicrosoft,
   },

frontend/src/components/CourseSelection.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ComputedRef, Ref, ref } from "vue";
+import { computed, ComputedRef, Ref, ref, watch } from "vue";
 import {
   fetchCourse,
   fetchModulesByCourseAndSemester,
@@ -26,6 +26,11 @@ const selectedSemester: Ref<{ name: string; value: string }> = ref(
   semesters.value[0],
 );
 
+//if semesters get changed, refresh the selected semester ref with a watcher
+watch(semesters,(newValue: { name: string; value: string }[]) =>
+    (selectedSemester.value = newValue[selectedSemester.value.value === "ws" ? 0 : 1]),
+);
+
 courses().then(
   (data) =>
     (countries.value = data.map((course) => {

frontend/src/components/ModuleTemplateDialog.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
-import { Ref, ref } from "vue";
+import { computed, Ref, ref } from "vue";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: 'global' })
 
 const helpVisible: Ref<boolean> = ref(false);
 
-const placeholders = ref([
+const placeholders = computed(() => [
   {
     placeholder: "%t",
-    description: "Event Type",
+    description: t('moduleTemplateDialog.eventTyp'),
-    examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung",
+    examples: "V = "+t('moduleTemplateDialog.lecture')+
+      ", S = "+t('moduleTemplateDialog.seminar')+
+      ", P = "+t('moduleTemplateDialog.exam'),
   },
   {
     placeholder: "%p",
-    description: "Mandatory",
+    description: t('moduleTemplateDialog.mandatory'),
-    examples: "w = optional, p = mandatory",
+    examples: "w = "+t('moduleTemplateDialog.optional')+", p = "+t('moduleTemplateDialog.mandatory'),
   },
 ]);
 </script>
@@ -28,20 +32,18 @@ const placeholders = ref([
     aria-label="Help"
     @click="helpVisible = true"
   />
-  <Dialog v-model:visible="helpVisible" header="Module configuration">
+  <Dialog v-model:visible="helpVisible" :header="$t('moduleTemplateDialog.moduleConfiguration')">
     <p>
-      Here you can rename your modules to your liking. This will be the name of
+      {{ t('moduleTemplateDialog.explanationOne')}}
-      the event in your calendar.
     </p>
-    <p>You can use the following placeholders in your module names:</p>
+    <p>{{ t('moduleTemplateDialog.tableDescription')}}</p>
     <DataTable :value="placeholders">
-      <Column field="placeholder" header="Placeholder"></Column>
+      <Column field="placeholder" :header="$t('moduleTemplateDialog.placeholder')"></Column>
-      <Column field="description" header="Description"></Column>
+      <Column field="description" :header="$t('moduleTemplateDialog.description')"></Column>
-      <Column field="examples" header="Examples"></Column>
+      <Column field="examples" :header="$t('moduleTemplateDialog.examples')"></Column>
     </DataTable>
     <p>
-      Additionally, you can toggle notifications for each module. If you do so,
+      {{ t('moduleTemplateDialog.explanationTwo')}}
-      you will be notified 15 minutes before the event starts.
     </p>
   </Dialog>
 </template>

frontend/src/components/RenameModules.vue

@@ -3,9 +3,12 @@ import moduleStore from "../store/moduleStore.ts";
 import { createIndividualFeed } from "../api/createFeed.ts";
 import router from "../router";
 import tokenStore from "../store/tokenStore.ts";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
 import { onlyWhitespace } from "../helpers/strings.ts";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: 'global' })
+
 
 const tableData = ref(
   moduleStore().modules.map((module) => {
@@ -16,10 +19,10 @@ const tableData = ref(
   }),
 );
 
-const columns = ref([
+const columns = computed(() => [
-  { field: "Course", header: "Course" },
+  { field: "Course", header: t('moduleInformation.course') },
-  { field: "Module", header: "Module" },
+  { field: "Module", header: t('moduleInformation.module') },
-  { field: "Reminder", header: "Reminder" },
+  { field: "Reminder", header: t('renameModules.reminder') },
 ]);
 
 async function finalStep() {
@@ -32,7 +35,7 @@ async function finalStep() {
 <template>
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3>Configure your selected Modules to your liking.</h3>
+      <h3>{{$t('renameModules.subTitle')}}</h3>
       <ModuleTemplateDialog />
     </div>
     <div class="card flex align-items-center justify-content-center m-2">
@@ -44,7 +47,7 @@ async function finalStep() {
       >
         <template #header>
           <div class="flex align-items-center justify-content-end">
-            Enable all notifications:
+            {{$t('renameModules.enableAllNotifications')}}
             <InputSwitch
               class="mx-4"
               :model-value="
@@ -99,10 +102,6 @@ async function finalStep() {
               />
             </template>
             <template v-else-if="field === 'Reminder'">
-              <!--<InputSwitch 
-                v-model="data.Module.reminder" 
-                class="align-self-center"
-              />-->
               <Button
                 :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
                 :severity="data.Module.reminder ? 'warning' : 'secondary'"
@@ -121,7 +120,7 @@ async function finalStep() {
     </div>
 
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="finalStep()">Next Step</Button>
+      <Button @click="finalStep()">{{$t('renameModules.nextStep')}}</Button>
     </div>
   </div>
 </template>

frontend/src/i18n/translations/de.json

@@ -25,15 +25,18 @@
   },
   "moduleSelection":{
     "nextStep": "Weiter",
-    "selectAll": "Wähle alle aus",
+    "selectAll": "Alle anwählen",
     "deselectAll": "Alle abwählen",
+    "selected": "angewählt",
+    "unselected": "abgewählt",
     "noModulesAvailable": "Keine Module verfügbar",
     "modules": "Module"
   },
   "moduleInformation": {
     "course": "Kurs",
-    "person": "Person",
+    "person": "Dozent",
-    "semester": "Semester"
+    "semester": "Semester",
+    "module": "Modul"
   },
   "editCalendarView": {
     "error": "Fehler",
@@ -47,5 +50,35 @@
     "dropDownFooterItem": "Module",
     "dropDownFooterSelected": "ausgewählt",
     "nextStep": "Weiter"
+  },
+  "renameModules": {
+    "reminder": "Erinnerung",
+    "enableAllNotifications": "Alle Benachrichtigungen aktivieren",
+    "subTitle": "Konfigurieren Sie die ausgewählten Module nach Ihren Wünschen.",
+    "nextStep": "Weiter"
+  },
+  "moduleTemplateDialog":{
+    "explanationOne": "Hier können Module nach Wunsch umbenannt werden. Welche dann als Anzeigename im Kalender dargestellt werden.",
+    "explanationTwo": "Zusätzlich können Sie Benachrichtigungen für jedes Modul einschalten, damit für jeden Termin 15 Minuten vor Beginn einen Erinnerung geschalten wird.",
+    "tableDescription": "Sie können die folgenden Platzhalter in Ihren Modulnamen verwenden:",
+    "placeholder": "Platzhalter",
+    "description": "Beschreibung",
+    "examples": "Beispiele",
+    "moduleConfiguration": "Modulkonfiguration",
+    "mandatory": "Verpflichtend",
+    "optional": "Optional",
+    "lecture": "Vorlesung",
+    "seminar": "Seminar",
+    "exam": "Prüfung/Praktikum",
+    "eventTyp": "Ereignistyp"
+  },
+  "calendarLink": {
+    "copyToastNotification": "Link in Zwischenablage kopiert",
+    "copyToastSummary": "Information",
+    "copyToastError": "Fehler",
+    "copyToastErrorDetail": "Link konnte nicht in Zwischenablage kopiert werden",
+    "copyToClipboard": "Link kopieren",
+    "toGoogleCalendar": "Google Kalender",
+    "toMicrosoftCalendar": "Microsoft Kalender"
   }
 }

frontend/src/i18n/translations/en.json

@@ -34,8 +34,9 @@
   },
   "moduleInformation": {
     "course": "course",
-    "person": "person",
+    "person": "lecturer",
-    "semester": "semester"
+    "semester": "semester",
+    "module": "module"
   },
   "editCalendarView": {
     "error": "error",
@@ -49,5 +50,35 @@
     "dropDownFooterItem": "modules",
     "dropDownFooterSelected": "selected",
     "nextStep": "next step"
+  },
+  "renameModules": {
+    "reminder": "reminder",
+    "enableAllNotifications": "enable all notifications",
+    "subTitle": "Configure your selected Modules to your liking.",
+    "nextStep": "next step"
+  },
+  "moduleTemplateDialog":{
+    "explanationOne": "Here you can rename your modules to your liking. This will be the name of the event in your calendar.",
+    "explanationTwo": "Additionally, you can toggle notifications for each module. If you do so, you will be notified 15 minutes before the event starts.",
+    "tableDescription": "You can use the following placeholders in your module names:",
+    "placeholder": "placeholder",
+    "description": "description",
+    "examples": "examples",
+    "moduleConfiguration": "module configuration",
+    "mandatory": "mandatory",
+    "optional": "optional",
+    "lecture": "lecture",
+    "seminar": "seminar",
+    "exam": "exam/internship project",
+    "eventTyp": "event type"
+  },
+  "calendarLink": {
+    "copyToastNotification": "Link copied to clipboard",
+    "copyToastSummary": "information",
+    "copyToastError": "error",
+    "copyToastErrorDetail": "could not copy link to clipboard",
+    "copyToClipboard": "copy to clipboard",
+    "toGoogleCalendar": "to Google Calendar",
+    "toMicrosoftCalendar": "to Microsoft Calendar"
   }
 }