Team based role auth for routes

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -3,7 +3,12 @@
     <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-btn
+          icon="close"
+          flat
+          round
+          dense
+          v-close-popup />
       </q-toolbar>
       <q-separator />
       <CalendarHeaderComponent v-model="selectedDate" />
@@ -21,8 +26,7 @@
           :short-interval-label="true"
           v-model="selectedDate"
           :column-count="boats.length"
-          v-touch-swipe.left.right="handleSwipe"
-        >
+          v-touch-swipe.left.right="handleSwipe">
           <template #head-day="{ scope }">
             <div style="text-align: center; font-weight: 800">
               {{ getBoatDisplayName(scope) }}
@@ -30,7 +34,9 @@
           </template>
 
           <template #day-body="{ scope }">
-            <div v-for="block in getBoatBlocks(scope)" :key="block.$id">
+            <div
+              v-for="block in getBoatBlocks(scope)"
+              :key="block.$id">
               <div
                 class="timeblock"
                 :class="selectedBlock?.$id === block.$id ? 'selected' : ''"
@@ -43,9 +49,9 @@
                 "
                 :id="block.id"
                 @click="selectBlock($event, scope, block)"
-                v-close-popup
-              >
-                {{ boats[scope.columnIndex].name }}<br />
+                v-close-popup>
+                {{ boats[scope.columnIndex].name }}
+                <br />
                 {{
                   selectedBlock?.$id === block.$id ? 'Selected' : 'Available'
                 }}
@@ -53,26 +59,25 @@
             </div>
             <div
               v-for="reservation in getBoatReservations(scope)"
-              :key="reservation.$id"
-            >
+              :key="reservation.$id">
               <div
-                class="reservation"
+                class="reservation column"
                 :style="
                   reservationStyles(
                     reservation,
                     scope.timeStartPos,
                     scope.timeDurationHeight
                   )
-                "
-              >
-                {{ getUserName(reservation.user) || 'loading...' }}<br />
+                ">
+                {{ getUserName(reservation.user) || 'loading...' }}
+                <br />
                 <q-chip icon="key">{{ reservation.reason }}</q-chip>
               </div>
             </div>
           </template>
         </QCalendarDay>
-      </div></q-card
-    >
+      </div>
+    </q-card>
   </div>
 </template>