feat:#5 added datetime input for search and fixed nav bar

frontend/src/view/FreeRooms.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { Ref, ref } from "vue";
+import DynamicPage from "@/view/DynamicPage.vue";
+
+const selected: Ref<{ name: string }> = ref({ name: "" });
+
+const dates = ref();
+</script>
+
+<template>
+  <DynamicPage
+    :hide-content="selected.name === ''"
+    :headline="$t('freeRooms.freeRooms')"
+    :sub-title="$t('freeRooms.detail')"
+    icon="pi pi-search"
+  >
+    <template #selection>
+      <Calendar
+        v-model="dates"
+        class="flex-1 m-0"
+        :placeholder="$t('roomFinderPage.dropDownSelect')"
+        :empty-message="$t('roomFinderPage.noRoomsAvailable')"
+        :auto-filter-focus="true"
+        selection-mode="range"
+        :manual-input="false"
+        :show-time="true"
+        :show-seconds="true"
+      />
+      <Button icon="pi pi-search" />
+    </template>
+    <template #content>
+      <Button>Button</Button>
+    </template>
+  </DynamicPage>
+</template>

frontend/src/view/RoomFinder.vue

@@ -3,20 +3,16 @@ import { Ref, ref } from "vue";
 import { fetchRoom } from "../api/fetchRoom.ts";
 import DynamicPage from "./DynamicPage.vue";
 import RoomOccupation from "../components/RoomOccupation.vue";
+import { computedAsync } from "@vueuse/core";
 
-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) => {
+const roomsList = computedAsync(async () => {
+  return await fetchRoom().then((data) =>
+    data.map((room) => {
       return { name: room };
-    })),
-);
+    }),
+  );
+});
+const selectedRoom: Ref<{ name: string }> = ref({ name: "" });
 </script>
 
 <template>