Refinements to date handling in booking form

quasar.config.js

@@ -84,11 +84,11 @@ module.exports = configure(function (/* ctx */) {
       port: 4000,
       strictport: true,
       // For reverse-proxying via haproxy
-      hmr: {
+      // hmr: {
-        clientPort: 443,
+      //   clientPort: 443,
-        protocol: 'wss',
+      //   protocol: 'wss',
-        timeout: 0,
+      //   timeout: 0,
-      },
+      // },
     },
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework

src/components/ResourceScheduleViewerComponent.vue

@@ -24,80 +24,115 @@
       />
     </q-btn-group>
   </div>
-  <div class="row justify-center">
+  <q-calendar-month
-    <div style="display: flex; max-width: 1024px; width: 100%">
+    ref="calendar"
-      <q-calendar-resource
+    v-model="selectedDate"
-        ref="calendar"
+    animated
-        v-model="selectedDate"
+    bordered
-        :model-resources="boatStore.boats"
+    mini-mode
-        resource-key="id"
+    date-type="rounded"
-        resource-label="name"
+    @change="onChange"
-        :interval-start="6"
+    @moved="onMoved"
-        :interval-count="12"
+    @click-date="onClickDate"
-        animated
+  />
-        bordered
+  <div style="float: right; display: flex; max-width: 1024px; width: 100%">
-        @change="onChange"
+    <q-calendar-resource
-        @moved="onMoved"
+      ref="calendar"
-        @resource-expanded="onResourceExpanded"
+      v-model="selectedDate"
-        @click-date="onClickDate"
+      :model-resources="boatStore.boats"
-        @click-time="onClickTime"
+      resource-key="id"
-        @click-resource="onClickResource"
+      resource-label="name"
-        @click-head-resources="onClickHeadResources"
+      :interval-start="6"
-        @click-interval="onClickInterval"
+      :interval-count="18"
-      >
+      cell-width="64"
-        <template #resource-intervals="{ scope }">
+      resource-min-height="40"
-          <template v-for="(event, index) in getEvents(scope)" :key="index">
+      animated
-            <q-badge
+      bordered
-              outline
+      @change="onChange"
-              color="primary"
+      @moved="onMoved"
-              :label="event.title"
+      @resource-expanded="onResourceExpanded"
-              :style="getStyle(event)"
+      @click-date="onClickDate"
-            />
+      @click-time="onClickTime"
-          </template>
+      @click-resource="onClickResource"
+      @click-head-resources="onClickHeadResources"
+      @click-interval="onClickInterval"
+    >
+      <template #resource-intervals="{ scope }">
+        <template v-for="(event, index) in getEvents(scope)" :key="index">
+          <q-badge outline :label="event.title" :style="getStyle(event)" />
         </template>
-      </q-calendar-resource>
+      </template>
-    </div>
+    </q-calendar-resource>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { QCalendarResource, today } from '@quasar/quasar-ui-qcalendar';
+import {
+  QCalendarResource,
+  TimestampOrNull,
+  today,
+  parseDate,
+} from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
-import { useBookingStore } from 'src/stores/booking';
+import { useScheduleStore } from 'src/stores/schedule';
-
+import { date } from 'quasar';
-const calendar = ref();
-const boatStore = useBoatStore();
-const bookingStore = useBookingStore();
 
 type ResourceIntervalScope = {
   resource: Boat;
   intervals: [];
-  timeStartPosX(start: string): number;
+  timeStartPosX(start: TimestampOrNull): number;
   timeDurationWidth(duration: number): number;
 };
 
+const statusLookup = {
+  tentative: ['#f2c037', 'white'],
+  confirmed: ['#14539a', 'white'],
+  pending: ['white', 'grey'],
+};
+
+const calendar = ref();
+const boatStore = useBoatStore();
+const scheduleStore = useScheduleStore();
 const selectedDate = ref(today());
+
 function getEvents(scope: ResourceIntervalScope) {
-  const resourceEvents = bookingStore.bookings[scope.resource.id];
+  const resourceEvents = scheduleStore.getBoatReservations(
-  return resourceEvents.map((event) => ({
+    scope.resource.id,
-    left: scope.timeStartPosX(event.start),
+    date.extractDate(selectedDate.value, 'YYYY-MM-DD')
-    width: scope.timeDurationWidth(event.duration),
+  );
-    title: event.title,
+
-  }));
+  return resourceEvents.map((event) => {
+    return {
+      left: scope.timeStartPosX(parseDate(event.start)),
+      width: scope.timeDurationWidth(
+        date.getDateDiff(event.end, event.start, 'minutes')
+      ),
+      title: event.user,
+      status: event.status,
+    };
+  });
 }
 
-function getStyle(event: { left: number; width: number; title: string }) {
+function getStyle(event: {
+  left: number;
+  width: number;
+  title: string;
+  status: 'tentative' | 'confirmed' | 'pending';
+}) {
   return {
     position: 'absolute',
-    background: 'white',
+    background: event.status ? statusLookup[event.status][0] : 'white',
+    color: event.status ? statusLookup[event.status][1] : '#14539a',
     left: `${event.left}px`,
     width: `${event.width}px`,
-    height: '40px',
+    height: '32px',
     overflow: 'hidden',
   };
 }
 
+const emit = defineEmits(['onClickDate', 'onClickTime']);
+
 function onToday() {
   calendar.value.moveToToday();
 }
@@ -107,28 +142,17 @@ function onPrev() {
 function onNext() {
   calendar.value.next();
 }
-function onMoved(data) {
-  console.log('onMoved', data);
-}
-function onChange(data) {
-  console.log('onChange', data);
-}
-function onResourceExpanded(data) {
-  console.log('onResourceExpanded', data);
-}
 function onClickDate(data) {
-  console.log('onClickDate', data);
+  emit('onClickDate', data);
 }
 function onClickTime(data) {
-  console.log('onClickTime', data);
+  emit('onClickTime', data);
-}
-function onClickResource(data) {
-  console.log('onClickResource', data);
-}
-function onClickHeadResources(data) {
-  console.log('onClickHeadResources', data);
-}
-function onClickInterval(data) {
-  console.log('onClickInterval', data);
 }
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const onClickInterval = () => {};
+const onClickHeadResources = onClickInterval;
+const onClickResource = onClickInterval;
+const onResourceExpanded = onClickInterval;
+const onMoved = onClickInterval;
+const onChange = onClickInterval;
 </script>

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>

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++;
-    },
-  },
-});