Minor UI tweaks

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -42,6 +42,7 @@
               :key="block.$id">
               <div
                 class="timeblock"
+                :disabled="beforeNow(new Date(block.end))"
                 :class="selectedBlock?.$id === block.$id ? 'selected' : ''"
                 :style="
                   blockStyles(
@@ -51,8 +52,7 @@
                   )
                 "
                 :id="block.id"
-                @click="selectBlock($event, scope, block)"
-                v-close-popup>
+                @click="selectBlock($event, scope, block)">
                 {{ boats[scope.columnIndex].name }}
                 <br />
                 {{
@@ -96,7 +96,7 @@ import {
 } from '@quasar/quasar-ui-qcalendar';
 import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 
-import { ref, computed, onMounted } from 'vue';
+import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import { useAuthStore } from 'src/stores/auth';
 import { Interval, Reservation } from 'src/stores/schedule.types';
@@ -112,12 +112,19 @@ const selectedBlock = defineModel<Interval | null>();
 const selectedDate = ref(today());
 const { getAvailableIntervals } = useIntervalStore();
 const calendar = ref<QCalendarDay | null>(null);
+const now = ref(new Date());
+let intervalId: string | number | NodeJS.Timeout | undefined;
 
 onMounted(async () => {
   await useBoatStore().fetchBoats();
   await intervalTemplateStore.fetchIntervalTemplates();
+  intervalId = setInterval(function () {
+    now.value = new Date();
+  }, 60000);
 });
 
+onUnmounted(() => clearInterval(intervalId));
+
 function handleSwipe({ ...event }) {
   event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
 }
@@ -157,6 +164,10 @@ function getBoatDisplayName(scope: DayBodyScope) {
     : '';
 }
 
+function beforeNow(time: Date) {
+  return time < now.value || null;
+}
+
 function genericBlockStyle(
   start: Timestamp,
   end: Timestamp,
@@ -177,9 +188,6 @@ function genericBlockStyle(
       1 +
       'px';
   }
-  // if (selectedBlock.value?.id === block.id) {
-  //   s.opacity = '1.0';
-  // }
   return s;
 }
 
@@ -191,11 +199,9 @@ interface DayBodyScope {
 }
 
 function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Interval) {
-  // TODO: Disable blocks before today with updateDisabled and/or comparison
-  if (scope.timestamp.disabled) return false;
-  selectedBlock.value === block
-    ? (selectedBlock.value = null)
-    : (selectedBlock.value = block);
+  if (scope.timestamp.disabled || new Date(block.end) < new Date())
+    return false;
+  selectedBlock.value = block;
 }
 
 const boatReservations = computed((): Record<string, Reservation[]> => {