feat:#71 fixed missing translation, added time format

Signed-off-by: masterElmar <18119527+masterElmar@users.noreply.github.com>
This commit is contained in:
masterElmar
2023-11-17 19:32:17 +01:00
parent ab31a4c1eb
commit 0ac7264bdb
6 changed files with 79 additions and 14 deletions

View File

@ -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>