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

feat:#60 added localization for more pages

Browse Source
This commit is contained in:
masterElmar
2023-11-15 17:46:25 +01:00
parent 00399c32d9
commit 7e261438d5
18 changed files with 236 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -1,4 +1,5 @@
.idea/ .idea/
.vscode/ .vscode/
.DS_Store .DS_Store
workspace.xml
**/.idea/

50
.idea/workspace.xml generated
View File

@@ -5,47 +5,24 @@
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="81c34cb9-5538-45c5-b693-4f8a6bed15c4" name="Changes" comment="added missing idea files"> <list default="true" id="81c34cb9-5538-45c5-b693-4f8a6bed15c4" name="Changes" comment="added missing idea files">
<change afterPath="$PROJECT_DIR$/frontend/public/htwk.svg" afterDir="false" />
<change afterPath="$PROJECT_DIR$/frontend/public/htwkalender.svg" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/.eslintrc.cjs" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/.eslintrc.cjs" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/.prettierrc.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/.prettierrc.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/README.md" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/index.html" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/package-lock.json" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/AdditionalModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/view/AdditionalModules.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/App.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/App.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/api/createFeed.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/createFeed.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/api/fetchCourse.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/fetchCourse.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/api/fetchModule.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/fetchModule.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/api/fetchRoom.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/fetchRoom.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/api/loadCalendar.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/api/loadCalendar.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/AdditionalModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/AdditionalModules.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/CalendarLink.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/CalendarLink.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/CourseSelection.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/CourseSelection.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/CourseSelection.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/CourseSelection.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/FaqPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/FaqPage.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/ImprintPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/view/ImprintPage.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/ImprintPage.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ImprintPage.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/MenuBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/MenuBar.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/MenuBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/MenuBar.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/ModuleInformation.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ModuleInformation.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/ModuleInformation.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ModuleInformation.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/ModuleSelection.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ModuleSelection.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/ModuleSelection.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ModuleSelection.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/ModuleTemplateDialog.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/ModuleTemplateDialog.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/PrivacyPolicy.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/view/PrivacyPolicy.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/PrivacyPolicy.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/PrivacyPolicy.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/RoomFinder.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/view/RoomFinder.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/RenameModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/RenameModules.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/RoomFinder.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/RoomFinder.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/RoomOccupation.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/RoomOccupation.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/components/RoomOccupation.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/RoomOccupation.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditAdditionalModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditAdditionalModules.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/i18n/translations/de.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/i18n/translations/de.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditModules.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/components/editCalendar/EditModules.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/i18n/translations/en.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/i18n/translations/en.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/main.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/main.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/model/calendar.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/model/calendar.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/model/event.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/model/event.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/model/module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/model/module.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/router/index.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/router/index.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/store/moduleStore.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/store/moduleStore.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/frontend/src/view/editCalendarView.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/view/EditCalendarView.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/store/tokenStore.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/store/tokenStore.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/style.css" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/style.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/view/editCalendarView.vue" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/view/editCalendarView.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/src/vite-env.d.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/src/vite-env.d.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/tsconfig.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/tsconfig.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/tsconfig.node.json" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/tsconfig.node.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/frontend/vite.config.ts" beforeDir="false" afterPath="$PROJECT_DIR$/frontend/vite.config.ts" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -102,6 +79,7 @@
</component> </component>
<component name="PropertiesComponent"><![CDATA[{ <component name="PropertiesComponent"><![CDATA[{
"keyToString": { "keyToString": {
"ASKED_MARK_IGNORED_FILES_AS_EXCLUDED": "true",
"ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true", "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
"RunOnceActivity.OpenProjectViewOnStart": "true", "RunOnceActivity.OpenProjectViewOnStart": "true",
"RunOnceActivity.ShowReadmeOnStart": "true", "RunOnceActivity.ShowReadmeOnStart": "true",
@@ -109,7 +87,7 @@
"RunOnceActivity.go.migrated.go.modules.settings": "true", "RunOnceActivity.go.migrated.go.modules.settings": "true",
"RunOnceActivity.go.modules.automatic.dependencies.download": "true", "RunOnceActivity.go.modules.automatic.dependencies.download": "true",
"WebServerToolWindowFactoryState": "false", "WebServerToolWindowFactoryState": "false",
"git-widget-placeholder": "main", "git-widget-placeholder": "60-add-localization-strings-in-english-and-german",
"go.import.settings.migrated": "true", "go.import.settings.migrated": "true",
"ignore.virus.scanning.warn.message": "true", "ignore.virus.scanning.warn.message": "true",
"jdk.selected.JAVA_MODULE": "20", "jdk.selected.JAVA_MODULE": "20",
@@ -132,6 +110,10 @@
<key name="CopyFile.RECENT_KEYS"> <key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/frontend/src/components" /> <recent name="$PROJECT_DIR$/frontend/src/components" />
</key> </key>
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Users\masterelmar\project\htwkalender\frontend\src\view" />
<recent name="C:\Users\masterelmar\project\htwkalender\frontend\public" />
</key>
</component> </component>
<component name="RunManager"> <component name="RunManager">
<configuration default="true" type="GoApplicationRunConfiguration" factoryName="Go Application"> <configuration default="true" type="GoApplicationRunConfiguration" factoryName="Go Application">

2
frontend/index.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> --> <link rel="icon" type="image/svg+xml" href="/htwk.svg" />
<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>

7
frontend/public/htwk.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with PhotoLine 24.00 (www.pl32.de) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="627" height="666" viewBox="0 0 627 666" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="Quadrat/Rechteck" transform="matrix(0.82674 -0.3298 1.134154 2.843093 -772.813049 -1590.353027)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
<rect id="Quadrat/Rechteck" transform="matrix(0.832138 -0.331953 1.134154 2.843093 -414.361572 -1608.206054)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 757 B

30
frontend/public/htwkalender.svg Normal file
View File

@@ -0,0 +1,30 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with PhotoLine 24.00 (www.pl32.de) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="627" height="666" viewBox="0 0 627 666" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="Quadrat/Rechteck" transform="matrix(0.82674 -0.3298 1.134154 2.843093 -772.813049 -1540.146606)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
<rect id="Quadrat/Rechteck" transform="matrix(0.832138 -0.331953 1.134154 2.843093 -414.361572 -1557.999633)" fill="#ffff33" fill-rule="evenodd" x="36.99" y="627.42" width="192.87" height="192.87"/>
<g transform="matrix(0.769891 0 0 0.796361 -74.37635 -60.710224)">
<g id="Quadrat/Rechteck" transform="matrix(0.846958 0 0 0.693289 108.563324 93.212982)">
<rect transform="matrix(1.180696 0 0 1.442401 -128.180328 -134.450469)" stroke-width="28.4" stroke-miterlimit="10" fill="none" stroke="#000000" x="211.8" y="293.02" width="583.17" height="7.42"/>
</g>
<g id="Quadrat/Rechteck" transform="matrix(0.670841 0 0 0.793259 190.662277 204.505432)">
<rect transform="matrix(1.490665 0 0 1.260623 -284.213623 -257.804199)" stroke-width="28.4" stroke-miterlimit="10" fill="none" stroke="#000000" x="272.43" y="433.13" width="461.91" height="8.5"/>
</g>
<g id="Quadrat/Rechteck" transform="matrix(0.670841 0 0 0.793259 190.662277 300.184906)">
<rect transform="matrix(1.490665 0 0 1.260623 -284.213623 -378.419952)" stroke-width="28.4" stroke-miterlimit="10" fill="none" stroke="#000000" x="272.43" y="528.81" width="461.91" height="8.5"/>
</g>
<g id="Quadrat/Rechteck" transform="matrix(0.670841 0 0 0.793259 190.662277 395.864471)">
<rect transform="matrix(1.490665 0 0 1.260623 -284.213623 -499.035797)" stroke-width="28.4" stroke-miterlimit="10" fill="none" stroke="#000000" x="272.43" y="624.49" width="461.91" height="8.5"/>
</g>
<g id="Quadrat/Rechteck" transform="matrix(0.670841 0 0 0.793259 190.662277 491.543914)">
<rect transform="matrix(1.490665 0 0 1.260623 -284.213623 -619.651489)" stroke-width="28.4" stroke-miterlimit="10" fill="none" stroke="#000000" x="272.43" y="720.17" width="461.91" height="8.5"/>
</g>
<g id="abgerundetes Quadrat/Rechteck" transform="matrix(1.077601 0 0 1.050273 104.781829 -69.038833)">
<path transform="matrix(0.927987 0 0 0.952133 -97.236175 65.734169)" stroke-width="27.4" stroke-miterlimit="10" fill="none" stroke="#000000" d="M246.55 215.13 L762.01 215.13 C788.73 215.13 810.44 236.84 810.44 263.56 L810.44 772.09 C810.44 798.82 788.73 820.52 762.01 820.52 L246.55 820.52 C219.82 820.52 198.11 798.82 198.11 772.09 L198.11 263.56 C198.11 236.84 219.82 215.13 246.55 215.13 Z"/>
</g>
<path id="abgerundetes Quadrat/Rechteck 2" transform="matrix(1.713032 0 0 1.426116 -265.726959 -85.444915)" fill-rule="evenodd" d="M333.56 164.1 L333.56 164.1 C341.55 164.1 348.05 171.91 348.05 181.51 L348.05 225.45 C348.05 235.05 341.55 242.85 333.56 242.85 L333.56 242.85 C325.56 242.85 319.07 235.05 319.07 225.45 L319.07 181.51 C319.07 171.91 325.56 164.1 333.56 164.1 Z"/>
<path id="abgerundetes Quadrat/Rechteck 2" transform="matrix(1.713032 0 0 1.426116 138.124114 -85.444915)" fill-rule="evenodd" d="M333.56 164.1 L333.56 164.1 C341.55 164.1 348.05 171.91 348.05 181.51 L348.05 225.45 C348.05 235.05 341.55 242.85 333.56 242.85 L333.56 242.85 C325.56 242.85 319.07 235.05 319.07 225.45 L319.07 181.51 C319.07 171.91 325.56 164.1 333.56 164.1 Z"/>
<path id="abgerundetes Quadrat/Rechteck 2" transform="matrix(1.713032 0 0 1.426116 -265.726959 -85.444915)" fill-rule="evenodd" d="M333.56 164.1 L333.56 164.1 C341.55 164.1 348.05 171.91 348.05 181.51 L348.05 225.45 C348.05 235.05 341.55 242.85 333.56 242.85 L333.56 242.85 C325.56 242.85 319.07 235.05 319.07 225.45 L319.07 181.51 C319.07 171.91 325.56 164.1 333.56 164.1 Z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

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

@@ -7,8 +7,7 @@ import {
import ModuleSelection from "./ModuleSelection.vue"; import ModuleSelection from "./ModuleSelection.vue";
import { Module } from "../model/module.ts"; import { Module } from "../model/module.ts";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: 'global' }) const { t } = useI18n({ useScope: "global" });
const courses = async () => { const courses = async () => {
return await fetchCourse(); return await fetchCourse();
@@ -16,10 +15,12 @@ const courses = async () => {
const selectedCourse: Ref<{ name: string }> = ref({ name: "" }); const selectedCourse: Ref<{ name: string }> = ref({ name: "" });
const countries: Ref<{ name: string }[]> = ref([]); const countries: Ref<{ name: string }[]> = ref([]);
const semesters: ComputedRef<{ name: string; value: string }[]> = computed(() =>[ const semesters: ComputedRef<{ name: string; value: string }[]> = computed(
{ name: t('courseSelection.winterSemester'), value: "ws" }, () => [
{ name: t('courseSelection.summerSemester'), value: "ss" }, { name: t("courseSelection.winterSemester"), value: "ws" },
]); { name: t("courseSelection.summerSemester"), value: "ss" },
],
);
const selectedSemester: Ref<{ name: string; value: string }> = ref( const selectedSemester: Ref<{ name: string; value: string }> = ref(
semesters.value[0], semesters.value[0],
@@ -46,7 +47,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">
Welcome to HTWKalender {{$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"
@@ -56,7 +57,7 @@ async function getModules() {
<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('courseSelection.selectCourse') }}</h5> <h5 class="text-2xl">{{ $t("courseSelection.subTitle") }}</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"
@@ -67,7 +68,8 @@ async function getModules() {
class="w-full md:w-25rem mx-2" class="w-full md:w-25rem mx-2"
filter filter
option-label="name" option-label="name"
placeholder="Select a Course" :placeholder="$t('courseSelection.courseDropDown')"
:empty-message="$t('courseSelection.noCoursesAvailable')"
@change="getModules()" @change="getModules()"
:autoFilterFocus="true" :autoFilterFocus="true"
></Dropdown> ></Dropdown>
@@ -76,7 +78,7 @@ async function getModules() {
:options="semesters" :options="semesters"
class="w-full md:w-25rem mx-2" class="w-full md:w-25rem mx-2"
option-label="name" option-label="name"
placeholder="Select a Semester" :placeholder="$t('courseSelection.semesterDropDown')"
@change="getModules()" @change="getModules()"
></Dropdown> ></Dropdown>
</div> </div>
@@ -91,4 +93,4 @@ async function getModules() {
</div> </div>
</div> </div>
</div> </div>
</template> </template>

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

@@ -8,40 +8,52 @@ const items = computed(() => [
{ {
label: t("createCalendar"), label: t("createCalendar"),
icon: "pi pi-fw pi-plus", icon: "pi pi-fw pi-plus",
to: "/", route: "/",
}, },
{ {
label: t("editCalendar"), label: t("editCalendar"),
icon: "pi pi-fw pi-pencil", icon: "pi pi-fw pi-pencil",
to: "/edit", route: "/edit",
}, },
{ {
label: t("roomFinder"), label: t("roomFinder"),
icon: "pi pi-fw pi-calendar", icon: "pi pi-fw pi-calendar",
to: `rooms`, route: `rooms`,
}, },
{ {
label: t("faq"), label: t("faq"),
icon: "pi pi-fw pi-book", icon: "pi pi-fw pi-book",
to: `faq`, route: `faq`,
}, },
{ {
label: t("imprint"), label: t("imprint"),
icon: "pi pi-fw pi-id-card", icon: "pi pi-fw pi-id-card",
to: `imprint`, route: `imprint`,
}, },
{ {
label: t("privacy"), label: t("privacy"),
icon: "pi pi-fw pi-exclamation-triangle", icon: "pi pi-fw pi-exclamation-triangle",
to: `privacy-policy`, route: `privacy-policy`,
}, },
]); ]);
</script> </script>
<template> <template>
<Menubar :model="items" class="menubar justify-content-center"> <Menubar :model="items" class="menubar justify-content-between">
<template #start> <template #start class="mr-2">
<img
width="35" height="40"
src="../../public/htwk.svg"
alt="Logo"
class="h-10 w-10 mr-6"
style="margin-left: 1rem"
/>
</template>
<template #item="{ item }">
<router-link v-slot="{ navigate }" :to="item.route" custom>
<Button :label='String(item.label)' :icon="item.icon" severity="secondary" @click="navigate" text />
</router-link>
</template> </template>
<template #end> <template #end>
<LocaleSwitcher></LocaleSwitcher> <LocaleSwitcher></LocaleSwitcher>

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>Course: {{ module.course }}</td> <td>{{$t('moduleInformation.course')}}: {{ module.course }}</td>
</tr> </tr>
<tr> <tr>
<td>Person: {{ module.prof }}</td> <td>{{$t('moduleInformation.person')}}: {{ module.prof }}</td>
</tr> </tr>
<tr> <tr>
<td>Semester: {{ module.semester }}</td> <td>{{$t('moduleInformation.semester')}}: {{ module.semester }}</td>
</tr> </tr>
<tr> <tr>
<td> <td>

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

@@ -64,7 +64,7 @@ function nextStep() {
:disabled="selectedModules.length < 1" :disabled="selectedModules.length < 1"
class="col-4 justify-content-center" class="col-4 justify-content-center"
@click="nextStep()" @click="nextStep()"
>Next Step >{{ $t("moduleSelection.nextStep") }}
</Button> </Button>
</div> </div>
<div class="flex align-items-center justify-content-center"> <div class="flex align-items-center justify-content-center">
@@ -72,16 +72,16 @@ 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>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
v-model="allSelected" v-model="allSelected"
class="w-12rem" class="w-12rem"
off-icon="pi pi-times" off-icon="pi pi-times"
off-label="Unselect All" :off-label="$t('moduleSelection.deselectAll')"
on-icon="pi pi-check" on-icon="pi pi-check"
on-label="Select All" :on-label="$t('moduleSelection.selectAll')"
@click="selectAllModules(!allSelected)" @click="selectAllModules(!allSelected)"
/> />
</div> </div>
@@ -89,7 +89,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">
No Modules found for this course {{$t("moduleSelection.noModulesAvailable")}}
</p> </p>
</template> </template>
<template #list="slotProps"> <template #list="slotProps">
@@ -112,9 +112,9 @@ function nextStep() {
v-model="modulesWithSelection[slotProps.index].selected" v-model="modulesWithSelection[slotProps.index].selected"
class="w-9rem" class="w-9rem"
off-icon="pi pi-times" off-icon="pi pi-times"
off-label="Unselected" :off-label="$t('moduleSelection.unselected')"
on-icon="pi pi-check" on-icon="pi pi-check"
on-label="Selected" :on-label="$t('moduleSelection.selected')"
/> />
</div> </div>
</div> </div>
@@ -132,4 +132,4 @@ function nextStep() {
width: 50rem; width: 50rem;
} }
} }
</style> </style>

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

@@ -3,9 +3,11 @@ import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid"; import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction"; import interactionPlugin from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid"; import timeGridPlugin from "@fullcalendar/timegrid";
import { computed, ref, Ref, watch } from "vue"; 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";
const { t } = useI18n({ useScope: 'global' })
const props = defineProps({ const props = defineProps({
room: { room: {
@@ -53,7 +55,14 @@ async function getOccupation() {
calendar?.refetchEvents(); calendar?.refetchEvents();
} }
const calendarOptions: CalendarOptions = { import allLocales from "@fullcalendar/core/locales-all";
const calendarOptions: ComputedRef<CalendarOptions> = computed(() =>
{
return {
locales: allLocales,
locale: t('languageCode'),
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
initialView: "week", initialView: "week",
dayHeaderFormat: { weekday: "short", omitCommas: true }, dayHeaderFormat: { weekday: "short", omitCommas: true },
@@ -65,6 +74,7 @@ const calendarOptions: CalendarOptions = {
}, },
views: { views: {
week: { week: {
description: "Wochenansicht",
type: "timeGrid", type: "timeGrid",
slotLabelFormat: { slotLabelFormat: {
hour: "numeric", hour: "numeric",
@@ -77,7 +87,6 @@ const calendarOptions: CalendarOptions = {
titleFormat: { month: "short", day: "numeric" }, titleFormat: { month: "short", day: "numeric" },
slotMinTime: "06:00:00", slotMinTime: "06:00:00",
slotMaxTime: "22:00:00", slotMaxTime: "22:00:00",
duration: { days: 7 }, duration: { days: 7 },
firstDay: 1, firstDay: 1,
allDaySlot: false, allDaySlot: false,
@@ -106,7 +115,7 @@ const calendarOptions: CalendarOptions = {
start: "week,Day", start: "week,Day",
}, },
datesSet: function (dateInfo) { 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(view.activeStart.getTime() - offset * 60 * 1000);
@@ -115,7 +124,7 @@ const calendarOptions: CalendarOptions = {
currentDateTo.value = endDate.toISOString().split("T")[0]; currentDateTo.value = endDate.toISOString().split("T")[0];
getOccupation(); getOccupation();
}, },
events: function (_info, successCallback, failureCallback) { events: function (_info: any, successCallback: any, failureCallback: any) {
if (occupations.value.length === 0) { if (occupations.value.length === 0) {
failureCallback(new Error("no events")); failureCallback(new Error("no events"));
} else { } else {
@@ -130,8 +139,8 @@ const calendarOptions: CalendarOptions = {
); );
} }
}, },
}; }})
</script> </script>
<template> <template>
<FullCalendar ref="fullCalendar" :options="calendarOptions" /> <FullCalendar ref="fullCalendar" :options="calendarOptions"/>
</template> </template>

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

@@ -1,15 +1,51 @@
{ {
"createCalendar": "Kalender erstellen", "languageCode": "de",
"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",
"english": "Englisch", "english": "Englisch",
"german": "Deutsch", "german": "Deutsch",
"courseSelection": { "courseSelection": {
"headline": "Willkommen beim HTWKalender",
"winterSemester": "Wintersemester", "winterSemester": "Wintersemester",
"summerSemester": "Sommersemester", "summerSemester": "Sommersemester",
"selectCourse": "Bitte wähle eine Gruppe und das Semester aus" "subTitle": "Bitte wähle eine Gruppe und das Semester aus.",
"courseDropDown": "Gruppe",
"noCoursesAvailable": "Keine Gruppen verfügbar",
"semesterDropDown": "Semester"
},
"roomFinderPage": {
"headline": "Raumfinder",
"detail": "Bitte wähle einen Raum aus, um die Belegung einzusehen",
"dropDownSelect": "Bitte wähle einen Raum aus",
"noRoomsAvailable": "Keine Räume verfügbar"
},
"moduleSelection":{
"nextStep": "Weiter",
"selectAll": "Wähle alle aus",
"deselectAll": "Alle abwählen",
"noModulesAvailable": "Keine Module verfügbar",
"modules": "Module"
},
"moduleInformation": {
"course": "Kurs",
"person": "Person",
"semester": "Semester"
},
"editCalendarView": {
"error": "Fehler",
"invalidToken": "Ungültiger Token",
"headline": "Bearbeite deinen HTWKalender",
"subTitle": "Füge deinen Link oder Token ein um den Kalender zu bearbeiten"
},
"additionalModules": {
"subTitle": "Füge weitere Module hinzu die nicht in deinem Studiengang enthalten sind.",
"dropDown": "Wähle weitere Module aus",
"dropDownFooterItem": "Module",
"dropDownFooterSelected": "ausgewählt",
"nextStep": "Weiter"
} }
} }

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

@@ -1,15 +1,53 @@
{ {
"createCalendar": "Create Calendar", "languageCode": "en",
"editCalendar": "Edit Calendar", "createCalendar": "create calendar",
"roomFinder": "Room Finder", "editCalendar": "edit calendar",
"faq": "FAQ", "roomFinder": "room finder",
"imprint": "Imprint", "faq": "faq",
"privacy": "Privacy", "imprint": "imprint",
"privacy": "privacy",
"english": "English", "english": "English",
"german": "German", "german": "German",
"courseSelection": { "courseSelection": {
"headline": "Welcome to HTWKalender",
"winterSemester": "winter semester", "winterSemester": "winter semester",
"summerSemester": "summer semester", "summerSemester": "summer semester",
"selectCourse": "Please select a course and semester" "subTitle": "Please select a course and semester",
"courseDropDown": "Please select a course",
"noCoursesAvailable": "No courses listed",
"semesterDropDown": "Please select a semester"
},
"roomFinderPage": {
"headline": "room finder",
"detail": "Please select a room to view the occupancy",
"dropDownSelect": "Please select a room",
"noRoomsAvailable": "No rooms listed"
},
"moduleSelection":{
"nextStep": "next step",
"selectAll": "select all",
"deselectAll": "deselect all",
"selected": "selected",
"unselected": "unselected",
"noModulesAvailable": "no modules available",
"modules": "modules"
},
"moduleInformation": {
"course": "course",
"person": "person",
"semester": "semester"
},
"editCalendarView": {
"error": "error",
"invalidToken": "invalid token",
"headline": "edit your HTWKalender",
"subTitle": "please enter your link or calendar token"
},
"additionalModules": {
"subTitle": "Select additional Modules that are not listed in the regular semester for your Course",
"dropDown": "Select additional modules",
"dropDownFooterItem": "modules",
"dropDownFooterSelected": "selected",
"nextStep": "next step"
} }
} }

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

@@ -1,12 +1,12 @@
import { createRouter, createWebHistory } from "vue-router"; import { createRouter, createWebHistory } from "vue-router";
import Faq from "../components/FaqPage.vue"; import Faq from "../components/FaqPage.vue";
import AdditionalModules from "../components/AdditionalModules.vue"; import AdditionalModules from "../view/AdditionalModules.vue";
import CalendarLink from "../components/CalendarLink.vue"; import CalendarLink from "../components/CalendarLink.vue";
import Imprint from "../components/ImprintPage.vue"; import Imprint from "../view/ImprintPage.vue";
import PrivacyPolicy from "../components/PrivacyPolicy.vue"; import PrivacyPolicy from "../view/PrivacyPolicy.vue";
import RenameModules from "../components/RenameModules.vue"; import RenameModules from "../components/RenameModules.vue";
import RoomFinder from "../components/RoomFinder.vue"; import RoomFinder from "../view/RoomFinder.vue";
import EditCalendarView from "../view/editCalendarView.vue"; import EditCalendarView from "../view/EditCalendarView.vue";
import EditAdditionalModules from "../components/editCalendar/EditAdditionalModules.vue"; import EditAdditionalModules from "../components/editCalendar/EditAdditionalModules.vue";
import EditModules from "../components/editCalendar/EditModules.vue"; import EditModules from "../components/editCalendar/EditModules.vue";
import CourseSelection from "../components/CourseSelection.vue"; import CourseSelection from "../components/CourseSelection.vue";

25
frontend/src/components/AdditionalModules.vue → frontend/src/view/AdditionalModules.vue
View File

@@ -4,12 +4,10 @@ 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 { MultiSelectAllChangeEvent } from "primevue/multiselect"; import { MultiSelectAllChangeEvent } from "primevue/multiselect";
import { useDialog } from "primevue/usedialog";
const dialog = useDialog();
import router from "../router"; import router from "../router";
import { fetchModule } from "../api/fetchModule.ts"; import { fetchModule } from "../api/fetchModule.ts";
import { useDialog } from "primevue/usedialog";
const dialog = useDialog();
const fetchedModules = async () => { const fetchedModules = async () => {
return await fetchAllModules(); return await fetchAllModules();
@@ -35,7 +33,7 @@ async function nextStep() {
} }
const ModuleInformation = defineAsyncComponent( const ModuleInformation = defineAsyncComponent(
() => import("./ModuleInformation.vue"), () => import("../components/ModuleInformation.vue"),
); );
async function showInfo(module: Module) { async function showInfo(module: Module) {
@@ -79,8 +77,7 @@ function selectChange() {
<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> <h3>
Select additional Modules that are not listed in the regular semester {{ $t("additionalModules.subTitle") }}
for your Course
</h3> </h3>
</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">
@@ -93,10 +90,11 @@ function selectChange() {
:virtual-scroller-options="{ itemSize: 70 }" :virtual-scroller-options="{ itemSize: 70 }"
class="custom-multiselect" class="custom-multiselect"
filter filter
placeholder="Select additional modules" :placeholder="$t('additionalModules.dropDown')"
@change="selectChange()" @change="selectChange()"
@selectall-change="onSelectAllChange($event)" @selectall-change="onSelectAllChange($event)"
:autoFilterFocus="true" :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">
@@ -121,16 +119,15 @@ 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>
item{{ {{$t("additionalModules.dropDownFooterItem")}}
(selectedModules ? selectedModules.length : 0) > 1 ? "s" : "" {{ (selectedModules ? selectedModules.length : 0) > 1 ? "s" : "" }}
}} {{$t("additionalModules.dropDownFooterSelected")}}
selected.
</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()">Next Step</Button> <Button @click="nextStep()">{{$t("additionalModules.nextStep")}}</Button>
</div> </div>
</div> </div>
</template> </template>
@@ -143,4 +140,4 @@ function selectChange() {
:deep(.custom-multiselect li) { :deep(.custom-multiselect li) {
height: unset; height: unset;
} }
</style> </style>

17
frontend/src/view/editCalendarView.vue → frontend/src/view/EditCalendarView.vue
View File

@@ -6,6 +6,9 @@ import { getCalender } from "../api/loadCalendar";
import router from "../router"; 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";
const { t } = useI18n({ useScope: 'global' })
const toast = useToast(); const toast = useToast();
const token: Ref<string> = ref(""); const token: Ref<string> = ref("");
@@ -13,7 +16,7 @@ const modules: Ref<Module[]> = ref(moduleStore().modules);
function extractToken(token: string): string { function extractToken(token: string): string {
const tokenRegex = /^[a-z0-9]{15}$/; const tokenRegex = /^[a-z0-9]{15}$/;
const tokenUriRegex = /(?:\?|&)token=([a-z0-9]{15})(?:&|$)/; const tokenUriRegex = /[?&]token=([a-z0-9]{15})(?:&|$)/;
if (tokenRegex.test(token)) { if (tokenRegex.test(token)) {
return token; return token;
@@ -33,8 +36,8 @@ function loadCalendar(): void {
} catch (e) { } catch (e) {
toast.add({ toast.add({
severity: "error", severity: "error",
summary: "Error", summary: t("editCalendarView.error"),
detail: "Invalid token", detail: t("editCalendarView.invalidToken"),
life: 3000, life: 3000,
}); });
return; return;
@@ -58,10 +61,10 @@ function loadCalendar(): void {
<Toast /> <Toast />
<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-2xl"> <h3 class="text-4xl">
Edit your HTWKalender {{$t("editCalendarView.headline")}}
<i <i
class="pi pi-calendar vertical-align-baseline" class="pi pi-pencil vertical-align-baseline ml-2"
style="font-size: 2rem" style="font-size: 2rem"
></i> ></i>
</h3> </h3>
@@ -69,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">Please enter your existing calendar token</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"

0
frontend/src/components/ImprintPage.vue → frontend/src/view/ImprintPage.vue
View File

0
frontend/src/components/PrivacyPolicy.vue → frontend/src/view/PrivacyPolicy.vue
View File

15
frontend/src/components/RoomFinder.vue → 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 "./RoomOccupation.vue"; import RoomOccupation from "@/components/RoomOccupation.vue";
const rooms = async () => { const rooms = async () => {
return await fetchRoom(); return await fetchRoom();
@@ -21,12 +21,16 @@ 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">Raumfinder</h3> <h3 class="text-4xl">{{$t('roomFinderPage.headline')}}</h3>
<i
class="pi pi-search vertical-align-baseline ml-3"
style="font-size: 2rem"
></i>
</div> </div>
<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">Please select a room</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"
@@ -37,7 +41,8 @@ rooms().then(
class="w-full md:w-25rem mx-2" class="w-full md:w-25rem mx-2"
filter filter
option-label="name" option-label="name"
placeholder="Select a Room" :placeholder="$t('roomFinderPage.dropDownSelect')"
:empty-message="$t('roomFinderPage.noRoomsAvailable')"
:autoFilterFocus="true" :autoFilterFocus="true"
/> />
</div> </div>