From 7bc05734556f55405d0be853285e2b79035d8054 Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Fri, 24 May 2024 08:24:46 -0400
Subject: [PATCH] Add minutes to booking duration

---
 src/pages/schedule/BoatReservationPage.vue | 29 ++++++++--------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/src/pages/schedule/BoatReservationPage.vue b/src/pages/schedule/BoatReservationPage.vue
index 26ef1ed..6bb396a 100644
--- a/src/pages/schedule/BoatReservationPage.vue
+++ b/src/pages/schedule/BoatReservationPage.vue
@@ -14,11 +14,6 @@
           class="q-px-none"
           clickable
           @click="boatSelect = true">
-          <!-- <q-item-section avatar>
-          <q-icon
-            color="primary"
-            name="event" />
-        </q-item-section> -->
           <q-item-section>
             <q-card v-if="bookingForm.boat">
               <q-card-section>
@@ -75,7 +70,11 @@
                 </q-card-section>
                 <q-separator vertical />
                 <q-card-section class="col-3 flex flex-center bg-grey-4">
-                  {{ bookingDuration }} hours
+                  {{ bookingDuration.hours }} hours
+                  <div v-if="bookingDuration.minutes">
+                    <q-separator />
+                    {{ bookingDuration.minutes }} mins
+                  </div>
                 </q-card-section>
               </q-card-section>
             </q-card>
@@ -88,11 +87,6 @@
           </q-item-section>
         </q-item>
         <q-item class="q-px-none">
-          <!-- <q-item-section avatar>
-            <q-icon
-              color="primary"
-              name="category" />
-          </q-item-section> -->
           <q-item-section>
             <q-select
               filled
@@ -102,11 +96,6 @@
           </q-item-section>
         </q-item>
         <q-item class="q-px-none">
-          <!-- <q-item-section avatar>
-            <q-icon
-              color="primary"
-              name="text" />
-          </q-item-section> -->
           <q-item-section>
             <q-input
               v-model="bookingForm.comment"
@@ -189,14 +178,16 @@ watch(interval, (new_interval) => {
   bookingForm.value.endDate = new_interval?.end;
 });
 
-const bookingDuration = computed((): number => {
+const bookingDuration = computed((): { hours: number; minutes: number } => {
   if (bookingForm.value.startDate && bookingForm.value.endDate) {
     const start = new Date(bookingForm.value.startDate).getTime();
     const end = new Date(bookingForm.value.endDate).getTime();
     const delta = Math.abs(end - start) / 1000;
-    return Math.floor(delta / 3600) % 24;
+    const hours = Math.floor(delta / 3600) % 24;
+    const minutes = Math.floor(delta - hours * 3600) % 60;
+    return { hours: hours, minutes: minutes };
   }
-  return 0;
+  return { hours: 0, minutes: 0 };
 });
 
 const onReset = () => {