Refactor Schedules

src/pages/schedule/BoatReservationPage.vue

@@ -2,22 +2,21 @@
   <q-page>
     <q-list>
       <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-sm">
-        <q-input
+        <q-item>
-          bottom-slots
+          <q-item-section :avatar="true">
-          v-model="bookingForm.name"
+            <q-icon name="person"
-          label="Creating reservation for"
+          /></q-item-section>
-          readonly
+          <q-item-section>
-        >
+            <q-item-label> Name: {{ bookingForm.name }} </q-item-label>
-          <template v-slot:prepend>
+          </q-item-section>
-            <q-icon name="person" />
+        </q-item>
-          </template>
-        </q-input>
         <q-expansion-item
           expand-separator
           v-model="resourceView"
           icon="calendar_month"
           label="Boat and Time"
           default-opened
+          class="q-mt-none"
           :caption="bookingSummary"
         >
           <q-separator />

src/stores/sampledata/schedule.ts

@@ -0,0 +1,115 @@
+import { DateOptions, date } from 'quasar';
+import { Boat, useBoatStore } from '../boat';
+import type { StatusTypes, Timeblock, Reservation } from '../schedule.types';
+
+export const weekdayBlocks = [
+  {
+    start: { time: '08:00', hour: 8, minute: 0 },
+    end: { time: '12:00', hour: 12, minute: 0 },
+  },
+  {
+    start: { time: '12:00', hour: 12, minute: 0 },
+    end: { time: '16:00', hour: 16, minute: 0 },
+  },
+  {
+    start: { time: '17:00', hour: 17, minute: 0 },
+    end: { time: '21:00', hour: 21, minute: 0 },
+  },
+] as Timeblock[];
+
+export const weekendBlocks = [
+  {
+    start: { time: '07:00', hour: 7, minute: 0 },
+    end: { time: '10:00', hour: 10, minute: 0 },
+  },
+  {
+    start: { time: '10:00', hour: 10, minute: 0 },
+    end: { time: '13:00', hour: 13, minute: 0 },
+  },
+  {
+    start: { time: '13:00', hour: 13, minute: 0 },
+    end: { time: '16:00', hour: 16, minute: 0 },
+  },
+  {
+    start: { time: '16:00', hour: 16, minute: 0 },
+    end: { time: '19:00', hour: 19, minute: 0 },
+  },
+];
+
+export function getSampleReservations(): Reservation[] {
+  const sampleData = [
+    {
+      id: 1,
+      user: 'John Smith',
+      start: '12:00',
+      end: '15:00',
+      boat: '1',
+      status: 'confirmed',
+    },
+    {
+      id: 2,
+      user: 'Bob Barker',
+      start: '18:00',
+      end: '21:00',
+      boat: '1',
+      status: 'confirmed',
+    },
+    {
+      id: 3,
+      user: 'Peter Parker',
+      start: '9:00',
+      end: '12:00',
+      boat: '2',
+      status: 'tentative',
+    },
+    {
+      id: 4,
+      user: 'Vince McMahon',
+      start: '15:00',
+      end: '18:00',
+      boat: '2',
+      status: 'pending',
+    },
+    {
+      id: 5,
+      user: 'Heather Graham',
+      start: '09:00',
+      end: '12:00',
+      boat: '3',
+      status: 'confirmed',
+    },
+    {
+      id: 6,
+      user: 'Lawrence Fishburne',
+      start: '18:00',
+      end: '21: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]),
+      seconds: 0,
+      milliseconds: 0,
+    };
+  };
+
+  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))),
+      resource: boat,
+      reservationDate: now,
+      status: entry.status as StatusTypes,
+    };
+  });
+}

src/stores/schedule.ts

@@ -1,143 +1,10 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import { Boat, useBoatStore } from './boat';
+import { Boat } from './boat';
-import { date } from 'quasar';
-import { DateOptions } from 'quasar';
 import { Timestamp, parseDate } from '@quasar/quasar-ui-qcalendar';
 
