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

feat:#60 format, lint and fix build

Browse Source
This commit is contained in:
masterElmar
2023-11-16 23:45:45 +01:00
parent 9f937afe94
commit e9db7cb4b0
24 changed files with 307 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
backend/backend.iml
View File

@@ -1,6 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4"> <module type="WEB_MODULE" version="4">
<component name="Go" enabled="true" />
<component name="NewModuleRootManager" inherit-compiler-output="true"> <component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output /> <exclude-output />
<content url="file://$MODULE_DIR$" /> <content url="file://$MODULE_DIR$" />

5
frontend/src/App.vue
View File

@@ -4,9 +4,8 @@ import { RouterView } from "vue-router";
</script> </script>
<template> <template>
<MenuBar /> <MenuBar />
<RouterView /> <RouterView />
</template> </template>
<style scoped></style> <style scoped></style>

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

@@ -4,19 +4,20 @@ import { useToast } from "primevue/usetoast";
import { onMounted } from "vue"; import { 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" });
const toast = useToast(); const toast = useToast();
const domain = window.location.hostname; const domain = window.location.hostname;
const getLink = () => "https://" + domain + "/api/feed?token=" + tokenStore().token; const getLink = () =>
"https://" + domain + "/api/feed?token=" + tokenStore().token;
const show = () => { const show = () => {
toast.add({ toast.add({
severity: "info", severity: "info",
summary: t('calendarLink.copyToastSummary'), summary: t("calendarLink.copyToastSummary"),
detail: t('calendarLink.copyToastNotification'), detail: t("calendarLink.copyToastNotification"),
life: 3000, life: 3000,
}); });
}; };
@@ -33,46 +34,48 @@ function rerouteIfTokenIsEmpty() {
function copyToClipboard() { function copyToClipboard() {
// Copy the text inside the text field // Copy the text inside the text field
navigator.clipboard.writeText(getLink()).then( navigator.clipboard.writeText(getLink()).then(show, (err) => {
show, console.error("Could not copy text: ", err);
(err) => { toast.add({
console.error("Could not copy text: ", err); severity: "error",
toast.add({ summary: t("calendarLink.copyToastError"),
severity: "error", detail: t("calendarLink.copyToastErrorDetail"),
summary: t('calendarLink.copyToastError'), life: 3000,
detail: t('calendarLink.copyToastErrorDetail'), });
life: 3000, });
});
},
);
} }
const forwardToGoogle = () => { const forwardToGoogle = () => {
window.open("https://calendar.google.com/calendar/u/0/r?cid=" + encodeURI(getLink().replace("https://", "http://"))); window.open(
"https://calendar.google.com/calendar/u/0/r?cid=" +
encodeURI(getLink().replace("https://", "http://")),
);
}; };
const forwardToMicrosoft = () => { const forwardToMicrosoft = () => {
window.open("https://outlook.live.com/owa?path=/calendar/action/compose&rru=addsubscription&name=HTWK%20Kalender&url=" + encodeURI(getLink())); window.open(
"https://outlook.live.com/owa?path=/calendar/action/compose&rru=addsubscription&name=HTWK%20Kalender&url=" +
encodeURI(getLink()),
);
}; };
const actions = [ const actions = [
{ {
label: t('calendarLink.copyToClipboard'), label: t("calendarLink.copyToClipboard"),
icon: "pi pi-copy", icon: "pi pi-copy",
command: copyToClipboard, command: copyToClipboard,
}, },
{ {
label: t('calendarLink.toGoogleCalendar'), label: t("calendarLink.toGoogleCalendar"),
icon: "pi pi-google", icon: "pi pi-google",
command: forwardToGoogle, command: forwardToGoogle,
}, },
{ {
label: t('calendarLink.toMicrosoftCalendar'), label: t("calendarLink.toMicrosoftCalendar"),
icon: "pi pi-microsoft", icon: "pi pi-microsoft",
command: forwardToMicrosoft, command: forwardToMicrosoft,
}, },
]; ];
</script> </script>
<template> <template>

13
frontend/src/components/CourseSelection.vue
View File

@@ -27,8 +27,11 @@ const selectedSemester: Ref<{ name: string; value: string }> = ref(
); );
//if semesters get changed, refresh the selected semester ref with a watcher //if semesters get changed, refresh the selected semester ref with a watcher
watch(semesters,(newValue: { name: string; value: string }[]) => watch(
(selectedSemester.value = newValue[selectedSemester.value.value === "ws" ? 0 : 1]), semesters,
(newValue: { name: string; value: string }[]) =>
(selectedSemester.value =
newValue[selectedSemester.value.value === "ws" ? 0 : 1]),
); );
courses().then( courses().then(
@@ -52,7 +55,7 @@ async function getModules() {
<div class="flex flex-column"> <div class="flex flex-column">
<div class="flex align-items-center justify-content-center h-4rem m-2"> <div class="flex align-items-center justify-content-center h-4rem m-2">
<h3 class="text-4xl"> <h3 class="text-4xl">
{{$t("courseSelection.headline")}} {{ $t("courseSelection.headline") }}
<i <i
class="pi pi-calendar vertical-align-baseline" class="pi pi-calendar vertical-align-baseline"
style="font-size: 2rem" style="font-size: 2rem"
@@ -75,8 +78,8 @@ async function getModules() {
option-label="name" option-label="name"
:placeholder="$t('courseSelection.courseDropDown')" :placeholder="$t('courseSelection.courseDropDown')"
:empty-message="$t('courseSelection.noCoursesAvailable')" :empty-message="$t('courseSelection.noCoursesAvailable')"
:auto-filter-focus="true"
@change="getModules()" @change="getModules()"
:autoFilterFocus="true"
></Dropdown> ></Dropdown>
<Dropdown <Dropdown
v-model="selectedSemester" v-model="selectedSemester"
@@ -98,4 +101,4 @@ async function getModules() {
</div> </div>
</div> </div>
</div> </div>
</template> </template>

10
frontend/src/components/LocaleSwitcher.vue
View File

@@ -2,11 +2,11 @@
import { computed } from "vue"; import { computed } from "vue";
import localeStore from "../store/localeStore.ts"; import localeStore from "../store/localeStore.ts";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: 'global' }) const { t } = useI18n({ useScope: "global" });
const countries = computed(() => [ const countries = computed(() => [
{ name: t('english'), code: "en", icon: "🇬🇧" }, { name: t("english"), code: "en", icon: "🇬🇧" },
{ name: t('german'), code: "de", icon: "🇩🇪" }, { name: t("german"), code: "de", icon: "🇩🇪" },
]); ]);
function displayIcon(code: string) { function displayIcon(code: string) {
@@ -23,12 +23,12 @@ function updateLocale(locale: string) {
</script> </script>
<template> <template>
<Dropdown <Dropdown
:options="$i18n.availableLocales"
v-model="$i18n.locale" v-model="$i18n.locale"
@change="updateLocale($event.data)" :options="$i18n.availableLocales"
option-label="name" option-label="name"
placeholder="Select a Language" placeholder="Select a Language"
class="w-full md:w-14rem" class="w-full md:w-14rem"
@change="updateLocale($event.data)"
> >
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value" class="flex align-items-center"> <div v-if="slotProps.value" class="flex align-items-center">

30
frontend/src/components/MenuBar.vue
View File

@@ -2,7 +2,7 @@
import { computed } from "vue"; import { computed } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import LocaleSwitcher from "./LocaleSwitcher.vue"; import LocaleSwitcher from "./LocaleSwitcher.vue";
const { t } = useI18n({ useScope: 'global' }) const { t } = useI18n({ useScope: "global" });
const items = computed(() => [ const items = computed(() => [
{ {
@@ -36,23 +36,29 @@ const items = computed(() => [
route: `privacy-policy`, route: `privacy-policy`,
}, },
]); ]);
</script> </script>
<template> <template>
<Menubar :model="items" class="menubar justify-content-between"> <Menubar :model="items" class="menubar justify-content-between">
<template #start class="mr-2"> <template #start>
<img <img
width="35" height="40" width="35"
src="../../public/htwk.svg" height="40"
alt="Logo" src="../../public/htwk.svg"
class="h-10 w-10 mr-6" alt="Logo"
style="margin-left: 1rem" class="h-10 w-10 mr-6"
/> style="margin-left: 1rem"
/>
</template> </template>
<template #item="{ item }"> <template #item="{ item }">
<router-link v-slot="{ navigate }" :to="item.route" custom> <router-link v-slot="{ navigate }" :to="item.route" custom>
<Button :label='String(item.label)' :icon="item.icon" severity="secondary" @click="navigate" text /> <Button
:label="String(item.label)"
:icon="item.icon"
severity="secondary"
text
@click="navigate"
/>
</router-link> </router-link>
</template> </template>
<template #end> <template #end>
@@ -66,4 +72,4 @@ const items = computed(() => [
background-color: transparent; background-color: transparent;
border: none; border: none;
} }
</style> </style>

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

@@ -12,13 +12,13 @@ const module = dialogRef.value.data.module as Module;
<h2>{{ module.name }}</h2> <h2>{{ module.name }}</h2>
<table> <table>
<tr> <tr>
<td>{{$t('moduleInformation.course')}}: {{ module.course }}</td> <td>{{ $t("moduleInformation.course") }}: {{ module.course }}</td>
</tr> </tr>
<tr> <tr>
<td>{{$t('moduleInformation.person')}}: {{ module.prof }}</td> <td>{{ $t("moduleInformation.person") }}: {{ module.prof }}</td>
</tr> </tr>
<tr> <tr>
<td>{{$t('moduleInformation.semester')}}: {{ module.semester }}</td> <td>{{ $t("moduleInformation.semester") }}: {{ module.semester }}</td>
</tr> </tr>
<tr> <tr>
<td> <td>

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

@@ -72,7 +72,10 @@ function nextStep() {
<template #header> <template #header>
<div class="flex justify-content-between flex-wrap"> <div class="flex justify-content-between flex-wrap">
<div class="flex align-items-center justify-content-center"> <div class="flex align-items-center justify-content-center">
<h3>{{$t('moduleSelection.modules')}} - {{ selectedModules.length }}</h3> <h3>
{{ $t("moduleSelection.modules") }} -
{{ selectedModules.length }}
</h3>
</div> </div>
<div class="flex align-items-center justify-content-center"> <div class="flex align-items-center justify-content-center">
<ToggleButton <ToggleButton
@@ -89,7 +92,7 @@ function nextStep() {
</template> </template>
<template #empty> <template #empty>
<p class="p-4 text-2xl font-bold text-900 empty-message"> <p class="p-4 text-2xl font-bold text-900 empty-message">
{{$t("moduleSelection.noModulesAvailable")}} {{ $t("moduleSelection.noModulesAvailable") }}
</p> </p>
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
@@ -132,4 +135,4 @@ function nextStep() {
width: 50rem; width: 50rem;
} }
} }
</style> </style>

48
frontend/src/components/ModuleTemplateDialog.vue
View File

@@ -1,22 +1,30 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, Ref, ref } from "vue"; import { computed, Ref, ref } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: 'global' }) const { t } = useI18n({ useScope: "global" });
const helpVisible: Ref<boolean> = ref(false); const helpVisible: Ref<boolean> = ref(false);
const placeholders = computed(() => [ const placeholders = computed(() => [
{ {
placeholder: "%t", placeholder: "%t",
description: t('moduleTemplateDialog.eventTyp'), description: t("moduleTemplateDialog.eventTyp"),
examples: "V = "+t('moduleTemplateDialog.lecture')+ examples:
", S = "+t('moduleTemplateDialog.seminar')+ "V = " +
", P = "+t('moduleTemplateDialog.exam'), t("moduleTemplateDialog.lecture") +
", S = " +
t("moduleTemplateDialog.seminar") +
", P = " +
t("moduleTemplateDialog.exam"),
}, },
{ {
placeholder: "%p", placeholder: "%p",
description: t('moduleTemplateDialog.mandatory'), description: t("moduleTemplateDialog.mandatory"),
examples: "w = "+t('moduleTemplateDialog.optional')+", p = "+t('moduleTemplateDialog.mandatory'), examples:
"w = " +
t("moduleTemplateDialog.optional") +
", p = " +
t("moduleTemplateDialog.mandatory"),
}, },
]); ]);
</script> </script>
@@ -32,18 +40,30 @@ const placeholders = computed(() => [
aria-label="Help" aria-label="Help"
@click="helpVisible = true" @click="helpVisible = true"
/> />
<Dialog v-model:visible="helpVisible" :header="$t('moduleTemplateDialog.moduleConfiguration')"> <Dialog
v-model:visible="helpVisible"
:header="$t('moduleTemplateDialog.moduleConfiguration')"
>
<p> <p>
{{ t('moduleTemplateDialog.explanationOne')}} {{ t("moduleTemplateDialog.explanationOne") }}
</p> </p>
<p>{{ t('moduleTemplateDialog.tableDescription')}}</p> <p>{{ t("moduleTemplateDialog.tableDescription") }}</p>
<DataTable :value="placeholders"> <DataTable :value="placeholders">
<Column field="placeholder" :header="$t('moduleTemplateDialog.placeholder')"></Column> <Column
<Column field="description" :header="$t('moduleTemplateDialog.description')"></Column> field="placeholder"
<Column field="examples" :header="$t('moduleTemplateDialog.examples')"></Column> :header="$t('moduleTemplateDialog.placeholder')"
></Column>
<Column
field="description"
:header="$t('moduleTemplateDialog.description')"
></Column>
<Column
field="examples"
:header="$t('moduleTemplateDialog.examples')"
></Column>
</DataTable> </DataTable>
<p> <p>
{{ t('moduleTemplateDialog.explanationTwo')}} {{ t("moduleTemplateDialog.explanationTwo") }}
</p> </p>
</Dialog> </Dialog>
</template> </template>

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

@@ -7,8 +7,7 @@ import { computed, ref } from "vue";
import ModuleTemplateDialog from "./ModuleTemplateDialog.vue"; import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
import { onlyWhitespace } from "../helpers/strings.ts"; import { onlyWhitespace } from "../helpers/strings.ts";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: 'global' }) const { t } = useI18n({ useScope: "global" });
const tableData = ref( const tableData = ref(
moduleStore().modules.map((module) => { moduleStore().modules.map((module) => {
@@ -20,9 +19,9 @@ const tableData = ref(
); );
const columns = computed(() => [ const columns = computed(() => [
{ field: "Course", header: t('moduleInformation.course') }, { field: "Course", header: t("moduleInformation.course") },
{ field: "Module", header: t('moduleInformation.module') }, { field: "Module", header: t("moduleInformation.module") },
{ field: "Reminder", header: t('renameModules.reminder') }, { field: "Reminder", header: t("renameModules.reminder") },
]); ]);
async function finalStep() { async function finalStep() {
@@ -35,7 +34,7 @@ async function finalStep() {
<template> <template>
<div class="flex flex-column"> <div class="flex flex-column">
<div class="flex align-items-center justify-content-center h-4rem m-2"> <div class="flex align-items-center justify-content-center h-4rem m-2">
<h3>{{$t('renameModules.subTitle')}}</h3> <h3>{{ $t("renameModules.subTitle") }}</h3>
<ModuleTemplateDialog /> <ModuleTemplateDialog />
</div> </div>
<div class="card flex align-items-center justify-content-center m-2"> <div class="card flex align-items-center justify-content-center m-2">
@@ -47,7 +46,7 @@ async function finalStep() {
> >
<template #header> <template #header>
<div class="flex align-items-center justify-content-end"> <div class="flex align-items-center justify-content-end">
{{$t('renameModules.enableAllNotifications')}} {{ $t("renameModules.enableAllNotifications") }}
<InputSwitch <InputSwitch
class="mx-4" class="mx-4"
:model-value=" :model-value="
@@ -73,9 +72,9 @@ async function finalStep() {
<template #body="{ data, field }"> <template #body="{ data, field }">
<template v-if="field === 'Module'"> <template v-if="field === 'Module'">
{{ {{
onlyWhitespace(data[field].userDefinedName) ? onlyWhitespace(data[field].userDefinedName)
data[field].name : ? data[field].name
data[field].userDefinedName : data[field].userDefinedName
}} }}
</template> </template>
<template v-else-if="field === 'Reminder'"> <template v-else-if="field === 'Reminder'">
@@ -120,7 +119,7 @@ async function finalStep() {
</div> </div>
<div class="flex align-items-center justify-content-center h-4rem m-2"> <div class="flex align-items-center justify-content-center h-4rem m-2">
<Button @click="finalStep()">{{$t('renameModules.nextStep')}}</Button> <Button @click="finalStep()">{{ $t("renameModules.nextStep") }}</Button>
</div> </div>
</div> </div>
</template> </template>

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

@@ -7,7 +7,7 @@ import { computed, ComputedRef, ref, Ref, watch } from "vue";
import { CalendarOptions, EventInput } from "@fullcalendar/core"; import { CalendarOptions, EventInput } from "@fullcalendar/core";
import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts"; import { fetchEventsByRoomAndDuration } from "../api/fetchRoom.ts";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: 'global' }) const { t } = useI18n({ useScope: "global" });
const props = defineProps({ const props = defineProps({
room: { room: {
@@ -57,90 +57,91 @@ async function getOccupation() {
import allLocales from "@fullcalendar/core/locales-all"; import allLocales from "@fullcalendar/core/locales-all";
const calendarOptions: ComputedRef<CalendarOptions> = computed(() => {
const calendarOptions: ComputedRef<CalendarOptions> = computed(() => return {
{ locales: allLocales,
return { locale: t("languageCode"),
locales: allLocales, plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
locale: t('languageCode'), initialView: "week",
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], dayHeaderFormat: { weekday: "short", omitCommas: true },
initialView: "week", slotDuration: "00:15:00",
dayHeaderFormat: { weekday: "short", omitCommas: true }, eventTimeFormat: {
slotDuration: "00:15:00", hour: "2-digit",
eventTimeFormat: { minute: "2-digit",
hour: "2-digit", hour12: false,
minute: "2-digit",
hour12: false,
},
views: {
week: {
description: "Wochenansicht",
type: "timeGrid",
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: false,
meridiem: false,
hour12: false,
},
dateAlignment: "week",
titleFormat: { month: "short", day: "numeric" },
slotMinTime: "06:00:00",
slotMaxTime: "22:00:00",
duration: { days: 7 },
firstDay: 1,
allDaySlot: false,
hiddenDays: [0],
}, },
Day: { views: {
type: "timeGrid", week: {
slotLabelFormat: { description: "Wochenansicht",
hour: "numeric", type: "timeGrid",
minute: "2-digit", slotLabelFormat: {
omitZeroMinute: false, hour: "numeric",
meridiem: false, minute: "2-digit",
hour12: false, omitZeroMinute: false,
meridiem: false,
hour12: false,
},
dateAlignment: "week",
titleFormat: { month: "short", day: "numeric" },
slotMinTime: "06:00:00",
slotMaxTime: "22:00:00",
duration: { days: 7 },
firstDay: 1,
allDaySlot: false,
hiddenDays: [0],
},
Day: {
type: "timeGrid",
slotLabelFormat: {
hour: "numeric",
minute: "2-digit",
omitZeroMinute: false,
meridiem: false,
hour12: false,
},
titleFormat: { month: "short", day: "numeric" },
slotMinTime: "06:00:00",
slotMaxTime: "22:00:00",
duration: { days: 1 },
allDaySlot: false,
hiddenDays: [0],
}, },
titleFormat: { month: "short", day: "numeric" },
slotMinTime: "06:00:00",
slotMaxTime: "22:00:00",
duration: { days: 1 },
allDaySlot: false,
hiddenDays: [0],
}, },
}, headerToolbar: {
headerToolbar: { end: "prev,next today",
end: "prev,next today", center: "title",
center: "title", start: "week,Day",
start: "week,Day", },
},
datesSet: function (dateInfo: any) { datesSet: function (dateInfo: any) {
const view = dateInfo.view; const view = dateInfo.view;
const offset = new Date().getTimezoneOffset(); const offset = new Date().getTimezoneOffset();
const startDate = new Date(view.activeStart.getTime() - offset * 60 * 1000); const startDate = new Date(
const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000); view.activeStart.getTime() - offset * 60 * 1000,
currentDateFrom.value = startDate.toISOString().split("T")[0];
currentDateTo.value = endDate.toISOString().split("T")[0];
getOccupation();
},
events: function (_info: any, successCallback: any, failureCallback: any) {
if (occupations.value.length === 0) {
failureCallback(new Error("no events"));
} else {
successCallback(
occupations.value.map((event) => {
return {
id: event.id.toString(),
start: event.start,
end: event.end,
} as EventInput;
}),
); );
} const endDate = new Date(view.activeEnd.getTime() - offset * 60 * 1000);
}, currentDateFrom.value = startDate.toISOString().split("T")[0];
}}) currentDateTo.value = endDate.toISOString().split("T")[0];
getOccupation();
},
events: function (_info: any, successCallback: any, failureCallback: any) {
if (occupations.value.length === 0) {
failureCallback(new Error("no events"));
} else {
successCallback(
occupations.value.map((event) => {
return {
id: event.id.toString(),
start: event.start,
end: event.end,
} as EventInput;
}),
);
}
},
};
});
</script> </script>
<template> <template>
<FullCalendar ref="fullCalendar" :options="calendarOptions"/> <FullCalendar ref="fullCalendar" :options="calendarOptions" />
</template> </template>

2
frontend/src/components/editCalendar/EditAdditionalModules.vue
View File

@@ -91,9 +91,9 @@ function selectChange() {
class="custom-multiselect" class="custom-multiselect"
filter filter
placeholder="Select additional modules" placeholder="Select additional modules"
:auto-filter-focus="true"
@change="selectChange()" @change="selectChange()"
@selectall-change="onSelectAllChange($event)" @selectall-change="onSelectAllChange($event)"
:autoFilterFocus="true"
> >
<template #option="slotProps"> <template #option="slotProps">
<div class="flex justify-content-between w-full"> <div class="flex justify-content-between w-full">

8
frontend/src/components/editCalendar/EditModules.vue
View File

@@ -90,10 +90,10 @@ async function finalStep() {
<!-- Text Body --> <!-- Text Body -->
<template #body="{ data, field }"> <template #body="{ data, field }">
<template v-if="field === 'Module'"> <template v-if="field === 'Module'">
{{ {{
onlyWhitespace(data[field].userDefinedName) ? onlyWhitespace(data[field].userDefinedName)
data[field].name : ? data[field].name
data[field].userDefinedName : data[field].userDefinedName
}} }}
</template> </template>
<template v-else-if="field === 'Reminder'"> <template v-else-if="field === 'Reminder'">

34
frontend/src/i18n/index.ts
View File

@@ -1,14 +1,14 @@
import { createI18n } from "vue-i18n"; import { createI18n } from "vue-i18n";
import en from './translations/en.json' import en from "./translations/en.json";
import de from './translations/de.json' import de from "./translations/de.json";
import localeStore from "../store/localeStore.ts"; import localeStore from "../store/localeStore.ts";
export const supportedLocales= { export const supportedLocales = {
'en': { name: 'English'}, en: { name: "English" },
'de': { name: 'Deutsch'}, de: { name: "Deutsch" },
} };
// Private instance of VueI18n object // Private instance of VueI18n object
let _i18n: any let _i18n: any;
// Initializer // Initializer
function setup() { function setup() {
_i18n = createI18n({ _i18n = createI18n({
@@ -17,30 +17,30 @@ function setup() {
fallbackLocale: "en", fallbackLocale: "en",
messages: { messages: {
en, en,
de de,
}, },
}) });
return _i18n return _i18n;
} }
// Sets the active locale. // Sets the active locale.
function setLocale(newLocale : any) { function setLocale(newLocale: any) {
_i18n.global.locale = newLocale _i18n.global.locale = newLocale;
setDocumentAttributesFor(newLocale) setDocumentAttributesFor(newLocale);
} }
function setDocumentAttributesFor(locale: any) { function setDocumentAttributesFor(locale: any) {
const htmlElement = document.querySelector('html') const htmlElement = document.querySelector("html");
htmlElement?.setAttribute('lang', locale) htmlElement?.setAttribute("lang", locale);
} }
// Public interface // Public interface
export default { export default {
// Expose the VueI18n instance via a getter // Expose the VueI18n instance via a getter
get vueI18n() { get vueI18n() {
return _i18n return _i18n;
}, },
setup, setup,
setLocale, setLocale,
} };

10
frontend/src/i18n/messages.ts
View File

@@ -1,5 +1,5 @@
export default { export default {
en : { en: {
createCalendar: "Create Calendar", createCalendar: "Create Calendar",
editCalendar: "Edit Calendar", editCalendar: "Edit Calendar",
roomFinder: "Room Finder", roomFinder: "Room Finder",
@@ -7,12 +7,12 @@ export default {
imprint: "Imprint", imprint: "Imprint",
privacy: "Privacy Policy", privacy: "Privacy Policy",
}, },
de : { de: {
createCalendar: "Kalender erstellen", createCalendar: "Kalender erstellen",
editCalendar: "Kalender bearbeiten", editCalendar: "Kalender bearbeiten",
roomFinder: "Raumfinder", roomFinder: "Raumfinder",
faq: "FAQ", faq: "FAQ",
imprint: "Impressum", imprint: "Impressum",
privacy: "Datenschutz" privacy: "Datenschutz",
} },
} };

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

@@ -23,7 +23,7 @@
"dropDownSelect": "Bitte wähle einen Raum aus", "dropDownSelect": "Bitte wähle einen Raum aus",
"noRoomsAvailable": "Keine Räume verfügbar" "noRoomsAvailable": "Keine Räume verfügbar"
}, },
"moduleSelection":{ "moduleSelection": {
"nextStep": "Weiter", "nextStep": "Weiter",
"selectAll": "Alle anwählen", "selectAll": "Alle anwählen",
"deselectAll": "Alle abwählen", "deselectAll": "Alle abwählen",
@@ -57,7 +57,7 @@
"subTitle": "Konfigurieren Sie die ausgewählten Module nach Ihren Wünschen.", "subTitle": "Konfigurieren Sie die ausgewählten Module nach Ihren Wünschen.",
"nextStep": "Weiter" "nextStep": "Weiter"
}, },
"moduleTemplateDialog":{ "moduleTemplateDialog": {
"explanationOne": "Hier können Module nach Wunsch umbenannt werden. Welche dann als Anzeigename im Kalender dargestellt werden.", "explanationOne": "Hier können Module nach Wunsch umbenannt werden. Welche dann als Anzeigename im Kalender dargestellt werden.",
"explanationTwo": "Zusätzlich können Sie Benachrichtigungen für jedes Modul einschalten, damit für jeden Termin 15 Minuten vor Beginn einen Erinnerung geschalten wird.", "explanationTwo": "Zusätzlich können Sie Benachrichtigungen für jedes Modul einschalten, damit für jeden Termin 15 Minuten vor Beginn einen Erinnerung geschalten wird.",
"tableDescription": "Sie können die folgenden Platzhalter in Ihren Modulnamen verwenden:", "tableDescription": "Sie können die folgenden Platzhalter in Ihren Modulnamen verwenden:",
@@ -81,4 +81,4 @@
"toGoogleCalendar": "Google Kalender", "toGoogleCalendar": "Google Kalender",
"toMicrosoftCalendar": "Microsoft Kalender" "toMicrosoftCalendar": "Microsoft Kalender"
} }
} }

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

@@ -23,7 +23,7 @@
"dropDownSelect": "Please select a room", "dropDownSelect": "Please select a room",
"noRoomsAvailable": "No rooms listed" "noRoomsAvailable": "No rooms listed"
}, },
"moduleSelection":{ "moduleSelection": {
"nextStep": "next step", "nextStep": "next step",
"selectAll": "select all", "selectAll": "select all",
"deselectAll": "deselect all", "deselectAll": "deselect all",
@@ -57,7 +57,7 @@
"subTitle": "Configure your selected Modules to your liking.", "subTitle": "Configure your selected Modules to your liking.",
"nextStep": "next step" "nextStep": "next step"
}, },
"moduleTemplateDialog":{ "moduleTemplateDialog": {
"explanationOne": "Here you can rename your modules to your liking. This will be the name of the event in your calendar.", "explanationOne": "Here you can rename your modules to your liking. This will be the name of the event in your calendar.",
"explanationTwo": "Additionally, you can toggle notifications for each module. If you do so, you will be notified 15 minutes before the event starts.", "explanationTwo": "Additionally, you can toggle notifications for each module. If you do so, you will be notified 15 minutes before the event starts.",
"tableDescription": "You can use the following placeholders in your module names:", "tableDescription": "You can use the following placeholders in your module names:",
@@ -81,4 +81,4 @@
"toGoogleCalendar": "to Google Calendar", "toGoogleCalendar": "to Google Calendar",
"toMicrosoftCalendar": "to Microsoft Calendar" "toMicrosoftCalendar": "to Microsoft Calendar"
} }
} }

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

@@ -15,72 +15,72 @@ import i18n from "../i18n";
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [ routes: [
{ {
path: "/", path: "/",
name: "course-selection", name: "course-selection",
component: CourseSelection, component: CourseSelection,
}, },
{ {
path: "/rooms", path: "/rooms",
name: "room-finder", name: "room-finder",
component: RoomFinder, component: RoomFinder,
}, },
{ {
path: "/faq", path: "/faq",
name: "faq", name: "faq",
component: Faq, component: Faq,
}, },
{ {
path: "/additional-modules", path: "/additional-modules",
name: "additional-modules", name: "additional-modules",
component: AdditionalModules, component: AdditionalModules,
}, },
{ {
path: "/edit-additional-modules", path: "/edit-additional-modules",
name: "edit-additional-modules", name: "edit-additional-modules",
component: EditAdditionalModules, component: EditAdditionalModules,
}, },
{ {
path: "/edit-calendar", path: "/edit-calendar",
name: "edit-calendar", name: "edit-calendar",
component: EditModules, component: EditModules,
}, },
{ {
path: "/calendar-link", path: "/calendar-link",
name: "calendar-link", name: "calendar-link",
component: CalendarLink, component: CalendarLink,
}, },
{ {
path: "/edit", path: "/edit",
name: "edit", name: "edit",
component: EditCalendarView, component: EditCalendarView,
}, },
{ {
path: "/privacy-policy", path: "/privacy-policy",
name: "privacy-policy", name: "privacy-policy",
component: PrivacyPolicy, component: PrivacyPolicy,
}, },
{ {
path: "/imprint", path: "/imprint",
name: "imprint", name: "imprint",
component: Imprint, component: Imprint,
}, },
{ {
path: "/rename-modules", path: "/rename-modules",
name: "rename-modules", name: "rename-modules",
component: RenameModules, component: RenameModules,
} },
], ],
}); });
router.beforeEach(async (to, from) => { router.beforeEach(async (to, from) => {
const newLocale = to.params.locale const newLocale = to.params.locale;
const prevLocale = from.params.locale const prevLocale = from.params.locale;
// If the locale hasn't changed, do nothing // If the locale hasn't changed, do nothing
if (newLocale === prevLocale) { if (newLocale === prevLocale) {
return return;
} }
i18n.setLocale(newLocale) i18n.setLocale(newLocale);
}) });
export default router; export default router;

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

@@ -1,10 +1,10 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { useLocalStorage } from "@vueuse/core" import { useLocalStorage } from "@vueuse/core";
const localeStore = defineStore("localeStore", { const localeStore = defineStore("localeStore", {
state: () => { state: () => {
return { return {
locale: useLocalStorage('locale', "en"), //useLocalStorage takes in a key of 'count' and default value of 0 locale: useLocalStorage("locale", "en"), //useLocalStorage takes in a key of 'count' and default value of 0
}; };
}, },
actions: { actions: {

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

@@ -91,10 +91,10 @@ function selectChange() {
class="custom-multiselect" class="custom-multiselect"
filter filter
:placeholder="$t('additionalModules.dropDown')" :placeholder="$t('additionalModules.dropDown')"
:auto-filter-focus="true"
:show-toggle-all="false"
@change="selectChange()" @change="selectChange()"
@selectall-change="onSelectAllChange($event)" @selectall-change="onSelectAllChange($event)"
:autoFilterFocus="true"
:showToggleAll="false"
> >
<template #option="slotProps"> <template #option="slotProps">
<div class="flex justify-content-between w-full"> <div class="flex justify-content-between w-full">
@@ -119,15 +119,17 @@ function selectChange() {
<template #footer> <template #footer>
<div class="py-2 px-3"> <div class="py-2 px-3">
<b>{{ selectedModules ? selectedModules.length : 0 }}</b> <b>{{ selectedModules ? selectedModules.length : 0 }}</b>
{{$t("additionalModules.dropDownFooterItem")}} {{ $t("additionalModules.dropDownFooterItem") }}
{{ (selectedModules ? selectedModules.length : 0) > 1 ? "s" : "" }} {{ (selectedModules ? selectedModules.length : 0) > 1 ? "s" : "" }}
{{$t("additionalModules.dropDownFooterSelected")}} {{ $t("additionalModules.dropDownFooterSelected") }}
</div> </div>
</template> </template>
</MultiSelect> </MultiSelect>
</div> </div>
<div class="flex align-items-center justify-content-center h-4rem m-2"> <div class="flex align-items-center justify-content-center h-4rem m-2">
<Button @click="nextStep()">{{$t("additionalModules.nextStep")}}</Button> <Button @click="nextStep()">{{
$t("additionalModules.nextStep")
}}</Button>
</div> </div>
</div> </div>
</template> </template>
@@ -140,4 +142,4 @@ function selectChange() {
:deep(.custom-multiselect li) { :deep(.custom-multiselect li) {
height: unset; height: unset;
} }
</style> </style>

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

@@ -7,7 +7,7 @@ import router from "../router";
import tokenStore from "../store/tokenStore"; import tokenStore from "../store/tokenStore";
import { useToast } from "primevue/usetoast"; import { useToast } from "primevue/usetoast";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: 'global' }) const { t } = useI18n({ useScope: "global" });
const toast = useToast(); const toast = useToast();
@@ -62,7 +62,7 @@ function loadCalendar(): void {
<div class="flex flex-column"> <div class="flex flex-column">
<div class="flex align-items-center justify-content-center h-4rem mt-2"> <div class="flex align-items-center justify-content-center h-4rem mt-2">
<h3 class="text-4xl"> <h3 class="text-4xl">
{{$t("editCalendarView.headline")}} {{ $t("editCalendarView.headline") }}
<i <i
class="pi pi-pencil vertical-align-baseline ml-2" class="pi pi-pencil vertical-align-baseline ml-2"
style="font-size: 2rem" style="font-size: 2rem"
@@ -72,7 +72,7 @@ function loadCalendar(): void {
<div <div
class="flex align-items-center justify-content-center h-4rem border-round" class="flex align-items-center justify-content-center h-4rem border-round"
> >
<p class="text-2xl">{{$t("editCalendarView.subTitle")}}</p> <p class="text-2xl">{{ $t("editCalendarView.subTitle") }}</p>
</div> </div>
<div <div
class="flex align-items-center justify-content-center border-round m-2" class="flex align-items-center justify-content-center border-round m-2"

3
frontend/src/view/ImprintPage.vue
View File

@@ -10,7 +10,8 @@
<h2>Kontakt</h2> <h2>Kontakt</h2>
<p> <p>
Per Email: <a href="mailto:support@htwkalender.de">support@htwkalender.de</a> Per Email:
<a href="mailto:support@htwkalender.de">support@htwkalender.de</a>
</p> </p>
<h2>Adresse</h2> <h2>Adresse</h2>

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

@@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Ref, ref } from "vue"; import { Ref, ref } from "vue";
import { fetchRoom } from "@/api/fetchRoom.ts"; import { fetchRoom } from "../api/fetchRoom.ts";
import RoomOccupation from "@/components/RoomOccupation.vue"; import RoomOccupation from "../components/RoomOccupation.vue";
const rooms = async () => { const rooms = async () => {
return await fetchRoom(); return await fetchRoom();
@@ -21,7 +21,7 @@ rooms().then(
<template> <template>
<div class="flex flex-column"> <div class="flex flex-column">
<div class="flex align-items-center justify-content-center h-4rem m-2"> <div class="flex align-items-center justify-content-center h-4rem m-2">
<h3 class="text-4xl">{{$t('roomFinderPage.headline')}}</h3> <h3 class="text-4xl">{{ $t("roomFinderPage.headline") }}</h3>
<i <i
class="pi pi-search vertical-align-baseline ml-3" class="pi pi-search vertical-align-baseline ml-3"
style="font-size: 2rem" style="font-size: 2rem"
@@ -30,7 +30,7 @@ rooms().then(
<div <div
class="flex align-items-center justify-content-center h-4rem border-round m-2" class="flex align-items-center justify-content-center h-4rem border-round m-2"
> >
<h5 class="text-2xl">{{$t('roomFinderPage.detail')}}</h5> <h5 class="text-2xl">{{ $t("roomFinderPage.detail") }}</h5>
</div> </div>
<div <div
class="flex align-items-center justify-content-center border-round m-2" class="flex align-items-center justify-content-center border-round m-2"
@@ -43,7 +43,7 @@ rooms().then(
option-label="name" option-label="name"
:placeholder="$t('roomFinderPage.dropDownSelect')" :placeholder="$t('roomFinderPage.dropDownSelect')"
:empty-message="$t('roomFinderPage.noRoomsAvailable')" :empty-message="$t('roomFinderPage.noRoomsAvailable')"
:autoFilterFocus="true" :auto-filter-focus="true"
/> />
</div> </div>
<div class="m-6"> <div class="m-6">

4
frontend/vite.config.ts
View File

@@ -7,8 +7,8 @@ export default defineConfig({
plugins: [vue()], plugins: [vue()],
resolve: { resolve: {
alias: { alias: {
'@': fileURLToPath(new URL('./src', import.meta.url)) "@": fileURLToPath(new URL("./src", import.meta.url)),
} },
}, },
server: { server: {
host: true, host: true,