Merge branch 'main' into 15-calendar-preview

# Conflicts:
#	frontend/src/App.vue
#	frontend/src/view/AdditionalModules.vue

frontend/src/components/ModuleTemplateDialog.vue

@@ -1,18 +1,30 @@
 <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 +40,30 @@ 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>