Refinements to date handling in booking form

src/pages/schedule/BoatReservationPage.vue

@@ -1,7 +1,7 @@
 <template>
   <q-page padding>
     <q-card>
-      <q-form>
+      <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
         <q-input bottom-slots v-model="bookingForm.name" label="Name" readonly>
           <template v-slot:prepend>
             <q-icon name="person" />
@@ -60,7 +60,33 @@
             </li>
           </ol>
         </q-banner>
-        <q-input v-model="bookingForm.startDate" label="Check-Out" readonly>
+        <q-btn
+          label="View Schedule"
+          color="primary"
+          flat
+          @click="showSchedule = true"
+        >
+          <q-dialog
+            v-model="showSchedule"
+            full-width
+            cover
+            transition-show="scale"
+            transition-hide="scale"
+          >
+            <q-card>
+              <resource-schedule-viewer-component
+                @on-click-date="onClickDate"
+                @on-click-time="onClickTime"
+              />
+            </q-card>
+          </q-dialog>
+        </q-btn>
+        <q-input
+          v-model="bookingForm.startDate"
+          label="Check-Out"
+          label-color="accent"
+          readonly
+        >
           <template v-slot:prepend>
             <q-icon name="event" class="cursor-pointer"> </q-icon>
           </template>
@@ -97,7 +123,12 @@
             </q-time>
           </q-popup-proxy>
         </q-input>
-        <q-input v-model="bookingForm.endDate" label="Check-In" readonly>
+        <q-input
+          v-model="bookingForm.endDate"
+          label="Check-In"
+          label-color="accent"
+          readonly
+        >
           <template v-slot:prepend>
             <q-icon name="event" class="cursor-pointer"> </q-icon>
           </template>
@@ -114,6 +145,7 @@
               v-if="endDateOrTime"
             >
               <div class="row items-center justify-end">
+                <q-btn v-close-popup label="Cancel" color="accent" flat />
                 <q-btn
                   label="Next"
                   color="primary"
@@ -134,7 +166,12 @@
             </q-time>
           </q-popup-proxy>
         </q-input>
-        <div>Booking Duration: {{ bookingDuration }} hours</div>
+        <q-chip icon="timelapse"
+          >Booking Duration: {{ bookingDuration }}</q-chip
+        >
+        <q-item-section>
+          <q-btn label="Submit" type="submit" color="primary" />
+        </q-item-section>
       </q-form>
     </q-card>
   </q-page>
@@ -145,35 +182,63 @@ import { ref, computed } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import { date } from 'quasar';
+import ResourceScheduleViewerComponent from 'src/components/ResourceScheduleViewerComponent.vue';
+import { makeDateTime } from '@quasar/quasar-ui-qcalendar';
 
 const auth = useAuthStore();
 const boats = useBoatStore().boats;
+const dateFormat = 'ddd MMM D, YYYY h:mm A';
 const startDateOrTime = ref(true);
 const endDateOrTime = ref(true);
+const showSchedule = ref(false);
 const bookingForm = ref({
   name: auth.currentUser?.name,
   boat: <Boat | undefined>undefined,
-  startDate: date.formatDate(new Date(), 'ddd MMM D, YYYY h:mm A'),
+  startDate: date.formatDate(new Date(), dateFormat),
   endDate: date.formatDate(
     date.addToDate(new Date(), { hours: 2 }),
-    'ddd MMM D, YYYY h:mm A'
+    dateFormat
   ),
 });
 
+const onReset = () => {
+  // TODO
+};
+
+const onSubmit = () => {
+  // TODO
+};
+
+const onClickDate = (data) => {
+  console.log(data);
+};
+const onClickTime = (data) => {
+  bookingForm.value.boat = data.scope.resource;
+  bookingForm.value.startDate = date.formatDate(
+    date.addToDate(makeDateTime(data.scope.timestamp), { hours: 5 }), // A terrible hack to convert back to EST.  TODO: FIX!!!!
+    dateFormat
+  );
+  showSchedule.value = false;
+  console.log(bookingForm.value.startDate);
+};
 const bookingDuration = computed(() => {
   const diff = date.getDateDiff(
     bookingForm.value.endDate,
     bookingForm.value.startDate,
-    'hours'
+    'minutes'
   );
-  return diff > 0 ? diff : 'Invalid.';
+  return diff <= 0
+    ? 'Invalid'
+    : (diff > 60 ? Math.trunc(diff / 60) + ' hours' : '') +
+        (diff % 60 > 0 ? ' ' + (diff % 60) + ' minutes' : '');
 });
 
 const limitDate = (startDate: string) => {
   return date.isBetweenDates(
     startDate,
     new Date(),
-    date.addToDate(new Date(), { days: 21 })
+    date.addToDate(new Date(), { days: 21 }),
+    { inclusiveFrom: true, inclusiveTo: true, onlyDate: true }
   );
 };
 

src/pages/schedule/BoatScheduleView.vue

@@ -5,4 +5,8 @@
 </template>
 
 <script setup lang="ts">
+import { useScheduleStore } from 'src/stores/schedule';
+
+const scheduleStore = useScheduleStore();
+scheduleStore.loadSampleData();
 </script>