Filtering booked blocks

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -75,6 +75,7 @@ import {
   parseTimestamp,
   parseDate,
   addToDate,
+  makeDateTime,
 } from '@quasar/quasar-ui-qcalendar';
 import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 
@@ -82,6 +83,7 @@ import { ref, computed } from 'vue';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import { useScheduleStore } from 'src/stores/schedule';
 import { Reservation, Timeblock } from 'src/stores/schedule.types';
+import { date } from 'quasar';
 
 interface BoatData extends Boat {
   blocks?: Timeblock[];
@@ -171,11 +173,25 @@ function changeEvent({ start }: { start: string }) {
   const reservations = scheduleStore.getBoatReservations(
     parsed(start) as Timestamp
   );
-  boatData.value.map((b) => {
-    b.blocks = newBlocks.filter((block) => block.boatId === b.$id);
-    b.reservations = reservations.filter(
-      (reservation) => reservation.resource === b
-    ); // TODO: search by id, not item.
+  boatData.value.map((boat) => {
+    boat.reservations = reservations.filter(
+      (reservation) => reservation.resource === boat
+    );
+    boat.blocks = newBlocks.filter(
+      (block) =>
+        block.boatId === boat.$id &&
+        boat.reservations?.filter(
+          (r) =>
+            r.start <
+              date.addToDate(makeDateTime(parsed(block.end) as Timestamp), {
+                hours: 4,
+              }) &&
+            r.end >
+              date.addToDate(makeDateTime(parsed(block.start) as Timestamp), {
+                hours: 4,
+              })
+        ).length == 0
+    );
   });
 
   setTimeout(() => calendar.value?.scrollToTime('09:00'), 100); // Should figure out why we need this setTimeout...