Fix login bug. Improve reservations

src/pages/schedule/BoatReservationPage.vue

@@ -1,7 +1,7 @@
 <template>
   <q-page>
     <q-list>
-      <q-form @submit="onSubmit" @reset="onReset" class="q-gutter-sm">
+      <q-form @reset="onReset" class="q-gutter-sm">
         <q-item>
           <q-item-section :avatar="true">
             <q-icon name="person"
@@ -45,52 +45,41 @@
               </li>
             </ol>
           </q-banner>
-          <!-- <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"
+              label="Next: Booking Details"
               @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"
+          label="Booking Details"
           default-opened
-          ><q-banner v-if="bookingForm.boat"
-            >Passengers:
-            {{ bookingForm.members.length + bookingForm.guests.length }} /
-            {{ bookingForm.boat.maxPassengers }}</q-banner
-          >
-          <q-item
-            class="q-my-sm"
-            v-for="passenger in [...bookingForm.members, ...bookingForm.guests]"
-            :key="passenger.name"
-          >
-            <q-item-section avatar>
-              <q-avatar color="primary" text-color="white" size="sm">
-                {{
-                  passenger.name
-                    .split(' ')
-                    .map((i) => i.charAt(0))
-                    .join('')
-                    .toUpperCase()
-                }}
-              </q-avatar>
-            </q-item-section>
-            <q-item-section>{{ passenger.name }}</q-item-section>
-            <q-item-section side>
-              <q-btn color="negative" flat dense round icon="cancel" />
-            </q-item-section>
-          </q-item>
-          <q-separator />
-        </q-expansion-item> -->
+        >
+          <div class="row">
+            <div class="col-auto">
+              <q-select
+                filled
+                v-model="bookingForm.reason"
+                :options="reason_options"
+                label="Reason for sail"
+              />
+            </div>
+          </div>
+        </q-expansion-item>
 
         <q-item-section>
-          <q-btn label="Submit" type="submit" color="primary" />
+          <q-btn
+            label="Submit"
+            type="submit"
+            @click="onSubmit"
+            color="primary"
+          />
         </q-item-section> </q-form
     ></q-list>
   </q-page>
@@ -113,22 +102,25 @@ interface BookingForm {
   boat?: Boat;
   startDate?: string;
   endDate?: string;
+  reason: string;
   members: { name: string }[];
   guests: { name: string }[];
 }
 
+const reason_options = ['Open Sail', 'Private Sail', 'Racing', 'Other'];
+
 const auth = useAuthStore();
-const dateFormat = 'MMM D, YYYY h:mm A';
 const resourceView = ref(true);
 const interval = ref<Interval>();
 const bookingForm = ref<BookingForm>({
   bookingId: getNewId(),
   name: auth.currentUser?.name,
   boat: <Boat | undefined>undefined,
-  startDate: date.formatDate(new Date(), dateFormat),
-  endDate: date.formatDate(new Date(), dateFormat),
-  members: [{ name: 'Karen Henrikso' }, { name: "Rich O'hare" }],
-  guests: [{ name: 'Bob Barker' }, { name: 'Taylor Swift' }],
+  startDate: '',
+  endDate: '',
+  reason: 'Open Sail',
+  members: [],
+  guests: [],
 });
 const router = useRouter();
 const reservationStore = useReservationStore();
@@ -138,11 +130,8 @@ watch(interval, (new_interval) => {
   bookingForm.value.boat = useBoatStore().boats.find(
     (b) => b.$id === new_interval?.boatId
   );
-  bookingForm.value.startDate = date.formatDate(
-    new_interval?.start,
-    dateFormat
-  );
-  bookingForm.value.endDate = date.formatDate(new_interval?.end, dateFormat);
+  bookingForm.value.startDate = new_interval?.start;
+  bookingForm.value.endDate = new_interval?.end;
 });
 
 const onReset = () => {
@@ -150,6 +139,7 @@ const onReset = () => {
 };
 
 const onSubmit = () => {
+  console.log('SUBMIT!');
   const booking = bookingForm.value;
   if (
     !(booking.boat && booking.startDate && booking.endDate && auth.currentUser)
@@ -163,9 +153,11 @@ const onSubmit = () => {
     end: booking.endDate,
     user: auth.currentUser.$id,
     status: 'confirmed',
+    reason: booking.reason,
   };
+  console.log(reservation);
   // TODO: Fix this.  It will always look successful
-  reservationStore.createReservation(reservation);
+  reservationStore.createReservation(reservation); // Probably should pass the notify as a callback to the reservation creation.
   $q.notify({
     color: 'green-4',
     textColor: 'white',
@@ -195,7 +187,9 @@ const bookingSummary = computed(() => {
   return bookingForm.value.boat &&
     bookingForm.value.startDate &&
     bookingForm.value.endDate
-    ? `${bookingForm.value.boat.name} @ ${bookingForm.value.startDate} for ${bookingDuration.value}`
+    ? `${bookingForm.value.boat.name} @ ${new Date(
+        bookingForm.value.startDate
+      ).toLocaleString()} for ${bookingDuration.value}`
     : '';
 });
 </script>