feat:#5 added localization and primeVue local

frontend/src/components/LocaleSwitcher.vue

@@ -1,8 +1,11 @@
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import localeStore from "../store/localeStore.ts";
 import { useI18n } from "vue-i18n";
 import { DropdownChangeEvent } from "primevue/dropdown";
+import { usePrimeVue } from "primevue/config";
+import primeVue_de from "@/i18n/translations/primevue/prime_vue_local_de.json";
+import primeVue_en from "@/i18n/translations/primevue/prime_vue_local_en.json";
 const { t } = useI18n({ useScope: "global" });
 
 const countries = computed(() => [
@@ -18,9 +21,19 @@ function displayCountry(code: string) {
   return countries.value.find((country) => country.code === code)?.name;
 }
 
-function updateLocale(dropdownChangeEvent: DropdownChangeEvent) {
+const primeVueConfig = usePrimeVue();
-  localeStore().setLocale(dropdownChangeEvent.value);
+
+function updateLocale(locale: string) {
+  localeStore().setLocale(locale);
+
+  if (locale === "de") {
+    primeVueConfig.config.locale = primeVue_de;
+  } else {
+    primeVueConfig.config.locale = primeVue_en;
+  }
 }
+
+updateLocale(localeStore().locale);
 </script>
 <template>
   <Dropdown
@@ -29,7 +42,7 @@ function updateLocale(dropdownChangeEvent: DropdownChangeEvent) {
     option-label="name"
     placeholder="Select a Language"
     class="w-full md:w-14rem"
-    @change="updateLocale($event)"
+    @change="updateLocale($event.value)"
   >
     <template #value="slotProps">
       <div v-if="slotProps.value" class="flex align-items-center">

frontend/src/i18n/index.ts

@@ -2,12 +2,7 @@ import { createI18n } from "vue-i18n";
 import en from "./translations/en.json";
 import de from "./translations/de.json";
 import localeStore from "../store/localeStore.ts";
-import { usePrimeVue } from "primevue/config";
 
-export const supportedLocales = {
-  en: { name: "English" },
-  de: { name: "Deutsch" },
-};
 // Private instance of VueI18n object
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let _i18n: any;
@@ -25,20 +20,6 @@ function setup() {
   return _i18n;
 }
 
-// Sets the active locale.
-function setLocale(newLocale: string) {
-  _i18n.global.locale = newLocale;
-  setDocumentAttributesFor(newLocale);
-  const primeVue = usePrimeVue();
-  primeVue.config.locale = Object.assign(_i18n);
-}
-
-function setDocumentAttributesFor(locale: string) {
-  const htmlElement = document.querySelector("html");
-
-  htmlElement?.setAttribute("lang", locale);
-}
-
 // Public interface
 export default {
   // Expose the VueI18n instance via a getter
@@ -46,5 +27,4 @@ export default {
     return _i18n;
   },
   setup,
-  setLocale,
 };

frontend/src/i18n/translations/de.json

@@ -29,7 +29,11 @@
   },
   "freeRooms": {
     "freeRooms": "Freie Räume",
-    "detail": "Bitte wähle einen Zeitraum aus, um alle Räume ohne Belegung anzuzeigen."
+    "detail": "Bitte wähle einen Zeitraum aus, um alle Räume ohne Belegung anzuzeigen.",
+    "searchByRoom": "Suche nach Räumen",
+    "pleaseSelectDate": "Bitte wähle ein Datum aus",
+    "room": "Raum",
+    "search": "Suchen"
   },
   "moduleSelection": {
     "selectAll": "Alle anwählen",
@@ -229,125 +233,6 @@
     "ninthQuestion": "Wo kann ich den Quellcode einsehen und mitwirken?",
     "ninthAnswer": "Wenn du dich für die Entwicklung und den Quelltext interessierst, kannst du jederzeit als HTWK Student daran mitarbeiten. Dort findest alle Informationen im ",
     "notFound": "Nicht gefunden, wonach du suchst?",
-    "contact": "Kontakt aufnehmen",
+    "contact": "Kontakt aufnehmen"
-    "startsWith": "Beginnt mit",
-    "contains": "Enthält",
-    "notContains": "Enthält nicht",
-    "endsWith": "Endet mit",
-    "equals": "Ist gleich",
-    "notEquals": "Ist ungleich",
-    "noFilter": "Kein Filter",
-    "filter": "Filtern",
-    "lt": "Kleiner als",
-    "lte": "Kleiner oder gleich",
-    "gt": "Größer als",
-    "gte": "Größer oder gleich",
-    "dateIs": "Datum ist",
-    "dateIsNot": "Datum ist nicht",
-    "dateBefore": "Datum ist vor",
-    "dateAfter": "Datum ist nach",
-    "custom": "Benutzerdefiniert",
-    "clear": "Löschen",
-    "apply": "Übernehmen",
-    "matchAll": "Passt auf alle",
-    "matchAny": "Passt auf einige",
-    "addRule": "Regel hinzufügen",
-    "removeRule": "Regel entfernen",
-    "accept": "Ja",
-    "reject": "Nein",
-    "choose": "Auswählen",
-    "upload": "Hochladen",
-    "cancel": "Abbrechen",
-    "completed": "Abgeschlossen",
-    "pending": "Ausstehend",
-    "fileSizeTypes": ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
-    "dayNames": ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
-    "dayNamesShort": ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
-    "dayNamesMin": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
-    "monthNames": ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"],
-    "monthNamesShort": ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
-    "chooseYear": "Jahr wählen",
-    "chooseMonth": "Monat wählen",
-    "chooseDate": "Datum wählen",
-    "prevDecade": "Vorheriges Jahrzehnt",
-    "nextDecade": "Nächstes Jahrzehnt",
-    "prevYear": "Vorheriges Jahr",
-    "nextYear": "Nächstes Jahr",
-    "prevMonth": "Vorheriger Monat",
-    "nextMonth": "Nächster Monat",
-    "prevHour": "Vorherige Stunde",
-    "nextHour": "Nächste Stunde",
-    "prevMinute": "Vorherige Minute",
-    "nextMinute": "Nächste Minute",
-    "prevSecond": "Vorherige Sekunde",
-    "nextSecond": "Nächste Sekunde",
-    "am": "am",
-    "pm": "pm",
-    "today": "Heute",
-    "now": "Jetzt",
-    "weekHeader": "KW",
-    "firstDayOfWeek": 1,
-    "showMonthAfterYear": false,
-    "dateFormat": "dd.mm.yy",
-    "weak": "Schwach",
-    "medium": "Mittel",
-    "strong": "Stark",
-    "passwordPrompt": "Passwort eingeben",
-    "emptyFilterMessage": "Keine Ergebnisse gefunden",
-    "searchMessage": "{0} Ergebnisse verfügbar",
-    "selectionMessage": "{0} Elemente ausgewählt",
-    "emptySelectionMessage": "Kein ausgewähltes Element",
-    "emptySearchMessage": "Keine Ergebnisse gefunden",
-    "emptyMessage": "Keine Einträge gefunden",
-    "aria": {
-      "trueLabel": "Wahr",
-      "falseLabel": "Falsch",
-      "nullLabel": "Nicht ausgewählt",
-      "star": "1 Stern",
-      "stars": "{star} Sterne",
-      "selectAll": "Alle Elemente ausgewählt",
-      "unselectAll": "Alle Elemente abgewählt",
-      "close": "Schließen",
-      "previous": "Vorherige",
-      "next": "Nächste",
-      "navigation": "Navigation",
-      "scrollTop": "Nach oben scrollen",
-      "moveTop": "Zum Anfang bewegen",
-      "moveUp": "Nach oben bewegen",
-      "moveDown": "Nach unten bewegen",
-      "moveBottom": "Zum Ende bewegen",
-      "moveToTarget": "Zum Ziel bewegen",
-      "moveToSource": "Zur Quelle bewegen",
-      "moveAllToTarget": "Alle zum Ziel bewegen",
-      "moveAllToSource": "Alle zur Quelle bewegen",
-      "pageLabel": "Seite {page}",
-      "firstPageLabel": "Erste Seite",
-      "lastPageLabel": "Letzte Seite",
-      "nextPageLabel": "Nächste Seite",
-      "previousPageLabel": "Vorherige Seite",
-      "rowsPerPageLabel": "Zeilen pro Seite",
-      "jumpToPageDropdownLabel": "Zum Dropdown-Menü springen",
-      "jumpToPageInputLabel": "Zum Eingabefeld springen",
-      "selectRow": "Zeile ausgewählt",
-      "unselectRow": "Zeile abgewählt",
-      "expandRow": "Zeile erweitert",
-      "collapseRow": "Zeile reduziert",
-      "showFilterMenu": "Filtermenü anzeigen",
-      "hideFilterMenu": "Filtermenü ausblenden",
-      "filterOperator": "Filteroperator",
-      "filterConstraint": "Filterbeschränkung",
-      "editRow": "Zeile bearbeiten",
-      "saveEdit": "Änderungen speichern",
-      "cancelEdit": "Änderungen abbrechen",
-      "listView": "Listenansicht",
-      "gridView": "Rasteransicht",
-      "slide": "Folie",
-      "slideNumber": "{slideNumber}",
-      "zoomImage": "Bild vergrößern",
-      "zoomIn": "Vergrößern",
-      "zoomOut": "Verkleinern",
-      "rotateRight": "Nach rechts drehen",
-      "rotateLeft": "Nach links drehen"
-    }
   }
 }

frontend/src/i18n/translations/en.json

@@ -32,7 +32,8 @@
     "detail": "Please select a time period to display rooms that have no occupancy.",
     "searchByRoom": "search by room",
     "pleaseSelectDate": "please select a date",
-    "room": "room"
+    "room": "room",
+    "search": "search"
   },
   "moduleSelection": {
     "selectAll": "select all",

frontend/src/i18n/translations/primevue/prime_vue_local_de.json

@@ -0,0 +1,155 @@
+{
+  "startsWith": "Beginnt mit",
+  "contains": "Enthält",
+  "notContains": "Enthält nicht",
+  "endsWith": "Endet mit",
+  "equals": "Ist gleich",
+  "notEquals": "Ist ungleich",
+  "noFilter": "Kein Filter",
+  "filter": "Filtern",
+  "lt": "Kleiner als",
+  "lte": "Kleiner oder gleich",
+  "gt": "Größer als",
+  "gte": "Größer oder gleich",
+  "dateIs": "Datum ist",
+  "dateIsNot": "Datum ist nicht",
+  "dateBefore": "Datum ist vor",
+  "dateAfter": "Datum ist nach",
+  "custom": "Benutzerdefiniert",
+  "clear": "Löschen",
+  "apply": "Übernehmen",
+  "matchAll": "Passt auf alle",
+  "matchAny": "Passt auf einige",
+  "addRule": "Regel hinzufügen",
+  "removeRule": "Regel entfernen",
+  "accept": "Ja",
+  "reject": "Nein",
+  "choose": "Auswählen",
+  "upload": "Hochladen",
+  "cancel": "Abbrechen",
+  "completed": "Abgeschlossen",
+  "pending": "Ausstehend",
+  "fileSizeTypes": ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
+  "dayNames": [
+    "Sonntag",
+    "Montag",
+    "Dienstag",
+    "Mittwoch",
+    "Donnerstag",
+    "Freitag",
+    "Samstag"
+  ],
+  "dayNamesShort": ["Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam"],
+  "dayNamesMin": ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+  "monthNames": [
+    "Januar",
+    "Februar",
+    "März",
+    "April",
+    "Mai",
+    "Juni",
+    "Juli",
+    "August",
+    "September",
+    "Oktober",
+    "November",
+    "Dezember"
+  ],
+  "monthNamesShort": [
+    "Jan",
+    "Feb",
+    "Mär",
+    "Apr",
+    "Mai",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Okt",
+    "Nov",
+    "Dez"
+  ],
+  "chooseYear": "Jahr wählen",
+  "chooseMonth": "Monat wählen",
+  "chooseDate": "Datum wählen",
+  "prevDecade": "Vorheriges Jahrzehnt",
+  "nextDecade": "Nächstes Jahrzehnt",
+  "prevYear": "Vorheriges Jahr",
+  "nextYear": "Nächstes Jahr",
+  "prevMonth": "Vorheriger Monat",
+  "nextMonth": "Nächster Monat",
+  "prevHour": "Vorherige Stunde",
+  "nextHour": "Nächste Stunde",
+  "prevMinute": "Vorherige Minute",
+  "nextMinute": "Nächste Minute",
+  "prevSecond": "Vorherige Sekunde",
+  "nextSecond": "Nächste Sekunde",
+  "am": "am",
+  "pm": "pm",
+  "today": "Heute",
+  "now": "Jetzt",
+  "weekHeader": "KW",
+  "firstDayOfWeek": 1,
+  "showMonthAfterYear": false,
+  "dateFormat": "dd.mm.yy",
+  "weak": "Schwach",
+  "medium": "Mittel",
+  "strong": "Stark",
+  "passwordPrompt": "Passwort eingeben",
+  "emptyFilterMessage": "Keine Ergebnisse gefunden",
+  "searchMessage": "{0} Ergebnisse verfügbar",
+  "selectionMessage": "{0} Elemente ausgewählt",
+  "emptySelectionMessage": "Kein ausgewähltes Element",
+  "emptySearchMessage": "Keine Ergebnisse gefunden",
+  "emptyMessage": "Keine Einträge gefunden",
+  "aria": {
+    "trueLabel": "Wahr",
+    "falseLabel": "Falsch",
+    "nullLabel": "Nicht ausgewählt",
+    "star": "1 Stern",
+    "stars": "{star} Sterne",
+    "selectAll": "Alle Elemente ausgewählt",
+    "unselectAll": "Alle Elemente abgewählt",
+    "close": "Schließen",
+    "previous": "Vorherige",
+    "next": "Nächste",
+    "navigation": "Navigation",
+    "scrollTop": "Nach oben scrollen",
+    "moveTop": "Zum Anfang bewegen",
+    "moveUp": "Nach oben bewegen",
+    "moveDown": "Nach unten bewegen",
+    "moveBottom": "Zum Ende bewegen",
+    "moveToTarget": "Zum Ziel bewegen",
+    "moveToSource": "Zur Quelle bewegen",
+    "moveAllToTarget": "Alle zum Ziel bewegen",
+    "moveAllToSource": "Alle zur Quelle bewegen",
+    "pageLabel": "Seite {page}",
+    "firstPageLabel": "Erste Seite",
+    "lastPageLabel": "Letzte Seite",
+    "nextPageLabel": "Nächste Seite",
+    "previousPageLabel": "Vorherige Seite",
+    "rowsPerPageLabel": "Zeilen pro Seite",
+    "jumpToPageDropdownLabel": "Zum Dropdown-Menü springen",
+    "jumpToPageInputLabel": "Zum Eingabefeld springen",
+    "selectRow": "Zeile ausgewählt",
+    "unselectRow": "Zeile abgewählt",
+    "expandRow": "Zeile erweitert",
+    "collapseRow": "Zeile reduziert",
+    "showFilterMenu": "Filtermenü anzeigen",
+    "hideFilterMenu": "Filtermenü ausblenden",
+    "filterOperator": "Filteroperator",
+    "filterConstraint": "Filterbeschränkung",
+    "editRow": "Zeile bearbeiten",
+    "saveEdit": "Änderungen speichern",
+    "cancelEdit": "Änderungen abbrechen",
+    "listView": "Listenansicht",
+    "gridView": "Rasteransicht",
+    "slide": "Folie",
+    "slideNumber": "{slideNumber}",
+    "zoomImage": "Bild vergrößern",
+    "zoomIn": "Vergrößern",
+    "zoomOut": "Verkleinern",
+    "rotateRight": "Nach rechts drehen",
+    "rotateLeft": "Nach links drehen"
+  }
+}

frontend/src/i18n/translations/primevue/prime_vue_local_en.json

@@ -0,0 +1,155 @@
+{
+  "startsWith": "Starts with",
+  "contains": "Contains",
+  "notContains": "Not contains",
+  "endsWith": "Ends with",
+  "equals": "Equals",
+  "notEquals": "Not equals",
+  "noFilter": "No Filter",
+  "filter": "Filter",
+  "lt": "Less than",
+  "lte": "Less than or equal to",
+  "gt": "Greater than",
+  "gte": "Greater than or equal to",
+  "dateIs": "Date is",
+  "dateIsNot": "Date is not",
+  "dateBefore": "Date is before",
+  "dateAfter": "Date is after",
+  "custom": "Custom",
+  "clear": "Clear",
+  "apply": "Apply",
+  "matchAll": "Match All",
+  "matchAny": "Match Any",
+  "addRule": "Add Rule",
+  "removeRule": "Remove Rule",
+  "accept": "Yes",
+  "reject": "No",
+  "choose": "Choose",
+  "upload": "Upload",
+  "cancel": "Cancel",
+  "completed": "Completed",
+  "pending": "Pending",
+  "fileSizeTypes": ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"],
+  "dayNames": [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+  ],
+  "dayNamesShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  "dayNamesMin": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
+  "monthNames": [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December"
+  ],
+  "monthNamesShort": [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec"
+  ],
+  "chooseYear": "Choose Year",
+  "chooseMonth": "Choose Month",
+  "chooseDate": "Choose Date",
+  "prevDecade": "Previous Decade",
+  "nextDecade": "Next Decade",
+  "prevYear": "Previous Year",
+  "nextYear": "Next Year",
+  "prevMonth": "Previous Month",
+  "nextMonth": "Next Month",
+  "prevHour": "Previous Hour",
+  "nextHour": "Next Hour",
+  "prevMinute": "Previous Minute",
+  "nextMinute": "Next Minute",
+  "prevSecond": "Previous Second",
+  "nextSecond": "Next Second",
+  "am": "AM",
+  "pm": "PM",
+  "today": "Today",
+  "now": "Now",
+  "weekHeader": "Wk",
+  "firstDayOfWeek": 0,
+  "showMonthAfterYear": false,
+  "dateFormat": "mm/dd/yy",
+  "weak": "Weak",
+  "medium": "Medium",
+  "strong": "Strong",
+  "passwordPrompt": "Enter a password",
+  "emptyFilterMessage": "No results found",
+  "searchMessage": "{0} results are available",
+  "selectionMessage": "{0} items selected",
+  "emptySelectionMessage": "No selected item",
+  "emptySearchMessage": "No results found",
+  "emptyMessage": "No available options",
+  "aria": {
+    "trueLabel": "True",
+    "falseLabel": "False",
+    "nullLabel": "Not Selected",
+    "star": "1 star",
+    "stars": "{star} stars",
+    "selectAll": "All items selected",
+    "unselectAll": "All items unselected",
+    "close": "Close",
+    "previous": "Previous",
+    "next": "Next",
+    "navigation": "Navigation",
+    "scrollTop": "Scroll Top",
+    "moveTop": "Move Top",
+    "moveUp": "Move Up",
+    "moveDown": "Move Down",
+    "moveBottom": "Move Bottom",
+    "moveToTarget": "Move to Target",
+    "moveToSource": "Move to Source",
+    "moveAllToTarget": "Move All to Target",
+    "moveAllToSource": "Move All to Source",
+    "pageLabel": "Page {page}",
+    "firstPageLabel": "First Page",
+    "lastPageLabel": "Last Page",
+    "nextPageLabel": "Next Page",
+    "previousPageLabel": "Previous Page",
+    "rowsPerPageLabel": "Rows per page",
+    "jumpToPageDropdownLabel": "Jump to Page Dropdown",
+    "jumpToPageInputLabel": "Jump to Page Input",
+    "selectRow": "Row Selected",
+    "unselectRow": "Row Unselected",
+    "expandRow": "Row Expanded",
+    "collapseRow": "Row Collapsed",
+    "showFilterMenu": "Show Filter Menu",
+    "hideFilterMenu": "Hide Filter Menu",
+    "filterOperator": "Filter Operator",
+    "filterConstraint": "Filter Constraint",
+    "editRow": "Edit Row",
+    "saveEdit": "Save Edit",
+    "cancelEdit": "Cancel Edit",
+    "listView": "List View",
+    "gridView": "Grid View",
+    "slide": "Slide",
+    "slideNumber": "{slideNumber}",
+    "zoomImage": "Zoom Image",
+    "zoomIn": "Zoom In",
+    "zoomOut": "Zoom Out",
+    "rotateRight": "Rotate Right",
+    "rotateLeft": "Rotate Left"
+  }
+}

frontend/src/main.ts

@@ -14,7 +14,7 @@ import InputSwitch from "primevue/inputswitch";
 import Card from "primevue/card";
 import DataView from "primevue/dataview";
 import Dialog from "primevue/dialog";
-import Slider from 'primevue/slider';
+import Slider from "primevue/slider";
 import ToggleButton from "primevue/togglebutton";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
@@ -38,7 +38,6 @@ import Checkbox from "primevue/checkbox";
 import Skeleton from "primevue/skeleton";
 import Calendar from "primevue/calendar";
 import i18n from "./i18n";
-
 const app = createApp(App);
 const pinia = createPinia();
 

frontend/src/view/FreeRooms.vue

@@ -1,80 +1,114 @@
 <template>
-
   <DynamicPage
     :hide-content="availableRooms.length === 0"
     :headline="$t('freeRooms.freeRooms')"
     :sub-title="$t('freeRooms.detail')"
     icon="pi pi-search"
     :button="{
-      label: 'Search',
+      label: $t('freeRooms.search'),
       icon: 'pi pi-search',
       disabled: isLater,
       onClick: loadFreeRooms,
     }"
   >
     <template #selection="{ flexSpecs }">
-          <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
-          />
+      />
-          <div class="break"/>
+      <div class="break" />
-          <Calendar
+      <Calendar
-            v-if="mobilePage"
+        v-if="mobilePage"
-            v-model="start"
+        v-model="start"
-            type="time"
+        type="time"
-            placeholder="start"
+        placeholder="start"
-            time-only
+        time-only
-            hour-format="24"
+        hour-format="24"
-            date-format="HH:mm"
+        date-format="HH:mm"
-            :class="[{'p-invalid':isLater}, flexSpecs]"
+        :class="[{ 'p-invalid': isLater }, flexSpecs]"
-            panel-class="min-w-min"
+        panel-class="min-w-min"
-            touch-u-i
+        touch-u-i
-            @update:model-value="() => {timeRange[0] = start.getHours() * 60 + start.getMinutes();}"
+        @update:model-value="
-          />
+          () => {
-          <Calendar
+            timeRange[0] = start.getHours() * 60 + start.getMinutes();
-            v-if="mobilePage"
+          }
-            v-model="end"
+        "
-            type="time"
+      />
-            time-only
+      <Calendar
-            hour-format="24"
+        v-if="mobilePage"
-            placeholder="end"
+        v-model="end"
-            date-format="HH:mm"
+        type="time"
-            :class="[{'p-invalid':isLater}, flexSpecs]"
+        time-only
-            panel-class="min-w-min"
+        hour-format="24"
-            touch-u-i
+        placeholder="end"
-            @update:model-value="() => {timeRange[1] = end.getHours() * 60 + end.getMinutes();}"
+        date-format="HH:mm"
-          />
+        :class="[{ 'p-invalid': isLater }, flexSpecs]"
-          <div
+        panel-class="min-w-min"
-            v-if="!mobilePage"
+        touch-u-i
-            class="flex-grow-1 relative mb-2"
+        @update:model-value="
-            :class="flexSpecs"
+          () => {
-          >
+            timeRange[1] = end.getHours() * 60 + end.getMinutes();
-            <Tag :value="formatTime(start)" class="opacity-0 pointer-events-none text-xl lg:text-base"/>
+          }
-            <Tag :value="formatTime(start)" class="absolute time-tag text-xl lg:text-base" :style="{left: timeToPercentString(timeRange[0])}" :class="startMoved.value? 'moved': ''" />
+        "
-            <Tag :value="formatTime(end)" class="absolute time-tag text-xl lg:text-base" :style="{left: timeToPercentString(timeRange[1])}" :class="endMoved.value? 'moved': ''" />
+      />
-          </div>
+      <div
-          <div class="break"/>
+        v-if="!mobilePage"
-          <Slider
+        class="flex-grow-1 relative mb-2"
-            v-if="!mobilePage"
+        :class="flexSpecs"
-            v-model="timeRange"
+      >
-            :class="flexSpecs"
+        <Tag
-            range
+          :value="formatTime(start)"
-            :min="0"
+          class="opacity-0 pointer-events-none text-xl lg:text-base"
-            :max="24*60"
+        />
-            :step="5"
+        <Tag
-            @change="updateTimeRange"
+          :value="formatTime(start)"
-          />
+          class="absolute time-tag text-xl lg:text-base"
+          :style="{ left: timeToPercentString(timeRange[0]) }"
+          :class="startMoved.value ? 'moved' : ''"
+        />
+        <Tag
+          :value="formatTime(end)"
+          class="absolute time-tag text-xl lg:text-base"
+          :style="{ left: timeToPercentString(timeRange[1]) }"
+          :class="endMoved.value ? 'moved' : ''"
+        />
+      </div>
+      <div class="break" />
+      <Slider
+        v-if="!mobilePage"
+        v-model="timeRange"
+        :class="flexSpecs"
+        range
+        :min="0"
+        :max="24 * 60"
+        :step="5"
+        @change="updateTimeRange"
+      />
     </template>
     <template #content>
-      <DataTable v-model:filters="filters" :value="availableRooms" data-key="id" filter-display="row" paginator :rows="10" :global-filter-fields="['room']" >
+      <DataTable
+        v-model:filters="filters"
+        :value="availableRooms"
+        data-key="id"
+        filter-display="row"
+        paginator
+        :rows="10"
+        :global-filter-fields="['room']"
+      >
         <Column field="room" sortable :header="$t('freeRooms.room')">
           <template #filter="{ filterModel, filterCallback }">
-            <InputText v-model="filterModel.value" type="text" class="p-column-filter" :placeholder='$t("freeRooms.searchByRoom")' @input="filterCallback()" />
+            <InputText
+              v-model="filterModel.value"
+              type="text"
+              class="p-column-filter"
+              :placeholder="$t('freeRooms.searchByRoom')"
+              @input="filterCallback()"
+            />
           </template>
         </Column>
       </DataTable>
@@ -115,10 +149,14 @@ if (end.value.getHours() === 23) {
 
 const timeRange: Ref<number[]> = ref([
   start.value.getHours() * 60 + start.value.getMinutes(),
-  end.value.getHours() * 60 + end.value.getMinutes()
+  end.value.getHours() * 60 + end.value.getMinutes(),
 ]);
 
-function buttonMovedTimeout(time: number, timeDate: Date, moved: Ref<Moved>): void {
+function buttonMovedTimeout(
+  time: number,
+  timeDate: Date,
+  moved: Ref<Moved>,
+): void {
   if (time !== timeDate.getHours() * 60 + timeDate.getMinutes()) {
     if (moved.value.timeout !== null) {
       clearTimeout(moved.value.timeout);
@@ -144,11 +182,15 @@ function updateTimeRange(): void {
 }
 
 function formatTime(time: Date): string {
-  return padStart(time.getHours().toString(), 2) + ":" + padStart(time.getMinutes().toString(), 2);
+  return (
+    padStart(time.getHours().toString(), 2) +
+    ":" +
+    padStart(time.getMinutes().toString(), 2)
+  );
 }
 
 function timeToPercentString(time: number): string {
-  return `${Number(time) * 100 / (24 * 60)}%`;
+  return `${(Number(time) * 100) / (24 * 60)}%`;
 }
 
 async function loadFreeRooms(): Promise<void> {
@@ -159,19 +201,20 @@ async function loadFreeRooms(): Promise<void> {
   const endDate = new Date(date.value.getTime());
   endDate.setHours(end.value.getHours());
   endDate.setMinutes(end.value.getMinutes());
-  await requestFreeRooms(startDate.toISOString(), endDate.toISOString()).then((data) => {
+  await requestFreeRooms(startDate.toISOString(), endDate.toISOString()).then(
-    availableRooms.value = data.map((room, index) => {
+    (data) => {
-      return { id: index, room: room };
+      availableRooms.value = data.map((room, index) => {
-    });
+        return { id: index, room: room };
-  });
+      });
+    },
+  );
 }
 
 const isLater = computed(() => {
   return start.value > end.value;
 });
 
-const availableRooms: Ref<{id: number, room: string}[]> = ref([]);
+const availableRooms: Ref<{ id: number; room: string }[]> = ref([]);
-
 </script>
 
 <style scoped>
@@ -202,7 +245,7 @@ const availableRooms: Ref<{id: number, room: string}[]> = ref([]);
   height: 0;
   border-style: solid;
   border-width: 0.8rem 0.5rem 0 0.5rem;
-  border-color:var(--primary-color)  transparent transparent transparent;
+  border-color: var(--primary-color) transparent transparent transparent;
   transform: translateX(-50%);
 }
 </style>