UI Enhancements

src/components/BoatReservationComponent.vue

@@ -163,6 +163,7 @@ watch(reservation, (newReservation) => {
   } else {
     const updatedReservation = {
       ...newReservation,
+      user: auth.currentUser?.$id,
       interval: {
         start: newReservation.start,
         end: newReservation.end,
@@ -191,7 +192,6 @@ const bookingName = computed(() =>
 
 const boat = computed((): Boat | null => {
   const boatId = bookingForm.value.interval?.resource;
-  console.log('Boat Lookup:', boatId);
   return boatStore.getBoatById(boatId);
 });
 

src/components/ResourceScheduleViewerComponent.vue

@@ -12,21 +12,20 @@
           max-width: 350px;
           display: flex;
           justify-content: space-between;
-        "
-      >
+        ">
         <span
           class="q-button"
           style="cursor: pointer; user-select: none"
-          @click="onPrev"
-          >&lt;</span
-        >
+          @click="onPrev">
+          &lt;
+        </span>
         {{ formattedMonth }}
         <span
           class="q-button"
           style="cursor: pointer; user-select: none"
-          @click="onNext"
-          >&gt;</span
-        >
+          @click="onNext">
+          &gt;
+        </span>
       </div>
     </div>
     <div
@@ -35,8 +34,7 @@
         justify-content: center;
         align-items: center;
         flex-wrap: nowrap;
-      "
-    >
+      ">
       <div style="display: flex; width: 100%">
         <q-calendar-month
           ref="calendar"
@@ -48,10 +46,10 @@
           date-type="rounded"
           @change="onChange"
           @moved="onMoved"
-          @click-date="onClickDate"
-        />
-      </div></div
-  ></q-card-section>
+          @click-date="onClickDate" />
+      </div>
+    </div>
+  </q-card-section>
   <q-calendar-resource
     v-model="selectedDate"
     :model-resources="boatStore.boats"
@@ -73,18 +71,25 @@
     @click-time="onClickTime"
     @click-resource="onClickResource"
     @click-head-resources="onClickHeadResources"
-    @click-interval="onClickInterval"
-  >
+    @click-interval="onClickInterval">
     <template #resource-intervals="{ scope }">
-      <template v-for="(event, index) in getEvents(scope)" :key="index">
-        <q-badge outline :label="event.title" :style="getStyle(event)" />
+      <template
+        v-for="(event, index) in getEvents(scope)"
+        :key="index">
+        <q-badge
+          outline
+          :label="event.title"
+          :style="getStyle(event)" />
       </template>
     </template>
 
     <template #resource-label="{ scope: { resource } }">
       <div class="col-12 .col-md-auto">
         {{ resource.displayName }}
-        <q-icon v-if="resource.defects" name="warning" color="warning" />
+        <q-icon
+          v-if="resource.defects"
+          name="warning"
+          color="warning" />
       </div>
     </template>
   </q-calendar-resource>
@@ -97,9 +102,10 @@
       dense
       @update:model-value="onUpdateDuration"
       label="Duration (hours)"
-      stack-label
-      ><template v-slot:append><q-icon name="timelapse" /></template></q-select
-  ></q-card-section>
+      stack-label>
+      <template v-slot:append><q-icon name="timelapse" /></template>
+    </q-select>
+  </q-card-section>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
@@ -117,6 +123,8 @@ import { useReservationStore } from 'src/stores/reservation';
 import { date } from 'quasar';
 import { computed } from 'vue';
 import type { StatusTypes } from 'src/stores/schedule.types';
+import { useIntervalStore } from 'src/stores/interval';
+import { storeToRefs } from 'pinia';
 
 interface EventData {
   event: object;
@@ -146,7 +154,7 @@ const statusLookup = {
 const calendar = ref();
 const boatStore = useBoatStore();
 const reservationStore = useReservationStore();
-const selectedDate = ref(today());
+const { selectedDate } = storeToRefs(useIntervalStore());
 const duration = ref(1);
 
 const formattedMonth = computed(() => {