-export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
+import { Reservation, Timeblock } from './schedule.types';
-export interface Reservation {
+import { weekdayBlocks, getSampleReservations } from './sampledata/schedule';
-  id: number;
-  user: string;
-  start: Date;
-  end: Date;
-  resource: Boat;
-  reservationDate: Date;
-  status?: StatusTypes;
-}
-// 24 hrs in advance only 2 weekday, and 1 weekend slot
-// Within 24 hrs, any available slot
-/* TODO: Figure out how best to separate out where qcalendar bits should be.
-   e.g.: Should there be any qcalendar stuff in this store?  Or should we have just JS Date
-   objects in here? */
-
-export interface Timeblock {
-  start: Timestamp;
-  end: Timestamp;
-  selected?: false;
-}
-
-const weekdayBlocks = [
-  {
-    start: { time: '08:00', hour: 8, minute: 0 },
-    end: { time: '12:00', hour: 12, minute: 0 },
-  },
-  {
-    start: { time: '12:00', hour: 12, minute: 0 },
-    end: { time: '16:00', hour: 16, minute: 0 },
-  },
-  {
-    start: { time: '17:00', hour: 17, minute: 0 },
-    end: { time: '21:00', hour: 21, minute: 0 },
-  },
-] as Timeblock[];
-
-const weekendBlocks = [
-  {
-    start: { time: '07:00', hour: 7, minute: 0 },
-    end: { time: '10:00', hour: 10, minute: 0 },
-  },
-  {
-    start: { time: '10:00', hour: 10, minute: 0 },
-    end: { time: '13:00', hour: 13, minute: 0 },
-  },
-  {
-    start: { time: '13:00', hour: 13, minute: 0 },
-    end: { time: '16:00', hour: 16, minute: 0 },
-  },
-  {
-    start: { time: '16:00', hour: 16, minute: 0 },
-    end: { time: '19:00', hour: 19, minute: 0 },
-  },
-];
-
-function getSampleReservations(): Reservation[] {
-  const sampleData = [
-    {
-      id: 1,
-      user: 'John Smith',
-      start: '12:00',
-      end: '15:00',
-      boat: '1',
-      status: 'confirmed',
-    },
-    {
-      id: 2,
-      user: 'Bob Barker',
-      start: '18:00',
-      end: '21:00',
-      boat: '1',
-      status: 'confirmed',
-    },
-    {
-      id: 3,
-      user: 'Peter Parker',
-      start: '9:00',
-      end: '12:00',
-      boat: '2',
-      status: 'tentative',
-    },
-    {
-      id: 4,
-      user: 'Vince McMahon',
-      start: '15:00',
-      end: '18:00',
-      boat: '2',
-      status: 'pending',
-    },
-    {
-      id: 5,
-      user: 'Heather Graham',
-      start: '09:00',
-      end: '12:00',
-      boat: '3',
-      status: 'confirmed',
-    },
-    {
-      id: 6,
-      user: 'Lawrence Fishburne',
-      start: '18:00',
-      end: '21: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]),
-      seconds: 0,
-      milliseconds: 0,
-    };
-  };
-
-  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))),
-      resource: boat,
-      reservationDate: now,
-      status: entry.status as StatusTypes,
-    };
-  });
-}
 
 export const useScheduleStore = defineStore('schedule', () => {
   // TODO: Implement functions to dynamically pull this data.

src/stores/schedule.types.ts

@@ -0,0 +1,24 @@
+import type { Timestamp } from '@quasar/quasar-ui-qcalendar';
+import type { Boat } from './boat';
+
+export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
+export interface Reservation {
+  id: number;
+  user: string;
+  start: Date;
+  end: Date;
+  resource: Boat;
+  reservationDate: Date;
+  status?: StatusTypes;
+}
+// 24 hrs in advance only 2 weekday, and 1 weekend slot
+// Within 24 hrs, any available slot
+/* TODO: Figure out how best to separate out where qcalendar bits should be.
+   e.g.: Should there be any qcalendar stuff in this store?  Or should we have just JS Date
+   objects in here? */
+
+export interface Timeblock {
+  start: Timestamp;
+  end: Timestamp;
+  selected?: false;
+}