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

frontend/src/view/CourseSelection.vue

@@ -96,11 +96,11 @@ getCourses();
 <template>
   <DynamicPage
     :hide-content="selectedCourse.name === ''"
-    :headline="$t('courseSelection.headline')"
-    :sub-title="$t('courseSelection.subTitle')"
+    :headline="t('courseSelection.headline')"
+    :sub-title="t('courseSelection.subTitle')"
     icon="pi pi-calendar"
     :button="{
-      label: $t('courseSelection.nextStep'),
+      label: t('courseSelection.nextStep'),
       icon: 'pi pi-arrow-right',
       disabled: store.isEmpty(),
       onClick: () => router.push('/additional-modules'),
@@ -113,8 +113,8 @@ getCourses();
         :class="flexSpecs"
         filter
         option-label="name"
-        :placeholder="$t('courseSelection.courseDropDown')"
-        :empty-message="$t('courseSelection.noCoursesAvailable')"
+        :placeholder="t('courseSelection.courseDropDown')"
+        :empty-message="t('courseSelection.noCoursesAvailable')"
         :auto-filter-focus="true"
         @change="getModules()"
       ></Dropdown>
@@ -123,7 +123,7 @@ getCourses();
         :options="semesters"
         :class="flexSpecs"
         option-label="name"
-        :placeholder="$t('courseSelection.semesterDropDown')"
+        :placeholder="t('courseSelection.semesterDropDown')"
         @change="getCourses()"
       ></Dropdown>
     </template>

frontend/src/view/FaqView.vue

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

frontend/src/view/create/AdditionalModules.vue

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

frontend/src/view/create/RenameModules.vue

@@ -83,7 +83,7 @@ async function finalStep() {
 <template>
   <div class="flex flex-column align-items-center mb-7">
     <div class="flex align-items-center justify-content-center m-2 gap-2">
-      <h3>{{ $t("renameModules.subTitle") }}</h3>
+      <h3>{{ t("renameModules.subTitle") }}</h3>
       <ModuleTemplateDialog />
     </div>
     <div class="w-full lg:w-8 flex flex-column">
@@ -100,7 +100,7 @@ async function finalStep() {
             <div
               class="flex align-items-center justify-content-end flex-wrap gap-2 px-2"
             >
-              {{ $t("renameModules.enableAllNotifications") }}
+              {{ t("renameModules.enableAllNotifications") }}
               <InputSwitch
                 :model-value="
                   tableData.reduce(
@@ -181,7 +181,7 @@ async function finalStep() {
         :disabled="store.isEmpty() || requestIsPending"
         class="col-12 md:col-4 mb-3 align-self-end"
         :icon="requestIsPending ? 'pi pi-spin pi-spinner' : 'pi pi-save'"
-        :label="$t('renameModules.nextStep')"
+        :label="t('renameModules.nextStep')"
         @click="finalStep()"
       />
     </div>

frontend/src/view/edit/EditAdditionalModules.vue

@@ -20,6 +20,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.
 import { defineAsyncComponent } from "vue";
 import moduleStore from "@/store/moduleStore";
 import { router } from "@/main";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n({ useScope: "global" });
 
 const store = moduleStore();
 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 align-items-center justify-content-center m-2">
       <h3>
-        {{ $t("additionalModules.subTitle") }}
+        {{ t("additionalModules.subTitle") }}
       </h3>
     </div>
     <AdditionalModuleTable />
@@ -46,7 +48,7 @@ async function nextStep() {
         :disabled="store.isEmpty()"
         class="col-12 md:col-4 mb-3 align-self-end"
         icon="pi pi-arrow-right"
-        :label="$t('additionalModules.nextStep')"
+        :label="t('additionalModules.nextStep')"
         @click="nextStep()"
       />
     </div>

frontend/src/view/edit/EditCalendar.vue

@@ -91,11 +91,11 @@ function loadCalendar(): void {
 <template>
   <DynamicPage
     hide-content
-    :headline="$t('editCalendarView.headline')"
-    :sub-title="$t('editCalendarView.subTitle')"
+    :headline="t('editCalendarView.headline')"
+    :sub-title="t('editCalendarView.subTitle')"
     icon="pi pi-pencil"
     :button="{
-      label: $t('editCalendarView.loadCalendar'),
+      label: t('editCalendarView.loadCalendar'),
       icon: 'pi pi-arrow-down',
       disabled: !isToken(token),
       onClick: loadCalendar,

frontend/src/view/edit/EditModules.vue

@@ -107,7 +107,7 @@ async function deleteFeed() {
 <template>
   <div class="flex flex-column align-items-center mb-7">
     <div class="flex align-items-center justify-content-center m-2 gap-2">
-      <h3>{{ $t("renameModules.subTitle") }}</h3>
+      <h3>{{ t("renameModules.subTitle") }}</h3>
       <ModuleTemplateDialog />
     </div>
     <div class="w-full lg:w-8 flex flex-column">
@@ -122,7 +122,7 @@ async function deleteFeed() {
         >
           <template #header>
             <div class="flex align-items-center justify-content-end">
-              {{ $t("renameModules.enableAllNotifications") }}
+              {{ t("renameModules.enableAllNotifications") }}
               <InputSwitch
                 class="mx-4"
                 :model-value="
@@ -219,7 +219,7 @@ async function deleteFeed() {
                 severity="danger"
                 outlined
                 icon="pi pi-trash"
-                :label="$t('editCalendarView.delete')"
+                :label="t('editCalendarView.delete')"
                 @click="visible = true"
               />
               <Button
@@ -227,7 +227,7 @@ async function deleteFeed() {
                 severity="info"
                 outlined
                 icon="pi pi-plus"
-                :label="$t('editCalendarView.addModules')"
+                :label="t('editCalendarView.addModules')"
                 @click="router.push('edit-additional-modules')"
               />
               <Button
@@ -235,7 +235,7 @@ async function deleteFeed() {
                 severity="success"
                 outlined
                 icon="pi pi-save"
-                :label="$t('editCalendarView.save')"
+                :label="t('editCalendarView.save')"
                 @click="finalStep()"
               />
             </div>
@@ -257,14 +257,14 @@ async function deleteFeed() {
           class="inline-flex align-items-center justify-content-center gap-2"
         >
           <span class="font-bold white-space-nowrap">{{
-            $t("editCalendarView.dialog.headline")
+            t("editCalendarView.dialog.headline")
           }}</span>
         </div>
       </template>
-      <p class="m-0">{{ $t("editCalendarView.dialog.subTitle") }}</p>
+      <p class="m-0">{{ t("editCalendarView.dialog.subTitle") }}</p>
       <template #footer>
         <Button
-          :label="$t('editCalendarView.dialog.delete')"
+          :label="t('editCalendarView.dialog.delete')"
           severity="danger"
           icon="pi pi-trash"
           autofocus

frontend/src/view/rooms/FreeRooms.vue

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

frontend/src/view/rooms/RoomFinder.vue

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