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

fix:#24 linted and formatted

Browse Source
This commit is contained in:
Elmar Kresse
2024-01-17 18:53:17 +01:00
parent f112c8c71c
commit c13cfc61fd
25 changed files with 4620 additions and 1890 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

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,

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

@@ -46,14 +46,16 @@ const loadedModules: Ref<Module[]> = ref(new Array(10));
const loadingData = ref(true); const loadingData = ref(true);
onMounted(() => { onMounted(() => {
fetchAllModules().then( fetchAllModules()
(data) => .then(
(loadedModules.value = data.map((module: Module) => { (data) =>
return module; (loadedModules.value = data.map((module: Module) => {
})), return module;
).finally(() => { })),
loadingData.value = false; )
}); .finally(() => {
loadingData.value = false;
});
}); });
const ModuleInformation = defineAsyncComponent( const ModuleInformation = defineAsyncComponent(
@@ -121,7 +123,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@row-unselect="unselectModule" @row-unselect="unselectModule"
> >
<Column selection-mode="multiple"> <Column selection-mode="multiple">
<template #body v-if="loadingData"> <template v-if="loadingData" #body>
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>
@@ -140,7 +142,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@input="filterCallback()" @input="filterCallback()"
/> />
</template> </template>
<template #body v-if="loadingData"> <template v-if="loadingData" #body>
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>
@@ -158,7 +160,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@input="filterCallback()" @input="filterCallback()"
/> />
</template> </template>
<template #body v-if="loadingData"> <template v-if="loadingData" #body>
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>
@@ -176,7 +178,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@input="filterCallback()" @input="filterCallback()"
/> />
</template> </template>
<template #body v-if="loadingData"> <template v-if="loadingData" #body>
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>
@@ -186,24 +188,26 @@ function unselectModule(event: DataTableRowUnselectEvent) {
:show-clear-button="false" :show-clear-button="false"
:show-filter-menu="false" :show-filter-menu="false"
> >
<template #body v-if="loadingData"> <template v-if="loadingData" #body>
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>
<Column :header="$t('additionalModules.info')"> <Column :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
</template> :aria-label="$t('additionalModules.info-long')"
<template #body v-if="loadingData"> class="small-button"
<Skeleton></Skeleton> @click.stop="showInfo(slotProps.data)"
></Button>
</div>
</template> </template>
</Column> </Column>
<template #footer> <template #footer>

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>

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/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 }">

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

@@ -1,56 +1,44 @@
<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 transition-all transition-duration-500 transition-ease-in-out mt-0"
:class="{'md:mt-8': hideContent}" :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">
<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 +52,22 @@ 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>

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>