Time Select

src/stores/boat.ts

@@ -68,6 +68,14 @@ and rough engine performance.`,
     year: 1989,
     imgsrc: '/tmpimg/capri25.png',
   },
+  {
+    $id: '3',
+    name: 'Just My Imagination',
+    displayName: 'JMI',
+    class: 'Capri 25',
+    year: 1989,
+    imgsrc: '/tmpimg/capri25.png',
+  },
 ];
 
 export const useBoatStore = defineStore('boat', {

src/stores/schedule.ts

@@ -3,7 +3,13 @@ import { ref } from 'vue';
 import { Boat, useBoatStore } from './boat';
 import { date } from 'quasar';
 import { DateOptions } from 'quasar';
-import { Timestamp } from '@quasar/quasar-ui-qcalendar';
+import {
+  Timestamp,
+  parseDate,
+  updateRelative,
+  today,
+  parsed,
+} from '@quasar/quasar-ui-qcalendar';
 
 export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
 export type Reservation = {
@@ -22,26 +28,31 @@ export type Reservation = {
    objects in here? */
 
 export type Timeblock = {
+  id: number;
   start: Timestamp;
   end: Timestamp;
 };
 
 const sampleBlocks = [
   {
-    start: { time: '09:00', hour: 9, minute: 0, hasDay: false, hasTime: true },
-    end: { time: '12:00', hour: 12, minute: 0, hasDay: false, hasTime: true },
+    id: 1,
+    start: { time: '09:00', hour: 9, minute: 0, hasTime: true },
+    end: { time: '11:30', hour: 12, minute: 0, hasTime: true },
   },
   {
-    start: { time: '12:00', hour: 12, minute: 0, hasDay: false, hasTime: true },
-    end: { time: '15:00', hour: 15, minute: 0, hasDay: false, hasTime: true },
+    id: 2,
+    start: { time: '12:00', hour: 12, minute: 0, hasTime: true },
+    end: { time: '15:00', hour: 15, minute: 0, hasTime: true },
   },
   {
-    start: { time: '15:00', hour: 15, minute: 0, hasDay: false, hasTime: true },
-    end: { time: '18:00', hour: 18, minute: 0, hasDay: false, hasTime: true },
+    id: 3,
+    start: { time: '15:00', hour: 15, minute: 0, hasTime: true },
+    end: { time: '18:00', hour: 18, minute: 0, hasTime: true },
   },
   {
-    start: { time: '18:00', hour: 18, minute: 0, hasDay: false, hasTime: true },
-    end: { time: '21:00', hour: 21, minute: 0, hasDay: false, hasTime: true },
+    id: 4,
+    start: { time: '18:00', hour: 18, minute: 0, hasTime: true },
+    end: { time: '21:00', hour: 21, minute: 0, hasTime: true },
   },
 ] as Timeblock[];
 
@@ -128,16 +139,26 @@ export const useScheduleStore = defineStore('schedule', () => {
   const reservations = ref<Reservation[]>(getSampleReservations());
   const timeblocks = sampleBlocks;
 
-  const getTimeblocksForDate = (date: Date): Timeblock[] => timeblocks;
+  const getTimeblocksForDate = (date: Timestamp): Timeblock[] => {
+    return timeblocks.map((t) => {
+      return {
+        // Update all the start/end times with the passed in date
+        ...t,
+        start: { ...date, ...t.start },
+        end: { ...date, ...t.end },
+      };
+    });
+  };
 
   const getBoatReservations = (
-    searchDate: Date,
+    searchDate: Timestamp,
     boat?: string
   ): Reservation[] => {
     return reservations.value.filter((x) => {
+      console.log(searchDate);
       return (
-        ((x.start.getDate() == searchDate.getDate() ||
-          x.end.getDate() == searchDate.getDate()) && // Part of reservation falls on day
+        ((parseDate(x.start)?.date == searchDate.date ||
+          parseDate(x.end)?.date == searchDate.date) && // Part of reservation falls on day
           x.resource != undefined && // A boat is defined
           !boat) ||
         x.resource.$id == boat // A specific boat has been passed, and matches