htwkalender-pwa/frontend/src/components/ModuleInformation.vue

<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>
  <div>
    <h2>{{ module.name }}</h2>
    <table>
      <tr>
        <td>{{ $t("moduleInformation.course") }}: {{ module.course }}</td>
      </tr>
      <tr>
        <td>{{ $t("moduleInformation.person") }}: {{ module.prof }}</td>
      </tr>
      <tr>
        <td>{{ $t("moduleInformation.semester") }}: {{ module.semester }}</td>
      </tr>
      <tr>
        <td>
          <div class="card">
            <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>
      </tr>
    </table>
  </div>
</template>