Stub out passenger info

quasar.config.js

@@ -103,7 +103,9 @@ module.exports = configure(function (/* ctx */) {
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#framework
     framework: {
-      config: {},
+      config: {
+        autoImportComponentCase: 'combined', // or 'kebab' (default) or 'combined'
+      },
 
       // iconSet: 'material-icons', // Quasar icon set
       // lang: 'en-US', // Quasar language pack

src/pages/schedule/BoatReservationPage.vue

@@ -60,7 +60,32 @@
           icon="people"
           label="Crew and Passengers"
           default-opened
-        >
+          ><q-banner v-if="bookingForm.boat"
+            >Passengers:
+            {{ bookingForm.members.length + bookingForm.guests.length }} /
+            {{ bookingForm.boat.booking?.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>
 
@@ -72,7 +97,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, computed, watch } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useAuthStore } from 'src/stores/auth';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import { Dialog, date } from 'quasar';
@@ -86,6 +111,8 @@ interface BookingForm {
   boat?: Boat;
   startDate?: string;
   endDate?: string;
+  members: { name: string }[];
+  guests: { name: string }[];
 }
 
 const auth = useAuthStore();
@@ -99,6 +126,8 @@ const bookingForm = ref<BookingForm>({
   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' }],
 });
 
 watch(timeblock, (tb_new) => {

src/stores/boat.ts

@@ -33,6 +33,7 @@ const getSampleData = () => [
     year: 1981,
     imgsrc: '/tmpimg/j27.png',
     iconsrc: '/tmpimg/projectx_avatar256.png',
+    booking: { maxPassengers: 8 },
     defects: [
       {
         type: 'engine',
@@ -59,6 +60,7 @@ and rough engine performance.`,
     year: 1985,
     imgsrc: '/tmpimg/j27.png',
     iconsrc: '/tmpimg/take5_avatar32.png',
+    booking: { maxPassengers: 8 },
   },
   {
     $id: '3',
@@ -67,6 +69,7 @@ and rough engine performance.`,
     class: 'Capri 25',
     year: 1989,
     imgsrc: '/tmpimg/capri25.png',
+    booking: { maxPassengers: 6 },
   },
   {
     $id: '4',
@@ -75,6 +78,7 @@ and rough engine performance.`,
     class: 'Capri 25',
     year: 1989,
     imgsrc: '/tmpimg/capri25.png',
+    booking: { maxPassengers: 8 },
   },
 ];