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

fix:#5 updated packages and added table filter for

Browse Source
This commit is contained in:
Elmar Kresse
2024-01-25 17:24:54 +01:00
parent b04432342a
commit 167a0432bf
4 changed files with 55 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,35 +1,3 @@
<script setup lang="ts">
import { computed, Ref, ref } from "vue";
import DynamicPage from "@/view/DynamicPage.vue";
import { requestFreeRooms } from "@/api/requestFreeRooms.ts";
const date: Ref<Date> = ref(new Date(Date.now()));
const start: Ref<Date> = ref(new Date(Date.now()));
const end: Ref<Date> = ref(new Date(Date.now() + 3600000));
async function loadFreeRooms(): Promise<void> {
availableRooms.value = [];
const startDate = new Date(date.value.getTime());
startDate.setHours(start.value.getHours());
startDate.setMinutes(start.value.getMinutes());
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 };
});
});
}
const isLater = computed(() => {
return start.value > end.value;
});
const availableRooms: Ref<{id: number, room: string}[]> = ref([]);
</script>
<template>
<DynamicPage
:hide-content="availableRooms.length === 0"
@@ -69,14 +37,55 @@ const availableRooms: Ref<{id: number, room: string}[]> = ref([]);
/>
</template>
<template #content>
<DataTable :value="availableRooms">
<DataTable v-model:filters="filters" :value="availableRooms" data-key="id" filter-display="row" paginator :rows="10" :global-filter-fields="['room']" >
<Column field="id" header="ID"></Column>
<Column field="room" header="Room"></Column>
<Column field="room" sortable header="Room">
<template #filter="{ filterModel, filterCallback }">
<InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by Room" @input="filterCallback()" />
</template>
</Column>
</DataTable>
</template>
</DynamicPage>
</template>
<script setup lang="ts">
import { computed, Ref, ref } from "vue";
import DynamicPage from "@/view/DynamicPage.vue";
import { requestFreeRooms } from "@/api/requestFreeRooms.ts";
import { FilterMatchMode } from "primevue/api";
const filters = ref({
room: { value: null, matchMode: FilterMatchMode.CONTAINS },
});
const date: Ref<Date> = ref(new Date(Date.now()));
const start: Ref<Date> = ref(new Date(Date.now()));
const end: Ref<Date> = ref(new Date(Date.now() + 3600000));
async function loadFreeRooms(): Promise<void> {
availableRooms.value = [];
const startDate = new Date(date.value.getTime());
startDate.setHours(start.value.getHours());
startDate.setMinutes(start.value.getMinutes());
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 };
});
});
}
const isLater = computed(() => {
return start.value > end.value;
});
const availableRooms: Ref<{id: number, room: string}[]> = ref([]);
</script>
<style scoped>
.break {
flex-basis: 100%;