Refinements to date handling in booking form

2023-11-28 21:03:39 -05:00
parent a3cdbbfbbd
commit aed0462e05
9 changed files with 274 additions and 165 deletions
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -84,11 +84,11 @@ module.exports = configure(function (/* ctx */) {
      port: 4000,
      strictport: true,
      // For reverse-proxying via haproxy
-      hmr: {
-        clientPort: 443,
-        protocol: 'wss',
-        timeout: 0,
-      },
+      // hmr: {
+      //   clientPort: 443,
+      //   protocol: 'wss',
+      //   timeout: 0,
+      // },
    },

    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
--- a/src/components/ResourceScheduleViewerComponent.vue
+++ b/src/components/ResourceScheduleViewerComponent.vue
@@ -24,80 +24,115 @@
      />
    </q-btn-group>
  </div>
-  <div class="row justify-center">
-    <div style="display: flex; max-width: 1024px; width: 100%">
-      <q-calendar-resource
-        ref="calendar"
-        v-model="selectedDate"
-        :model-resources="boatStore.boats"
-        resource-key="id"
-        resource-label="name"
-        :interval-start="6"
-        :interval-count="12"
-        animated
-        bordered
-        @change="onChange"
-        @moved="onMoved"
-        @resource-expanded="onResourceExpanded"
-        @click-date="onClickDate"
-        @click-time="onClickTime"
-        @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
-              color="primary"
-              :label="event.title"
-              :style="getStyle(event)"
-            />
-          </template>
+  <q-calendar-month
+    ref="calendar"
+    v-model="selectedDate"
+    animated
+    bordered
+    mini-mode
+    date-type="rounded"
+    @change="onChange"
+    @moved="onMoved"
+    @click-date="onClickDate"
+  />
+  <div style="float: right; display: flex; max-width: 1024px; width: 100%">
+    <q-calendar-resource
+      ref="calendar"
+      v-model="selectedDate"
+      :model-resources="boatStore.boats"
+      resource-key="id"
+      resource-label="name"
+      :interval-start="6"
+      :interval-count="18"
+      cell-width="64"
+      resource-min-height="40"
+      animated
+      bordered
+      @change="onChange"
+      @moved="onMoved"
+      @resource-expanded="onResourceExpanded"
+      @click-date="onClickDate"
+      @click-time="onClickTime"
+      @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>
-    </div>
+      </template>
+    </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';
-
-const calendar = ref();
-const boatStore = useBoatStore();
-const bookingStore = useBookingStore();
+import { useScheduleStore } from 'src/stores/schedule';
+import { date } from 'quasar';

 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];
-  return resourceEvents.map((event) => ({
-    left: scope.timeStartPosX(event.start),
-    width: scope.timeDurationWidth(event.duration),
-    title: event.title,
-  }));
+  const resourceEvents = scheduleStore.getBoatReservations(
+    scope.resource.id,
+    date.extractDate(selectedDate.value, 'YYYY-MM-DD')
+  );
+
+  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);
-}
-function onClickResource(data) {
-  console.log('onClickResource', data);
-}
-function onClickHeadResources(data) {
-  console.log('onClickHeadResources', data);
-}
-function onClickInterval(data) {
-  console.log('onClickInterval', data);
+  emit('onClickTime', 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>
--- a/src/pages/schedule/BoatReservationPage.vue
+++ b/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 }
  );
 };

--- a/src/pages/schedule/BoatScheduleView.vue
+++ b/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>
--- a/src/stores/boat.ts
+++ b/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,
--- a/src/stores/booking.ts
+++ b/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 };
-});
--- a/src/stores/schedule.ts
+++ b/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 };
+});
--- a/src/stores/schedule/index.js
+++ b/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,
-});
--- a/src/stores/schedule/schedule.ts
+++ b/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++;
-    },
-  },
-});