mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git
synced 2025-07-16 09:38:51 +02:00
feat:#5 added localization and primeVue local
This commit is contained in:
Elmar Kresse
@ -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) {
|
||||
localeStore().setLocale(dropdownChangeEvent.value);
|
||||
const primeVueConfig = usePrimeVue();
|
||||
|
||||
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">
|
||||
|
||||
@ -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,
|
||||
};
|
||||
|
||||
@ -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",
|
||||
"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"
|
||||
}
|
||||
"contact": "Kontakt aufnehmen"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
155
frontend/src/i18n/translations/primevue/prime_vue_local_de.json
Normal file
155
frontend/src/i18n/translations/primevue/prime_vue_local_de.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
155
frontend/src/i18n/translations/primevue/prime_vue_local_en.json
Normal file
155
frontend/src/i18n/translations/primevue/prime_vue_local_en.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
@ -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();
|
||||
|
||||
|
||||
@ -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
|
||||
v-model="date"
|
||||
:class="flexSpecs"
|
||||
:placeholder="$t('freeRooms.pleaseSelectDate')"
|
||||
:empty-message="$t('roomFinderPage.noRoomsAvailable')"
|
||||
date-format="dd.mm.yy"
|
||||
panel-class="min-w-min"
|
||||
touch-u-i
|
||||
/>
|
||||
<div class="break"/>
|
||||
<Calendar
|
||||
v-if="mobilePage"
|
||||
v-model="start"
|
||||
type="time"
|
||||
placeholder="start"
|
||||
time-only
|
||||
hour-format="24"
|
||||
date-format="HH:mm"
|
||||
:class="[{'p-invalid':isLater}, flexSpecs]"
|
||||
panel-class="min-w-min"
|
||||
touch-u-i
|
||||
@update:model-value="() => {timeRange[0] = start.getHours() * 60 + start.getMinutes();}"
|
||||
/>
|
||||
<Calendar
|
||||
v-if="mobilePage"
|
||||
v-model="end"
|
||||
type="time"
|
||||
time-only
|
||||
hour-format="24"
|
||||
placeholder="end"
|
||||
date-format="HH:mm"
|
||||
:class="[{'p-invalid':isLater}, flexSpecs]"
|
||||
panel-class="min-w-min"
|
||||
touch-u-i
|
||||
@update:model-value="() => {timeRange[1] = end.getHours() * 60 + end.getMinutes();}"
|
||||
/>
|
||||
<div
|
||||
v-if="!mobilePage"
|
||||
class="flex-grow-1 relative mb-2"
|
||||
:class="flexSpecs"
|
||||
>
|
||||
<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 class="break"/>
|
||||
<Slider
|
||||
v-if="!mobilePage"
|
||||
v-model="timeRange"
|
||||
:class="flexSpecs"
|
||||
range
|
||||
:min="0"
|
||||
:max="24*60"
|
||||
:step="5"
|
||||
@change="updateTimeRange"
|
||||
/>
|
||||
<Calendar
|
||||
v-model="date"
|
||||
:class="flexSpecs"
|
||||
:placeholder="$t('freeRooms.pleaseSelectDate')"
|
||||
:empty-message="$t('roomFinderPage.noRoomsAvailable')"
|
||||
date-format="dd.mm.yy"
|
||||
panel-class="min-w-min"
|
||||
touch-u-i
|
||||
/>
|
||||
<div class="break" />
|
||||
<Calendar
|
||||
v-if="mobilePage"
|
||||
v-model="start"
|
||||
type="time"
|
||||
placeholder="start"
|
||||
time-only
|
||||
hour-format="24"
|
||||
date-format="HH:mm"
|
||||
:class="[{ 'p-invalid': isLater }, flexSpecs]"
|
||||
panel-class="min-w-min"
|
||||
touch-u-i
|
||||
@update:model-value="
|
||||
() => {
|
||||
timeRange[0] = start.getHours() * 60 + start.getMinutes();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<Calendar
|
||||
v-if="mobilePage"
|
||||
v-model="end"
|
||||
type="time"
|
||||
time-only
|
||||
hour-format="24"
|
||||
placeholder="end"
|
||||
date-format="HH:mm"
|
||||
:class="[{ 'p-invalid': isLater }, flexSpecs]"
|
||||
panel-class="min-w-min"
|
||||
touch-u-i
|
||||
@update:model-value="
|
||||
() => {
|
||||
timeRange[1] = end.getHours() * 60 + end.getMinutes();
|
||||
}
|
||||
"
|
||||
/>
|
||||
<div
|
||||
v-if="!mobilePage"
|
||||
class="flex-grow-1 relative mb-2"
|
||||
:class="flexSpecs"
|
||||
>
|
||||
<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 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) => {
|
||||
availableRooms.value = data.map((room, index) => {
|
||||
return { id: index, room: room };
|
||||
});
|
||||
});
|
||||
await requestFreeRooms(startDate.toISOString(), endDate.toISOString()).then(
|
||||
(data) => {
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user