Many tweaks to booking form.

src/stores/schedule.ts

@@ -5,6 +5,7 @@ import { date } from 'quasar';
 import { DateOptions } from 'quasar';
 
 export interface Reservation {
+  id: number;
   user: string;
   start: Date;
   end: Date;
@@ -16,6 +17,7 @@ export interface Reservation {
 function getSampleData(): Reservation[] {
   const sampleData = [
     {
+      id: 1,
       user: 'John Smith',
       start: '12:00',
       end: '14:00',
@@ -23,6 +25,7 @@ function getSampleData(): Reservation[] {
       status: 'confirmed',
     },
     {
+      id: 2,
       user: 'Bob Barker',
       start: '18:00',
       end: '20:00',
@@ -30,6 +33,7 @@ function getSampleData(): Reservation[] {
       status: 'confirmed',
     },
     {
+      id: 3,
       user: 'Peter Parker',
       start: '8:00',
       end: '10:00',
@@ -37,6 +41,7 @@ function getSampleData(): Reservation[] {
       status: 'tentative',
     },
     {
+      id: 4,
       user: 'Vince McMahon',
       start: '13:00',
       end: '17:00',
@@ -44,13 +49,20 @@ function getSampleData(): Reservation[] {
       status: 'pending',
     },
     {
+      id: 5,
       user: 'Heather Graham',
       start: '06:00',
       end: '09:00',
       boat: 3,
       status: 'confirmed',
     },
-    { user: 'Lawrence Fishburne', start: '18:00', end: '20:00', boat: 3 },
+    {
+      id: 6,
+      user: 'Lawrence Fishburne',
+      start: '18:00',
+      end: '20:00',
+      boat: 3,
+    },
   ];
   const boatStore = useBoatStore();
   const now = new Date();
@@ -64,6 +76,7 @@ function getSampleData(): Reservation[] {
   return sampleData.map((entry): Reservation => {
     const boat = <Boat>boatStore.boats.find((b) => b.id == entry.boat);
     return {
+      id: entry.id,
       user: entry.user,
       start: date.adjustDate(now, makeOpts(splitTime(entry.start))),
       end: date.adjustDate(now, makeOpts(splitTime(entry.end))),
@@ -80,7 +93,6 @@ export const useScheduleStore = defineStore('schedule', () => {
     boat: number | string,
     curDate: Date
   ): Reservation[] => {
-    console.log(reservations.value);
     return reservations.value.filter((x) => {
       return (
         (x.start.getDate() == curDate.getDate() ||
@@ -91,5 +103,36 @@ export const useScheduleStore = defineStore('schedule', () => {
       );
     });
   };
-  return { reservations, getBoatReservations };
+
+  const isOverlapped = (res: Reservation) => {
+    const lapped = reservations.value.filter(
+      (entry: Reservation) =>
+        entry.resource == res.resource &&
+        ((entry.start <= res.start && entry.end > res.start) ||
+          (entry.end >= res.end && entry.start <= res.end))
+    );
+    return lapped.length > 0;
+  };
+
+  const getNewId = () => {
+    // Trivial placeholder
+    return Math.max(...reservations.value.map((item) => item.id)) + 1;
+  };
+
+  const addOrCreateReservation = (reservation: Reservation) => {
+    const index = reservations.value.findIndex(
+      (res) => res.id == reservation.id
+    );
+    index != -1
+      ? (reservations.value[index] = reservation)
+      : reservations.value.push(reservation);
+  };
+
+  return {
+    reservations,
+    getBoatReservations,
+    getNewId,
+    addOrCreateReservation,
+    isOverlapped,
+  };
 });