mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2026-01-17 12:02:26 +01:00
54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<script lang="ts" setup>
|
|
import { Ref, ref } from "vue";
|
|
import { fetchRoom } from "../api/fetchRoom.ts";
|
|
import RoomOccupation from "../components/RoomOccupation.vue";
|
|
|
|
const rooms = async () => {
|
|
return await fetchRoom();
|
|
};
|
|
|
|
const roomsList: Ref<{ name: string }[]> = ref([]);
|
|
const selectedRoom: Ref<{ name: string }> = ref({ name: "" });
|
|
|
|
rooms().then(
|
|
(data) =>
|
|
(roomsList.value = data.map((room) => {
|
|
return { name: room };
|
|
})),
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex flex-column">
|
|
<div class="flex align-items-center justify-content-center h-4rem m-2">
|
|
<h3 class="text-4xl">{{ $t("roomFinderPage.headline") }}</h3>
|
|
<i
|
|
class="pi pi-search vertical-align-baseline ml-3"
|
|
style="font-size: 2rem"
|
|
></i>
|
|
</div>
|
|
<div
|
|
class="flex align-items-center justify-content-center h-4rem border-round m-2"
|
|
>
|
|
<h5 class="text-2xl">{{ $t("roomFinderPage.detail") }}</h5>
|
|
</div>
|
|
<div
|
|
class="flex align-items-center justify-content-center border-round m-2"
|
|
>
|
|
<Dropdown
|
|
v-model="selectedRoom"
|
|
:options="roomsList"
|
|
class="w-full md:w-25rem mx-2"
|
|
filter
|
|
option-label="name"
|
|
:placeholder="$t('roomFinderPage.dropDownSelect')"
|
|
:empty-message="$t('roomFinderPage.noRoomsAvailable')"
|
|
:auto-filter-focus="true"
|
|
/>
|
|
</div>
|
|
<div class="m-6">
|
|
<RoomOccupation :room="selectedRoom.name" />
|
|
</div>
|
|
</div>
|
|
</template>
|