Many esthetic changes

.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true

.prettierrc

@@ -1,4 +0,0 @@
-{
-  "singleQuote": true,
-  "semi": true
-}

quasar.config.js

@@ -48,7 +48,7 @@ module.exports = configure(function (/* ctx */) {
 
     // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#build
     build: {
-      env: require('dotenv').config({ path: '.env.local' }).parsed,
+      env: require('dotenv').config().parsed,
       target: {
         browser: ['es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1'],
         node: 'node16',

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -1,5 +1,11 @@
 <template>
   <div>
+    <q-card>
+      <q-toolbar>
+        <q-toolbar-title>Select a Boat and Time</q-toolbar-title>
+        <q-btn icon="close" flat round dense v-close-popup />
+      </q-toolbar>
+      <q-separator />
       <CalendarHeaderComponent v-model="selectedDate" />
       <div class="boat-schedule-table-component">
         <QCalendarDay
@@ -29,13 +35,20 @@
                 class="timeblock"
                 :class="selectedBlock?.$id === block.$id ? 'selected' : ''"
                 :style="
-                blockStyles(block, scope.timeStartPos, scope.timeDurationHeight)
+                  blockStyles(
+                    block,
+                    scope.timeStartPos,
+                    scope.timeDurationHeight
+                  )
                 "
                 :id="block.id"
                 @click="selectBlock($event, scope, block)"
+                v-close-popup
               >
                 {{ boats[scope.columnIndex].name }}<br />
-              {{ selectedBlock?.$id === block.$id ? 'Selected' : 'Available' }}
+                {{
+                  selectedBlock?.$id === block.$id ? 'Selected' : 'Available'
+                }}
               </div>
             </div>
             <div
@@ -53,12 +66,13 @@
                 "
               >
                 {{ getUserName(reservation.user) || 'loading...' }}<br />
-              {{ reservation.reason }}
+                <q-chip icon="key">{{ reservation.reason }}</q-chip>
               </div>
             </div>
           </template>
         </QCalendarDay>
-    </div>
+      </div></q-card
+    >
   </div>
 </template>
 

src/pages/schedule/BoatReservationPage.vue

@@ -1,92 +1,119 @@
 <template>
-  <q-page>
+  <div class="q-pa-md row q-gutter-sm">
-    <q-list>
+    <q-card
-      <q-form @reset="onReset" class="q-gutter-sm">
+      flat
-        <q-item>
+      bordered
-          <q-item-section :avatar="true">
+      class="col-md-4 col-sm-8 col-xs-12">
-            <q-icon name="person"
+      <q-card-section>
-          /></q-item-section>
+        <div class="text-h5 q-mt-none q-mb-xs">New Booking</div>
+        <div class="text-caption text-grey-8">for: {{ bookingForm.name }}</div>
+      </q-card-section>
+      <q-separator />
+      <q-item
+        clickable
+        @click="boatSelect = true">
+        <q-item-section avatar>
+          <q-icon
+            color="primary"
+            name="event" />
+        </q-item-section>
         <q-item-section>
-            <q-item-label> Name: {{ bookingForm.name }} </q-item-label>
+          <q-card v-if="bookingForm.boat">
+            <q-card-section>
+              <q-img
+                :src="bookingForm.boat?.imgSrc"
+                :fit="'scale-down'">
+                <div class="row absolute-top">
+                  <div class="col text-h6 text-left">
+                    {{ bookingForm.boat?.name }}
+                  </div>
+                  <div class="col text-right">
+                    {{ bookingForm.boat?.class }}
+                  </div>
+                </div>
+              </q-img>
+            </q-card-section>
+            <q-separator />
+            <q-card-section class="q-py-none">
+              <q-list
+                dense
+                class="row">
+                <q-item>
+                  <q-item-section avatar>
+                    <q-badge
+                      outline
+                      color="primary"
+                      label="Start" />
+                  </q-item-section>
+                  <q-item-section>
+                    {{
+                      date.formatDate(
+                        new Date(bookingForm.startDate as string),
+                        'ddd MMM Do @ hh:mm A'
+                      )
+                    }}
                   </q-item-section>
                 </q-item>
-        <q-expansion-item
+                <q-item class="q-ma-none">
-          expand-separator
+                  <q-item-section avatar>
-          v-model="resourceView"
+                    <q-badge
-          icon="calendar_month"
+                      outline
-          label="Boat and Time"
-          default-opened
-          class="q-mt-none"
-          :caption="bookingSummary"
-        >
-          <q-separator />
-          <q-banner :class="$q.dark.isActive ? 'bg-grey-9' : 'bg-grey-3'">
-            Use the calendar to pick a date. Select an available boat and
-            timeslot below.
-          </q-banner>
-          <BoatScheduleTableComponent v-model="interval" />
-
-          <q-banner
-            rounded
-            class="bg-warning text-grey-10"
-            style="max-width: 95vw; margin: auto"
-            v-if="bookingForm.boat && bookingForm.boat.defects.length > 0"
-          >
-            <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"
+                      label="End" />
-              icon="keyboard_arrow_down"
+                  </q-item-section>
-              icon-right="keyboard_arrow_down"
+                  <q-item-section>
-              label="Next: Booking Details"
+                    {{
-              @click="resourceView = false"
+                      date.formatDate(
-          /></q-card-section>
+                        new Date(bookingForm.endDate as string),
-        </q-expansion-item>
+                        'ddd MMM Do @ hh:mm A'
-        <q-expansion-item
+                      )
-          expand-separator
+                    }}
-          icon="people"
+                  </q-item-section>
-          label="Booking Details"
+                </q-item>
-          default-opened
+              </q-list>
-        >
+            </q-card-section>
-          <div class="row">
+          </q-card>
-            <div class="col-auto">
+          <div v-else>Tap to Select a Boat / Time</div>
+        </q-item-section>
+      </q-item>
+      <q-list dense>
+        <q-item>
+          <q-item-section avatar>
+            <q-icon
+              color="primary"
+              name="category" />
+          </q-item-section>
+          <q-item-section>
             <q-select
               filled
               v-model="bookingForm.reason"
               :options="reason_options"
-                label="Reason for sail"
+              label="Reason for sail" />
-              />
+          </q-item-section>
-            </div>
+        </q-item>
-          </div>
+      </q-list>
-        </q-expansion-item>
+      <q-card-actions align="right">
-
+        <q-btn
-        <q-item-section>
+          label="Reset"
+          @click="onReset"
+          color="secondary"
+          size="md" />
         <q-btn
           label="Submit"
-            type="submit"
           @click="onSubmit"
-            color="primary"
+          color="primary" />
-          />
+      </q-card-actions>
-        </q-item-section> </q-form
+    </q-card>
-    ></q-list>
+    <q-dialog
-  </q-page>
+      v-model="boatSelect"
+      full-width>
+      <BoatScheduleTableComponent v-model="interval" />
+    </q-dialog>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
+import { ref, watch } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import { date, useQuasar } from 'quasar';
@@ -110,9 +137,8 @@ interface BookingForm {
 const reason_options = ['Open Sail', 'Private Sail', 'Racing', 'Other'];
 
 const auth = useAuthStore();
-const resourceView = ref(true);
 const interval = ref<Interval>();
-const bookingForm = ref<BookingForm>({
+const newForm = {
   bookingId: getNewId(),
   name: auth.currentUser?.name,
   boat: <Boat | undefined>undefined,
@@ -121,10 +147,12 @@ const bookingForm = ref<BookingForm>({
   reason: 'Open Sail',
   members: [],
   guests: [],
-});
+};
+const bookingForm = ref<BookingForm>({ ...newForm });
 const router = useRouter();
 const reservationStore = useReservationStore();
 const $q = useQuasar();
+const boatSelect = ref(false);
 
 watch(interval, (new_interval) => {
   bookingForm.value.boat = useBoatStore().boats.find(
@@ -135,9 +163,8 @@ watch(interval, (new_interval) => {
 });
 
 const onReset = () => {
-  // TODO
+  bookingForm.value = { ...newForm };
 };
-
 const onSubmit = () => {
   console.log('SUBMIT!');
   const booking = bookingForm.value;
@@ -166,30 +193,4 @@ const onSubmit = () => {
   });
   router.go(-1);
 };
-
-const bookingDuration = computed(() => {
-  if (bookingForm.value.endDate && bookingForm.value.startDate) {
-    const diff = date.getDateDiff(
-      bookingForm.value.endDate,
-      bookingForm.value.startDate,
-      'minutes'
-    );
-    return diff <= 0
-      ? 'Invalid'
-      : (diff > 60 ? Math.trunc(diff / 60) + ' hours' : '') +
-          (diff % 60 > 0 ? ' ' + (diff % 60) + ' minutes' : '');
-  } else {
-    return 0;
-  }
-});
-
-const bookingSummary = computed(() => {
-  return bookingForm.value.boat &&
-    bookingForm.value.startDate &&
-    bookingForm.value.endDate
-    ? `${bookingForm.value.boat.name} @ ${new Date(
-        bookingForm.value.startDate
-      ).toLocaleString()} for ${bookingDuration.value}`
-    : '';
-});
 </script>