feat:#71 fixed missing translation, added time format

Signed-off-by: masterElmar <18119527+masterElmar@users.noreply.github.com>

frontend/src/components/ModuleInformation.vue

@@ -1,10 +1,30 @@
 <script lang="ts" setup>
-import { inject } from "vue";
-import { Module } from "../model/module.ts";
+import {inject} from "vue";
+import {Module} from "../model/module.ts";
+import {Event} from "../model/event.ts";
+import * as moment from 'moment-timezone';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const dialogRef = inject("dialogRef") as any;
 const module = dialogRef.value.data.module as Module;
+
+// formats 2023-10-26 11:45:00.000Z to DD-MM-YYYY HH:MM
+function formatTimestamp(timestampString: string): string {
+  // Den übergebenen Zeitstempel in ein Moment-Objekt umwandeln
+  const timestamp = moment(timestampString);
+
+  // Die Zeitzone auf "Europe/Berlin" setzen
+  const berlinTime = timestamp.tz('Europe/Berlin');
+
+  // Das gewünschte Format für die Ausgabe festlegen
+  return berlinTime.format('DD.MM.YYYY HH:mm');
+}
+
+function sortModuleEventsByStart(events: Event[]) {
+  return events.sort((a, b) => {
+    return a.start.localeCompare(b.start);
+  });
+}
 </script>
 
 <template>
@@ -23,13 +43,21 @@ const module = dialogRef.value.data.module as Module;
       <tr>
         <td>
           <div class="card">
-            <DataTable :value="module.events" table-style="min-width: 50rem">
-              <Column field="day" header="Day"></Column>
-              <Column field="start" header="Start"></Column>
-              <Column field="end" header="End"></Column>
-              <Column field="rooms" header="Room"></Column>
-              <Column field="eventType" header="Type"></Column>
-              <Column field="week" header="Week"></Column>
+            <DataTable :value="sortModuleEventsByStart(module.events)" table-style="min-width: 50rem">
+              <Column field="day" :header="$t('moduleInformation.day')"></Column>
+              <Column field="start" :header="$t('moduleInformation.start')">
+                <template #body="slotProps">
+                  {{ formatTimestamp(slotProps.data.start) }}
+                </template>
+              </Column>
+              <Column field="end" :header="$t('moduleInformation.end')">
+                <template #body="slotProps">
+                  {{formatTimestamp( slotProps.data.end) }}
+                </template>
+              </Column>
+              <Column field="rooms" :header="$t('moduleInformation.room')"></Column>
+              <Column field="eventType" :header="$t('moduleInformation.type')"></Column>
+              <Column field="week" :header="$t('moduleInformation.week')"></Column>
             </DataTable>
           </div>
         </td>

frontend/src/i18n/translations/de.json

@@ -36,13 +36,20 @@
     "course": "Kurs",
     "person": "Dozent",
     "semester": "Semester",
-    "module": "Modul"
+    "module": "Modul",
+    "day": "Tag",
+    "start": "Begin",
+    "end": "Ende",
+    "room": "Raum",
+    "type": "Art",
+    "week": "Woche"
   },
   "editCalendarView": {
     "error": "Fehler",
     "invalidToken": "Ungültiger Token",
     "headline": "Bearbeite deinen HTWKalender",
-    "subTitle": "Füge deinen Link oder Token ein um den Kalender zu bearbeiten"
+    "subTitle": "Füge deinen Link oder Token ein um den Kalender zu bearbeiten",
+    "loadCalendar": "Kalender laden"
   },
   "additionalModules": {
     "subTitle": "Füge weitere Module hinzu die nicht in deinem Studiengang enthalten sind.",

frontend/src/i18n/translations/en.json

@@ -36,13 +36,20 @@
     "course": "course",
     "person": "lecturer",
     "semester": "semester",
-    "module": "module"
+    "module": "module",
+    "day": "day",
+    "start": "start",
+    "end": "end",
+    "room": "room",
+    "type": "type",
+    "week": "week"
   },
   "editCalendarView": {
     "error": "error",
     "invalidToken": "invalid token",
     "headline": "edit your HTWKalender",
-    "subTitle": "please enter your link or calendar token"
+    "subTitle": "please enter your link or calendar token",
+    "loadCalendar": "load calendar"
   },
   "additionalModules": {
     "subTitle": "Select additional Modules that are not listed in the regular semester for your Course",

frontend/src/view/EditCalendarView.vue

@@ -82,7 +82,7 @@ function loadCalendar(): void {
     <div
       class="flex align-items-center justify-content-center border-round m-2"
     >
-      <Button label="Load Calendar" @click="loadCalendar" />
+      <Button :label="$t('editCalendarView.loadCalendar')" @click="loadCalendar" />
     </div>
   </div>
 </template>