From ac1730401a0110aae4d7dde52e8fc6cad40e1fa4 Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Mon, 18 Dec 2023 20:23:17 -0500
Subject: [PATCH 1/2] Add a shortened displayName for boats for a better mobile
 experience

---
 src/components/ResourceScheduleViewerComponent.vue | 9 +++++----
 src/stores/boat.ts                                 | 4 ++++
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/ResourceScheduleViewerComponent.vue b/src/components/ResourceScheduleViewerComponent.vue
index b56c103..082a9f4 100644
--- a/src/components/ResourceScheduleViewerComponent.vue
+++ b/src/components/ResourceScheduleViewerComponent.vue
@@ -55,11 +55,13 @@
     v-model="selectedDate"
     :model-resources="boatStore.boats"
     resource-key="id"
-    resource-label="name"
+    resource-label="displayName"
+    resource-width="32"
     :interval-start="12"
     :interval-count="36"
     :interval-minutes="30"
     cell-width="48"
+    style="--calendar-resources-width: 48px"
     resource-min-height="40"
     animated
     bordered
@@ -79,8 +81,8 @@
     </template>
 
     <template #resource-label="{ scope: { resource } }">
-      <div class="col-12">
-        {{ resource.name }}
+      <div class="col-12 .col-md-auto">
+        {{ resource.displayName }}
         <q-icon v-if="resource.defects" name="warning" color="warning" />
       </div>
     </template>
@@ -98,7 +100,6 @@
       ><template v-slot:append><q-icon name="timelapse" /></template></q-select
   ></q-card-section>
 </template>
-
 <script setup lang="ts">
 import { ref } from 'vue';
 import {
diff --git a/src/stores/boat.ts b/src/stores/boat.ts
index 6224664..40a25bc 100644
--- a/src/stores/boat.ts
+++ b/src/stores/boat.ts
@@ -5,6 +5,7 @@ import { defineStore } from 'pinia';
 export interface Boat {
   id: number;
   name: string;
+  displayName?: string;
   class?: string;
   year?: number;
   imgsrc?: string;
@@ -27,6 +28,7 @@ const getSampleData = () => [
   {
     id: 1,
     name: 'ProjectX',
+    displayName: 'PX',
     class: 'J/27',
     year: 1981,
     imgsrc: '/tmpimg/j27.png',
@@ -52,6 +54,7 @@ and rough engine performance.`,
   {
     id: 2,
     name: 'Take5',
+    displayName: 'T5',
     class: 'J/27',
     year: 1985,
     imgsrc: '/tmpimg/j27.png',
@@ -60,6 +63,7 @@ and rough engine performance.`,
   {
     id: 3,
     name: 'WeeBeestie',
+    displayName: 'WB',
     class: 'Capri 25',
     year: 1989,
     imgsrc: '/tmpimg/capri25.png',

From 9390b7035cdbf26a52d32ee883b53ecaa6a1b996 Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Mon, 18 Dec 2023 20:44:01 -0500
Subject: [PATCH 2/2] Change interval to 1h.  Create StatusTypes

---
 src/components/ResourceScheduleViewerComponent.vue | 9 +++++----
 src/stores/schedule.ts                             | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/ResourceScheduleViewerComponent.vue b/src/components/ResourceScheduleViewerComponent.vue
index 082a9f4..37048b2 100644
--- a/src/components/ResourceScheduleViewerComponent.vue
+++ b/src/components/ResourceScheduleViewerComponent.vue
@@ -57,9 +57,9 @@
     resource-key="id"
     resource-label="displayName"
     resource-width="32"
-    :interval-start="12"
-    :interval-count="36"
-    :interval-minutes="30"
+    :interval-start="6"
+    :interval-count="18"
+    :interval-minutes="60"
     cell-width="48"
     style="--calendar-resources-width: 48px"
     resource-min-height="40"
@@ -115,6 +115,7 @@ import { Boat, useBoatStore } from 'src/stores/boat';
 import { useScheduleStore } from 'src/stores/schedule';
 import { date } from 'quasar';
 import { computed } from 'vue';
+import type { StatusTypes } from 'src/stores/schedule';
 
 const durations = [1, 1.5, 2, 2.5, 3, 3.5, 4];
 
@@ -180,7 +181,7 @@ function getStyle(event: {
   left: number;
   width: number;
   title: string;
-  status: 'tentative' | 'confirmed' | 'pending';
+  status: StatusTypes;
 }) {
   return {
     position: 'absolute',
diff --git a/src/stores/schedule.ts b/src/stores/schedule.ts
index 24359c1..b60de11 100644
--- a/src/stores/schedule.ts
+++ b/src/stores/schedule.ts
@@ -4,6 +4,7 @@ import { Boat, useBoatStore } from './boat';
 import { date } from 'quasar';
 import { DateOptions } from 'quasar';
 
+export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
 export interface Reservation {
   id: number;
   user: string;
@@ -11,7 +12,7 @@ export interface Reservation {
   end: Date;
   resource: Boat;
   reservationDate: Date;
-  status?: string;
+  status?: StatusTypes;
 }
 
 function getSampleData(): Reservation[] {