Added reservation and username lookup

src/components/scheduling/IntervalTemplateComponent.vue

@@ -155,7 +155,6 @@ function onDragStart(e: DragEvent, template: IntervalTemplate) {
   }
 }
 const saveTemplate = (evt: Event, template: IntervalTemplate | undefined) => {
-  console.log(template);
   if (!template) return false;
   overlapped.value = timeTuplesOverlapped(template.timeTuples);
   if (overlapped.value.length > 0) {
@@ -163,7 +162,6 @@ const saveTemplate = (evt: Event, template: IntervalTemplate | undefined) => {
   } else {
     edit.value = false;
     if (template.$id && template.$id !== 'unsaved') {
-      console.log(template.$id);
       scheduleStore.updateIntervalTemplate(template, template.$id);
     } else {
       scheduleStore.createIntervalTemplate(template);

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -38,23 +38,23 @@
               {{ selectedBlock?.$id === block.$id ? 'Selected' : 'Available' }}
             </div>
           </div>
-          <!-- <div
-            v-for="r in boats[scope.columnIndex].reservations"
-            :key="r.id"
+          <div
+            v-for="reservation in getBoatReservations(scope)"
+            :key="reservation.$id"
           >
             <div
               class="reservation"
               :style="
                 reservationStyles(
-                  r,
+                  reservation,
                   scope.timeStartPos,
                   scope.timeDurationHeight
                 )
               "
             >
-              {{ r.user }}
+              {{ getUserName(reservation.user) || 'loading...' }}
             </div>
-          </div> -->
+          </div>
         </template>
       </QCalendarDay>
     </div>
@@ -76,7 +76,8 @@ import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 import { ref, computed } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import { useScheduleStore } from 'src/stores/schedule';
-import { Interval } from 'src/stores/schedule.types';
+import { useAuthStore } from 'src/stores/auth';
+import { Interval, Reservation } from 'src/stores/schedule.types';
 import { storeToRefs } from 'pinia';
 
 const scheduleStore = useScheduleStore();
@@ -89,18 +90,22 @@ const calendar = ref<QCalendarDay | null>(null);
 function handleSwipe({ ...event }) {
   event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
 }
-// function reservationStyles(
-//   reservation: Reservation,
-//   timeStartPos: (t: string) => string,
-//   timeDurationHeight: (d: number) => string
-// ) {
-//   return genericBlockStyle(
-//     parseDate(reservation.start) as Timestamp,
-//     parseDate(reservation.end) as Timestamp,
-//     timeStartPos,
-//     timeDurationHeight
-//   );
-// }
+function reservationStyles(
+  reservation: Reservation,
+  timeStartPos: (t: string) => string,
+  timeDurationHeight: (d: number) => string
+) {
+  return genericBlockStyle(
+    parseDate(new Date(reservation.start)) as Timestamp,
+    parseDate(new Date(reservation.end)) as Timestamp,
+    timeStartPos,
+    timeDurationHeight
+  );
+}
+
+function getUserName(userid: string) {
+  return useAuthStore().getUserNameById(userid);
+}
 
 function blockStyles(
   block: Interval,
@@ -176,8 +181,13 @@ const boatBlocks = computed((): BoatBlocks => {
 });
 
 function getBoatBlocks(scope: DayBodyScope): Interval[] {
-  return boats.value[scope.columnIndex]
-    ? boatBlocks.value[boats.value[scope.columnIndex].$id]
+  const boat = boats.value[scope.columnIndex];
+  return boat ? boatBlocks.value[boat.$id] : [];
+}
+function getBoatReservations(scope: DayBodyScope): Reservation[] {
+  const boat = boats.value[scope.columnIndex];
+  return boat
+    ? scheduleStore.getBoatReservations(scope.timestamp, boat.$id)
     : [];
 }