feat:#60 added more localization

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",
-    examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung",
+    description: t('moduleTemplateDialog.eventTyp'),
+    examples: "V = "+t('moduleTemplateDialog.lecture')+
+      ", S = "+t('moduleTemplateDialog.seminar')+
+      ", P = "+t('moduleTemplateDialog.exam'),
   },
   {
     placeholder: "%p",
-    description: "Mandatory",
-    examples: "w = optional, p = mandatory",
+    description: t('moduleTemplateDialog.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
-      the event in your calendar.
+      {{ t('moduleTemplateDialog.explanationOne')}}
     </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="description" header="Description"></Column>
-      <Column field="examples" header="Examples"></Column>
+      <Column field="placeholder" :header="$t('moduleTemplateDialog.placeholder')"></Column>
+      <Column field="description" :header="$t('moduleTemplateDialog.description')"></Column>
+      <Column field="examples" :header="$t('moduleTemplateDialog.examples')"></Column>
     </DataTable>
     <p>
-      Additionally, you can toggle notifications for each module. If you do so,
-      you will be notified 15 minutes before the event starts.
+      {{ t('moduleTemplateDialog.explanationTwo')}}
     </p>
   </Dialog>
 </template>