feat:#60 added localization for more pages

frontend/src/view/RoomFinder.vue

@@ -0,0 +1,53 @@
+<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')"
+        :autoFilterFocus="true"
+      />
+    </div>
+    <div class="m-6">
+      <RoomOccupation :room="selectedRoom.name" />
+    </div>
+  </div>
+</template>