Refinements to date handling in booking form

src/stores/boat.ts

@@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
 // const boatSource = null;
 
 export interface Boat {
-  id: string;
+  id: number;
   name: string;
   class?: string;
   year?: number;
@@ -25,7 +25,7 @@ export interface Boat {
 
 const getSampleData = () => [
   {
-    id: '1',
+    id: 1,
     name: 'ProjectX',
     class: 'J/27',
     year: 1981,
@@ -50,7 +50,7 @@ and rough engine performance.`,
     ],
   },
   {
-    id: '2',
+    id: 2,
     name: 'Take5',
     class: 'J/27',
     year: 1985,
@@ -58,7 +58,7 @@ and rough engine performance.`,
     iconsrc: '/src/assets/take5_avatar32.png',
   },
   {
-    id: '3',
+    id: 3,
     name: 'WeeBeestie',
     class: 'Capri 25',
     year: 1989,

src/stores/booking.ts

@@ -1,41 +0,0 @@
-import { defineStore } from 'pinia';
-import { Boat } from './boat';
-import { reactive } from 'vue';
-
-export type Booking = {
-  start: string;
-  title: string;
-  duration: number;
-  left?: number;
-  width?: number;
-};
-
-export const useBookingStore = defineStore('bookings', () => {
-  const bookings = reactive<{ [key: string]: Booking[] }>({
-    1: [
-      { start: '06:00', title: 'John Smith', duration: 90 },
-      { start: '12:00', title: 'Bob Barker', duration: 60 },
-    ],
-    2: [
-      { start: '08:00', title: 'Peter Parker', duration: 120 },
-      { start: '11:00', title: 'Vince McMahon', duration: 240 },
-    ],
-    3: [
-      { start: '08:00', title: 'Heather Graham', duration: 240 },
-      { start: '14:00', title: 'Lawrence Fishburne', duration: 60 },
-    ],
-  });
-
-  // So nested... Trying to do something perhaps too complicated?
-  // const bookingsForResource = (boatid: string) => (bookings) => {
-  //     return bookings.filter((booking: Booking) => booking.key == boatid )
-  //   }
-  // },
-
-  // actions: {
-  //   increment () {
-  //     this.counter++;
-  //   }
-  // }
-  return { bookings };
-});

src/stores/schedule.ts

@@ -0,0 +1,95 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+import { Boat, useBoatStore } from './boat';
+import { date } from 'quasar';
+import { DateOptions } from 'quasar';
+
+export interface Reservation {
+  user: string;
+  start: Date;
+  end: Date;
+  resource: Boat;
+  reservationDate: Date;
+  status?: string;
+}
+
+function getSampleData(): Reservation[] {
+  const sampleData = [
+    {
+      user: 'John Smith',
+      start: '12:00',
+      end: '14:00',
+      boat: 1,
+      status: 'confirmed',
+    },
+    {
+      user: 'Bob Barker',
+      start: '18:00',
+      end: '20:00',
+      boat: 1,
+      status: 'confirmed',
+    },
+    {
+      user: 'Peter Parker',
+      start: '8:00',
+      end: '10:00',
+      boat: 2,
+      status: 'tentative',
+    },
+    {
+      user: 'Vince McMahon',
+      start: '13:00',
+      end: '17:00',
+      boat: 2,
+      status: 'pending',
+    },
+    {
+      user: 'Heather Graham',
+      start: '06:00',
+      end: '09:00',
+      boat: 3,
+      status: 'confirmed',
+    },
+    { user: 'Lawrence Fishburne', start: '18:00', end: '20:00', boat: 3 },
+  ];
+  const boatStore = useBoatStore();
+  const now = new Date();
+  const splitTime = (x: string): string[] => {
+    return x.split(':');
+  };
+  const makeOpts = (x: string[]): DateOptions => {
+    return { hour: parseInt(x[0]), minute: parseInt(x[1]) };
+  };
+
+  return sampleData.map((entry): Reservation => {
+    const boat = <Boat>boatStore.boats.find((b) => b.id == entry.boat);
+    return {
+      user: entry.user,
+      start: date.adjustDate(now, makeOpts(splitTime(entry.start))),
+      end: date.adjustDate(now, makeOpts(splitTime(entry.end))),
+      resource: boat,
+      reservationDate: now,
+      status: entry.status,
+    };
+  });
+}
+
+export const useScheduleStore = defineStore('schedule', () => {
+  const reservations = ref<Reservation[]>(getSampleData());
+  const getBoatReservations = (
+    boat: number | string,
+    curDate: Date
+  ): Reservation[] => {
+    console.log(reservations.value);
+    return reservations.value.filter((x) => {
+      return (
+        (x.start.getDate() == curDate.getDate() ||
+          x.end.getDate() == curDate.getDate()) &&
+        (typeof boat == 'number'
+          ? x.resource.id == boat
+          : x.resource.name == boat)
+      );
+    });
+  };
+  return { reservations, getBoatReservations };
+});

src/stores/schedule/index.js

@@ -1,12 +0,0 @@
-import { defineStore } from 'pinia';
-import state from './state';
-import * as getters from './getters';
-import * as mutations from './mutations';
-import * as actions from './actions';
-
-export const useScheduleStore = defineStore('schedule', {
-  state,
-  getters,
-  mutations,
-  actions,
-});

src/stores/schedule/schedule.ts

@@ -1,26 +0,0 @@
-import { defineStore } from 'pinia';
-export interface Reservation {
-  user: string;
-  startdate: Date;
-  enddate: Date;
-  resource: string;
-  reservationDate: Date;
-}
-
-export const useScheduleStore = defineStore('schedule', {
-  state: () => ({
-    counter: 0,
-  }),
-
-  getters: {
-    doubleCount(state) {
-      return state.counter * 2;
-    },
-  },
-
-  actions: {
-    increment() {
-      this.counter++;
-    },
-  },
-});