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

<script lang="ts" setup>
import { Ref, inject } from "vue";
import { Module } from "../model/module.ts";
import { Event } from "../model/event.ts";
import moment from "moment-timezone";
import { useI18n } from "vue-i18n";

const { t } = useI18n({ useScope: "global" });

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const dialogRef = inject("dialogRef") as any;
const module = dialogRef.value.data.module as Module;
const mobilePage = inject("mobilePage") as Ref<boolean>;

// 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);
  });
}

function formatWeekday(weekday: string) {
  const template = "moduleInformation.weekday." + weekday;
  const translation = t(template);
  return translation !== template ? translation : weekday;
}
</script>

<template>
  <div>
    <h2>{{ module.name }}</h2>
    <table class="w-full">
      <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
              v-if="!mobilePage"
              :value="sortModuleEventsByStart(module.events)"
              table-style="min-width: 50rem"
              :size="mobilePage ? 'small' : 'large'"
            >
              <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>
            <DataView
              v-else
              :value="sortModuleEventsByStart(module.events)"
              :data-key="module.name"
              layout="grid"
              >
              <template #grid="slotProps">
                <div class="col-12 sm:col-6 p-1">
                  <Card class="border-2 surface-border border-round surface-card">
                    <template #title>
                      <Badge 
                        :value="slotProps.data.eventType"
                        :severity="slotProps.data.eventType === 'V' ? 'success' : 'warning'"
                        class="flex-shrink-0 flex-grow-0"
                      />
                    </template>
                    <template #content>
                      <div class="flex flex-row gap-4 flex-wrap">
                        <div class="flex flex-column">
                          <div class="mr-2">{{ formatWeekday(slotProps.data.day) }}</div>
                          <div class="mr-2">{{ $t("moduleInformation.nthWeek", {count: slotProps.data.week}) }}</div>
                        </div>
                        <div class="flex flex-column">
                          <table>
                            <tr>
                              <td class="mr-2">
                                <b>{{ $t("moduleInformation.start") }}:</b>
                              </td>
                              <td>{{ formatTimestamp(slotProps.data.start) }}</td>
                            </tr>
                            <tr>
                              <td class="mr-2">
                                <b>{{ $t("moduleInformation.end") }}:</b>
                              </td>
                              <td>{{ formatTimestamp(slotProps.data.end) }}</td>
                            </tr>
                            <tr>
                              <td class="mr-2">
                                <b>{{ $t("moduleInformation.room") }}:</b>
                              </td>
                              <td>{{ slotProps.data.rooms }}</td>
                            </tr>
                          </table>
                        </div>
                      </div>
                    </template>
                  </Card>
                </div>
              </template>
            </DataView>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>