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>

src/stores/schedule.ts

@@ -3,16 +3,10 @@ import { ref } from 'vue';
 import { Boat, useBoatStore } from './boat';
 import { date } from 'quasar';
 import { DateOptions } from 'quasar';
-import {
-  Timestamp,
-  parseDate,
-  updateRelative,
-  today,
-  parsed,
-} from '@quasar/quasar-ui-qcalendar';
+import { Timestamp, parseDate } from '@quasar/quasar-ui-qcalendar';
 
 export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
-export type Reservation = {
+export interface Reservation {
   id: number;
   user: string;
   start: Date;
@@ -20,42 +14,53 @@ export type Reservation = {
   resource: Boat;
   reservationDate: Date;
   status?: StatusTypes;
-};
+}
 // 24 hrs in advance only 2 weekday, and 1 weekend slot
 // Within 24 hrs, any available slot
 /* 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 = {
-  id: number;
+export interface Timeblock {
   start: Timestamp;
   end: Timestamp;
-};
+  selected?: false;
+}
 
-const sampleBlocks = [
+const weekdayBlocks = [
   {
-    id: 1,
-    start: { time: '09:00', hour: 9, minute: 0, hasTime: true },
-    end: { time: '11:30', hour: 12, minute: 0, hasTime: true },
+    start: { time: '08:00', hour: 8, minute: 0 },
+    end: { time: '12:00', hour: 12, minute: 0 },
   },
   {
-    id: 2,
-    start: { time: '12:00', hour: 12, minute: 0, hasTime: true },
-    end: { time: '15:00', hour: 15, minute: 0, hasTime: true },
+    start: { time: '12:00', hour: 12, minute: 0 },
+    end: { time: '16:00', hour: 16, minute: 0 },
   },
   {
-    id: 3,
-    start: { time: '15:00', hour: 15, minute: 0, hasTime: true },
-    end: { time: '18:00', hour: 18, minute: 0, hasTime: true },
-  },
-  {
-    id: 4,
-    start: { time: '18:00', hour: 18, minute: 0, hasTime: true },
-    end: { time: '21:00', hour: 21, minute: 0, hasTime: true },
+    start: { time: '17:00', hour: 17, minute: 0 },
+    end: { time: '21:00', hour: 21, minute: 0 },
   },
 ] as Timeblock[];
 
+const weekendBlocks = [
+  {
+    start: { time: '07:00', hour: 7, minute: 0 },
+    end: { time: '10:00', hour: 10, minute: 0 },
+  },
+  {
+    start: { time: '10:00', hour: 10, minute: 0 },
+    end: { time: '13:00', hour: 13, minute: 0 },
+  },
+  {
+    start: { time: '13:00', hour: 13, minute: 0 },
+    end: { time: '16:00', hour: 16, minute: 0 },
+  },
+  {
+    start: { time: '16:00', hour: 16, minute: 0 },
+    end: { time: '19:00', hour: 19, minute: 0 },
+  },
+];
+
 function getSampleReservations(): Reservation[] {
   const sampleData = [
     {
@@ -137,7 +142,7 @@ function getSampleReservations(): Reservation[] {
 export const useScheduleStore = defineStore('schedule', () => {
   // TODO: Implement functions to dynamically pull this data.
   const reservations = ref<Reservation[]>(getSampleReservations());
-  const timeblocks = sampleBlocks;
+  const timeblocks = weekdayBlocks;
 
   const getTimeblocksForDate = (date: Timestamp): Timeblock[] => {
     return timeblocks.map((t) => {