HTWK/htwkalender-pwa
1
0
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git synced 2025-08-08 12:47:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '24-improve-animations-page-design-and-theme' into 'main'

Browse Source 
Resolve "improve animations, page design and theme"

Closes #24

See merge request ekresse/htwkalender!7
This commit is contained in:
ekresse
2024-01-18 08:33:14 +00:00
parent 4f50313c03 061d0bd21e
commit 45685d99be
29 changed files with 4716 additions and 1925 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/index.html
View File

@@ -3,7 +3,11 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/htwk.svg" /> <link rel="icon" type="image/svg+xml" href="/htwk.svg" />
<link id="theme-link" rel="stylesheet" href="themes/lara-light-blue/theme.css"> <link
id="theme-link"
rel="stylesheet"
href="themes/lara-light-blue/theme.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTWKalender</title> <title>HTWKalender</title>
</head> </head>

2893
frontend/public/themes/lara-dark-blue/theme.css
View File

File diff suppressed because it is too large Load Diff

3159
frontend/public/themes/lara-light-blue/theme.css
View File

File diff suppressed because it is too large Load Diff

38
frontend/src/App.vue
View File

@@ -1,18 +1,25 @@
<script lang="ts" setup> <script lang="ts" setup>
import MenuBar from "./components/MenuBar.vue"; import MenuBar from "./components/MenuBar.vue";
import {RouteRecordName, RouterView} from "vue-router"; import { RouteRecordName, RouterView } from "vue-router";
import CalendarPreview from "./components/CalendarPreview.vue"; import CalendarPreview from "./components/CalendarPreview.vue";
import moduleStore from "./store/moduleStore.ts"; import moduleStore from "./store/moduleStore.ts";
import { provide, ref } from "vue"; import { provide, ref } from "vue";
const disabledPages = ["room-finder", "faq", "imprint", "privacy-policy", "edit", "edit-calendar"]; const disabledPages = [
"room-finder",
"faq",
"imprint",
"privacy-policy",
"edit",
"edit-calendar",
];
const store = moduleStore(); const store = moduleStore();
const mobilePage = ref(true); const mobilePage = ref(true);
provide("mobilePage", mobilePage); provide("mobilePage", mobilePage);
const isDisabled = (routeName: RouteRecordName | null | undefined) => { const isDisabled = (routeName: RouteRecordName | null | undefined) => {
return !disabledPages.includes(routeName as string) && store.modules.size > 0 return !disabledPages.includes(routeName as string) && store.modules.size > 0;
}; };
const updateMobile = () => { const updateMobile = () => {
@@ -26,10 +33,29 @@ window.addEventListener("resize", updateMobile);
<template> <template>
<MenuBar /> <MenuBar />
<RouterView /> <RouterView v-slot="{ Component }">
<transition name="scale" mode="out-in">
<component :is="Component" class="origin-near-top"/>
</transition>
</RouterView>
<!-- show CalendarPreview but only on specific router views --> <!-- show CalendarPreview but only on specific router views -->
<CalendarPreview v-if="isDisabled($route.name)"/> <CalendarPreview v-if="isDisabled($route.name)" />
<Toast /> <Toast />
</template> </template>
<style scoped></style> <style scoped>
.scale-enter-active,
.scale-leave-active {
transition: all 0.2s ease;
}
.scale-enter-from,
.scale-leave-to {
opacity: 0;
transform: scale(0.95);
}
.origin-near-top {
transform-origin: center 33vh;
}
</style>

19
frontend/src/api/createFeed.ts
View File

@@ -42,14 +42,15 @@ export async function saveIndividualFeed(
export async function deleteIndividualFeed(token: string): Promise<void> { export async function deleteIndividualFeed(token: string): Promise<void> {
await fetch("/api/feed?token=" + token, { await fetch("/api/feed?token=" + token, {
method: "DELETE", method: "DELETE",
}).then ((response) => { })
if (response.ok) { .then((response) => {
if (response.ok) {
return Promise.resolve(response); return Promise.resolve(response);
} else { } else {
return Promise.reject(response); return Promise.reject(response);
} }
}).catch((error) => { })
return Promise.reject(error); .catch((error) => {
}); return Promise.reject(error);
});
} }

2
frontend/src/api/fetchModule.ts
View File

@@ -14,7 +14,7 @@ export async function fetchModule(module: Module): Promise<Module> {
module.uuid, module.uuid,
module.name, module.name,
module.course, module.course,
module.eventType, module.eventType,
module.name, module.name,
module.prof, module.prof,
module.semester, module.semester,

129
frontend/src/components/AdditionalModuleTable.vue
View File

@@ -1,10 +1,13 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent, inject, ref, Ref} from "vue"; import { defineAsyncComponent, inject, onMounted, ref, Ref } from "vue";
import { Module } from "../model/module.ts"; import { Module } from "../model/module.ts";
import { fetchAllModules } from "../api/fetchCourse.ts"; import { fetchAllModules } from "../api/fetchCourse.ts";
import moduleStore from "../store/moduleStore.ts"; import moduleStore from "../store/moduleStore.ts";
import { FilterMatchMode } from "primevue/api"; import { FilterMatchMode } from "primevue/api";
import { DataTableRowSelectEvent, DataTableRowUnselectEvent } from "primevue/datatable"; import {
DataTableRowSelectEvent,
DataTableRowUnselectEvent,
} from "primevue/datatable";
import { useDialog } from "primevue/usedialog"; import { useDialog } from "primevue/usedialog";
import router from "../router"; import router from "../router";
import { fetchModule } from "../api/fetchModule.ts"; import { fetchModule } from "../api/fetchModule.ts";
@@ -13,17 +16,12 @@ import { useI18n } from "vue-i18n";
const dialog = useDialog(); const dialog = useDialog();
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
const fetchedModules = async () => {
return await fetchAllModules();
};
const store = moduleStore(); const store = moduleStore();
if (store.isEmpty()) { if (store.isEmpty()) {
router.replace("/"); router.replace("/");
} }
const mobilePage = inject("mobilePage") as Ref<boolean>; const mobilePage = inject("mobilePage") as Ref<boolean>;
const modules: Ref<Module[]> = ref([]);
const filters = ref({ const filters = ref({
course: { course: {
value: null, value: null,
@@ -43,12 +41,22 @@ const filters = ref({
}, },
}); });
fetchedModules().then( const loadedModules: Ref<Module[]> = ref(new Array(10));
(data) =>
(modules.value = data.map((module: Module) => { const loadingData = ref(true);
return module;
})), onMounted(() => {
); fetchAllModules()
.then(
(data) =>
(loadedModules.value = data.map((module: Module) => {
return module;
})),
)
.finally(() => {
loadingData.value = false;
});
});
const ModuleInformation = defineAsyncComponent( const ModuleInformation = defineAsyncComponent(
() => import("./ModuleInformation.vue"), () => import("./ModuleInformation.vue"),
@@ -61,15 +69,15 @@ async function showInfo(module: Module) {
dialog.open(ModuleInformation, { dialog.open(ModuleInformation, {
class: "w-full m-0", class: "w-full m-0",
props: { props: {
style: { style: {
width: "80vw", width: "80vw",
},
breakpoints: {
"992px": "100vw",
"640px": "100vw",
},
modal: true,
}, },
breakpoints: {
"992px": "100vw",
"640px": "100vw",
},
modal: true,
},
data: { data: {
module: module, module: module,
}, },
@@ -83,7 +91,6 @@ function selectModule(event: DataTableRowSelectEvent) {
function unselectModule(event: DataTableRowUnselectEvent) { function unselectModule(event: DataTableRowUnselectEvent) {
store.removeModule(event.data); store.removeModule(event.data);
} }
</script> </script>
<template> <template>
@@ -93,7 +100,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
id="dt-responsive-table" id="dt-responsive-table"
v-model:filters="filters" v-model:filters="filters"
:selection="store.getAllModules()" :selection="store.getAllModules()"
:value="modules" :value="loadedModules"
data-key="uuid" data-key="uuid"
paginator paginator
:rows="10" :rows="10"
@@ -101,15 +108,13 @@ function unselectModule(event: DataTableRowUnselectEvent) {
paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown" paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
:current-page-report-template=" :current-page-report-template="
$t('additionalModules.paginator.from') + $t('additionalModules.paginator.from') +
'{first}' + '{first}' +
$t('additionalModules.paginator.to') + $t('additionalModules.paginator.to') +
'{last}' + '{last}' +
$t('additionalModules.paginator.of') + $t('additionalModules.paginator.of') +
'{totalRecords}' '{totalRecords}'
" "
filter-display="row" filter-display="row"
:loading="!modules.length"
loading-icon="pi pi-spinner"
:show-gridlines="true" :show-gridlines="true"
:striped-rows="true" :striped-rows="true"
:select-all="false" :select-all="false"
@@ -118,6 +123,9 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@row-unselect="unselectModule" @row-unselect="unselectModule"
> >
<Column selection-mode="multiple"> <Column selection-mode="multiple">
<template v-if="loadingData" #body>
<Skeleton></Skeleton>
</template>
</Column> </Column>
<Column <Column
@@ -134,6 +142,9 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@input="filterCallback()" @input="filterCallback()"
/> />
</template> </template>
<template v-if="loadingData" #body>
<Skeleton></Skeleton>
</template>
</Column> </Column>
<Column <Column
field="name" field="name"
@@ -149,21 +160,27 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@input="filterCallback()" @input="filterCallback()"
/> />
</template> </template>
<template v-if="loadingData" #body>
<Skeleton></Skeleton>
</template>
</Column> </Column>
<Column <Column
field="eventType" field="eventType"
:header="$t('additionalModules.eventType')" :header="$t('additionalModules.eventType')"
:show-clear-button="false" :show-clear-button="false"
:show-filter-menu="false" :show-filter-menu="false"
> >
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<InputText <InputText
v-model="filterModel.value" v-model="filterModel.value"
type="text" type="text"
class="p-column-filter max-w-10rem" class="p-column-filter max-w-10rem"
@input="filterCallback()" @input="filterCallback()"
/> />
</template> </template>
<template v-if="loadingData" #body>
<Skeleton></Skeleton>
</template>
</Column> </Column>
<Column <Column
field="prof" field="prof"
@@ -171,27 +188,35 @@ function unselectModule(event: DataTableRowUnselectEvent) {
:show-clear-button="false" :show-clear-button="false"
:show-filter-menu="false" :show-filter-menu="false"
> >
<template v-if="loadingData" #body>
<Skeleton></Skeleton>
</template>
</Column> </Column>
<Column <Column :header="$t('additionalModules.info')">
:header="$t('additionalModules.info')"
>
<template #body="slotProps"> <template #body="slotProps">
<Button <div v-if="loadingData">
icon="pi pi-info" <Skeleton></Skeleton>
severity="secondary" </div>
rounded <div v-else>
outlined <Button
:aria-label="$t('additionalModules.info-long')" icon="pi pi-info"
class="small-button" severity="secondary"
@click.stop="showInfo(slotProps.data)" rounded
></Button> outlined
:aria-label="$t('additionalModules.info-long')"
class="small-button"
@click.stop="showInfo(slotProps.data)"
></Button>
</div>
</template> </template>
</Column> </Column>
<template #footer> <template #footer>
<div class="py-2 px-3"> <div class="py-2 px-3">
{{ {{
t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 }) t("additionalModules.footerModulesSelected", {
}} count: store?.countModules() ?? 0,
})
}}
</div> </div>
</template> </template>
</DataTable> </DataTable>

3
frontend/src/components/CalendarLink.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import tokenStore from "../store/tokenStore.ts"; import tokenStore from "../store/tokenStore.ts";
import { useToast } from "primevue/usetoast"; import { useToast } from "primevue/usetoast";
import {computed, onMounted} from "vue"; import { computed, onMounted } from "vue";
import router from "../router"; import router from "../router";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
@@ -79,7 +79,6 @@ const actions = computed(() => [
</script> </script>
<template> <template>
<div class="flex flex-column mt-8"> <div class="flex flex-column mt-8">
<div class="flex align-items-center justify-content-center m-2"> <div class="flex align-items-center justify-content-center m-2">
<h2 class="text-base md:text-2xl"> <h2 class="text-base md:text-2xl">

1
frontend/src/components/CalendarPreview.vue
View File

@@ -25,7 +25,6 @@ const columns = computed(() => [
{ field: "Course", header: t("calendarPreview.course") }, { field: "Course", header: t("calendarPreview.course") },
{ field: "Module", header: t("calendarPreview.module") }, { field: "Module", header: t("calendarPreview.module") },
]); ]);
</script> </script>
<template> <template>

43
frontend/src/components/DarkModeSwitcher.vue
View File

@@ -1,12 +1,12 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from "vue";
import { usePrimeVue } from 'primevue/config'; import { usePrimeVue } from "primevue/config";
const PrimeVue = usePrimeVue(); const PrimeVue = usePrimeVue();
const isDark = ref(true); const isDark = ref(true);
const darkTheme = ref('lara-dark-blue'), const darkTheme = ref("lara-dark-blue"),
lightTheme = ref('lara-light-blue'); lightTheme = ref("lara-light-blue");
function toggleTheme() { function toggleTheme() {
isDark.value = !isDark.value; isDark.value = !isDark.value;
@@ -17,29 +17,32 @@ function setTheme(shouldBeDark: boolean) {
isDark.value = shouldBeDark; isDark.value = shouldBeDark;
const newTheme = isDark.value ? darkTheme.value : lightTheme.value, const newTheme = isDark.value ? darkTheme.value : lightTheme.value,
oldTheme = isDark.value ? lightTheme.value : darkTheme.value; oldTheme = isDark.value ? lightTheme.value : darkTheme.value;
PrimeVue.changeTheme(oldTheme, newTheme, 'theme-link', () => {}); PrimeVue.changeTheme(oldTheme, newTheme, "theme-link", () => {});
} }
// set theme matching browser preference // set theme matching browser preference
setTheme(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches); setTheme(
window.matchMedia &&
window.matchMedia("(prefers-color-scheme: dark)").matches,
);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { window
setTheme(e.matches); .matchMedia("(prefers-color-scheme: dark)")
}); .addEventListener("change", (e) => {
setTheme(e.matches);
});
</script> </script>
<template> <template>
<Button
<Button id="dark-mode-switcher"
id="dark-mode-switcher" size="small"
size="small" class="p-button-rounded w-full md:w-auto"
class="p-button-rounded w-full md:w-auto" style="margin-right: 1rem"
style="margin-right: 1rem" :severity="isDark ? 'warning' : 'info'"
:severity="isDark ? 'warning' : 'info'" @click="toggleTheme"
@click="toggleTheme"
> >
<i v-if="isDark" class="pi pi-sun"></i> <i v-if="isDark" class="pi pi-sun"></i>
<i v-else class="pi pi-moon"></i> <i v-else class="pi pi-moon"></i>
</Button> </Button>
</template> </template>

1
frontend/src/components/FaqPage.vue
View File

@@ -224,5 +224,4 @@
.grid > .col:first-child { .grid > .col:first-child {
font-weight: bold; font-weight: bold;
} }
</style> </style>

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

@@ -91,14 +91,22 @@ function formatWeekday(weekday: string) {
:value="sortModuleEventsByStart(module.events)" :value="sortModuleEventsByStart(module.events)"
:data-key="module.name" :data-key="module.name"
layout="grid" layout="grid"
> >
<template #grid="slotProps"> <template #grid="slotProps">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12 sm:col-6 p-1"> <div
<Card class="border-2 surface-border border-round surface-card"> 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> <template #title>
<Badge <Badge
:value="item.eventType" :value="item.eventType"
:severity="item.eventType === 'V' ? 'success' : 'warning'" :severity="
item.eventType === 'V' ? 'success' : 'warning'
"
class="flex-shrink-0 flex-grow-0" class="flex-shrink-0 flex-grow-0"
/> />
</template> </template>
@@ -106,7 +114,13 @@ function formatWeekday(weekday: string) {
<div class="flex flex-row gap-4 flex-wrap"> <div class="flex flex-row gap-4 flex-wrap">
<div class="flex flex-column"> <div class="flex flex-column">
<div class="mr-2">{{ formatWeekday(item.day) }}</div> <div class="mr-2">{{ formatWeekday(item.day) }}</div>
<div class="mr-2">{{ $t("moduleInformation.nthWeek", {count: item.week}) }}</div> <div class="mr-2">
{{
$t("moduleInformation.nthWeek", {
count: item.week,
})
}}
</div>
</div> </div>
<div class="flex flex-column"> <div class="flex flex-column">
<table> <table>

92
frontend/src/components/ModuleSelection.vue
View File

@@ -15,15 +15,18 @@ const props = defineProps({
}, },
}); });
const modules : ComputedRef<Module[]> = computed(() => props.modules); const modules: ComputedRef<Module[]> = computed(() => props.modules);
const selectedCourse : ComputedRef<string> = computed(() => props.selectedCourse); const selectedCourse: ComputedRef<string> = computed(
() => props.selectedCourse,
);
store.modules.clear(); store.modules.clear();
const allSelected : ComputedRef<boolean> = const allSelected: ComputedRef<boolean> = computed(() =>
computed(() => props.modules.every((module) => store.hasModule(module))); props.modules.every((module) => store.hasModule(module)),
);
function toggleAllModules(){ function toggleAllModules() {
if (allSelected.value) { if (allSelected.value) {
store.removeAllModules(); store.removeAllModules();
} else { } else {
@@ -42,24 +45,39 @@ function toggleModule(module: Module) {
<template> <template>
<div class="flex flex-column w-full"> <div class="flex flex-column w-full">
<DataView <DataView
:value="modules" :value="modules"
data-key="uuid" data-key="uuid"
:class=" :class="[
[selectedCourse === ''? selectedCourse === ''
['opacity-0', 'pointer-events-none'] : ? ['opacity-0', 'pointer-events-none']
['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out'] : [
, 'opacity-100',
'w-full']" 'transition-all',
> 'transition-duration-500',
'transition-ease-in-out',
],
'w-full',
]"
>
<template #header> <template #header>
<div class="flex justify-content-between align-items-center flex-wrap md:mx-4"> <div
<h3> class="flex justify-content-between align-items-center flex-wrap md:mx-4"
{{ $t("moduleSelection.modules") }} - >
{{ store.countModules() }} <h3>
</h3> {{ $t("moduleSelection.modules") }} -
<div class="flex align-items-center justify-content-end white-space-nowrap"> {{ store.countModules() }}
<p>{{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}</p> </h3>
<div
class="flex align-items-center justify-content-end white-space-nowrap"
>
<p>
{{
allSelected
? $t("moduleSelection.deselectAll")
: $t("moduleSelection.selectAll")
}}
</p>
<InputSwitch <InputSwitch
class="mx-2" class="mx-2"
:disabled="modules.length === 0" :disabled="modules.length === 0"
@@ -76,20 +94,26 @@ function toggleModule(module: Module) {
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
<div class="grid grid-nogutter"> <div class="grid grid-nogutter">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-12"> <div
<div class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4"> v-for="(item, index) in slotProps.items"
<p class="text-lg flex-1 align-self-stretch">{{ item.name }}</p> :key="index"
<ToggleButton class="col-12"
class="w-9rem align-self-end my-2" >
off-icon="pi pi-times" <div
:off-label="$t('moduleSelection.unselected')" class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 column-gap-4 mx-2 md:mx-4"
on-icon="pi pi-check" >
:on-label="$t('moduleSelection.selected')" <p class="text-lg flex-1 align-self-stretch">{{ item.name }}</p>
:model-value="store.hasModule(item)" <ToggleButton
@update:model-value="toggleModule(item)" class="w-9rem align-self-end my-2"
/> off-icon="pi pi-times"
</div> :off-label="$t('moduleSelection.unselected')"
</div> on-icon="pi pi-check"
:on-label="$t('moduleSelection.selected')"
:model-value="store.hasModule(item)"
@update:model-value="toggleModule(item)"
/>
</div>
</div>
</div> </div>
</template> </template>
</DataView> </DataView>

14
frontend/src/components/RenameModules.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import moduleStore from "../store/moduleStore.ts"; import moduleStore from "../store/moduleStore.ts";
import { createIndividualFeed } from "../api/createFeed.ts"; import { createIndividualFeed } from "../api/createFeed.ts";
import router from "../router"; import router from "../router";
import tokenStore from "../store/tokenStore.ts"; import tokenStore from "../store/tokenStore.ts";
@@ -37,7 +37,7 @@ async function finalStep() {
<div class="flex flex-column align-items-center mb-7"> <div class="flex flex-column align-items-center mb-7">
<div class="flex align-items-center justify-content-center m-2 gap-2"> <div class="flex align-items-center justify-content-center m-2 gap-2">
<h3>{{ $t("renameModules.subTitle") }}</h3> <h3>{{ $t("renameModules.subTitle") }}</h3>
<ModuleTemplateDialog/> <ModuleTemplateDialog />
</div> </div>
<div class="w-full lg:w-8 flex flex-column"> <div class="w-full lg:w-8 flex flex-column">
<div class="card flex align-items-center justify-content-center my-2"> <div class="card flex align-items-center justify-content-center my-2">
@@ -50,7 +50,9 @@ async function finalStep() {
class="w-full" class="w-full"
> >
<template #header> <template #header>
<div class="flex align-items-center justify-content-end flex-wrap gap-2 px-2"> <div
class="flex align-items-center justify-content-end flex-wrap gap-2 px-2"
>
{{ $t("renameModules.enableAllNotifications") }} {{ $t("renameModules.enableAllNotifications") }}
<InputSwitch <InputSwitch
:model-value=" :model-value="
@@ -60,7 +62,9 @@ async function finalStep() {
) )
" "
@update:model-value=" @update:model-value="
tableData.forEach((module) => (module.Module.reminder = $event)) tableData.forEach(
(module) => (module.Module.reminder = $event),
)
" "
/> />
</div> </div>
@@ -129,7 +133,7 @@ async function finalStep() {
:label="$t('renameModules.nextStep')" :label="$t('renameModules.nextStep')"
@click="finalStep()" @click="finalStep()"
/> />
</div> </div>
</div> </div>
</template> </template>

1
frontend/src/components/RoomOccupation.vue
View File

@@ -82,7 +82,6 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
height: "auto", height: "auto",
views: { views: {
week: { week: {
description: "Wochenansicht",
type: "timeGrid", type: "timeGrid",
slotLabelFormat: { slotLabelFormat: {
hour: "numeric", hour: "numeric",

2
frontend/src/i18n/translations/de.json
View File

@@ -91,7 +91,7 @@
"info-long": "Information", "info-long": "Information",
"paginator": { "paginator": {
"from": "", "from": "",
"to": " bis ", "to": " bis ",
"of": " von insgesamt " "of": " von insgesamt "
}, },
"eventType": "Ereignistyp" "eventType": "Ereignistyp"

2
frontend/src/i18n/translations/en.json
View File

@@ -91,7 +91,7 @@
"info-long": "information", "info-long": "information",
"paginator": { "paginator": {
"from": "", "from": "",
"to": " to ", "to": " to ",
"of": " of " "of": " of "
}, },
"eventType": "event type" "eventType": "event type"

2
frontend/src/main.ts
View File

@@ -32,6 +32,7 @@ import DynamicDialog from "primevue/dynamicdialog";
import DialogService from "primevue/dialogservice"; import DialogService from "primevue/dialogservice";
import ProgressSpinner from "primevue/progressspinner"; import ProgressSpinner from "primevue/progressspinner";
import Checkbox from "primevue/checkbox"; import Checkbox from "primevue/checkbox";
import Skeleton from "primevue/skeleton";
import i18n from "./i18n"; import i18n from "./i18n";
const app = createApp(App); const app = createApp(App);
@@ -68,5 +69,6 @@ app.component("Column", Column);
app.component("DynamicDialog", DynamicDialog); app.component("DynamicDialog", DynamicDialog);
app.component("ProgressSpinner", ProgressSpinner); app.component("ProgressSpinner", ProgressSpinner);
app.component("Checkbox", Checkbox); app.component("Checkbox", Checkbox);
app.component("Skeleton", Skeleton);
app.mount("#app"); app.mount("#app");

2
frontend/src/model/event.ts
View File

@@ -22,6 +22,6 @@ export class AnonymizedEventDTO {
public start: string, public start: string,
public end: string, public end: string,
public rooms: string, public rooms: string,
public free: boolean public free: boolean,
) {} ) {}
} }

3
frontend/src/router/index.ts
View File

@@ -8,7 +8,8 @@ const PrivacyPolicy = () => import("../view/PrivacyPolicy.vue");
const RenameModules = () => import("../components/RenameModules.vue"); const RenameModules = () => import("../components/RenameModules.vue");
const RoomFinder = () => import("../view/RoomFinder.vue"); const RoomFinder = () => import("../view/RoomFinder.vue");
const EditCalendarView = () => import("../view/EditCalendarView.vue"); const EditCalendarView = () => import("../view/EditCalendarView.vue");
const EditAdditionalModules = () => import("../view/editCalendar/EditAdditionalModules.vue"); const EditAdditionalModules = () =>
import("../view/editCalendar/EditAdditionalModules.vue");
const EditModules = () => import("../view/editCalendar/EditModules.vue"); const EditModules = () => import("../view/editCalendar/EditModules.vue");
const CourseSelection = () => import("../view/CourseSelection.vue"); const CourseSelection = () => import("../view/CourseSelection.vue");

4
frontend/src/store/moduleStore.ts
View File

@@ -37,8 +37,8 @@ const moduleStore = defineStore("moduleStore", {
return Array.from(this.modules.values()); return Array.from(this.modules.values());
}, },
containsModule(module: Module): boolean { containsModule(module: Module): boolean {
return this.modules.has(module.uuid); return this.modules.has(module.uuid);
} },
}, },
}); });

12
frontend/src/view/AdditionalModules.vue
View File

@@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from "vue";
import moduleStore from '../store/moduleStore'; import moduleStore from "../store/moduleStore";
import router from '../router'; import router from "../router";
const store = moduleStore(); const store = moduleStore();
const AdditionalModuleTable = defineAsyncComponent( const AdditionalModuleTable = defineAsyncComponent(
@@ -21,8 +21,10 @@ async function nextStep() {
</h3> </h3>
</div> </div>
<AdditionalModuleTable /> <AdditionalModuleTable />
<div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"> <div
<Button class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
>
<Button
:disabled="store.isEmpty()" :disabled="store.isEmpty()"
class="col-12 md:col-4 mb-3 align-self-end" class="col-12 md:col-4 mb-3 align-self-end"
icon="pi pi-arrow-right" icon="pi pi-arrow-right"

2
frontend/src/view/CourseSelection.vue
View File

@@ -66,7 +66,7 @@ async function getModules() {
label: $t('courseSelection.nextStep'), label: $t('courseSelection.nextStep'),
icon: 'pi pi-arrow-right', icon: 'pi pi-arrow-right',
disabled: store.isEmpty(), disabled: store.isEmpty(),
onClick: () => router.push('/additional-modules') onClick: () => router.push('/additional-modules'),
}" }"
> >
<template #selection="{ flexSpecs }"> <template #selection="{ flexSpecs }">

93
frontend/src/view/DynamicPage.vue
View File

@@ -1,56 +1,45 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, useSlots } from 'vue'; import { computed, useSlots } from "vue";
defineProps<{ defineProps<{
hideContent: boolean, hideContent: boolean;
headline: string, headline: string;
subTitle?: string, subTitle?: string;
icon?: string, icon?: string;
button?: { button?: {
label: string, label: string;
icon: string, icon: string;
disabled: boolean, disabled: boolean;
onClick: () => void onClick: () => void;
} };
}>() }>();
const slots = useSlots() const slots = useSlots();
const hasSlot = (name:string) => { const hasSlot = (name: string) => {
return !!slots[name]; return !!slots[name];
} };
const hasContent = computed(() => { const hasContent = computed(() => {
return hasSlot('content') return hasSlot("content");
}) });
</script> </script>
<template> <template>
<div <div
class="flex flex-column align-items-center transition-all transition-duration-500 transition-ease-in-out mt-0" class="flex flex-column align-items-center mt-0"
:class="{'md:mt-8': hideContent}"
> >
<div class="flex align-items-center justify-content-center gap-2 mx-2"> <div class="flex align-items-center justify-content-center gap-2 mx-2 transition-rolldown"
:class="{'md:mt-8': hideContent}"
>
<h3 class="text-4xl"> <h3 class="text-4xl">
{{ headline }} {{ headline }}
</h3> </h3>
<i <i v-if="icon" :class="icon" style="font-size: 2rem"></i>
v-if="icon"
:class="icon"
style="font-size: 2rem"
></i>
</div> </div>
<div <div v-if="subTitle" class="flex justify-content-center">
v-if="subTitle"
class="flex justify-content-center"
>
<h5 class="text-2xl m-2">{{ subTitle }}</h5> <h5 class="text-2xl m-2">{{ subTitle }}</h5>
</div> </div>
<div <div class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8">
class="flex flex-wrap mx-0 gap-2 my-4 w-full lg:w-8" <slot name="selection" flex-specs="flex-1 m-0"></slot>
>
<slot
name="selection"
flex-specs="flex-1 m-0"
></slot>
</div> </div>
<div <div
v-if="button" v-if="button"
@@ -64,18 +53,28 @@ const hasContent = computed(() => {
@click="button.onClick()" @click="button.onClick()"
/> />
</div> </div>
<div <div
v-if="hasContent" v-if="hasContent"
:class=" :class="[
[hideContent? hideContent
['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden'] : ? ['opacity-0', 'pointer-events-none', 'h-1rem', 'overflow-hidden']
['opacity-100', 'transition-all', 'transition-duration-500', 'transition-ease-in-out'] : [
, 'opacity-100',
'w-full', 'lg:w-8']" 'transition-all',
> 'transition-duration-500',
<slot 'transition-ease-in-out',
name="content" ],
></slot> 'w-full',
'lg:w-8',
]"
>
<slot name="content"></slot>
</div> </div>
</div> </div>
</template> </template>
<style scoped>
.transition-rolldown {
transition: margin-top 0.5s ease-in-out;
}
</style>

2
frontend/src/view/EditCalendarView.vue
View File

@@ -80,7 +80,7 @@ function loadCalendar(): void {
label: $t('editCalendarView.loadCalendar'), label: $t('editCalendarView.loadCalendar'),
icon: 'pi pi-arrow-down', icon: 'pi pi-arrow-down',
disabled: !isToken(token), disabled: !isToken(token),
onClick: loadCalendar onClick: loadCalendar,
}" }"
> >
<template #selection="{ flexSpecs }"> <template #selection="{ flexSpecs }">

4
frontend/src/view/RoomFinder.vue
View File

@@ -39,9 +39,7 @@ rooms().then(
/> />
</template> </template>
<template #content> <template #content>
<RoomOccupation <RoomOccupation :room="selectedRoom.name" />
:room="selectedRoom.name"
/>
</template> </template>
</DynamicPage> </DynamicPage>
</template> </template>

4
frontend/src/view/editCalendar/EditAdditionalModules.vue
View File

@@ -21,7 +21,9 @@ async function nextStep() {
</h3> </h3>
</div> </div>
<AdditionalModuleTable /> <AdditionalModuleTable />
<div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"> <div
class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10"
>
<Button <Button
:disabled="store.isEmpty()" :disabled="store.isEmpty()"
class="col-12 md:col-4 mb-3 align-self-end" class="col-12 md:col-4 mb-3 align-self-end"

76
frontend/src/view/editCalendar/EditModules.vue
View File

@@ -3,7 +3,10 @@ import { computed, inject, Ref, ref } from "vue";
import { Module } from "../../model/module.ts"; import { Module } from "../../model/module.ts";
import moduleStore from "../../store/moduleStore"; import moduleStore from "../../store/moduleStore";
import { fetchAllModules } from "../../api/fetchCourse.ts"; import { fetchAllModules } from "../../api/fetchCourse.ts";
import {deleteIndividualFeed, saveIndividualFeed} from "../../api/createFeed.ts"; import {
deleteIndividualFeed,
saveIndividualFeed,
} from "../../api/createFeed.ts";
import tokenStore from "../../store/tokenStore"; import tokenStore from "../../store/tokenStore";
import router from "../../router"; import router from "../../router";
import ModuleTemplateDialog from "../../components/ModuleTemplateDialog.vue"; import ModuleTemplateDialog from "../../components/ModuleTemplateDialog.vue";
@@ -61,25 +64,23 @@ async function deleteFeed() {
() => { () => {
toast.add({ toast.add({
severity: "success", severity: "success",
summary: t('editCalendarView.toast.success'), summary: t("editCalendarView.toast.success"),
detail: t('editCalendarView.toast.successDetail'), detail: t("editCalendarView.toast.successDetail"),
life: 3000, life: 3000,
}); });
visible.value = false; visible.value = false;
router.push("/"); router.push("/");
}, },
() => { () => {
toast.add({ toast.add({
severity: "error", severity: "error",
summary: t('editCalendarView.toast.error'), summary: t("editCalendarView.toast.error"),
detail: t('editCalendarView.toast.errorDetail'), detail: t("editCalendarView.toast.errorDetail"),
life: 3000, life: 3000,
}); });
}, },
); );
} }
</script> </script>
<template> <template>
@@ -89,9 +90,7 @@ async function deleteFeed() {
<ModuleTemplateDialog /> <ModuleTemplateDialog />
</div> </div>
<div class="w-full lg:w-8 flex flex-column"> <div class="w-full lg:w-8 flex flex-column">
<div <div class="card flex align-items-center justify-content-center my-2">
class="card flex align-items-center justify-content-center my-2"
>
<DataTable <DataTable
:value="tableData" :value="tableData"
edit-mode="cell" edit-mode="cell"
@@ -112,7 +111,9 @@ async function deleteFeed() {
) )
" "
@update:model-value=" @update:model-value="
tableData.forEach((module) => (module.Module.reminder = $event)) tableData.forEach(
(module) => (module.Module.reminder = $event),
)
" "
/> />
</div> </div>
@@ -188,9 +189,30 @@ async function deleteFeed() {
<div <div
class="flex flex-column sm:flex-row flex-wrap justify-content-between gap-2 w-full" class="flex flex-column sm:flex-row flex-wrap justify-content-between gap-2 w-full"
> >
<Button type="button" severity="danger" outlined icon="pi pi-trash" :label="$t('editCalendarView.delete')" @click="visible = true"/> <Button
<Button type="button" severity="info" outlined icon="pi pi-plus" :label="$t('editCalendarView.addModules')" @click="router.push('edit-additional-modules')"/> type="button"
<Button type="button" severity="success" outlined icon="pi pi-save" :label="$t('editCalendarView.save')" @click="finalStep()"/> severity="danger"
outlined
icon="pi pi-trash"
:label="$t('editCalendarView.delete')"
@click="visible = true"
/>
<Button
type="button"
severity="info"
outlined
icon="pi pi-plus"
:label="$t('editCalendarView.addModules')"
@click="router.push('edit-additional-modules')"
/>
<Button
type="button"
severity="success"
outlined
icon="pi pi-save"
:label="$t('editCalendarView.save')"
@click="finalStep()"
/>
</div> </div>
</template> </template>
</DataTable> </DataTable>
@@ -198,15 +220,31 @@ async function deleteFeed() {
</div> </div>
</div> </div>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }"> <Dialog
v-model:visible="visible"
modal
header="Header"
:style="{ width: '50rem' }"
:breakpoints="{ '1199px': '75vw', '575px': '90vw' }"
>
<template #header> <template #header>
<div class="inline-flex align-items-center justify-content-center gap-2"> <div
<span class="font-bold white-space-nowrap">{{ $t('editCalendarView.dialog.headline') }}</span> class="inline-flex align-items-center justify-content-center gap-2"
>
<span class="font-bold white-space-nowrap">{{
$t("editCalendarView.dialog.headline")
}}</span>
</div> </div>
</template> </template>
<p class="m-0">{{ $t('editCalendarView.dialog.subTitle') }}</p> <p class="m-0">{{ $t("editCalendarView.dialog.subTitle") }}</p>
<template #footer> <template #footer>
<Button :label="$t('editCalendarView.dialog.delete')" severity="danger" icon="pi pi-trash" autofocus @click="deleteFeed()" /> <Button
:label="$t('editCalendarView.dialog.delete')"
severity="danger"
icon="pi pi-trash"
autofocus
@click="deleteFeed()"
/>
</template> </template>
</Dialog> </Dialog>
</div> </div>

6
package-lock.json generated Normal file
View File

@@ -0,0 +1,6 @@
{
"name": "htwkalender",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}