From b4caa9e94b17bb9d40f20c9c0389ed2e87dc852d Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Fri, 23 Feb 2024 02:46:38 +0100
Subject: [PATCH] feat:#30 added linkout to room finder

---
 frontend/src/i18n/translations/de.json |  3 ++-
 frontend/src/i18n/translations/en.json |  3 ++-
 frontend/src/view/FreeRooms.vue        | 24 ++++++++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/frontend/src/i18n/translations/de.json b/frontend/src/i18n/translations/de.json
index f073849..0094cfb 100644
--- a/frontend/src/i18n/translations/de.json
+++ b/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",
diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json
index d082f39..7498f40 100644
--- a/frontend/src/i18n/translations/en.json
+++ b/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",
diff --git a/frontend/src/view/FreeRooms.vue b/frontend/src/view/FreeRooms.vue
index 5a0539a..0fc62f2 100644
--- a/frontend/src/view/FreeRooms.vue
+++ b/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));