Rename TimeBlock to Interva. More Interval functionality.

src/pages/schedule/BoatReservationPage.vue

@@ -102,7 +102,7 @@ import { useAuthStore } from 'src/stores/auth';
 import { Boat, useBoatStore } from 'src/stores/boat';
 import { date } from 'quasar';
 import { useScheduleStore } from 'src/stores/schedule';
-import { TimeBlock } from 'src/stores/schedule.types';
+import { Interval } from 'src/stores/schedule.types';
 import BoatScheduleTableComponent from 'src/components/scheduling/boat/BoatScheduleTableComponent.vue';
 
 interface BookingForm {
@@ -119,7 +119,7 @@ const auth = useAuthStore();
 const dateFormat = 'MMM D, YYYY h:mm A';
 const resourceView = ref(true);
 const scheduleStore = useScheduleStore();
-const timeblock = ref<TimeBlock>();
+const timeblock = ref<Interval>();
 const bookingForm = ref<BookingForm>({
   bookingId: scheduleStore.getNewId(),
   name: auth.currentUser?.name,

src/pages/schedule/ManageCalendar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fit row wrap justify-start items-start content-start">
-    <div class="col-9 q-pa-md">
-      <div class="scheduler">
+    <div class="q-pa-md">
+      <div class="scheduler" style="max-width: 1200px">
         <NavigationBar @next="onNext" @today="onToday" @prev="onPrev" />
         <q-calendar-scheduler
           ref="calendar"
@@ -11,7 +11,6 @@
           resource-label="name"
           view="week"
           :weekdays="[1, 2, 3, 4, 5, 6, 0]"
-          hoverable
           animated
           bordered
           :drag-enter-func="onDragEnter"
@@ -19,15 +18,14 @@
           :drag-leave-func="onDragLeave"
           :drop-func="onDrop"
           :day-min-height="50"
-          :cell-width="140"
+          :cell-width="150"
           :day-height="0"
         >
           <template #day="{ scope }">
             <div
-              v-if="getTimeBlocks(scope.timestamp, scope.resource)"
+              v-if="getIntervals(scope.timestamp, scope.resource)"
               style="
                 display: flex;
-                flex: 1 0 auto;
                 flex-wrap: wrap;
                 justify-content: space-evenly;
                 align-items: center;
@@ -35,20 +33,63 @@
               "
             >
               <template
-                v-for="event in getTimeBlocks(scope.timestamp, scope.resource)"
-                :key="event.id"
+                v-for="block in getIntervals(
+                  scope.timestamp,
+                  scope.resource
+                ).sort((a, b) => Date.parse(a.start) - Date.parse(b.start))"
+                :key="block.id"
               >
-                <q-chip clickable square icon="schedule">
-                  {{ date.formatDate(event.start, 'HH:mm') }} -
-                  {{ date.formatDate(event.end, 'HH:mm') }}</q-chip
-                >
+                <q-chip class="cursor-pointer">
+                  {{ date.formatDate(block.start, 'HH:mm') }} -
+                  {{ date.formatDate(block.end, 'HH:mm') }}
+                  <q-popup-edit
+                    :model-value="block"
+                    v-slot="scope"
+                    buttons
+                    @save="updateInterval(block)"
+                  >
+                    <q-input
+                      :model-value="date.formatDate(scope.value.start, 'HH:mm')"
+                      dense
+                      autofocus
+                      type="time"
+                      label="start"
+                      @keyup.enter="scope.set"
+                      @update:model-value="
+                        (t) =>
+                          (block.start = buildISODate(
+                            date.formatDate(scope.value.start, 'YYYY-MM-DD'),t as string
+                          ))
+                      "
+                    />
+                    <!-- TODO: Clean this up -->
+                    <q-input
+                      :model-value="date.formatDate(scope.value.end, 'HH:mm')"
+                      dense
+                      type="time"
+                      label="end"
+                      @keyup.enter="scope.set"
+                      @update:model-value="
+                        (t) =>
+                          (block.end = buildISODate(
+                            date.formatDate(scope.value.end, 'YYYY-MM-DD'),t as string
+                          ))
+                      "
+                    />
+                  </q-popup-edit> </q-chip
+                ><q-btn
+                  size="xs"
+                  icon="delete"
+                  round
+                  @click="deleteBlock(block)"
+                />
               </template>
             </div>
           </template>
         </q-calendar-scheduler>
       </div>
     </div>
-    <div class="col-3 q-pa-md">
+    <div class="q-pa-md" style="width: 400">
       <q-list padding bordered class="rounded-borders">
         <q-item>
           <q-item-section>
@@ -63,13 +104,14 @@
           <q-btn label="Add Template" color="primary" @click="createTemplate" />
         </q-card-actions>
         <q-item v-if="newTemplate.$id === 'unsaved'"
-          ><TimeBlockTemplateComponent
+          ><IntervalTemplateComponent
             :model-value="newTemplate"
             :edit="true"
-            @cancel="cancelNewTemplate"
+            @cancel="resetNewTemplate"
+            @saved="resetNewTemplate"
         /></q-item>
         <q-separator spaced />
-        <TimeBlockTemplateComponent
+        <IntervalTemplateComponent
           v-for="template in timeblockTemplates"
           :key="template.$id"
           :model-value="template"
@@ -77,6 +119,19 @@
       </q-list>
     </div>
   </div>
+  <q-dialog v-model="alert">
+    <q-card>
+      <q-card-section>
+        <div class="text-h6">Warning!</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        This will overwrite existing blocks!
+        {{ overlapped }}
+      </q-card-section>
+      <q-card-actions align="right">
+        <q-btn flat label="OK" color="primary" v-close-popup />
+      </q-card-actions> </q-card
+  ></q-dialog>
 </template>
 
 <script setup lang="ts">
@@ -86,50 +141,85 @@ import {
   today,
 } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
-import { buildTimeBlock, useScheduleStore } from 'src/stores/schedule';
+import {
+  blocksOverlapped,
+  buildInterval,
+  useScheduleStore,
+  buildISODate,
+} from 'src/stores/schedule';
 import { onMounted, ref } from 'vue';
-import type { TimeBlockTemplate, TimeTuple } from 'src/stores/schedule.types';
+import type {
+  Interval,
+  IntervalTemplate,
+  TimeTuple,
+} from 'src/stores/schedule.types';
 import { date } from 'quasar';
-import TimeBlockTemplateComponent from 'src/components/scheduling/TimeBlockTemplateComponent.vue';
+import IntervalTemplateComponent from 'src/components/scheduling/IntervalTemplateComponent.vue';
 import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
 import { storeToRefs } from 'pinia';
 
 const selectedDate = ref(today());
 const { fetchBoats } = useBoatStore();
-const { getTimeBlocks, fetchTimeBlocks, fetchTimeBlockTemplates } =
+const { getIntervals, fetchIntervals, updateInterval, fetchIntervalTemplates } =
   useScheduleStore();
 const { boats } = storeToRefs(useBoatStore());
 const { timeblockTemplates } = storeToRefs(useScheduleStore());
 const calendar = ref();
-const blankTemplate: TimeBlockTemplate = {
+const overlapped = ref();
+const blankTemplate: IntervalTemplate = {
   $id: '',
   name: 'NewTemplate',
-  timeTuples: [['00:00', '00:00']],
+  timeTuples: [['09:00', '12:00']],
 };
-const newTemplate = ref<TimeBlockTemplate>({ ...blankTemplate });
+const newTemplate = ref<IntervalTemplate>({ ...blankTemplate });
+const alert = ref(false);
+
+/* TODOS:
+ * Need more validation:
+   - Interval start < end
+   - Intervals don't overlap
+ * Need to handle case of overnight blocks.
+*/
 
 onMounted(async () => {
   await fetchBoats();
-  await fetchTimeBlocks();
-  await fetchTimeBlockTemplates();
+  await fetchIntervals();
+  await fetchIntervalTemplates();
 });
 
-function cancelNewTemplate() {
+function resetNewTemplate() {
   newTemplate.value = { ...blankTemplate };
-  console.log(newTemplate.value);
 }
 function createTemplate() {
   newTemplate.value.$id = 'unsaved';
 }
-function createTimeBlock(boat: Boat, templateId: string, date: string) {
-  const timeBlock = timeblockTemplates.value.find((t) => t.$id === templateId);
-  timeBlock?.timeTuples.map((tb: TimeTuple) =>
-    useScheduleStore().createTimeBlock(buildTimeBlock(boat, tb, date))
+function createIntervals(boat: Boat, templateId: string, date: string) {
+  timeBlocksFromTemplate(boat, templateId, date)?.map((block) =>
+    useScheduleStore().createInterval(block)
   );
 }
 
+function timeBlocksFromTemplate(
+  boat: Boat,
+  templateId: string,
+  date: string
+): Interval[] {
+  const timeBlock = timeblockTemplates.value.find((t) => t.$id === templateId);
+  return (
+    timeBlock?.timeTuples.map((tb: TimeTuple) =>
+      buildInterval(boat, tb, date)
+    ) || []
+  );
+}
+
+function deleteBlock(block: Interval) {
+  if (block.$id) {
+    useScheduleStore().deleteInterval(block.$id);
+  }
+  return false;
+}
+
 function onDragEnter(e: DragEvent, type: string) {
-  console.log('onDragEnter', e, type);
   if (type === 'day' || type === 'head-day') {
     e.preventDefault();
     if (e.target instanceof HTMLDivElement)
@@ -138,7 +228,6 @@ function onDragEnter(e: DragEvent, type: string) {
 }
 
 function onDragOver(e: DragEvent, type: string) {
-  console.log('onDragOver');
   if (type === 'day' || type === 'head-day') {
     e.preventDefault();
     return true;
@@ -146,29 +235,49 @@ function onDragOver(e: DragEvent, type: string) {
 }
 
 function onDragLeave(e: DragEvent, type: string) {
-  console.log('onDragLeave');
   if (type === 'day' || type === 'head-day') {
     e.preventDefault();
     if (e.target instanceof HTMLDivElement)
       e.target.classList.remove('bg-secondary');
-    console.log(e.target);
     return false;
   }
 }
 
 function onDrop(
+  //TODO: Move all overlap checking to the store.  This is too messy right now.
   e: DragEvent,
   type: string,
   scope: { resource: Boat; timestamp: Timestamp }
 ) {
-  console.log('onDrop', e, type, scope);
   if ((type === 'day' || type === 'head-day') && e.dataTransfer) {
     const templateId = e.dataTransfer.getData('ID');
     const date = scope.timestamp.date;
     if (type === 'head-day') {
-      boats.value.map((r) => createTimeBlock(r, templateId, date));
+      overlapped.value = boats.value.map((boat) =>
+        blocksOverlapped(
+          getIntervals(scope.timestamp, boat).concat(
+            timeBlocksFromTemplate(boat, templateId, date)
+          )
+        )
+      );
+      console.log(overlapped);
+      if (overlapped.value.length === 0) {
+        boats.value.map((b) => createIntervals(b, templateId, date));
+      } else {
+        alert.value = true;
+      }
     } else {
-      createTimeBlock(scope.resource, templateId, date);
+      overlapped.value = blocksOverlapped(
+        getIntervals(scope.timestamp, scope.resource).concat(
+          timeBlocksFromTemplate(scope.resource, templateId, date)
+        )
+      );
+
+      if (overlapped.value.length === 0) {
+        createIntervals(scope.resource, templateId, date);
+      } else {
+        alert.value = true;
+      }
     }
   }
   if (e.target instanceof HTMLDivElement)