Minor cosmetic cleanup

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -90,17 +90,13 @@ interface BoatData extends Boat {
 
 const scheduleStore = useScheduleStore();
 const boatStore = useBoatStore();
-const selectedBlock = ref<Timeblock | null>(null);
+const selectedBlock = defineModel<Timeblock | null>();
 const selectedDate = ref(today());
 
 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();
 }
@@ -165,8 +161,9 @@ 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);
+  selectedBlock.value === block
+    ? (selectedBlock.value = null)
+    : (selectedBlock.value = block);
 }
 
 function changeEvent({ start }: { start: string }) {
@@ -194,11 +191,13 @@ const disabledBefore = computed(() => {
 .boat-schedule-table-component
   display: flex
   max-height: 60vh
+  max-width: 98vw
 .reservation
   display: flex
   position: absolute
   justify-content: center
   align-items: center
+  text-align: center
   width: 100%
   opacity: 1
   margin: 0px
@@ -212,6 +211,7 @@ const disabledBefore = computed(() => {
   display: flex
   position: absolute
   justify-content: center
+  text-align: center
   align-items: center
   width: 100%
   opacity: 0.5

src/components/scheduling/boat/CalendarHeaderComponent.vue

@@ -155,7 +155,7 @@ function dayFormatterFunc() {
   position: relative
   width: 100%
   height: 70px
-  background: $primary
+  background: white
    display: flex
    flex-direction: row
    flex: 1 0 100%
@@ -164,6 +164,7 @@ function dayFormatterFunc() {
   overflow: hidden
   border-radius: 3px
   user-select: none
+  margin: 2px 0px 2px
 
 .dates-holder
   position: relative
@@ -186,8 +187,8 @@ function dayFormatterFunc() {
   user-select: none
 
 .direction-button
-  background: $primary
-  color: white
+  background: white
+  color: $primary
   width: 40px
   max-width: 50px !important
 
@@ -212,8 +213,8 @@ function dayFormatterFunc() {
     font-size: 3em
 
 .date-button
-  color: white
-  background: $primary
+  color: $primary
+  background: white
   z-index: 2
   height: 100%
   outline: 0
@@ -236,6 +237,6 @@ function dayFormatterFunc() {
   user-select: none
 
 .selected-date-button
-  color: #3f51b5 !important
-  background: white !important
+  color: white !important
+  background: $primary !important
 </style>

src/pages/schedule/BoatReservationPage.vue

@@ -24,11 +24,12 @@
             Use the calendar to pick a date. Select an available boat and
             timeslot below.
           </q-banner>
-          <BoatScheduleTableComponent @updateBoatTime="updateBoat" />
+          <BoatScheduleTableComponent v-model="timeblock" />
 
           <q-banner
             rounded
             class="bg-warning text-grey-10"
+            style="max-width: 95vw; margin: auto"
             v-if="bookingForm.boat?.defects"
           >
             <template v-slot:avatar>
@@ -79,11 +80,20 @@ import { useScheduleStore } from 'src/stores/schedule';
 import { Reservation, Timeblock } from 'src/stores/schedule.types';
 import BoatScheduleTableComponent from 'src/components/scheduling/boat/BoatScheduleTableComponent.vue';
 
+interface BookingForm {
+  bookingId: string;
+  name?: string;
+  boat?: Boat;
+  startDate?: string;
+  endDate?: string;
+}
+
 const auth = useAuthStore();
 const dateFormat = 'MMM D, YYYY h:mm A';
 const resourceView = ref(true);
 const scheduleStore = useScheduleStore();
-const bookingForm = reactive({
+const timeblock = ref<Timeblock>();
+const bookingForm = ref<BookingForm>({
   bookingId: scheduleStore.getNewId(),
   name: auth.currentUser?.name,
   boat: <Boat | undefined>undefined,
@@ -91,22 +101,21 @@ const bookingForm = reactive({
   endDate: date.formatDate(new Date(), dateFormat),
 });
 
-watch(bookingForm, (b, a) => {
-  const newRes = <Reservation>{
-    id: b.bookingId,
-    user: b.name,
-    resource: b.boat,
-    start: date.extractDate(b.startDate, dateFormat),
-    end: date.extractDate(b.endDate, dateFormat),
-    reservationDate: new Date(),
-    status: 'tentative',
-  };
-  //TODO: Turn this into a validator.
-  scheduleStore.isReservationOverlapped(newRes)
-    ? Dialog.create({ message: 'This booking overlaps another!' })
-    : scheduleStore.addOrCreateReservation(newRes);
+watch(timeblock, (tb_new) => {
+  console.log('Hi');
+  bookingForm.value.boat = useBoatStore().boats.find(
+    (b) => b.$id === tb_new?.boatId
+  );
+  bookingForm.value.startDate = date.formatDate(tb_new?.start, dateFormat);
+  bookingForm.value.endDate = date.formatDate(tb_new?.end, dateFormat);
+  console.log(tb_new);
 });
 
+// //TODO: Turn this into a validator.
+// scheduleStore.isReservationOverlapped(newRes)
+//   ? Dialog.create({ message: 'This booking overlaps another!' })
+//   : scheduleStore.addOrCreateReservation(newRes);
+
 const onReset = () => {
   // TODO
 };
@@ -115,27 +124,27 @@ const onSubmit = () => {
   // TODO
 };
 
-const updateBoat = (block: Timeblock) => {
-  bookingForm.boat = useBoatStore().boats.find((b) => b.$id === block.boatId);
-  bookingForm.startDate = date.formatDate(block.start, dateFormat);
-  bookingForm.endDate = date.formatDate(block.end, dateFormat);
-  console.log(bookingForm.startDate);
-};
 const bookingDuration = computed(() => {
-  const diff = date.getDateDiff(
-    bookingForm.endDate,
-    bookingForm.startDate,
-    'minutes'
-  );
-  return diff <= 0
-    ? 'Invalid'
-    : (diff > 60 ? Math.trunc(diff / 60) + ' hours' : '') +
-        (diff % 60 > 0 ? ' ' + (diff % 60) + ' minutes' : '');
+  if (bookingForm.value.endDate && bookingForm.value.startDate) {
+    const diff = date.getDateDiff(
+      bookingForm.value.endDate,
+      bookingForm.value.startDate,
+      'minutes'
+    );
+    return diff <= 0
+      ? 'Invalid'
+      : (diff > 60 ? Math.trunc(diff / 60) + ' hours' : '') +
+          (diff % 60 > 0 ? ' ' + (diff % 60) + ' minutes' : '');
+  } else {
+    return 0;
+  }
 });
 
 const bookingSummary = computed(() => {
-  return bookingForm.boat && bookingForm.startDate && bookingForm.endDate
-    ? `${bookingForm.boat.name} @ ${bookingForm.startDate} for ${bookingDuration.value}`
+  return bookingForm.value.boat &&
+    bookingForm.value.startDate &&
+    bookingForm.value.endDate
+    ? `${bookingForm.value.boat.name} @ ${bookingForm.value.startDate} for ${bookingDuration.value}`
     : '';
 });
 </script>

src/stores/sampledata/schedule.ts

@@ -82,9 +82,9 @@ export function getSampleReservations(): Reservation[] {
     {
       id: 3,
       user: 'Peter Parker',
-      start: '9:00',
-      end: '12:00',
-      boat: '2',
+      start: '7:00',
+      end: '13:00',
+      boat: '4',
       status: 'tentative',
     },
     {

src/stores/schedule.ts

@@ -81,9 +81,12 @@ export const useScheduleStore = defineStore('schedule', () => {
     return isResourceTimeOverlapped(res.resource, res.start, res.end);
   };
 
-  const getNewId = () => {
+  const getNewId = (): string => {
+    return [...Array(20)]
+      .map(() => Math.floor(Math.random() * 16).toString(16))
+      .join('');
     // Trivial placeholder
-    return Math.max(...reservations.value.map((item) => item.id)) + 1;
+    //return Math.max(...reservations.value.map((item) => item.id)) + 1;
   };
 
   const addOrCreateReservation = (reservation: Reservation) => {

src/stores/schedule.types.ts

@@ -2,7 +2,7 @@ import type { Boat } from './boat';
 
 export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
 export interface Reservation {
-  id: number;
+  id: string;
   user: string;
   start: Date;
   end: Date;