Updates to booking

src/pages/schedule/BoatReservationPage.vue

@@ -20,7 +20,11 @@
           :caption="bookingSummary"
         >
           <q-separator />
-          <boat-selection />
+          <q-banner :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'">
+            Use the calendar to pick a date. Select an available boat and
+            timeslot below.
+          </q-banner>
+          <BoatScheduleTableComponent @updateBoatTime="updateBoat" />
 
           <q-banner
             rounded
@@ -69,14 +73,14 @@
 <script setup lang="ts">
 import { reactive, ref, computed, watch } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
-import { Boat } from 'src/stores/boat';
+import { Boat, useBoatStore } from 'src/stores/boat';
 import { Dialog, date } from 'quasar';
-import BoatSelection from 'src/components/scheduling/BoatSelection.vue';
-import { makeDateTime } from '@quasar/quasar-ui-qcalendar';
-import { useScheduleStore, Reservation } from 'src/stores/schedule';
+import { useScheduleStore } from 'src/stores/schedule';
+import { Reservation, Timeblock } from 'src/stores/schedule.types';
+import BoatScheduleTableComponent from 'src/components/scheduling/boat/BoatScheduleTableComponent.vue';
 
 const auth = useAuthStore();
-const dateFormat = 'ddd MMM D, YYYY h:mm A';
+const dateFormat = 'MMM D, YYYY h:mm A';
 const resourceView = ref(true);
 const scheduleStore = useScheduleStore();
 const bookingForm = reactive({
@@ -84,15 +88,7 @@ const bookingForm = reactive({
   name: auth.currentUser?.name,
   boat: <Boat | undefined>undefined,
   startDate: date.formatDate(new Date(), dateFormat),
-  endDate: computed(() =>
-    date.formatDate(
-      date.addToDate(bookingForm.startDate, {
-        hours: bookingForm.duration,
-      }),
-      dateFormat
-    )
-  ),
-  duration: 1,
+  endDate: date.formatDate(new Date(), dateFormat),
 });
 
 watch(bookingForm, (b, a) => {
@@ -119,12 +115,10 @@ const onSubmit = () => {
   // TODO
 };
 
-const onClickTime = (data) => {
-  bookingForm.boat = data.scope.resource;
-  bookingForm.startDate = date.formatDate(
-    date.addToDate(makeDateTime(data.scope.timestamp), { hours: 5 }), // A terrible hack to convert back to EST.  TODO: FIX!!!!
-    dateFormat
-  );
+const updateBoat = (block: Timeblock) => {
+  bookingForm.boat = useBoatStore().boats.find((b) => b.$id === block.boatId);
+  bookingForm.startDate = date.formatDate(block.start, dateFormat);
+  bookingForm.endDate = date.formatDate(block.end, dateFormat);
   console.log(bookingForm.startDate);
 };
 const bookingDuration = computed(() => {
@@ -144,13 +138,4 @@ const bookingSummary = computed(() => {
     ? `${bookingForm.boat.name} @ ${bookingForm.startDate} for ${bookingDuration.value}`
     : '';
 });
-
-const limitDate = (startDate: string) => {
-  return date.isBetweenDates(
-    startDate,
-    new Date(),
-    date.addToDate(new Date(), { days: 21 }),
-    { inclusiveFrom: true, inclusiveTo: true, onlyDate: true }
-  );
-};
 </script>