htwkalender/frontend/src/components/RoomFinder.vue

<script lang="ts" setup>
import { Ref, ref } from "vue";
import { fetchRoom } from "../api/fetchRoom.ts";
import RoomOccupation from "./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">Raumfinder</h3>
    </div>
    <div
      class="flex align-items-center justify-content-center h-4rem border-round m-2"
    >
      <h5 class="text-2xl">Please select a room</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="Select a Room"
        :autoFilterFocus="true"
      />
    </div>
    <div class="m-6">
      <RoomOccupation :room="selectedRoom.name" />
    </div>
  </div>
</template>