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 { 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>;

function sortModuleEventsByStart(events: Event[]) {
  return events.sort((a, b) => {
    return a.start.localeCompare(b.start);
  });
}

const timeFormater = new Intl.DateTimeFormat("de-DE", {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
  hour: "2-digit",
  minute: "2-digit",
  hour12: false,
  timeZone: "Europe/Berlin",
});

// formats 2023-10-26 11:45:00.000Z to DD-MM-YYYY HH:MM
function formatTimestamp(timestampString: string) {
  return timeFormater.format(new Date(timestampString)).replace(",", "");
}

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="notes"
                :header="$t('moduleInformation.notes')"
              ></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
                  v-for="(item, index) in slotProps.items"
                  :key="index"
                  class="col-12 sm:col-6 p-1"
                >
                  <Card
                    class="border-2 surface-border border-round surface-card"
                  >
                    <template #title>
                      <Badge
                        :value="item.eventType"
                        :severity="
                          item.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(item.day) }}</div>
                          <div class="mr-2">
                            {{
                              $t("moduleInformation.nthWeek", {
                                count: item.week,
                              })
                            }}
                          </div>
                        </div>
                        <div class="flex flex-column">
                          <table>
                            <tr>
                              <td class="mr-2">
                                <b>{{ $t("moduleInformation.start") }}:</b>
                              </td>
                              <td>{{ formatTimestamp(item.start) }}</td>
                            </tr>
                            <tr>
                              <td class="mr-2">
                                <b>{{ $t("moduleInformation.end") }}:</b>
                              </td>
                              <td>{{ formatTimestamp(item.end) }}</td>
                            </tr>
                            <tr>
                              <td class="mr-2">
                                <b>{{ $t("moduleInformation.room") }}:</b>
                              </td>
                              <td>{{ item.rooms }}</td>
                            </tr>
                            <tr>
                              <td class="mr-2">
                                <b>{{ $t("moduleInformation.notes") }}:</b>
                              </td>
                              <td>{{ item.notes }}</td>
                            </tr>
                          </table>
                        </div>
                      </div>
                    </template>
                  </Card>
                </div>
              </template>
            </DataView>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>