Convert type to interface

src/components/ResourceScheduleViewerComponent.vue

@@ -118,7 +118,7 @@ import { date } from 'quasar';
 import { computed } from 'vue';
 import type { StatusTypes } from 'src/stores/schedule';
 
-type EventData = {
+interface EventData {
   event: object;
   scope: {
     timestamp: object;
@@ -126,16 +126,16 @@ type EventData = {
     activeDate: boolean;
     droppable: boolean;
   };
-};
+}
 
 const durations = [1, 1.5, 2, 2.5, 3, 3.5, 4];
 
-type ResourceIntervalScope = {
+interface ResourceIntervalScope {
   resource: Boat;
   intervals: [];
   timeStartPosX(start: TimestampOrNull): number;
   timeDurationWidth(duration: number): number;
-};
+}
 
 const statusLookup = {
   confirmed: ['#14539a', 'white'],

src/components/scheduling/BoatSelection.vue

@@ -20,7 +20,7 @@ import { computed } from 'vue';
 import { date } from 'quasar';
 import BoatScheduleTableComponent from './boat/BoatScheduleTableComponent.vue';
 
-type EventData = {
+interface EventData {
   event: object;
   scope: {
     timestamp: object;
@@ -28,7 +28,7 @@ type EventData = {
     activeDate: boolean;
     droppable: boolean;
   };
-};
+}
 
 const calendar = ref();
 const scheduleStore = useScheduleStore();

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -8,6 +8,11 @@
         flat
         animated
         dense
+        :disabled-before="disabledBefore"
+        interval-height="24"
+        interval-count="18"
+        interval-start="06:00"
+        :short-interval-label="true"
         v-model="selectedDate"
         :column-count="boats.length"
         @change="scrollToEvent()"
@@ -19,10 +24,7 @@
         </template>
 
         <template #day-body="{ scope }">
-          <div
-            v-for="block in scheduleStore.getTimeblocksForDate(scope.timestamp)"
-            :key="block.id"
-          >
+          <div v-for="block in blocklist" :key="block.id">
             <div
               class="timeblock"
               :style="
@@ -45,18 +47,24 @@ import {
   Timestamp,
   diffTimestamp,
   today,
+  parsed,
+  parseTimestamp,
+  addToDate,
 } from '@quasar/quasar-ui-qcalendar';
 import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 
-import { ref } from 'vue';
+import { ref, reactive, computed } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import { Timeblock, useScheduleStore } from 'src/stores/schedule';
 
 const scheduleStore = useScheduleStore();
 const boatStore = useBoatStore();
-
+const selectedBlock = ref<Timeblock | null>(null);
 const selectedDate = ref(today());
 
+const blocklist = reactive<Timeblock[]>(
+  scheduleStore.getTimeblocksForDate(parsed(today()) as Timestamp)
+);
 const boats = boatStore.boats;
 
 const calendar = ref<QCalendarDay | null>(null);
@@ -69,6 +77,7 @@ function blockStyles(
   const s = {
     top: '',
     height: '',
+    opacity: '',
   };
   if (timeStartPos && timeDurationHeight) {
     s.top = timeStartPos(block.start.time) + 'px';
@@ -77,6 +86,9 @@ function blockStyles(
         diffTimestamp(block.start, block.end, false) / 1000 / 60
       ) + 'px';
   }
+  if (selectedBlock.value?.id === block.id) {
+    s.opacity = '1.0';
+  }
   return s;
 }
 
@@ -88,20 +100,25 @@ interface DayBodyScope {
 }
 
 function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) {
-  const target = event.target as HTMLDivElement;
-  target.classList.add('selected');
-  target.textContent = 'selected';
+  // TODO: Disable blocks before today with updateDisabled and/or comparison
+  selectedBlock.value = block;
 }
 
 function scrollToEvent() {
-  setTimeout(() => calendar.value?.scrollToTime('09:00'), 0); // Should figure out why we need this setTimeout...
+  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;
+});
 </script>
 
 <style lang="sass">
 .boat-schedule-table-component
   display: flex
-  height: 40vh
+  height: 60vh
 .timeblock
   display: flex
   position: absolute
@@ -119,4 +136,6 @@ function scrollToEvent() {
   border: 2px solid black
 .selected
   opacity: 1 !important
+.q-calendar-day__interval--text
+  font-size: 0.8em
 </style>

src/components/scheduling/boat/CalendarHeaderComponent.vue

@@ -17,13 +17,13 @@
             @click="selectedDate = day.date"
           >
             <span class="q-calendar__focus-helper" tabindex="-1" />
-            <div style="width: 100%">
+            <div style="width: 100%; font-size: 0.9em">
               {{ monthFormatter(day, true) }}
             </div>
-            <div style="width: 100%; font-size: 16px; font-weight: 700">
+            <div style="width: 100%; font-size: 1.2em; font-weight: 700">
               {{ dayFormatter(day, false) }}
             </div>
-            <div style="width: 100%; font-size: 10px">
+            <div style="width: 100%; font-size: 1em">
               {{ weekdayFormatter(day, true) }}
             </div>
           </button>