From fe8e22da5adfb1454663d7528d9dcaa5d989bacb Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Thu, 25 Jan 2024 00:34:42 +0100
Subject: [PATCH] fix:#5 added room table and changed sql query

---
 backend/service/db/dbEvents.go       | 34 +++++++++++
 backend/service/room/roomService.go  |  2 +-
 frontend/src/api/requestFreeRooms.ts | 16 ++++++
 frontend/src/view/FreeRooms.vue      | 86 ++++++++++++++++++++++------
 4 files changed, 119 insertions(+), 19 deletions(-)
 create mode 100644 frontend/src/api/requestFreeRooms.ts

diff --git a/backend/service/db/dbEvents.go b/backend/service/db/dbEvents.go
index 9078c01..79f5d22 100644
--- a/backend/service/db/dbEvents.go
+++ b/backend/service/db/dbEvents.go
@@ -2,6 +2,7 @@ package db
 
 import (
 	"fmt"
+	"github.com/pocketbase/pocketbase/tools/types"
 	"htwkalender/model"
 	"log/slog"
 	"time"
@@ -265,3 +266,36 @@ func GetEventsInTimeRange(app *pocketbase.PocketBase, from time.Time, to time.Ti
 
 	return events, nil
 }
+
+// GetEventsThatCollideWithTimeRange returns all events that collide with the given time range
+// events that collide are events that start before the given time range and end after the given time range
+// or events that start before the given time range and end in the given time range
+// or events that start in the given time range and end after the given time range
+// or events that start in the given time range and end in the given time range
+func GetEventsThatCollideWithTimeRange(app *pocketbase.PocketBase, from time.Time, to time.Time) (model.Events, error) {
+	var events model.Events
+
+	var fromTypeTime, _ = types.ParseDateTime(from)
+	var toTypeTime, _ = types.ParseDateTime(to)
+
+	//TODO check if this query is correct returns null or events on complete other days
+	err := app.Dao().DB().Select("*").From("events").Where(
+		dbx.And(
+			dbx.NewExp("(Start <= {:startDate1}", dbx.Params{"startDate1": fromTypeTime}),
+			dbx.NewExp("AND End >= {:endDate1})", dbx.Params{"endDate1": toTypeTime}))).OrWhere(
+		dbx.And(
+			dbx.NewExp("(Start >= {:startDate2}", dbx.Params{"startDate2": fromTypeTime}),
+			dbx.NewExp("AND End <= {:endDate2})", dbx.Params{"endDate2": toTypeTime}))).OrWhere(
+		dbx.And(
+			dbx.NewExp("(Start <= {:startDate3}", dbx.Params{"startDate3": fromTypeTime}),
+			dbx.NewExp("AND End <= {:endDate3})", dbx.Params{"endDate3": toTypeTime}))).OrWhere(
+		dbx.And(
+			dbx.NewExp("(Start >= {:startDate4}", dbx.Params{"startDate4": fromTypeTime}),
+			dbx.NewExp("AND End >= {:endDate4})", dbx.Params{"endDate4": toTypeTime}))).All(&events)
+
+	if err != nil {
+		return nil, err
+	}
+
+	return events, nil
+}
diff --git a/backend/service/room/roomService.go b/backend/service/room/roomService.go
index 7ce96ba..ca66c78 100644
--- a/backend/service/room/roomService.go
+++ b/backend/service/room/roomService.go
@@ -50,7 +50,7 @@ func GetFreeRooms(app *pocketbase.PocketBase, from time.Time, to time.Time) ([]s
 		return nil, err
 	}
 	var events model.Events
-	events, err = db.GetEventsInTimeRange(app, from, to)
+	events, err = db.GetEventsThatCollideWithTimeRange(app, from, to)
 	if err != nil {
 		return nil, err
 	}
diff --git a/frontend/src/api/requestFreeRooms.ts b/frontend/src/api/requestFreeRooms.ts
new file mode 100644
index 0000000..800db38
--- /dev/null
+++ b/frontend/src/api/requestFreeRooms.ts
@@ -0,0 +1,16 @@
+
+
+// load free rooms as a list of strings form the backend
+
+export async function requestFreeRooms(from: string, to: string): Promise<string[]> {
+  console.debug("requestFreeRooms: from=" + from + ", to=" + to)
+  const rooms: string[] = [];
+  await fetch("/api/rooms/free?from=" + from + "&to=" + to)
+    .then((response) => {
+      return response.json();
+    })
+    .then((roomsResponse: [] | null) => {
+      roomsResponse?.forEach((room: string) => rooms.push(room));
+    });
+  return rooms;
+}
\ No newline at end of file
diff --git a/frontend/src/view/FreeRooms.vue b/frontend/src/view/FreeRooms.vue
index ed7067e..32abb30 100644
--- a/frontend/src/view/FreeRooms.vue
+++ b/frontend/src/view/FreeRooms.vue
@@ -1,35 +1,85 @@
 <script setup lang="ts">
-import { Ref, ref } from "vue";
+import { computed, Ref, ref } from "vue";
 import DynamicPage from "@/view/DynamicPage.vue";
+import { requestFreeRooms } from "@/api/requestFreeRooms.ts";
 
-const selected: Ref<{ name: string }> = ref({ name: "" });
+const date: Ref<Date> = ref(new Date(Date.now()));
+const start: Ref<Date> = ref(new Date(Date.now()));
+const end: Ref<Date> = ref(new Date(Date.now() + 3600000));
+
+async function loadFreeRooms(): Promise<void> {
+  availableRooms.value = [];
+  const startDate = new Date(date.value.getTime());
+  startDate.setHours(start.value.getHours());
+  startDate.setMinutes(start.value.getMinutes());
+  const endDate = new Date(date.value.getTime());
+  endDate.setHours(end.value.getHours());
+  endDate.setMinutes(end.value.getMinutes());
+  await requestFreeRooms(startDate.toISOString(), endDate.toISOString()).then((data) => {
+    availableRooms.value = data.map((room, index) => {
+      return { id: index, room: room };
+    });
+  });
+}
+
+const isLater = computed(() => {
+  return start.value > end.value;
+});
+
+const availableRooms: Ref<{id: number, room: string}[]> = ref([]);
 
-const dates = ref();
 </script>
 
 <template>
   <DynamicPage
-    :hide-content="selected.name === ''"
+    :hide-content="availableRooms.length === 0"
     :headline="$t('freeRooms.freeRooms')"
     :sub-title="$t('freeRooms.detail')"
     icon="pi pi-search"
+    :button="{
+      label: 'Search',
+      icon: 'pi pi-search',
+      disabled: isLater,
+      onClick: loadFreeRooms,
+    }"
   >
-    <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 #selection="{ flexSpecs }">
+          <Calendar
+            v-model="date"
+            :class="flexSpecs"
+            :placeholder="$t('roomFinderPage.dropDownSelect')"
+            :empty-message="$t('roomFinderPage.noRoomsAvailable')"
+            :auto-filter-focus="true"
+            date-format="dd.mm.yy"
+          />
+          <div class="break"/>
+            <Calendar
+              v-model="start"
+              placeholder="start"
+              time-only
+              date-format="HH:mm"
+              :class="[{'p-invalid':isLater}, flexSpecs]"
+            />
+            <Calendar
+              v-model="end"
+              time-only
+              placeholder="end"
+              date-format="HH:mm"
+              :class="[{'p-invalid':isLater}, flexSpecs]"
+            />
     </template>
     <template #content>
-      <Button>Button</Button>
+      <DataTable :value="availableRooms">
+        <Column field="id" header="ID"></Column>
+        <Column field="room" header="Room"></Column>
+      </DataTable>
     </template>
   </DynamicPage>
 </template>
+
+<style scoped>
+.break {
+  flex-basis: 100%;
+  height: 0;
+}
+</style>
\ No newline at end of file