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

feat:#5 added localization and primeVue local

Browse Source
This commit is contained in:
Elmar Kresse
2024-01-31 15:46:31 +01:00
parent 69783c5566
commit b08f839558
8 changed files with 451 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
frontend/src/view/FreeRooms.vue
View File

@@ -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>