Booking

src/components/LeftDrawer.vue

@@ -9,13 +9,28 @@
     <q-scroll-area class="fit">
       <q-list padding class="menu-list">
         <template v-for="link in enabledLinks" :key="link.name">
-          <q-item clickable v-ripple :to="link.to">
+          <!-- TODO: Template this to be DRY --><q-item
+            clickable
+            v-ripple
+            :to="link.to"
+          >
             <q-item-section avatar>
               <q-icon :name="link.icon" />
             </q-item-section>
 
             <q-item-section> {{ link.name }} </q-item-section>
           </q-item>
+          <q-list v-if="link.sublinks">
+            <div v-for="sublink in link.sublinks" :key="sublink.name">
+              <q-item clickable v-ripple :to="sublink.to" class="q-ml-md">
+                <q-item-section avatar>
+                  <q-icon :name="sublink.icon" />
+                </q-item-section>
+
+                <q-item-section> {{ sublink.name }} </q-item-section>
+              </q-item>
+            </div></q-list
+          >
         </template>
         <q-item clickable v-ripple @click="logout()">
           <q-item-section avatar><q-icon name="logout" /></q-item-section

src/pages/BoatPage.vue

@@ -7,11 +7,13 @@
 
 <script lang="ts" setup>
 import BoatPreviewComponent from 'src/components/boat/BoatPreviewComponent.vue';
-import { ref } from 'vue';
+import { onMounted } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import ToolbarComponent from 'src/components/ToolbarComponent.vue';
+import { storeToRefs } from 'pinia';
 
 const boatStore = useBoatStore();
-boatStore.fetchBoats();
+const { boats } = storeToRefs(boatStore);
-const boats = ref(useBoatStore().boats);
+
+onMounted(() => boatStore.fetchBoats());
 </script>

src/pages/schedule/BoatReservationPage.vue

@@ -24,7 +24,7 @@
             Use the calendar to pick a date. Select an available boat and
             timeslot below.
           </q-banner>
-          <BoatScheduleTableComponent v-model="timeblock" />
+          <BoatScheduleTableComponent v-model="interval" />
 
           <q-banner
             rounded
@@ -45,7 +45,7 @@
               </li>
             </ol>
           </q-banner>
-          <q-card-section>
+          <!-- <q-card-section>
             <q-btn
               color="primary"
               class="full-width"
@@ -53,9 +53,9 @@
               icon-right="keyboard_arrow_down"
               label="Next: Crew & Passengers"
               @click="resourceView = false"
-          /></q-card-section>
+          /></q-card-section> -->
         </q-expansion-item>
-        <q-expansion-item
+        <!-- <q-expansion-item
           expand-separator
           icon="people"
           label="Crew and Passengers"
@@ -87,7 +87,7 @@
             </q-item-section>
           </q-item>
           <q-separator />
-        </q-expansion-item>
+        </q-expansion-item> -->
 
         <q-item-section>
           <q-btn label="Submit" type="submit" color="primary" />
@@ -100,10 +100,12 @@
 import { ref, computed, watch } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 import { Boat, useBoatStore } from 'src/stores/boat';
-import { date } from 'quasar';
+import { date, useQuasar } from 'quasar';
-import { Interval } from 'src/stores/schedule.types';
+import { Interval, Reservation } from 'src/stores/schedule.types';
 import BoatScheduleTableComponent from 'src/components/scheduling/boat/BoatScheduleTableComponent.vue';
 import { getNewId } from 'src/utils/misc';
