fix:#5 added translation and test i18n for default primevue locale

This commit is contained in:
Elmar Kresse
2024-01-26 20:17:46 +01:00
parent e5571e899c
commit 69783c5566
5 changed files with 264 additions and 38 deletions

View File

@@ -16,7 +16,7 @@
<Calendar
v-model="date"
:class="flexSpecs"
:placeholder="$t('roomFinderPage.dropDownSelect')"
:placeholder="$t('freeRooms.pleaseSelectDate')"
:empty-message="$t('roomFinderPage.noRoomsAvailable')"
date-format="dd.mm.yy"
panel-class="min-w-min"
@@ -24,9 +24,8 @@
/>
<div class="break"/>
<Calendar
v-model="start"
v-if="mobilePage"
@update:model-value="() => {timeRange[0] = start.getHours() * 60 + start.getMinutes();}"
v-model="start"
type="time"
placeholder="start"
time-only
@@ -35,11 +34,11 @@
: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-model="end"
v-if="mobilePage"
@update:model-value="() => {timeRange[1] = end.getHours() * 60 + end.getMinutes();}"
v-model="end"
type="time"
time-only
hour-format="24"
@@ -48,11 +47,12 @@
: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"
v-if="!mobilePage"
>
<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': ''" />
@@ -60,21 +60,21 @@
</div>
<div class="break"/>
<Slider
v-if="!mobilePage"
v-model="timeRange"
@change="updateTimeRange"
range
:class="flexSpecs"
range
:min="0"
:max="24*60"
:step="5"
v-if="!mobilePage"
@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']" >
<Column field="room" sortable header="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="Search by Room" @input="filterCallback()" />
<InputText v-model="filterModel.value" type="text" class="p-column-filter" :placeholder='$t("freeRooms.searchByRoom")' @input="filterCallback()" />
</template>
</Column>
</DataTable>
@@ -91,7 +91,7 @@ import { padStart } from "@fullcalendar/core/internal";
const mobilePage = inject("mobilePage") as Ref<boolean>;
const filters = ref({
room: { value: null, matchMode: FilterMatchMode.CONTAINS },
room: { value: null, matchMode: FilterMatchMode.CONTAINS, label: "Room" },
});
const date: Ref<Date> = ref(new Date(Date.now()));
@@ -118,7 +118,7 @@ const timeRange: Ref<number[]> = ref([
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);
@@ -147,7 +147,7 @@ function formatTime(time: Date): string {
return padStart(time.getHours().toString(), 2) + ":" + padStart(time.getMinutes().toString(), 2);
}
function timeToPercentString(time: Number): string {
function timeToPercentString(time: number): string {
return `${Number(time) * 100 / (24 * 60)}%`;
}
@@ -200,7 +200,6 @@ const availableRooms: Ref<{id: number, room: string}[]> = ref([]);
left: 50%;
width: 0;
height: 0;
transform: translateY(-100%);
border-style: solid;
border-width: 0.8rem 0.5rem 0 0.5rem;
border-color:var(--primary-color) transparent transparent transparent;