Schedule UX tweaks

src/components/ResourceScheduleViewerComponent.vue

@@ -56,9 +56,10 @@
     :model-resources="boatStore.boats"
     resource-key="id"
     resource-label="name"
-    :interval-start="6"
-    :interval-count="18"
-    cell-width="64"
+    :interval-start="12"
+    :interval-count="36"
+    :interval-minutes="30"
+    cell-width="48"
     resource-min-height="40"
     animated
     bordered
@@ -96,15 +97,6 @@
       stack-label
       ><template v-slot:append><q-icon name="timelapse" /></template></q-select
   ></q-card-section>
-  <q-card-section>
-    <q-btn
-      color="primary"
-      class="full-width"
-      icon="keyboard_arrow_down"
-      icon-right="keyboard_arrow_down"
-      label="Next: Crew & Passengers"
-      @click="onCloseSection"
-  /></q-card-section>
 </template>
 
 <script setup lang="ts">
@@ -200,7 +192,7 @@ function getStyle(event: {
   };
 }
 
-const emit = defineEmits(['onClickTime', 'onCloseSection', 'onUpdateDuration']);
+const emit = defineEmits(['onClickTime', 'onUpdateDuration']);
 
 function onPrev() {
   calendar.value.prev();
@@ -215,9 +207,6 @@ function onClickTime(data) {
   // TODO: Add a duration picker, here.
   emit('onClickTime', data);
 }
-function onCloseSection() {
-  emit('onCloseSection');
-}
 function onUpdateDuration(value) {
   emit('onUpdateDuration', value);
 }

src/pages/schedule/BoatReservationPage.vue

@@ -23,32 +23,40 @@
           <q-separator />
           <resource-schedule-viewer-component
             @on-click-time="onClickTime"
-            @on-close-section="() => (resourceView = !resourceView)"
             @on-update-duration="
               (value) => {
                 bookingForm.duration = value;
               }
             "
-        /></q-expansion-item>
-
-        <q-banner
-          rounded
-          class="bg-warning text-grey-10"
-          v-if="bookingForm.boat?.defects"
-        >
-          <template v-slot:avatar>
-            <q-icon name="warning" color="grey-10" />
-          </template>
-          This boat currently has the following notices:
-          <ol>
-            <li
-              v-for="defect in bookingForm.boat.defects"
-              :key="defect.description"
-            >
-              {{ defect.description }}
-            </li>
-          </ol>
-        </q-banner>
+          />
+          <q-banner
+            rounded
+            class="bg-warning text-grey-10"
+            v-if="bookingForm.boat?.defects"
+          >
+            <template v-slot:avatar>
+              <q-icon name="warning" color="grey-10" />
+            </template>
+            {{ bookingForm.boat.name }} currently has the following notices:
+            <ol>
+              <li
+                v-for="defect in bookingForm.boat.defects"
+                :key="defect.description"
+              >
+                {{ defect.description }}
+              </li>
+            </ol>
+          </q-banner>
+          <q-card-section>
+            <q-btn
+              color="primary"
+              class="full-width"
+              icon="keyboard_arrow_down"
+              icon-right="keyboard_arrow_down"
+              label="Next: Crew & Passengers"
+              @click="resourceView = false"
+          /></q-card-section>
+        </q-expansion-item>
         <q-expansion-item
           expand-separator
           icon="people"

src/stores/schedule.ts

@@ -97,6 +97,7 @@ export const useScheduleStore = defineStore('schedule', () => {
       return (
         (x.start.getDate() == curDate.getDate() ||
           x.end.getDate() == curDate.getDate()) &&
+        x.resource != undefined &&
         (typeof boat == 'number'
           ? x.resource.id == boat
           : x.resource.name == boat)
@@ -107,6 +108,7 @@ export const useScheduleStore = defineStore('schedule', () => {
   const isOverlapped = (res: Reservation) => {
     const lapped = reservations.value.filter(
       (entry: Reservation) =>
+        entry.id != res.id &&
         entry.resource == res.resource &&
         ((entry.start <= res.start && entry.end > res.start) ||
           (entry.end >= res.end && entry.start <= res.end))