Updates to booking

src/components/ResourceScheduleViewerComponent.vue

@@ -172,8 +172,8 @@ function monthFormatter() {
 
 function getEvents(scope: ResourceIntervalScope) {
   const resourceEvents = scheduleStore.getBoatReservations(
-    scope.resource.id,
-    date.extractDate(selectedDate.value, 'YYYY-MM-DD')
+    date.extractDate(selectedDate.value, 'YYYY-MM-DD'),
+    scope.resource.$id
   );
 
   return resourceEvents.map((event) => {

src/pages/schedule/BoatScheduleView.vue

@@ -1,12 +1,94 @@
 <template>
   <q-page padding>
-    <!-- content -->
+    <div class="subcontent">
+      <!-- <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" /> -->
+
+      <div class="row justify-center">
+        <div
+          style="display: flex; max-width: 800px; width: 100%; height: 400px"
+        >
+          <q-calendar-day
+            ref="calendar"
+            v-model="selectedDate"
+            view="day"
+            :max-days="3"
+            bordered
+            animated
+            transition-next="slide-left"
+            transition-prev="slide-right"
+            @change="onChange"
+            @moved="onMoved"
+            @click-date="onClickDate"
+            @click-time="onClickTime"
+            @click-interval="onClickInterval"
+            @click-head-intervals="onClickHeadIntervals"
+            @click-head-day="onClickHeadDay"
+          >
+            <template #day-body="{ scope: { timestamp } }">
+              <template
+                v-for="event in scheduleStore.getBoatReservations(
+                  makeDateTime(timestamp)
+                )"
+                :key="event.id"
+              >
+                {{ timestamp }}
+                <div v-if="event.start !== undefined" class="my-event">
+                  <div class="title q-calendar__ellipsis">
+                    {{ event.user }}
+                    <q-tooltip>{{
+                      event.start + ' - ' + event.resource.name
+                    }}</q-tooltip>
+                  </div>
+                </div>
+              </template>
+            </template>
+          </q-calendar-day>
+        </div>
+      </div>
+    </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
 import { useScheduleStore } from 'src/stores/schedule';
-
+import { ref } from 'vue';
 const scheduleStore = useScheduleStore();
-scheduleStore.loadSampleData();
+import { QCalendarDay, today, makeDateTime } from '@quasar/quasar-ui-qcalendar';
+
+const selectedDate = ref(today());
+
+// Use ref to get a reference to the QCalendarDay component
+const calendarRef = ref(QCalendarDay);
+
+// Method declarations
+function onToday() {
+  calendarRef.value.moveToToday();
+}
+function onPrev() {
+  calendarRef.value.prev();
+}
+function onNext() {
+  calendarRef.value.next();
+}
+function onMoved(data) {
+  console.log('onMoved', data);
+}
+function onChange(data) {
+  console.log('onChange', data);
+}
+function onClickDate(data) {
+  console.log('onClickDate', data);
+}
+function onClickTime(data) {
+  console.log('onClickTime', data);
+}
+function onClickInterval(data) {
+  console.log('onClickInterval', data);
+}
+function onClickHeadIntervals(data) {
+  console.log('onClickHeadIntervals', data);
+}
+function onClickHeadDay(data) {
+  console.log('onClickHeadDay', data);
+}
 </script>

src/stores/schedule.ts

@@ -3,11 +3,7 @@ import { ref } from 'vue';
 import { Boat, useBoatStore } from './boat';
 import { date } from 'quasar';
 import { DateOptions } from 'quasar';
-import {
-  Timestamp,
-  parseTimestamp,
-  TimestampArray,
-} from '@quasar/quasar-ui-qcalendar';
+import { Timestamp } from '@quasar/quasar-ui-qcalendar';
 import { timeStamp } from 'console';
 
 export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
@@ -21,6 +17,10 @@ export type Reservation = {
   status?: StatusTypes;
 };
 
+/* 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 type Timeblock = {
   start: Timestamp;
   end: Timestamp;
@@ -52,7 +52,7 @@ function getSampleReservations(): Reservation[] {
       user: 'John Smith',
       start: '12:00',
       end: '15:00',
-      boat: 1,
+      boat: '1',
       status: 'confirmed',
     },
     {
@@ -60,7 +60,7 @@ function getSampleReservations(): Reservation[] {
       user: 'Bob Barker',
       start: '18:00',
       end: '21:00',
-      boat: 1,
+      boat: '1',
       status: 'confirmed',
     },
     {
@@ -68,7 +68,7 @@ function getSampleReservations(): Reservation[] {
       user: 'Peter Parker',
       start: '9:00',
       end: '12:00',
-      boat: 2,
+      boat: '2',
       status: 'tentative',
     },
     {
@@ -76,7 +76,7 @@ function getSampleReservations(): Reservation[] {
       user: 'Vince McMahon',
       start: '15:00',
       end: '18:00',
-      boat: 2,
+      boat: '2',
       status: 'pending',
     },
     {
@@ -84,7 +84,7 @@ function getSampleReservations(): Reservation[] {
       user: 'Heather Graham',
       start: '09:00',
       end: '12:00',
-      boat: 3,
+      boat: '3',
       status: 'confirmed',
     },
     {
@@ -92,7 +92,7 @@ function getSampleReservations(): Reservation[] {
       user: 'Lawrence Fishburne',
       start: '18:00',
       end: '21:00',
-      boat: 3,
+      boat: '3',
     },
   ];
   const boatStore = useBoatStore();
@@ -110,7 +110,7 @@ function getSampleReservations(): Reservation[] {
   };
 
   return sampleData.map((entry): Reservation => {
-    const boat = <Boat>boatStore.boats.find((b) => b.id == entry.boat);
+    const boat = <Boat>boatStore.boats.find((b) => b.$id == entry.boat);
     return {
       id: entry.id,
       user: entry.user,
@@ -131,17 +131,16 @@ export const useScheduleStore = defineStore('schedule', () => {
   const getTimeblocksForDate = (date: Date): Timeblock[] => timeblocks;
 
   const getBoatReservations = (
-    boat: number | string,
-    curDate: Date
+    searchDate: Date,
+    boat?: string
   ): Reservation[] => {
     return reservations.value.filter((x) => {
       return (
-        (x.start.getDate() == curDate.getDate() ||
-          x.end.getDate() == curDate.getDate()) &&
-        x.resource != undefined &&
-        (typeof boat == 'number'
-          ? x.resource.id == boat
-          : x.resource.name == boat)
+        ((x.start.getDate() == searchDate.getDate() ||
+          x.end.getDate() == searchDate.getDate()) && // Part of reservation falls on day
+          x.resource != undefined && // A boat is defined
+          !boat) ||
+        x.resource.$id == boat // A specific boat has been passed, and matches
       );
     });
   };
@@ -153,7 +152,7 @@ export const useScheduleStore = defineStore('schedule', () => {
   ): Reservation[] => {
     const overlapped = reservations.value.filter(
       (entry: Reservation) =>
-        entry.resource.id == resource.id &&
+        entry.resource.$id == resource.$id &&
         entry.start < end &&
         entry.end > start
     );