More work on timeblocks

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -14,18 +14,21 @@
         interval-start="06:00"
         :short-interval-label="true"
         v-model="selectedDate"
-        :column-count="boats.length"
-        @change="scrollToEvent()"
+        :column-count="boatData.length"
+        @change="changeEvent"
         v-touch-swipe.left.right="handleSwipe"
       >
         <template #head-day="{ scope }">
           <div style="text-align: center; font-weight: 800">
-            {{ boats[scope.columnIndex].displayName }}
+            {{ boatData[scope.columnIndex].displayName }}
           </div>
         </template>
 
         <template #day-body="{ scope }">
-          <div v-for="block in blocklist" :key="block.id">
+          <div
+            v-for="block in boatData[scope.columnIndex].blocks"
+            :key="block.id"
+          >
             <div
               class="timeblock"
               :style="
@@ -54,24 +57,26 @@ import {
 } from '@quasar/quasar-ui-qcalendar';
 import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 
-import { ref, reactive, computed } from 'vue';
-import { useBoatStore } from 'src/stores/boat';
-import { Timeblock, useScheduleStore } from 'src/stores/schedule';
-import { TouchSwipeValue } from 'quasar';
+import { ref, computed } from 'vue';
+import { Boat, useBoatStore } from 'src/stores/boat';
+import { useScheduleStore } from 'src/stores/schedule';
+import { Reservation, Timeblock } from 'src/stores/schedule.types';
+
+interface BoatData extends Boat {
+  blocks?: Timeblock[];
+}
 
 const scheduleStore = useScheduleStore();
 const boatStore = useBoatStore();
 const selectedBlock = ref<Timeblock | null>(null);
 const selectedDate = ref(today());
+const reservation = ref<Reservation | null>(null);
 
-const blocklist = reactive<Timeblock[]>(
-  scheduleStore.getTimeblocksForDate(parsed(today()) as Timestamp)
-);
-const boats = boatStore.boats;
+const boatData = ref<BoatData[]>(boatStore.boats);
 
 const calendar = ref<QCalendarDay | null>(null);
 
-function handleSwipe(event: Event) {
+function handleSwipe({ ...event }) {
   event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
 }
 function blockStyles(
@@ -84,16 +89,26 @@ function blockStyles(
     height: '',
     opacity: '',
   };
-  if (timeStartPos && timeDurationHeight) {
-    s.top = timeStartPos(block.start.time) + 'px';
+  if (block && timeStartPos && timeDurationHeight) {
+    s.top = timeStartPos(parsed(block.start)?.time || '00:00') + 'px';
     s.height =
-      timeDurationHeight(
-        diffTimestamp(block.start, block.end, false) / 1000 / 60
-      ) + 'px';
-  }
-  if (selectedBlock.value?.id === block.id) {
-    s.opacity = '1.0';
+      parseInt(
+        timeDurationHeight(
+          diffTimestamp(
+            parsed(block.start) as Timestamp,
+            parsed(block.end) as Timestamp,
+            false
+          ) /
+            1000 /
+            60
+        )
+      ) -
+      1 +
+      'px';
   }
+  // if (selectedBlock.value?.id === block.id) {
+  //   s.opacity = '1.0';
+  // }
   return s;
 }
 
@@ -109,38 +124,42 @@ function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) {
   selectedBlock.value = block;
 }
 
-function scrollToEvent() {
+function changeEvent({ start }: { start: string }) {
+  const newBlocks = scheduleStore.getTimeblocksForDate(start);
+  boatData.value.map((b) => {
+    return (b.blocks = newBlocks.filter((block) => block.boatId === b.$id));
+  });
   setTimeout(() => calendar.value?.scrollToTime('09:00'), 10); // Should figure out why we need this setTimeout...
 }
 
 const disabledBefore = computed(() => {
-  let ts = parseTimestamp(today());
-  ts = addToDate(ts, { day: -1 });
-  return ts.date;
+  const todayTs = parseTimestamp(today()) as Timestamp;
+  return addToDate(todayTs, { day: -1 }).date;
 });
 </script>
 
 <style lang="sass">
 .boat-schedule-table-component
   display: flex
-  height: 60vh
+  max-height: 60vh
 .timeblock
   display: flex
   position: absolute
   justify-content: center
   align-items: center
-  width: 100%
-  opacity: 0.25
-  margin: 0 1px
+  width: 99%
+  opacity: 0.5
+  margin: 0px
   text-overflow: ellipsis
-  overflow: hidden
   font-size: 0.8em
   cursor: pointer
   background: $primary
   color: white
-  border: 2px solid black
+  border: 1px solid black
 .selected
   opacity: 1 !important
 .q-calendar-day__interval--text
   font-size: 0.8em
+.q-calendar-day__day.q-current-day
+  padding: 1px
 </style>