Booking

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/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,