+import { useRouter } from 'vue-router';
+import { useReservationStore } from 'src/stores/reservation';
 
 interface BookingForm {
   bookingId: string;
@@ -118,7 +120,7 @@ interface BookingForm {
 const auth = useAuthStore();
 const dateFormat = 'MMM D, YYYY h:mm A';
 const resourceView = ref(true);
-const timeblock = ref<Interval>();
+const interval = ref<Interval>();
 const bookingForm = ref<BookingForm>({
   bookingId: getNewId(),
   name: auth.currentUser?.name,
@@ -128,26 +130,49 @@ const bookingForm = ref<BookingForm>({
   members: [{ name: 'Karen Henrikso' }, { name: "Rich O'hare" }],
   guests: [{ name: 'Bob Barker' }, { name: 'Taylor Swift' }],
 });
+const router = useRouter();
+const reservationStore = useReservationStore();
+const $q = useQuasar();
 
-watch(timeblock, (tb_new) => {
+watch(interval, (new_interval) => {
   bookingForm.value.boat = useBoatStore().boats.find(
-    (b) => b.$id === tb_new?.boatId
+    (b) => b.$id === new_interval?.boatId
   );
-  bookingForm.value.startDate = date.formatDate(tb_new?.start, dateFormat);
+  bookingForm.value.startDate = date.formatDate(
-  bookingForm.value.endDate = date.formatDate(tb_new?.end, dateFormat);
+    new_interval?.start,
+    dateFormat
+  );
+  bookingForm.value.endDate = date.formatDate(new_interval?.end, dateFormat);
 });
 
-// //TODO: Turn this into a validator.
-// scheduleStore.isReservationOverlapped(newRes)
-//   ? Dialog.create({ message: 'This booking overlaps another!' })
-//   : scheduleStore.addOrCreateReservation(newRes);
-
 const onReset = () => {
   // TODO
 };
 
 const onSubmit = () => {
-  // TODO
+  const booking = bookingForm.value;
+  if (
+    !(booking.boat && booking.startDate && booking.endDate && auth.currentUser)
+  ) {
+    // TODO: Make a proper validator
+    return;
+  }
+  const reservation = <Reservation>{
+    resource: booking.boat.$id,
+    start: booking.startDate,
+    end: booking.endDate,
+    user: auth.currentUser.$id,
+    status: 'confirmed',
+  };
+  // TODO: Fix this.  It will always look successful
+  reservationStore.createReservation(reservation);
+  $q.notify({
+    color: 'green-4',
+    textColor: 'white',
+    icon: 'cloud_done',
+    message: 'Submitted',
+  });
+  router.go(-1);
 };
 
 const bookingDuration = computed(() => {

src/pages/schedule/BoatScheduleView.vue

@@ -1,18 +1,20 @@
 <template>
   <q-page padding>
     <div class="subcontent">
-      <!-- <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" /> -->
+      <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" />
-
       <div class="row justify-center">
-        <q-calendar-day
+        <q-calendar-scheduler
           ref="calendar"
           v-model="selectedDate"
-          view="day"
+          v-model:model-resources="boatStore.boats"
-          :max-days="3"
+          resource-key="$id"
+          resource-label="displayName"
+          :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+          view="week"
           bordered
           animated
-          transition-next="slide-left"
+          cell-width="150px"
-          transition-prev="slide-right"
+          day-min-height="50px"
           @change="onChange"
           @moved="onMoved"
           @click-date="onClickDate"
@@ -20,22 +22,11 @@
           @click-interval="onClickInterval"
           @click-head-day="onClickHeadDay"
         >
-          <template
+          <template #day="{ scope }">
-            #day-body="{
+            <div v-for="event in boatReservationEvents(scope)" :key="event.id">
-              scope: { timestamp, timeStartPos, timeDurationHeight },
+              <div v-if="event.start !== undefined" class="booking-event">
-            }"
-          >
-            <template
-              v-for="event in reservationEvents(timestamp)"
-              :key="event.id"
-            >
-              <div
-                v-if="event.start !== undefined"
-                class="booking-event"
-                :style="slotStyle(event, timeStartPos, timeDurationHeight)"
-              >
                 <span class="title q-calendar__ellipsis">
-                  {{ event.user }}
+                  {{ useAuthStore().getUserNameById(event.user) }}
                   <q-tooltip>{{
                     event.start +
                     ' - ' +
@@ -43,9 +34,9 @@
                   }}</q-tooltip>
                 </span>
               </div>
-            </template>
+            </div>
           </template>
-        </q-calendar-day>
+        </q-calendar-scheduler>
       </div>
     </div>
   </q-page>
@@ -53,46 +44,57 @@
 
 <script setup lang="ts">
 import { useReservationStore } from 'src/stores/reservation';
-import { Reservation } from 'src/stores/schedule.types';
+import { onMounted, ref } from 'vue';
-import { ref } from 'vue';
+import { useAuthStore } from 'src/stores/auth';
+
 const reservationStore = useReservationStore();
-import {
+import { getDate, today } from '@quasar/quasar-ui-qcalendar';
-  TimestampOrNull,
+import { QCalendarScheduler } from '@quasar/quasar-ui-qcalendar';
-  getDate,
-  parsed,
-  today,
-} from '@quasar/quasar-ui-qcalendar';
-import { QCalendarDay } from '@quasar/quasar-ui-qcalendar';
-import { date } from 'quasar';
 import { Timestamp } from '@quasar/quasar-ui-qcalendar';
-import { useBoatStore } from 'src/stores/boat';
+import { Boat, useBoatStore } from 'src/stores/boat';
+import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
 
 const selectedDate = ref(today());
 const boatStore = useBoatStore();
+const calendar = ref();
 
-// Method declarations
+interface DayScope {
-
+  timestamp: Timestamp;
-function slotStyle(
+  columnIndex: number;
-  event: Reservation,
+  resource: object;
-  timeStartPos: (time: TimestampOrNull) => string,
+  resourceIndex: number;
-  timeDurationHeight: (minutes: number) => string
+  indentLevel: number;
-) {
+  activeDate: boolean;
-  const s = {
+  droppable: boolean;
-    top: '',
-    height: '',
-    'align-items': 'flex-start',
-  };
-  if (timeStartPos && timeDurationHeight) {
-    s.top = timeStartPos(parsed(event.start)) + 'px';
-    s.height =
-      timeDurationHeight(date.getDateDiff(event.end, event.start, 'minutes')) +
-      'px';
-  }
-  return s;
 }
 
-function reservationEvents(timestamp: Timestamp) {
+onMounted(() => boatStore.fetchBoats());
-  return reservationStore.getReservationsByDate(getDate(timestamp));
+// Method declarations
+
+// function slotStyle(
+//   event: Reservation,
+//   timeStartPos: (time: TimestampOrNull) => string,
+//   timeDurationHeight: (minutes: number) => string
+// ) {
+//   const s = {
+//     top: '',
+//     height: '',
+//     'align-items': 'flex-start',
+//   };
+//   if (timeStartPos && timeDurationHeight) {
+//     s.top = timeStartPos(parsed(event.start)) + 'px';
+//     s.height =
+//       timeDurationHeight(date.getDateDiff(event.end, event.start, 'minutes')) +
+//       'px';
+//   }
+//   return s;
+// }
+
+function boatReservationEvents({ timestamp, resource }: DayScope) {
+  return reservationStore.getReservationsByDate(
+    getDate(timestamp),
+    (resource as Boat).$id
+  );
 }
 function onMoved(data: Event) {
   console.log('onMoved', data);
@@ -112,6 +114,15 @@ function onClickInterval(data: Event) {
 function onClickHeadDay(data: Event) {
   console.log('onClickHeadDay', data);
 }
+function onToday() {
+  calendar.value.moveToToday();
+}
+function onPrev() {
+  calendar.value.prev();
+}
+function onNext() {
+  calendar.value.next();
+}
 </script>
 
 <style lang="sass" scoped>

src/pages/schedule/ManageCalendar.vue

@@ -17,9 +17,8 @@
           :drag-over-func="onDragOver"
           :drag-leave-func="onDragLeave"
           :drop-func="onDrop"
-          :day-min-height="50"
+          day-min-height="50px"
-          :cell-width="150"
+          cell-width="150px"
-          :day-height="0"
         >
           <template #day="{ scope }">
             <div

src/pages/schedule/ScheduleIndexPage.vue

@@ -1,12 +1,12 @@
 <template>
   <q-page padding>
-    <q-item v-for="link in navlinks" :key="link.label">
+    <q-item v-for="link in navlinks" :key="link.name">
       <q-btn
         :icon="link.icon"
-        :color="link.color"
+        color="primary"
         size="1.25em"
         :to="link.to"
-        :label="link.label"
+        :label="link.name"
         rounded
         class="full-width"
         align="left"
@@ -16,24 +16,9 @@
 </template>
 
 <script setup lang="ts">
-const navlinks = [
+import { enabledLinks } from 'src/router/navlinks';
-  {
+
-    icon: 'more_time',
+const navlinks = enabledLinks.find(
-    to: '/schedule/book',
+  (link) => link.name === 'Schedule'
-    label: 'Create a Reservation',
+)?.sublinks;
-    color: 'primary',
-  },
-  {
-    icon: 'calendar_month',
-    to: '/schedule/view',
-    label: 'View Schedule',
-    color: 'primary',
-  },
-  {
-    icon: 'edit_calendar',
-    to: '/schedule/manage',
-    label: 'Manage Calendar',
-    color: 'accent',
-  },
-];
 </script>

src/router/navlinks.ts

@@ -26,6 +26,29 @@ export const links = [
     icon: 'calendar_month',
     front_links: true,
     enabled: true,
+    sublinks: [
+      {
+        name: 'Book',
+        to: '/schedule/book',
+        icon: 'more_time',
+        front_links: false,
+        enabled: true,
+      },
+      {
+        name: 'View',
+        to: '/schedule/view',
+        icon: 'calendar_month',
+        front_links: false,
+        enabled: true,
+      },
+      {
+        name: 'Manage',
+        to: '/schedule/manage',
+        icon: 'edit_calendar',
+        front_links: false,
+        enabled: true,
+      },
+    ],
   },
   {
     name: 'Certifications',
@@ -57,4 +80,11 @@ export const links = [
   },
 ];
 
-export const enabledLinks = links.filter((link) => link.enabled);
+export const enabledLinks = links
+  .filter((link) => link.enabled)
+  .map((link) => {
+    if (link.sublinks) {
+      link.sublinks = link.sublinks.filter((sublink) => sublink.enabled);
+    }
+    return link;
+  });

src/stores/reservation.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import type { Reservation } from './schedule.types';
 import { computed, ref } from 'vue';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
-import { Query } from 'appwrite';
+import { ID, Query } from 'appwrite';
 import { date } from 'quasar';
 import { Timestamp, parseDate, today } from '@quasar/quasar-ui-qcalendar';
 
@@ -42,6 +42,19 @@ export const useReservationStore = defineStore('reservation', () => {
       setDateLoaded(startDate, endDate, undefined);
     }
   };
+  const createReservation = async (reservation: Reservation) => {
+    try {
+      const response = await databases.createDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.reservation,
+        ID.unique(),
+        reservation
+      );
+      reservations.value.set(response.$id, response as Reservation);
+    } catch (e) {
+      console.error('Error creating Reservation: ' + e);
+    }
+  };
 
   // Set the loading state for dates
   const setDateLoaded = (start: Date, end: Date, state: LoadingTypes) => {
@@ -124,6 +137,7 @@ export const useReservationStore = defineStore('reservation', () => {
 
   return {
     getReservationsByDate,
+    createReservation,
     fetchReservationsForDateRange,
     isReservationOverlapped,
     isResourceTimeOverlapped,