feat:#30 added linkout to room finder

frontend/src/i18n/translations/de.json

@@ -33,7 +33,8 @@
     "searchByRoom": "Suche nach Räumen",
     "pleaseSelectDate": "Bitte wähle ein Datum aus",
     "room": "Raum",
-    "search": "Suchen"
+    "search": "Suchen",
+    "viewOccupancy": "Belegung anzeigen"
   },
   "moduleSelection": {
     "selectAll": "Alle anwählen",

frontend/src/i18n/translations/en.json

@@ -33,7 +33,8 @@
     "searchByRoom": "search by room",
     "pleaseSelectDate": "please select a date",
     "room": "room",
-    "search": "search"
+    "search": "search",
+    "viewOccupancy": "View Occupancy"
   },
   "moduleSelection": {
     "selectAll": "select all",

frontend/src/view/FreeRooms.vue

@@ -110,6 +110,17 @@
               @input="filterCallback()"
             />
           </template>
+          <template #body="slotProps">
+            <div class="flex justify-content-between flex-wrap">
+              <div class="align-self-center">{{ slotProps.data.room }}</div>
+              <Button
+                :label="$t('freeRooms.viewOccupancy')"
+                icon="pi pi-hourglass"
+                class="p-button-rounded p-button-outlined"
+                @click="occupationRoute(slotProps.data.room)"
+              />
+            </div>
+          </template>
         </Column>
       </DataTable>
     </template>
@@ -122,12 +133,25 @@ import DynamicPage from "@/view/DynamicPage.vue";
 import { requestFreeRooms } from "@/api/requestFreeRooms.ts";
 import { FilterMatchMode } from "primevue/api";
 import { padStart } from "@fullcalendar/core/internal";
+import router from "@/router";
 
 const mobilePage = inject("mobilePage") as Ref<boolean>;
 const filters = ref({
   room: { value: null, matchMode: FilterMatchMode.CONTAINS, label: "Room" },
 });
 
+function occupationRoute(room: string): void {
+  // date is in format like YYYYMMDD
+    router.push({
+      name: "room-schedule",
+      query: {
+        room: room,
+        date: date.value.toISOString().split("T")[0].replace(/-/g, ""),
+      }
+    }
+    );
+}
+
 const date: Ref<Date> = ref(new Date(Date.now()));
 const start: Ref<Date> = ref(new Date(0));
 const end: Ref<Date> = ref(new Date(0));