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) => {
+  boatData.value.map((boat) => {
-    b.blocks = newBlocks.filter((block) => block.boatId === b.$id);
+    boat.reservations = reservations.filter(
-    b.reservations = reservations.filter(
+      (reservation) => reservation.resource === boat
-      (reservation) => reservation.resource === b
+    );
-    ); // TODO: search by id, not item.
+    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...

src/pages/schedule/BoatReservationPage.vue

@@ -100,9 +100,9 @@
 import { ref, computed, watch } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 import { Boat, useBoatStore } from 'src/stores/boat';
-import { Dialog, date } from 'quasar';
+import { date } from 'quasar';
 import { useScheduleStore } from 'src/stores/schedule';
-import { Reservation, Timeblock } from 'src/stores/schedule.types';
+import { Timeblock } from 'src/stores/schedule.types';
 import BoatScheduleTableComponent from 'src/components/scheduling/boat/BoatScheduleTableComponent.vue';
 
 interface BookingForm {

src/stores/boat.ts

@@ -13,7 +13,6 @@ export interface Boat {
   booking?: {
     available: boolean;
     requiredCerts: string[];
-    maxDuration: number;
     maxPassengers: number;
   };
   defects?: {
@@ -33,7 +32,7 @@ const getSampleData = () => [
     year: 1981,
     imgsrc: '/tmpimg/j27.png',
     iconsrc: '/tmpimg/projectx_avatar256.png',
-    booking: { maxPassengers: 8 },
+    booking: { available: true, maxPassengers: 8, requiredCerts: [] },
     defects: [
       {
         type: 'engine',
@@ -60,7 +59,7 @@ and rough engine performance.`,
     year: 1985,
     imgsrc: '/tmpimg/j27.png',
     iconsrc: '/tmpimg/take5_avatar32.png',
-    booking: { maxPassengers: 8 },
+    booking: { available: true, maxPassengers: 8, requiredCerts: [] },
   },
   {
     $id: '3',
@@ -69,7 +68,7 @@ and rough engine performance.`,
     class: 'Capri 25',
     year: 1989,
     imgsrc: '/tmpimg/capri25.png',
-    booking: { maxPassengers: 6 },
+    booking: { available: true, maxPassengers: 6, requiredCerts: [] },
   },
   {
     $id: '4',
@@ -78,7 +77,7 @@ and rough engine performance.`,
     class: 'Capri 25',
     year: 1989,
     imgsrc: '/tmpimg/capri25.png',
-    booking: { maxPassengers: 8 },
+    booking: { available: true, maxPassengers: 8, requiredCerts: [] },
   },
 ];
 

src/stores/sampledata/schedule.ts

@@ -64,7 +64,7 @@ export function getSampleTimeBlocks(): Timeblock[] {
 export function getSampleReservations(): Reservation[] {
   const sampleData = [
     {
-      id: 1,
+      id: '1',
       user: 'John Smith',
       start: '7:00',
       end: '10:00',
@@ -72,7 +72,7 @@ export function getSampleReservations(): Reservation[] {
       status: 'confirmed',
     },
     {
-      id: 2,
+      id: '2',
       user: 'Bob Barker',
       start: '16:00',
       end: '19:00',
@@ -80,7 +80,7 @@ export function getSampleReservations(): Reservation[] {
       status: 'confirmed',
     },
     {
-      id: 3,
+      id: '3',
       user: 'Peter Parker',
       start: '7:00',
       end: '13:00',
@@ -88,7 +88,7 @@ export function getSampleReservations(): Reservation[] {
       status: 'tentative',
     },
     {
-      id: 4,
+      id: '4',
       user: 'Vince McMahon',
       start: '10:00',
       end: '13:00',
@@ -96,7 +96,7 @@ export function getSampleReservations(): Reservation[] {
       status: 'pending',
     },
     {
-      id: 5,
+      id: '5',
       user: 'Heather Graham',
       start: '13:00',
       end: '19:00',
@@ -104,7 +104,7 @@ export function getSampleReservations(): Reservation[] {
       status: 'confirmed',
     },
     {
-      id: 6,
+      id: '6',
       user: 'Lawrence Fishburne',
       start: '13:00',
       end: '16:00',