[#10] WIP

frontend/src/components/RoomFinder.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import {Ref, ref} from "vue";
+import {fetchEventsByRoomAndWeek, fetchRoom} from "../api/fetchRoom.ts";
+import InputNumber from 'primevue/inputnumber';
+import RoomOccupation from "./RoomOccupation.vue";
+import {Event} from "../model/event.ts";
+
+const rooms = async () => {
+  return await fetchRoom();
+};
+
+const roomsList: Ref<{ name: string }[]> = ref([]);
+
+const days: Ref<{ name: string; value: string }[]> = ref([
+  {name: "Montag", value: "mo"},
+  {name: "Dienstag", value: "di"},
+  {name: "Mittwoch", value: "mi"},
+  {name: "Donnerstag", value: "do"},
+  {name: "Donnerstag", value: "fr"},
+  {name: "Donnerstag", value: "sa"},
+]);
+
+const selectedDay: Ref<{ name: string; value: string }> = ref(
+    days.value[0],
+);
+
+const selectedWeekNumber: Ref<number> = ref(
+    1
+);
+const selectedRoom: Ref<{ name: string }> = ref({name: ""});
+
+rooms().then(
+    (data) =>
+        (roomsList.value = data.map((room) => {
+          return {name: room};
+        })),
+);
+
+
+const occupations: Ref<Event[]> = ref([]);
+
+async function getOccupation() {
+  occupations.value = await fetchEventsByRoomAndWeek(
+      selectedRoom.value.name,
+      selectedWeekNumber.value,
+  );
+}
+</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"
+          @change="getOccupation()"
+      />
+    </div>
+    <div
+        class="flex align-items-center justify-content-center border-round m-2"
+    >
+      <div class="flex flex-column gap-2">
+        <InputNumber id="week-number-input" v-model="selectedWeekNumber" inputId="minmax" :min="0" :max="100"
+                     showButtons/>
+        <small id="username-help">Planning Week</small>
+      </div>
+    </div>
+    <RoomOccupation :occupations="occupations"/>
+  </div>
+</template>