UI Enhancements

src/pages/schedule/BoatScheduleView.vue

@@ -1,10 +1,12 @@
 <template>
   <q-page>
-    <q-card class="row">
+    <div class="col">
       <navigation-bar
         @today="onToday"
         @prev="onPrev"
         @next="onNext" />
+    </div>
+    <div class="col q-ma-sm">
       <q-calendar-scheduler
         ref="calendar"
         v-model="selectedDate"
@@ -16,14 +18,8 @@
         v-touch-swipe.mouse.left.right="handleSwipe"
         :max-days="$q.screen.lt.sm ? 3 : 7"
         animated
-        style="--calendar-resources-width: 2em"
-        day-min-height="50px"
-        @change="onChange"
-        @moved="onMoved"
-        @click-date="onClickDate"
-        @click-time="onClickTime"
-        @click-interval="onClickInterval"
-        @click-head-day="onClickHeadDay">
+        bordered
+        style="--calendar-resources-width: 40px">
         <template #day="{ scope }">
           <div
             v-for="interval in getSortedIntervals(
@@ -31,12 +27,15 @@
               scope.resource
             )"
             :key="interval.$id"
-            class="row q-pb-xs">
+            class="q-pb-xs row"
+            @click="createReservationFromInterval(interval)">
             <q-badge
               multi-line
-              class="col-12"
+              :class="!interval.user ? 'cursor-pointer' : null"
+              class="col-12 q-pa-sm"
               :transparent="interval.user != undefined"
               :color="interval.user ? 'secondary' : 'primary'"
+              :outline="!interval.user"
               :id="interval.id">
               {{
                 interval.user
@@ -44,12 +43,14 @@
                   : 'Available'
               }}
               <br />
-              {{ formatTime(interval.start) }} - {{ formatTime(interval.end) }}
+              {{ formatTime(interval.start) }} to
+              <br />
+              {{ formatTime(interval.end) }}
             </q-badge>
           </div>
         </template>
       </q-calendar-scheduler>
-    </q-card>
+    </div>
   </q-page>
 </template>
 
@@ -59,7 +60,7 @@ import { ref } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 
 const reservationStore = useReservationStore();
-import { getDate, today } from '@quasar/quasar-ui-qcalendar';
+import { getDate } from '@quasar/quasar-ui-qcalendar';
 import { QCalendarScheduler } from '@quasar/quasar-ui-qcalendar';
 import { Timestamp } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
@@ -68,12 +69,15 @@ import { useQuasar } from 'quasar';
 import { formatTime } from 'src/utils/schedule';
 import { useIntervalStore } from 'src/stores/interval';
 import { Interval } from 'src/stores/schedule.types';
+import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
 
-const selectedDate = ref(today());
 const boatStore = useBoatStore();
 const calendar = ref();
 const $q = useQuasar();
+const $router = useRouter();
 const { getAvailableIntervals } = useIntervalStore();
+const { selectedDate } = storeToRefs(useIntervalStore());
 
 // interface DayScope {
 //   timestamp: Timestamp;
@@ -111,6 +115,13 @@ const getSortedIntervals = (timestamp: Timestamp, boat?: Boat): Interval[] => {
 //   return s;
 // }
 
+const createReservationFromInterval = (interval: Interval) => {
+  $router.push({
+    name: 'reserve-boat',
+    query: { interval: interval.$id },
+  });
+};
+
 function handleSwipe({ ...event }) {
   event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
 }
@@ -124,24 +135,6 @@ function boatReservationEvents(
     (resource as Boat).$id
   );
 }
-function onMoved(data: Event) {
-  console.log('onMoved', data);
-}
-function onChange(data: Event) {
-  console.log('onChange', data);
-}
-function onClickDate(data: Event) {
-  console.log('onClickDate', data);
-}
-function onClickTime(data: Event) {
-  console.log('onClickTime', data);
-}
-function onClickInterval(data: Event) {
-  console.log('onClickInterval', data);
-}
-function onClickHeadDay(data: Event) {
-  console.log('onClickHeadDay', data);
-}
 function onToday() {
   calendar.value.moveToToday();
 }
@@ -152,3 +145,10 @@ function onNext() {
   calendar.value.next();
 }
 </script>
+
+<style lang="sass">
+.q-calendar-scheduler__resource
+  background-color: $primary
+  color: white
+  font-weight: bold
+</style>