HTWK/htwkalender-pwa
1
0
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git synced 2025-07-16 09:38:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

91 responsive changes

Browse Source
This commit is contained in:
survellow
2023-12-06 10:22:43 +01:00
parent 1d656b2653
commit 4377faa40e
11 changed files with 219 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/components/ModuleInformation.vue
View File

@ -1,12 +1,16 @@
<script lang="ts" setup>
import { inject } from "vue";
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 {
@ -25,6 +29,12 @@ function sortModuleEventsByStart(events: Event[]) {
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>
@ -44,8 +54,10 @@ function sortModuleEventsByStart(events: Event[]) {
<td>
<div class="card">
<DataTable
v-if="!mobilePage"
:value="sortModuleEventsByStart(module.events)"
table-style="min-width: 50rem"
:size="mobilePage ? 'small' : 'large'"
>
<Column
field="day"
@ -74,6 +86,56 @@ function sortModuleEventsByStart(events: Event[]) {
: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>