htwkalender/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 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>