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

fix:#61 added i18n update and pinned typescript version against vue-tsc problem with

Browse Source
This commit is contained in:
Elmar Kresse
2024-12-03 11:34:44 +01:00
parent 8718a968b8
commit 0d0f34e0a1
19 changed files with 188 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/package-lock.json generated
View File

@ -40,14 +40,14 @@
"sass": "^1.81.1", "sass": "^1.81.1",
"sass-loader": "^13.3.3", "sass-loader": "^13.3.3",
"terser": "^5.36.0", "terser": "^5.36.0",
"typescript": "^5.7.2", "typescript": "5.6.3",
"vite": "^5.4.11", "vite": "^5.4.11",
"vite-plugin-vue-devtools": "^7.6.7", "vite-plugin-vue-devtools": "^7.6.7",
"vite-ssg": "^0.23.8", "vite-ssg": "^0.23.8",
"vite-ssg-sitemap": "^0.7.1", "vite-ssg-sitemap": "^0.7.1",
"vitest": "^1.6.0", "vitest": "^1.6.0",
"vue-router": "^4.5.0", "vue-router": "^4.5.0",
"vue-tsc": "^2.1.10" "vue-tsc": "^2.1.6"
} }
}, },
"node_modules/@ampproject/remapping": { "node_modules/@ampproject/remapping": {
@ -6921,9 +6921,9 @@
} }
}, },
"node_modules/typescript": { "node_modules/typescript": {
"version": "5.7.2", "version": "5.6.3",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
"integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==", "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
"devOptional": true, "devOptional": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"bin": { "bin": {

4
frontend/package.json
View File

@ -45,13 +45,13 @@
"sass": "^1.81.1", "sass": "^1.81.1",
"sass-loader": "^13.3.3", "sass-loader": "^13.3.3",
"terser": "^5.36.0", "terser": "^5.36.0",
"typescript": "^5.7.2", "typescript": "5.6.3",
"vite": "^5.4.11", "vite": "^5.4.11",
"vite-plugin-vue-devtools": "^7.6.7", "vite-plugin-vue-devtools": "^7.6.7",
"vite-ssg": "^0.23.8", "vite-ssg": "^0.23.8",
"vite-ssg-sitemap": "^0.7.1", "vite-ssg-sitemap": "^0.7.1",
"vitest": "^1.6.0", "vitest": "^1.6.0",
"vue-router": "^4.5.0", "vue-router": "^4.5.0",
"vue-tsc": "^2.1.10" "vue-tsc": "^2.1.6"
} }
} }

2
frontend/src/App.vue
View File

@ -117,7 +117,7 @@ if (!import.meta.env.SSR) window.addEventListener("resize", updateMobile);
</transition> </transition>
</RouterView> </RouterView>
<!-- show CalendarPreview but only on specific router views --> <!-- show CalendarPreview but only on specific router views -->
<CalendarPreview v-if="isDisabled($route.name)" /> <CalendarPreview v-if="isDisabled(route.name)" />
<VueQueryDevtools /> <VueQueryDevtools />
<Toast /> <Toast />

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

