Minor UI tweaks

src/components/BoatReservationComponent.vue

@@ -5,7 +5,7 @@
       class="col-lg-4 col-md-6 col-sm-8 col-xs-12">
       <q-card-section>
         <div class="text-h5 q-mt-none q-mb-xs">
-          {{ reservation?.value ? 'Modify Booking' : 'New Booking' }}
+          {{ reservation ? 'Modify Booking' : 'New Booking' }}
         </div>
         <div class="text-caption text-grey-8">for: {{ bookingName }}</div>
       </q-card-section>
@@ -98,11 +98,15 @@
         </q-item>
       </q-list>
       <q-card-actions align="right">
+        <q-btn
+          label="Delete"
+          color="negative"
+          v-if="reservation?.$id"
+          @click="onDelete" />
         <q-btn
           label="Reset"
           @click="onReset"
-          color="secondary"
-          size="md" />
+          color="secondary" />
         <q-btn
           label="Submit"
           @click="onSubmit"
@@ -112,7 +116,9 @@
     <q-dialog
       v-model="boatSelect"
       full-width>
-      <BoatScheduleTableComponent v-model="bookingForm.interval" />
+      <BoatScheduleTableComponent
+        :model-value="bookingForm.interval"
+        @update:model-value="updateInterval" />
     </q-dialog>
   </div>
 </template>
@@ -174,6 +180,11 @@ watch(reservation, (newReservation) => {
   }
 });
 
+const updateInterval = (interval: Interval) => {
+  bookingForm.value.interval = interval;
+  boatSelect.value = false;
+};
+
 const bookingDuration = computed((): { hours: number; minutes: number } => {
   if (bookingForm.value.interval?.start && bookingForm.value.interval?.end) {
     const start = new Date(bookingForm.value.interval.start).getTime();
@@ -195,6 +206,10 @@ const boat = computed((): Boat | null => {
   return boatStore.getBoatById(boatId);
 });
 
+const onDelete = () => {
+  reservationStore.deleteReservation(reservation.value?.id);
+};
+
 const onReset = () => {
   bookingForm.value.interval = null;
   bookingForm.value = reservation.value

src/components/ToolbarComponent.vue

@@ -7,16 +7,16 @@
         round
         icon="menu"
         aria-label="Menu"
-        @click="toggleLeftDrawer"
-      />
+        @click="toggleLeftDrawer" />
 
-      <q-toolbar-title> {{ pageTitle }} </q-toolbar-title>
-      <q-tabs shrink>
-        <q-tab> </q-tab>
-      </q-tabs>
+      <q-toolbar-title>{{ pageTitle }}</q-toolbar-title>
+      <q-space />
+      <div>v2024.6.3.2</div>
     </q-toolbar>
   </q-header>
-  <LeftDrawer :drawer="leftDrawerOpen" @drawer-toggle="toggleLeftDrawer" />
+  <LeftDrawer
+    :drawer="leftDrawerOpen"
+    @drawer-toggle="toggleLeftDrawer" />
 </template>
 
 <script setup lang="ts">

src/components/scheduling/ReservationCardComponent.vue

@@ -58,7 +58,7 @@
       <q-btn
         flat
         @click="cancelReservation()">
-        Cancel
+        Delete
       </q-btn>
     </q-card-actions>
   </q-card>

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[]> => {

src/pages/schedule/BoatScheduleView.vue

@@ -68,7 +68,7 @@ import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
 import { useQuasar } from 'quasar';
 import { formatTime } from 'src/utils/schedule';
 import { useIntervalStore } from 'src/stores/interval';
-import { Interval } from 'src/stores/schedule.types';
+import { Interval, Reservation } from 'src/stores/schedule.types';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 
@@ -78,6 +78,7 @@ const $q = useQuasar();
 const $router = useRouter();
 const { getAvailableIntervals } = useIntervalStore();
 const { selectedDate } = storeToRefs(useIntervalStore());
+const currentUser = useAuthStore().currentUser;
 
 // interface DayScope {
 //   timestamp: Timestamp;
@@ -115,11 +116,19 @@ const getSortedIntervals = (timestamp: Timestamp, boat?: Boat): Interval[] => {
 //   return s;
 // }
 
-const createReservationFromInterval = (interval: Interval) => {
-  $router.push({
-    name: 'reserve-boat',
-    query: { interval: interval.$id },
-  });
+const createReservationFromInterval = (interval: Interval | Reservation) => {
+  if (interval.user) {
+    if (interval.user === currentUser?.$id) {
+      $router.push({ name: 'edit-reservation', params: { id: interval.$id } });
+    } else {
+      return false;
+    }
+  } else {
+    $router.push({
+      name: 'reserve-boat',
+      query: { interval: interval.$id },
+    });
+  }
 };
 
 function handleSwipe({ ...event }) {