feat:#71 fixed missing translation, added time format

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

frontend/package-lock.json

@@ -29,6 +29,7 @@
         "eslint": "^8.48.0",
         "eslint-config-prettier": "^9.0.0",
         "eslint-plugin-vue": "^9.17.0",
+        "moment-timezone": "^0.5.43",
         "prettier": "3.0.2",
         "sass": "^1.69.5",
         "sass-loader": "^13.3.2",
@@ -2719,6 +2720,27 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/moment": {
+      "version": "2.29.4",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+      "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/moment-timezone": {
+      "version": "0.5.43",
+      "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.43.tgz",
+      "integrity": "sha512-72j3aNyuIsDxdF1i7CEgV2FfxM1r6aaqJyLB2vwb33mXYyoyLly+F1zbWqhA3/bVIoJ4szlUoMbUnVdid32NUQ==",
+      "dev": true,
+      "dependencies": {
+        "moment": "^2.29.4"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",

frontend/package.json

@@ -32,6 +32,7 @@
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-vue": "^9.17.0",
+    "moment-timezone": "^0.5.43",
     "prettier": "3.0.2",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",

frontend/src/components/ModuleInformation.vue

@@ -1,10 +1,30 @@
 <script lang="ts" setup>
 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>