@ -132,11 +132,11 @@ function unselectModule(event: DataTableRowUnselectEvent) {
:rows-per-page-options="[5, 10, 20, 50]" :rows-per-page-options="[5, 10, 20, 50]"
paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown" paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
:current-page-report-template=" :current-page-report-template="
$t('additionalModules.paginator.from') + t('additionalModules.paginator.from') +
'{first}' + '{first}' +
$t('additionalModules.paginator.to') + t('additionalModules.paginator.to') +
'{last}' + '{last}' +
$t('additionalModules.paginator.of') + t('additionalModules.paginator.of') +
'{totalRecords}' '{totalRecords}'
" "
filter-display="row" filter-display="row"
@ -155,7 +155,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
<Column <Column
field="course" field="course"
:header="$t('additionalModules.course')" :header="t('additionalModules.course')"
:show-clear-button="false" :show-clear-button="false"
:show-filter-menu="false" :show-filter-menu="false"
> >
@ -173,7 +173,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
</Column> </Column>
<Column <Column
field="name" field="name"
:header="$t('additionalModules.module')" :header="t('additionalModules.module')"
:show-clear-button="false" :show-clear-button="false"
:show-filter-menu="false" :show-filter-menu="false"
> >
@ -194,7 +194,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
filter-field="eventType" filter-field="eventType"
:filter-menu-style="{ width: '10rem' }" :filter-menu-style="{ width: '10rem' }"
style="min-width: 10rem" style="min-width: 10rem"
:header="$t('additionalModules.eventType')" :header="t('additionalModules.eventType')"
:show-clear-button="false" :show-clear-button="false"
:show-filter-menu="false" :show-filter-menu="false"
> >
@ -213,7 +213,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
</Column> </Column>
<Column <Column
field="prof" field="prof"
:header="$t('additionalModules.professor')" :header="t('additionalModules.professor')"
:show-clear-button="false" :show-clear-button="false"
:show-filter-menu="false" :show-filter-menu="false"
> >
@ -221,7 +221,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>
<Column :header="$t('additionalModules.info')"> <Column :header="t('additionalModules.info')">
<template #body="slotProps"> <template #body="slotProps">
<div v-if="loadingData"> <div v-if="loadingData">
<Skeleton></Skeleton> <Skeleton></Skeleton>
@ -232,7 +232,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
severity="secondary" severity="secondary"
rounded rounded
outlined outlined
:aria-label="$t('additionalModules.info-long')" :aria-label="t('additionalModules.info-long')"
class="small-button" class="small-button"
@click.stop="showInfo(slotProps.data)" @click.stop="showInfo(slotProps.data)"
></Button> ></Button>

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

@ -52,7 +52,7 @@ const columns = computed(() => [
:visible="dialogVisible && previewOn" :visible="dialogVisible && previewOn"
:maximizable="!mobilePage" :maximizable="!mobilePage"
:draggable="false" :draggable="false"
:header="$t('calendarPreview.preview-long')" :header="t('calendarPreview.preview-long')"
class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2" class="w-full lg:w-30rem lg:h-auto m-0 lg:m-2"
position="bottomleft" position="bottomleft"
@update:visible="dialogVisible = $event" @update:visible="dialogVisible = $event"
@ -85,7 +85,7 @@ const columns = computed(() => [
<template #button> <template #button>
<Button <Button
icon="pi pi-calendar" icon="pi pi-calendar"
:label="$t('calendarPreview.preview')" :label="t('calendarPreview.preview')"
class="p-button-rounded p-button-primary" class="p-button-rounded p-button-primary"
raised raised
@click="dialogVisible = true" @click="dialogVisible = true"

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

@ -23,7 +23,7 @@ import { useI18n } from "vue-i18n";
import { usePrimeVue } from "primevue/config"; import { usePrimeVue } from "primevue/config";
import primeVue_de from "@/i18n/translations/primevue/prime_vue_local_de.json"; import primeVue_de from "@/i18n/translations/primevue/prime_vue_local_de.json";
import primeVue_en from "@/i18n/translations/primevue/prime_vue_local_en.json"; import primeVue_en from "@/i18n/translations/primevue/prime_vue_local_en.json";
const { t } = useI18n({ useScope: "global" }); const { t, locale, availableLocales } = useI18n({ useScope: "global" });
const countries = computed(() => [ const countries = computed(() => [
{ name: t("english"), code: "en", icon: "🇬🇧" }, { name: t("english"), code: "en", icon: "🇬🇧" },
@ -54,8 +54,8 @@ updateLocale(localeStore().locale);
</script> </script>
<template> <template>
<Dropdown <Dropdown
v-model="$i18n.locale" v-model="locale"
:options="$i18n.availableLocales" :options="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"

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

@ -21,8 +21,11 @@ import { computed, ref } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import LocaleSwitcher from "./LocaleSwitcher.vue"; import LocaleSwitcher from "./LocaleSwitcher.vue";
import DarkModeSwitcher from "./DarkModeSwitcher.vue"; import DarkModeSwitcher from "./DarkModeSwitcher.vue";
import { useRoute } from "vue-router";
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
const route = useRoute();
const isDark = ref(true); const isDark = ref(true);
const items = computed(() => [ const items = computed(() => [
@ -96,7 +99,7 @@ function handleDarkModeToggled(isDarkVar: boolean) {
> >
<a <a
:class=" :class="
$route.path == item.route route.path == item.route
? 'flex align-items-center active' ? 'flex align-items-center active'
: 'flex align-items-center' : 'flex align-items-center'
" "
@ -111,7 +114,7 @@ function handleDarkModeToggled(isDarkVar: boolean) {
<a <a
v-else-if="item.url" v-else-if="item.url"
:class=" :class="
$route.path.includes(item.info) route.path.includes(item.info)
? 'flex align-items-center active' ? 'flex align-items-center active'
: 'flex align-items-center' : 'flex align-items-center'
" "
@ -124,7 +127,7 @@ function handleDarkModeToggled(isDarkVar: boolean) {
<span <span
v-else v-else
:class=" :class="
$route.path.includes(item.info) route.path.includes(item.info)
? 'flex align-items-center active' ? 'flex align-items-center active'
: 'flex align-items-center' : 'flex align-items-center'
" "

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

@ -62,13 +62,13 @@ function formatWeekday(weekday: string) {
<h2>{{ module.name }}</h2> <h2>{{ module.name }}</h2>
<table class="w-full"> <table class="w-full">
<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>
@ -81,33 +81,33 @@ function formatWeekday(weekday: string) {
> >
<Column <Column
field="day" field="day"
:header="$t('moduleInformation.day')" :header="t('moduleInformation.day')"
></Column> ></Column>
<Column field="start" :header="$t('moduleInformation.start')"> <Column field="start" :header="t('moduleInformation.start')">
<template #body="slotProps"> <template #body="slotProps">
{{ formatTimestamp(slotProps.data.start) }} {{ formatTimestamp(slotProps.data.start) }}
</template> </template>
</Column> </Column>
<Column field="end" :header="$t('moduleInformation.end')"> <Column field="end" :header="t('moduleInformation.end')">
<template #body="slotProps"> <template #body="slotProps">
{{ formatTimestamp(slotProps.data.end) }} {{ formatTimestamp(slotProps.data.end) }}
</template> </template>
</Column> </Column>
<Column <Column
field="rooms" field="rooms"
:header="$t('moduleInformation.room')" :header="t('moduleInformation.room')"
></Column> ></Column>
<Column <Column
field="eventType" field="eventType"
:header="$t('moduleInformation.type')" :header="t('moduleInformation.type')"
></Column> ></Column>
<Column <Column
field="notes" field="notes"
:header="$t('moduleInformation.notes')" :header="t('moduleInformation.notes')"
></Column> ></Column>
<Column <Column
field="week" field="week"
:header="$t('moduleInformation.week')" :header="t('moduleInformation.week')"
></Column> ></Column>
</DataTable> </DataTable>
<DataView <DataView
@ -140,7 +140,7 @@ function formatWeekday(weekday: string) {
<div class="mr-2">{{ formatWeekday(item.day) }}</div> <div class="mr-2">{{ formatWeekday(item.day) }}</div>
<div class="mr-2"> <div class="mr-2">
{{ {{
$t("moduleInformation.nthWeek", { t("moduleInformation.nthWeek", {
count: item.week, count: item.week,
}) })
}} }}
@ -150,25 +150,25 @@ function formatWeekday(weekday: string) {
<table> <table>
<tr> <tr>
<td class="mr-2"> <td class="mr-2">
<b>{{ $t("moduleInformation.start") }}:</b> <b>{{ t("moduleInformation.start") }}:</b>
</td> </td>
<td>{{ formatTimestamp(item.start) }}</td> <td>{{ formatTimestamp(item.start) }}</td>
</tr> </tr>
<tr> <tr>
<td class="mr-2"> <td class="mr-2">
<b>{{ $t("moduleInformation.end") }}:</b> <b>{{ t("moduleInformation.end") }}:</b>
</td> </td>
<td>{{ formatTimestamp(item.end) }}</td> <td>{{ formatTimestamp(item.end) }}</td>
</tr> </tr>
<tr> <tr>
<td class="mr-2"> <td class="mr-2">
<b>{{ $t("moduleInformation.room") }}:</b> <b>{{ t("moduleInformation.room") }}:</b>
</td> </td>
<td>{{ item.rooms }}</td> <td>{{ item.rooms }}</td>
</tr> </tr>
<tr> <tr>
<td class="mr-2"> <td class="mr-2">
<b>{{ $t("moduleInformation.notes") }}:</b> <b>{{ t("moduleInformation.notes") }}:</b>
</td> </td>
<td>{{ item.notes }}</td> <td>{{ item.notes }}</td>
</tr> </tr>

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

@ -20,6 +20,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
import { computed, ComputedRef, PropType } from "vue"; import { computed, ComputedRef, PropType } 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 { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
const store = moduleStore(); const store = moduleStore();
const props = defineProps({ const props = defineProps({
@ -83,7 +85,7 @@ function toggleModule(module: Module) {
class="flex justify-content-between align-items-center flex-wrap md:mx-4" class="flex justify-content-between align-items-center flex-wrap md:mx-4"
> >
<h3> <h3>
{{ $t("moduleSelection.modules") }} - {{ t("moduleSelection.modules") }} -
{{ store.countModules() }} {{ store.countModules() }}
</h3> </h3>
<div <div
@ -92,8 +94,8 @@ function toggleModule(module: Module) {
<p> <p>
{{ {{
allSelected allSelected
? $t("moduleSelection.deselectAll") ? t("moduleSelection.deselectAll")
: $t("moduleSelection.selectAll") : t("moduleSelection.selectAll")
}} }}
</p> </p>
<InputSwitch <InputSwitch
@ -107,7 +109,7 @@ function toggleModule(module: Module) {
</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">
@ -126,8 +128,8 @@ function toggleModule(module: Module) {
:icon="store.hasModule(item) ? 'pi pi-times' : 'pi pi-plus'" :icon="store.hasModule(item) ? 'pi pi-times' : 'pi pi-plus'"
:label=" :label="
store.hasModule(item) store.hasModule(item)
? $t('moduleSelection.selected') ? t('moduleSelection.selected')
: $t('moduleSelection.unselected') : t('moduleSelection.unselected')
" "
outlined outlined
:severity="store.hasModule(item) ? '' : 'secondary'" :severity="store.hasModule(item) ? '' : 'secondary'"

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

@ -66,7 +66,7 @@ const placeholders = computed(() => [
<Dialog <Dialog
v-model:visible="helpVisible" v-model:visible="helpVisible"
class="w-full md:w-auto" class="w-full md:w-auto"
:header="$t('moduleTemplateDialog.moduleConfiguration')" :header="t('moduleTemplateDialog.moduleConfiguration')"
> >
<p> <p>
{{ t("moduleTemplateDialog.explanationOne") }} {{ t("moduleTemplateDialog.explanationOne") }}
@ -75,15 +75,15 @@ const placeholders = computed(() => [
<DataTable :value="placeholders"> <DataTable :value="placeholders">
<Column <Column
field="placeholder" field="placeholder"
:header="$t('moduleTemplateDialog.placeholder')" :header="t('moduleTemplateDialog.placeholder')"
></Column> ></Column>
<Column <Column
field="description" field="description"
:header="$t('moduleTemplateDialog.description')" :header="t('moduleTemplateDialog.description')"
></Column> ></Column>
<Column <Column
field="examples" field="examples"
:header="$t('moduleTemplateDialog.examples')" :header="t('moduleTemplateDialog.examples')"
></Column> ></Column>
</DataTable> </DataTable>
<p> <p>

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

@ -96,11 +96,11 @@ getCourses();
<template> <template>
<DynamicPage <DynamicPage
:hide-content="selectedCourse.name === ''" :hide-content="selectedCourse.name === ''"
:headline="$t('courseSelection.headline')" :headline="t('courseSelection.headline')"
:sub-title="$t('courseSelection.subTitle')" :sub-title="t('courseSelection.subTitle')"
icon="pi pi-calendar" icon="pi pi-calendar"
:button="{ :button="{
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'),
@ -113,8 +113,8 @@ getCourses();
:class="flexSpecs" :class="flexSpecs"
filter filter
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" :auto-filter-focus="true"
@change="getModules()" @change="getModules()"
></Dropdown> ></Dropdown>
@ -123,7 +123,7 @@ getCourses();
:options="semesters" :options="semesters"
:class="flexSpecs" :class="flexSpecs"
option-label="name" option-label="name"
:placeholder="$t('courseSelection.semesterDropDown')" :placeholder="t('courseSelection.semesterDropDown')"
@change="getCourses()" @change="getCourses()"
></Dropdown> ></Dropdown>
</template> </template>

172
frontend/src/view/FaqView.vue
View File

@ -17,99 +17,103 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
--> -->
<script lang="ts" setup> <script lang="ts" setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
</script> </script>
<template> <template>
<div class="flex align-items-center justify-content-center flex-column"> <div class="flex align-items-center justify-content-center flex-column">
<div class="flex align-items-center justify-content-center m-2"> <div class="flex align-items-center justify-content-center m-2">
<h1>{{ $t("faqView.headline") }}</h1> <h1>{{ t("faqView.headline") }}</h1>
</div> </div>
<div class="flex flex-column lg:col-7"> <div class="flex flex-column lg:col-7">
<div class="grid my-2"> <div class="grid my-2">
<div class="col"> <div class="col">
{{ $t("faqView.firstQuestion") }} {{ t("faqView.firstQuestion") }}
</div> </div>
<div class="col"> <div class="col">
{{ $t("faqView.firstAnswer") }} {{ t("faqView.firstAnswer") }}
</div> </div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{ $t("faqView.secondQuestion") }}</div> <div class="col">{{ t("faqView.secondQuestion") }}</div>
<div class="col"> <div class="col">
{{ $t("faqView.secondAnswer") }} {{ t("faqView.secondAnswer") }}
</div> </div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{ $t("faqView.thirdQuestion") }}</div> <div class="col">{{ t("faqView.thirdQuestion") }}</div>
<div class="col"> <div class="col">
<Accordion> <Accordion>
<AccordionTab :header="$t('faqView.thirdAnswer.tabTitle')"> <AccordionTab :header="t('faqView.thirdAnswer.tabTitle')">
<ol> <ol>
<li>{{ $t("faqView.thirdAnswer.google.first") }}</li> <li>{{ t("faqView.thirdAnswer.google.first") }}</li>
<li> <li>
{{ $t("faqView.thirdAnswer.google.second") }} {{ t("faqView.thirdAnswer.google.second") }}
</li> </li>
<li> <li>
{{ $t("faqView.thirdAnswer.google.third") }} {{ t("faqView.thirdAnswer.google.third") }}
</li> </li>
<li> <li>
{{ $t("faqView.thirdAnswer.google.fourth") }} {{ t("faqView.thirdAnswer.google.fourth") }}
</li> </li>
</ol> </ol>
</AccordionTab> </AccordionTab>
<AccordionTab header="HTWK App"> <AccordionTab header="HTWK App">
<p>{{ $t("faqView.thirdAnswer.htwk_app.description") }}</p> <p>{{ t("faqView.thirdAnswer.htwk_app.description") }}</p>
<ol> <ol>
<li>{{ $t("faqView.thirdAnswer.htwk_app.one") }}</li> <li>{{ t("faqView.thirdAnswer.htwk_app.one") }}</li>
<li>{{ $t("faqView.thirdAnswer.htwk_app.two") }}</li> <li>{{ t("faqView.thirdAnswer.htwk_app.two") }}</li>
<li>{{ $t("faqView.thirdAnswer.htwk_app.three") }}</li> <li>{{ t("faqView.thirdAnswer.htwk_app.three") }}</li>
<li>{{ $t("faqView.thirdAnswer.htwk_app.four") }}</li> <li>{{ t("faqView.thirdAnswer.htwk_app.four") }}</li>
<li>{{ $t("faqView.thirdAnswer.htwk_app.five") }}</li> <li>{{ t("faqView.thirdAnswer.htwk_app.five") }}</li>
</ol> </ol>
</AccordionTab> </AccordionTab>
<AccordionTab <AccordionTab
:header="$t('faqView.thirdAnswer.microsoft_outlook.title')" :header="t('faqView.thirdAnswer.microsoft_outlook.title')"
> >
<p> <p>
{{ {{
$t("faqView.thirdAnswer.microsoft_outlook.outlook_2010.title") t("faqView.thirdAnswer.microsoft_outlook.outlook_2010.title")
}} }}
</p> </p>
<ol> <ol>
<li> <li>
{{ {{
$t( t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2010.first", "faqView.thirdAnswer.microsoft_outlook.outlook_2010.first",
) )
}} }}
</li> </li>
<li> <li>
{{ {{
$t( t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2010.second", "faqView.thirdAnswer.microsoft_outlook.outlook_2010.second",
) )
}} }}
</li> </li>
<li> <li>
{{ {{
$t( t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2010.third", "faqView.thirdAnswer.microsoft_outlook.outlook_2010.third",
) )
}} }}
</li> </li>
<li> <li>
{{ {{
$t( t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2010.fourth", "faqView.thirdAnswer.microsoft_outlook.outlook_2010.fourth",
) )
}} }}
</li> </li>
<li> <li>
{{ {{
$t( t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2010.fifth", "faqView.thirdAnswer.microsoft_outlook.outlook_2010.fifth",
) )
}} }}
@ -118,141 +122,141 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
<p> <p>
{{ {{
$t("faqView.thirdAnswer.microsoft_outlook.outlook_2007.title") t("faqView.thirdAnswer.microsoft_outlook.outlook_2007.title")
}} }}
</p> </p>
<ol> <ol>
<li> <li>
{{ {{
$t( t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2007.first", "faqView.thirdAnswer.microsoft_outlook.outlook_2007.first",
) )
}} }}
</li> </li>
<li> <li>
{{ {{
$t( t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2007.second", "faqView.thirdAnswer.microsoft_outlook.outlook_2007.second",
) )
}} }}
</li> </li>
<li> <li>
{{ {{
$t( t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2007.third", "faqView.thirdAnswer.microsoft_outlook.outlook_2007.third",
) )
}} }}
</li> </li>
<li> <li>
{{ {{
$t( t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2007.fourth", "faqView.thirdAnswer.microsoft_outlook.outlook_2007.fourth",
) )
}} }}
</li> </li>
<li> <li>
{{ {{
$t( t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2007.fifth", "faqView.thirdAnswer.microsoft_outlook.outlook_2007.fifth",
) )
}} }}
</li> </li>
<li> <li>
{{ {{
$t( t(
"faqView.thirdAnswer.microsoft_outlook.outlook_2007.sixth", "faqView.thirdAnswer.microsoft_outlook.outlook_2007.sixth",
) )
}} }}
</li> </li>
</ol> </ol>
</AccordionTab> </AccordionTab>
<AccordionTab :header="$t('faqView.thirdAnswer.apple_osx.title')"> <AccordionTab :header="t('faqView.thirdAnswer.apple_osx.title')">
<ol> <ol>
<li>{{ $t("faqView.thirdAnswer.apple_osx.first") }}</li> <li>{{ t("faqView.thirdAnswer.apple_osx.first") }}</li>
<li>{{ $t("faqView.thirdAnswer.apple_osx.second") }}</li> <li>{{ t("faqView.thirdAnswer.apple_osx.second") }}</li>
<li>{{ $t("faqView.thirdAnswer.apple_osx.third") }}</li> <li>{{ t("faqView.thirdAnswer.apple_osx.third") }}</li>
<li>{{ $t("faqView.thirdAnswer.apple_osx.fourth") }}</li> <li>{{ t("faqView.thirdAnswer.apple_osx.fourth") }}</li>
</ol> </ol>
</AccordionTab> </AccordionTab>
<AccordionTab :header="$t('faqView.thirdAnswer.thunderbird.title')"> <AccordionTab :header="t('faqView.thirdAnswer.thunderbird.title')">
<ol> <ol>
<li>{{ $t("faqView.thirdAnswer.thunderbird.one") }}</li> <li>{{ t("faqView.thirdAnswer.thunderbird.one") }}</li>
<li>{{ $t("faqView.thirdAnswer.thunderbird.two") }}</li> <li>{{ t("faqView.thirdAnswer.thunderbird.two") }}</li>
<li>{{ $t("faqView.thirdAnswer.thunderbird.three") }}</li> <li>{{ t("faqView.thirdAnswer.thunderbird.three") }}</li>
<li>{{ $t("faqView.thirdAnswer.thunderbird.four") }}</li> <li>{{ t("faqView.thirdAnswer.thunderbird.four") }}</li>
<li>{{ $t("faqView.thirdAnswer.thunderbird.five") }}</li> <li>{{ t("faqView.thirdAnswer.thunderbird.five") }}</li>
<li>{{ $t("faqView.thirdAnswer.thunderbird.six") }}</li> <li>{{ t("faqView.thirdAnswer.thunderbird.six") }}</li>
<li>{{ $t("faqView.thirdAnswer.thunderbird.seven") }}</li> <li>{{ t("faqView.thirdAnswer.thunderbird.seven") }}</li>
</ol> </ol>
</AccordionTab> </AccordionTab>
<AccordionTab :header="$t('faqView.thirdAnswer.iphone.title')"> <AccordionTab :header="t('faqView.thirdAnswer.iphone.title')">
<p>{{ $t("faqView.thirdAnswer.iphone.description") }}</p> <p>{{ t("faqView.thirdAnswer.iphone.description") }}</p>
<ol> <ol>
<li>{{ $t("faqView.thirdAnswer.iphone.one") }}</li> <li>{{ t("faqView.thirdAnswer.iphone.one") }}</li>
<li>{{ $t("faqView.thirdAnswer.iphone.two") }}</li> <li>{{ t("faqView.thirdAnswer.iphone.two") }}</li>
<li>{{ $t("faqView.thirdAnswer.iphone.three") }}</li> <li>{{ t("faqView.thirdAnswer.iphone.three") }}</li>
<li>{{ $t("faqView.thirdAnswer.iphone.four") }}</li> <li>{{ t("faqView.thirdAnswer.iphone.four") }}</li>
<li>{{ $t("faqView.thirdAnswer.iphone.five") }}</li> <li>{{ t("faqView.thirdAnswer.iphone.five") }}</li>
<li>{{ $t("faqView.thirdAnswer.iphone.six") }}</li> <li>{{ t("faqView.thirdAnswer.iphone.six") }}</li>
<li>{{ $t("faqView.thirdAnswer.iphone.seven") }}</li> <li>{{ t("faqView.thirdAnswer.iphone.seven") }}</li>
<li>{{ $t("faqView.thirdAnswer.iphone.eight") }}</li> <li>{{ t("faqView.thirdAnswer.iphone.eight") }}</li>
<li>{{ $t("faqView.thirdAnswer.iphone.nine") }}</li> <li>{{ t("faqView.thirdAnswer.iphone.nine") }}</li>
</ol> </ol>
</AccordionTab> </AccordionTab>
<AccordionTab header="Android"> <AccordionTab header="Android">
<p>{{ $t("faqView.thirdAnswer.android.description") }}</p> <p>{{ t("faqView.thirdAnswer.android.description") }}</p>
</AccordionTab> </AccordionTab>
<AccordionTab header="Windows Phone"> <AccordionTab header="Windows Phone">
<p>{{ $t("faqView.thirdAnswer.windows_phone.description") }}</p> <p>{{ t("faqView.thirdAnswer.windows_phone.description") }}</p>
<ol> <ol>
<li>{{ $t("faqView.thirdAnswer.windows_phone.one") }}</li> <li>{{ t("faqView.thirdAnswer.windows_phone.one") }}</li>
<li>{{ $t("faqView.thirdAnswer.windows_phone.two") }}</li> <li>{{ t("faqView.thirdAnswer.windows_phone.two") }}</li>
<li>{{ $t("faqView.thirdAnswer.windows_phone.three") }}</li> <li>{{ t("faqView.thirdAnswer.windows_phone.three") }}</li>
<li>{{ $t("faqView.thirdAnswer.windows_phone.four") }}</li> <li>{{ t("faqView.thirdAnswer.windows_phone.four") }}</li>
<li>{{ $t("faqView.thirdAnswer.windows_phone.five") }}</li> <li>{{ t("faqView.thirdAnswer.windows_phone.five") }}</li>
<li>{{ $t("faqView.thirdAnswer.windows_phone.six") }}</li> <li>{{ t("faqView.thirdAnswer.windows_phone.six") }}</li>
<li>{{ $t("faqView.thirdAnswer.windows_phone.seven") }}</li> <li>{{ t("faqView.thirdAnswer.windows_phone.seven") }}</li>
<li>{{ $t("faqView.thirdAnswer.windows_phone.eight") }}</li> <li>{{ t("faqView.thirdAnswer.windows_phone.eight") }}</li>
</ol> </ol>
</AccordionTab> </AccordionTab>
</Accordion> </Accordion>
</div> </div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{ $t("faqView.fourthQuestion") }}</div> <div class="col">{{ t("faqView.fourthQuestion") }}</div>
<div class="col">{{ $t("faqView.fourthAnswer") }}</div> <div class="col">{{ t("faqView.fourthAnswer") }}</div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{ $t("faqView.fifthQuestion") }}</div> <div class="col">{{ t("faqView.fifthQuestion") }}</div>
<div class="col">{{ $t("faqView.fifthAnswer") }}</div> <div class="col">{{ t("faqView.fifthAnswer") }}</div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col my-2">{{ $t("faqView.sixthQuestion") }}</div> <div class="col my-2">{{ t("faqView.sixthQuestion") }}</div>
<div class="col">{{ $t("faqView.sixthAnswer") }}</div> <div class="col">{{ t("faqView.sixthAnswer") }}</div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{ $t("faqView.seventhQuestion") }}</div> <div class="col">{{ t("faqView.seventhQuestion") }}</div>
<div class="col">{{ $t("faqView.seventhAnswer") }}</div> <div class="col">{{ t("faqView.seventhAnswer") }}</div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{ $t("faqView.eighthQuestion") }}</div> <div class="col">{{ t("faqView.eighthQuestion") }}</div>
<div class="col">{{ $t("faqView.eighthAnswer") }}</div> <div class="col">{{ t("faqView.eighthAnswer") }}</div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{ $t("faqView.ninthQuestion") }}</div> <div class="col">{{ t("faqView.ninthQuestion") }}</div>
<div class="col"> <div class="col">
{{ $t("faqView.ninthAnswer") }} {{ t("faqView.ninthAnswer") }}
<a href="https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender" <a href="https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender"
>Gitlab</a >Gitlab</a
>. >.
</div> </div>
</div> </div>
<div class="grid my-2"> <div class="grid my-2">
<div class="col">{{ $t("faqView.crossPromoQuestion") }}</div> <div class="col">{{ t("faqView.crossPromoQuestion") }}</div>
<div class="col"> <div class="col">
{{ $t("faqView.crossPromo.teaser") }} {{ t("faqView.crossPromo.teaser") }}
<div class="flex flex-column gap-3 my-3"> <div class="flex flex-column gap-3 my-3">
<Card <Card
v-for="promoPage in new Array('mensa', 'htwkarte')" v-for="promoPage in new Array('mensa', 'htwkarte')"
@ -267,13 +271,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
/> />
<div class="flex flex-column gap-1"> <div class="flex flex-column gap-1">
<div> <div>
{{ $t("faqView.crossPromo." + promoPage + ".title") }} {{ t("faqView.crossPromo." + promoPage + ".title") }}
</div> </div>
<div class="p-card-subtitle text-base"> <div class="p-card-subtitle text-base">
<a <a
:href="$t('faqView.crossPromo.' + promoPage + '.link')" :href="t('faqView.crossPromo.' + promoPage + '.link')"
> >
{{ $t("faqView.crossPromo." + promoPage + ".link") }} {{ t("faqView.crossPromo." + promoPage + ".link") }}
</a> </a>
</div> </div>
</div> </div>
@ -281,7 +285,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
</template> </template>
<template #content> <template #content>
<p class="m-0"> <p class="m-0">
{{ $t("faqView.crossPromo." + promoPage + ".description") }} {{ t("faqView.crossPromo." + promoPage + ".description") }}
</p> </p>
</template> </template>
</Card> </Card>
@ -289,7 +293,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
<p> <p>
{{ $t("faqView.notFound") }}<br /> {{ t("faqView.notFound") }}<br />
<a href="mailto:support@htwkalender.de">support@htwkalender.de</a> <a href="mailto:support@htwkalender.de">support@htwkalender.de</a>
</p> </p>
</div> </div>

8
frontend/src/view/create/AdditionalModules.vue
View File

@ -20,6 +20,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
import moduleStore from "@/store/moduleStore"; import moduleStore from "@/store/moduleStore";
import { router } from "@/main"; import { router } from "@/main";
import AdditionalModuleTable from "@/components/AdditionalModuleTable.vue"; import AdditionalModuleTable from "@/components/AdditionalModuleTable.vue";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
const store = moduleStore(); const store = moduleStore();
@ -36,7 +38,7 @@ async function nextStep() {
<div class="flex flex-column align-items-center w-full mb-8"> <div class="flex flex-column align-items-center w-full mb-8">
<div class="flex align-items-center justify-content-center"> <div class="flex align-items-center justify-content-center">
<h3> <h3>
{{ $t("additionalModules.subTitle") }} {{ t("additionalModules.subTitle") }}
</h3> </h3>
</div> </div>
<div <div
@ -46,7 +48,7 @@ async function nextStep() {
:disabled="store.isEmpty()" :disabled="store.isEmpty()"
class="col-12 md:col-4 align-self-end" class="col-12 md:col-4 align-self-end"
icon="pi pi-arrow-right" icon="pi pi-arrow-right"
:label="$t('additionalModules.nextStep')" :label="t('additionalModules.nextStep')"
@click="nextStep()" @click="nextStep()"
/> />
</div> </div>
@ -58,7 +60,7 @@ async function nextStep() {
class="col-12 md:col-4 mb-3 align-self-end" class="col-12 md:col-4 mb-3 align-self-end"
severity="secondary" severity="secondary"
icon="pi pi-arrow-up" icon="pi pi-arrow-up"
:label="$t('additionalModules.scrollToTop')" :label="t('additionalModules.scrollToTop')"
@click="topFunction()" @click="topFunction()"
/> />
</div> </div>

6
frontend/src/view/create/RenameModules.vue
View File

@ -83,7 +83,7 @@ async function finalStep() {
<template> <template>
<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">
@ -100,7 +100,7 @@ async function finalStep() {
<div <div
class="flex align-items-center justify-content-end flex-wrap gap-2 px-2" 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="
tableData.reduce( tableData.reduce(
@ -181,7 +181,7 @@ async function finalStep() {
:disabled="store.isEmpty() || requestIsPending" :disabled="store.isEmpty() || requestIsPending"
class="col-12 md:col-4 mb-3 align-self-end" class="col-12 md:col-4 mb-3 align-self-end"
:icon="requestIsPending ? 'pi pi-spin pi-spinner' : 'pi pi-save'" :icon="requestIsPending ? 'pi pi-spin pi-spinner' : 'pi pi-save'"
:label="$t('renameModules.nextStep')" :label="t('renameModules.nextStep')"
@click="finalStep()" @click="finalStep()"
/> />
</div> </div>

6
frontend/src/view/edit/EditAdditionalModules.vue
View File

@ -20,6 +20,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
import { defineAsyncComponent } from "vue"; import { defineAsyncComponent } from "vue";
import moduleStore from "@/store/moduleStore"; import moduleStore from "@/store/moduleStore";
import { router } from "@/main"; import { router } from "@/main";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
const store = moduleStore(); const store = moduleStore();
const AdditionalModuleTable = defineAsyncComponent( const AdditionalModuleTable = defineAsyncComponent(
@ -35,7 +37,7 @@ async function nextStep() {
<div class="flex flex-column align-items-center w-full mb-7"> <div class="flex flex-column align-items-center w-full mb-7">
<div class="flex align-items-center justify-content-center m-2"> <div class="flex align-items-center justify-content-center m-2">
<h3> <h3>
{{ $t("additionalModules.subTitle") }} {{ t("additionalModules.subTitle") }}
</h3> </h3>
</div> </div>
<AdditionalModuleTable /> <AdditionalModuleTable />
@ -46,7 +48,7 @@ async function nextStep() {
: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"
:label="$t('additionalModules.nextStep')" :label="t('additionalModules.nextStep')"
@click="nextStep()" @click="nextStep()"
/> />
</div> </div>

6
frontend/src/view/edit/EditCalendar.vue
View File

@ -91,11 +91,11 @@ function loadCalendar(): void {
<template> <template>
<DynamicPage <DynamicPage
hide-content hide-content
:headline="$t('editCalendarView.headline')" :headline="t('editCalendarView.headline')"
:sub-title="$t('editCalendarView.subTitle')" :sub-title="t('editCalendarView.subTitle')"
icon="pi pi-pencil" icon="pi pi-pencil"
:button="{ :button="{
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,

16
frontend/src/view/edit/EditModules.vue
View File

@ -107,7 +107,7 @@ async function deleteFeed() {
<template> <template>
<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">
@ -122,7 +122,7 @@ async function deleteFeed() {
> >
<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="
@ -219,7 +219,7 @@ async function deleteFeed() {
severity="danger" severity="danger"
outlined outlined
icon="pi pi-trash" icon="pi pi-trash"
:label="$t('editCalendarView.delete')" :label="t('editCalendarView.delete')"
@click="visible = true" @click="visible = true"
/> />
<Button <Button
@ -227,7 +227,7 @@ async function deleteFeed() {
severity="info" severity="info"
outlined outlined
icon="pi pi-plus" icon="pi pi-plus"
:label="$t('editCalendarView.addModules')" :label="t('editCalendarView.addModules')"
@click="router.push('edit-additional-modules')" @click="router.push('edit-additional-modules')"
/> />
<Button <Button
@ -235,7 +235,7 @@ async function deleteFeed() {
severity="success" severity="success"
outlined outlined
icon="pi pi-save" icon="pi pi-save"
:label="$t('editCalendarView.save')" :label="t('editCalendarView.save')"
@click="finalStep()" @click="finalStep()"
/> />
</div> </div>
@ -257,14 +257,14 @@ async function deleteFeed() {
class="inline-flex align-items-center justify-content-center gap-2" class="inline-flex align-items-center justify-content-center gap-2"
> >
<span class="font-bold white-space-nowrap">{{ <span class="font-bold white-space-nowrap">{{
$t("editCalendarView.dialog.headline") t("editCalendarView.dialog.headline")
}}</span> }}</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 <Button
:label="$t('editCalendarView.dialog.delete')" :label="t('editCalendarView.dialog.delete')"
severity="danger" severity="danger"
icon="pi pi-trash" icon="pi pi-trash"
autofocus autofocus

19
frontend/src/view/rooms/FreeRooms.vue
View File

@ -19,11 +19,11 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
<template> <template>
<DynamicPage <DynamicPage
:hide-content="availableRooms.length === 0" :hide-content="availableRooms.length === 0"
:headline="$t('freeRooms.freeRooms')" :headline="t('freeRooms.freeRooms')"
:sub-title="$t('freeRooms.detail')" :sub-title="t('freeRooms.detail')"
icon="pi pi-search" icon="pi pi-search"
:button="{ :button="{
label: $t('freeRooms.search'), label: t('freeRooms.search'),
icon: 'pi pi-search', icon: 'pi pi-search',
disabled: isLater, disabled: isLater,
onClick: loadFreeRooms, onClick: loadFreeRooms,
@ -33,8 +33,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
<Calendar <Calendar
v-model="date" v-model="date"
:class="flexSpecs" :class="flexSpecs"
:placeholder="$t('freeRooms.pleaseSelectDate')" :placeholder="t('freeRooms.pleaseSelectDate')"
:empty-message="$t('roomFinderPage.noRoomsAvailable')" :empty-message="t('roomFinderPage.noRoomsAvailable')"
date-format="dd.mm.yy" date-format="dd.mm.yy"
panel-class="min-w-min" panel-class="min-w-min"
touch-u-i touch-u-i
@ -118,13 +118,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
:rows="10" :rows="10"
:global-filter-fields="['room']" :global-filter-fields="['room']"
> >
<Column field="room" :sortable="true" :header="$t('freeRooms.room')"> <Column field="room" :sortable="true" :header="t('freeRooms.room')">
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">
<InputText <InputText
v-model="filterModel.value" v-model="filterModel.value"
type="text" type="text"
class="p-column-filter" class="p-column-filter"
:placeholder="$t('freeRooms.searchByRoom')" :placeholder="t('freeRooms.searchByRoom')"
@input="filterCallback()" @input="filterCallback()"
/> />
</template> </template>
@ -136,7 +136,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
{{ slotProps.data.room }} {{ slotProps.data.room }}
</p> </p>
<Button <Button
:label="$t('freeRooms.viewOccupancy')" :label="t('freeRooms.viewOccupancy')"
icon="pi pi-hourglass" icon="pi pi-hourglass"
class="p-button-rounded p-button-outlined sm:align-self-center align-self-end" class="p-button-rounded p-button-outlined sm:align-self-center align-self-end"
@click="occupationRoute(slotProps.data.room)" @click="occupationRoute(slotProps.data.room)"
@ -158,6 +158,9 @@ import { padStart } from "@fullcalendar/core/internal";
import { router } from "@/main"; import { router } from "@/main";
import { formatYearMonthDay } from "@/helpers/dates"; import { formatYearMonthDay } from "@/helpers/dates";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
const mobilePage = inject("mobilePage") as Ref<boolean>; const mobilePage = inject("mobilePage") as Ref<boolean>;
const filters = ref({ const filters = ref({
room: { value: null, matchMode: FilterMatchMode.CONTAINS, label: "Room" }, room: { value: null, matchMode: FilterMatchMode.CONTAINS, label: "Room" },

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

@ -123,8 +123,8 @@ const button = computed(() => {
<template> <template>
<DynamicPage <DynamicPage
:hide-content="selectedRoom.name === ''" :hide-content="selectedRoom.name === ''"
:headline="$t('roomFinderPage.headline')" :headline="t('roomFinderPage.headline')"
:sub-title="$t('roomFinderPage.detail')" :sub-title="t('roomFinderPage.detail')"
icon="pi pi-search" icon="pi pi-search"
:lower-button="button" :lower-button="button"
> >
@ -135,8 +135,8 @@ const button = computed(() => {
class="flex-1 m-0" class="flex-1 m-0"
filter filter
option-label="name" option-label="name"
:placeholder="$t('roomFinderPage.dropDownSelect')" :placeholder="t('roomFinderPage.dropDownSelect')"
:empty-message="$t('roomFinderPage.noRoomsAvailable')" :empty-message="t('roomFinderPage.noRoomsAvailable')"
:auto-filter-focus="true" :auto-filter-focus="true"
/> />
</template> </template>
@ -145,7 +145,7 @@ const button = computed(() => {
</template> </template>
<Button <Button
class="col-12 md:col-4 mt-3" class="col-12 md:col-4 mt-3"
:label="$t('roomFinderPage.reset')" :label="t('roomFinderPage.reset')"
@click="selectedRoom.name = ''" @click="selectedRoom.name = ''"
/> />
</DynamicPage> </DynamicPage>