Updates to booking

src/components/scheduling/BoatSelection.vue

@@ -1,15 +0,0 @@
-<template>
-  <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 v-model="reservation" />
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import BoatScheduleTableComponent from './boat/BoatScheduleTableComponent.vue';
-import { Reservation } from 'src/stores/schedule.types';
-
-const reservation = ref<Reservation | null>(null);
-</script>

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -38,7 +38,25 @@
               :id="block.id"
               @click="selectBlock($event, scope, block)"
             >
-              Available
+              {{ boatData[scope.columnIndex].name }}<br />
+              {{ selectedBlock?.id === block.id ? 'Selected' : 'Available' }}
+            </div>
+          </div>
+          <div
+            v-for="r in boatData[scope.columnIndex].reservations"
+            :key="r.id"
+          >
+            <div
+              class="reservation"
+              :style="
+                reservationStyles(
+                  r,
+                  scope.timeStartPos,
+                  scope.timeDurationHeight
+                )
+              "
+            >
+              {{ r.user }}
             </div>
           </div>
         </template>
@@ -55,6 +73,7 @@ import {
   today,
   parsed,
   parseTimestamp,
+  parseDate,
   addToDate,
 } from '@quasar/quasar-ui-qcalendar';
 import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
@@ -66,44 +85,67 @@ import { Reservation, Timeblock } from 'src/stores/schedule.types';
 
 interface BoatData extends Boat {
   blocks?: Timeblock[];
+  reservations?: Reservation[];
 }
 
 const scheduleStore = useScheduleStore();
 const boatStore = useBoatStore();
 const selectedBlock = ref<Timeblock | null>(null);
 const selectedDate = ref(today());
-const reservation = ref<Reservation | null>(null);
 
 const boatData = ref<BoatData[]>(boatStore.boats);
 
 const calendar = ref<QCalendarDay | null>(null);
 
+const emit = defineEmits<{
+  updateBoatTime: [block: Timeblock];
+}>();
+
 function handleSwipe({ ...event }) {
   event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
 }
+function reservationStyles(
+  reservation: Reservation,
+  timeStartPos: (t: string) => string,
+  timeDurationHeight: (d: number) => string
+) {
+  return genericBlockStyle(
+    parseDate(reservation.start) as Timestamp,
+    parseDate(reservation.end) as Timestamp,
+    timeStartPos,
+    timeDurationHeight
+  );
+}
+
 function blockStyles(
   block: Timeblock,
   timeStartPos: (t: string) => string,
   timeDurationHeight: (d: number) => string
+) {
+  return genericBlockStyle(
+    parsed(block.start) as Timestamp,
+    parsed(block.end) as Timestamp,
+    timeStartPos,
+    timeDurationHeight
+  );
+}
+
+function genericBlockStyle(
+  start: Timestamp,
+  end: Timestamp,
+  timeStartPos: (t: string) => string,
+  timeDurationHeight: (d: number) => string
 ) {
   const s = {
     top: '',
     height: '',
     opacity: '',
   };
-  if (block && timeStartPos && timeDurationHeight) {
-    s.top = timeStartPos(parsed(block.start)?.time || '00:00') + 'px';
+  if (timeStartPos && timeDurationHeight) {
+    s.top = timeStartPos(start.time) + 'px';
     s.height =
       parseInt(
-        timeDurationHeight(
-          diffTimestamp(
-            parsed(block.start) as Timestamp,
-            parsed(block.end) as Timestamp,
-            false
-          ) /
-            1000 /
-            60
-        )
+        timeDurationHeight(diffTimestamp(start, end, false) / 1000 / 60)
       ) -
       1 +
       'px';
@@ -124,13 +166,21 @@ interface DayBodyScope {
 function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) {
   // TODO: Disable blocks before today with updateDisabled and/or comparison
   selectedBlock.value = block;
+  emit('updateBoatTime', block);
 }
 
 function changeEvent({ start }: { start: string }) {
   const newBlocks = scheduleStore.getTimeblocksForDate(start);
+  const reservations = scheduleStore.getBoatReservations(
+    parsed(start) as Timestamp
+  );
   boatData.value.map((b) => {
-    return (b.blocks = newBlocks.filter((block) => block.boatId === b.$id));
+    b.blocks = newBlocks.filter((block) => block.boatId === b.$id);
+    b.reservations = reservations.filter(
+      (reservation) => reservation.resource === b
+    ); // TODO: search by id, not item.
   });
+
   setTimeout(() => calendar.value?.scrollToTime('09:00'), 100); // Should figure out why we need this setTimeout...
 }
 
@@ -144,12 +194,26 @@ const disabledBefore = computed(() => {
 .boat-schedule-table-component
   display: flex
   max-height: 60vh
+.reservation
+  display: flex
+  position: absolute
+  justify-content: center
+  align-items: center
+  width: 100%
+  opacity: 1
+  margin: 0px
+  text-overflow: ellipsis
+  font-size: 0.8em
+  cursor: pointer
+  background: $accent
+  color: white
+  border: 1px solid black
 .timeblock
   display: flex
   position: absolute
   justify-content: center
   align-items: center
-  width: 99%
+  width: 100%
   opacity: 0.5
   margin: 0px
   text-overflow: ellipsis