Developing Booking Form

src/stores/boat.ts

@@ -3,11 +3,12 @@ import { defineStore } from 'pinia';
 // const boatSource = null;
 
 export interface Boat {
-  id: number;
+  id: string;
   name: string;
-  class: string;
-  year: number;
-  imgsrc: string;
+  class?: string;
+  year?: number;
+  imgsrc?: string;
+  iconsrc?: string;
   booking?: {
     available: boolean;
     requiredCerts: string[];
@@ -18,27 +19,46 @@ export interface Boat {
     type: string;
     severity: string;
     description: string;
-    detail: string;
+    detail?: string;
   }[];
 }
 
 const getSampleData = () => [
   {
-    id: 1,
+    id: '1',
     name: 'ProjectX',
     class: 'J/27',
     year: 1981,
     imgsrc: '/src/assets/j27.png',
+    iconsrc: '/src/assets/projectx_avatar256.png',
+    defects: [
+      {
+        type: 'engine',
+        severity: 'moderate',
+        description: 'Fuel line leaks at engine fitting.',
+        detail: `The gasket in the end of the fuel hose is damaged, and does not properly seal.
+This will cause fuel to leak, and will allow air into the fuel chamber, causing a lean mixture,
+and rough engine performance.`,
+      },
+      {
+        type: 'rigging',
+        severity: 'moderate',
+        description: 'Tiller extension is broken.',
+        detail:
+          'The tiller extension swivel is broken, and will not attach to the tiller.',
+      },
+    ],
   },
   {
-    id: 2,
+    id: '2',
     name: 'Take5',
     class: 'J/27',
     year: 1985,
     imgsrc: '/src/assets/j27.png',
+    iconsrc: '/src/assets/take5_avatar32.png',
   },
   {
-    id: 3,
+    id: '3',
     name: 'WeeBeestie',
     class: 'Capri 25',
     year: 1989,

src/stores/booking.ts

@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia';
+import { Boat } from './boat';
+import { reactive } from 'vue';
+
+export type Booking = {
+  start: string;
+  title: string;
+  duration: number;
+  left?: number;
+  width?: number;
+};
+
+export const useBookingStore = defineStore('bookings', () => {
+  const bookings = reactive<{ [key: string]: Booking[] }>({
+    1: [
+      { start: '06:00', title: 'John Smith', duration: 90 },
+      { start: '12:00', title: 'Bob Barker', duration: 60 },
+    ],
+    2: [
+      { start: '08:00', title: 'Peter Parker', duration: 120 },
+      { start: '11:00', title: 'Vince McMahon', duration: 240 },
+    ],
+    3: [
+      { start: '08:00', title: 'Heather Graham', duration: 240 },
+      { start: '14:00', title: 'Lawrence Fishburne', duration: 60 },
+    ],
+  });
+
+  // So nested... Trying to do something perhaps too complicated?
+  // const bookingsForResource = (boatid: string) => (bookings) => {
+  //     return bookings.filter((booking: Booking) => booking.key == boatid )
+  //   }
+  // },
+
+  // actions: {
+  //   increment () {
+  //     this.counter++;
+  //   }
+  // }
+  return { bookings };
+});