From 3a67f2fbb17ddf71c308bfbb7026bbc5efec1d10 Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Fri, 10 May 2024 09:50:04 -0400
Subject: [PATCH] Rename TimeBlock to Interva. More Interval functionality.

---
 src/App.vue                                   |   4 +-
 ...nent.vue => IntervalTemplateComponent.vue} |  69 ++++---
 .../boat/BoatScheduleTableComponent.vue       |  16 +-
 src/pages/schedule/BoatReservationPage.vue    |   4 +-
 src/pages/schedule/ManageCalendar.vue         | 185 ++++++++++++++----
 src/stores/sampledata/schedule.ts             |  16 +-
 src/stores/schedule.ts                        | 134 ++++++++-----
 src/stores/schedule.types.ts                  |   4 +-
 8 files changed, 293 insertions(+), 139 deletions(-)
 rename src/components/scheduling/{TimeBlockTemplateComponent.vue => IntervalTemplateComponent.vue} (67%)

diff --git a/src/App.vue b/src/App.vue
index e16cd59..e2eb8f3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,8 +14,8 @@ defineComponent({
 
 onMounted(async () => {
   await useAuthStore().init();
-  await useScheduleStore().fetchTimeBlockTemplates();
-  await useScheduleStore().fetchTimeBlocks();
+  await useScheduleStore().fetchIntervalTemplates();
+  await useScheduleStore().fetchIntervals();
   await useBoatStore().fetchBoats();
 });
 </script>
diff --git a/src/components/scheduling/TimeBlockTemplateComponent.vue b/src/components/scheduling/IntervalTemplateComponent.vue
similarity index 67%
rename from src/components/scheduling/TimeBlockTemplateComponent.vue
rename to src/components/scheduling/IntervalTemplateComponent.vue
index 82f23a2..7190e78 100644
--- a/src/components/scheduling/TimeBlockTemplateComponent.vue
+++ b/src/components/scheduling/IntervalTemplateComponent.vue
@@ -3,6 +3,7 @@
     expand-icon-toggle
     draggable="true"
     @dragstart="onDragStart($event, template)"
+    v-model="expanded"
   >
     <template v-slot:header>
       <q-item-section>
@@ -21,7 +22,7 @@
       <q-card-section horizontal>
         <q-card-section class="q-pt-xs">
           <q-list dense>
-            <q-item v-for="item in template.timeTuples" :key="item[0]">
+            <q-item v-for="(item, index) in template.timeTuples" :key="item[0]">
               <q-input
                 class="q-mx-sm"
                 dense
@@ -29,8 +30,7 @@
                 type="time"
                 label="Start"
                 :borderless="!edit"
-                :readonly="!edit"
-              />
+                :readonly="!edit" />
               <q-input
                 class="q-mx-sm"
                 dense
@@ -39,17 +39,26 @@
                 label="End"
                 :borderless="!edit"
                 :readonly="!edit"
-              /> </q-item></q-list
-        ></q-card-section>
-        <q-btn
-          v-if="edit"
-          dense
-          color="primary"
-          size="sm"
-          label="Add interval"
-          @click="template.timeTuples.push(['00:00', '00:00'])"
-        />
-        <q-card-actions align="right" vertical>
+              >
+                <template v-slot:after>
+                  <q-btn
+                    v-if="edit"
+                    round
+                    dense
+                    flat
+                    icon="delete"
+                    @click="template.timeTuples.splice(index, 1)"
+                  /> </template></q-input></q-item
+          ></q-list>
+          <q-btn
+            v-if="edit"
+            dense
+            color="primary"
+            size="sm"
+            label="Add interval"
+            @click="template.timeTuples.push(['00:00', '00:00'])"
+        /></q-card-section>
+        <q-card-actions vertical>
           <q-btn
             v-if="!edit"
             color="primary"
@@ -105,24 +114,24 @@
 
 <script setup lang="ts">
 import {
-  copyTimeBlockTemplate,
+  copyIntervalTemplate,
   timeTuplesOverlapped,
   useScheduleStore,
 } from 'src/stores/schedule';
-import { TimeBlockTemplate } from 'src/stores/schedule.types';
+import { IntervalTemplate } from 'src/stores/schedule.types';
 import { ref } from 'vue';
 const alert = ref(false);
 const overlapped = ref();
 const scheduleStore = useScheduleStore();
-const props = defineProps<{ edit?: boolean; modelValue: TimeBlockTemplate }>();
+const props = defineProps<{ edit?: boolean; modelValue: IntervalTemplate }>();
 const edit = ref(props.edit);
-const template = ref(copyTimeBlockTemplate(props.modelValue));
+const expanded = ref(props.edit);
+const template = ref(copyIntervalTemplate(props.modelValue));
 
-const emit = defineEmits<{ (e: 'cancel'): void }>();
+const emit = defineEmits<{ (e: 'cancel'): void; (e: 'saved'): void }>();
 
 const revert = () => {
-  template.value = copyTimeBlockTemplate(props.modelValue);
-  console.log(template.value, props.modelValue);
+  template.value = copyIntervalTemplate(props.modelValue);
   edit.value = false;
   emit('cancel');
 };
@@ -133,33 +142,33 @@ const toggleEdit = () => {
 
 const deleteTemplate = (
   event: Event,
-  template: TimeBlockTemplate | undefined
+  template: IntervalTemplate | undefined
 ) => {
-  if (template?.$id) scheduleStore.deleteTimeBlockTemplate(template.$id);
+  if (template?.$id) scheduleStore.deleteIntervalTemplate(template.$id);
 };
 
-function onDragStart(e: DragEvent, template: TimeBlockTemplate) {
+function onDragStart(e: DragEvent, template: IntervalTemplate) {
   if (e.dataTransfer) {
-    console.log('Drag start: ', e);
     e.dataTransfer.dropEffect = 'copy';
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('ID', template.$id || '');
   }
 }
-const saveTemplate = (evt: Event, template: TimeBlockTemplate | undefined) => {
+const saveTemplate = (evt: Event, template: IntervalTemplate | undefined) => {
+  console.log(template);
   if (!template) return false;
   overlapped.value = timeTuplesOverlapped(template.timeTuples);
   if (overlapped.value.length > 0) {
     alert.value = true;
   } else {
+    edit.value = false;
     if (template.$id && template.$id !== 'unsaved') {
       console.log(template.$id);
-      scheduleStore.updateTimeBlockTemplate(template, template.$id);
+      scheduleStore.updateIntervalTemplate(template, template.$id);
     } else {
-      scheduleStore.createTimeBlockTemplate(template);
-      template.$id = '';
+      scheduleStore.createIntervalTemplate(template);
+      emit('saved');
     }
-    edit.value = false;
   }
 };
 </script>
diff --git a/src/components/scheduling/boat/BoatScheduleTableComponent.vue b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
index 04c2e1b..e565f44 100644
--- a/src/components/scheduling/boat/BoatScheduleTableComponent.vue
+++ b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
@@ -76,12 +76,12 @@ import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 import { ref, computed } from 'vue';
 import { useBoatStore } from 'src/stores/boat';
 import { useScheduleStore } from 'src/stores/schedule';
-import { TimeBlock } from 'src/stores/schedule.types';
+import { Interval } from 'src/stores/schedule.types';
 import { storeToRefs } from 'pinia';
 
 const scheduleStore = useScheduleStore();
 const { boats } = storeToRefs(useBoatStore());
-const selectedBlock = defineModel<TimeBlock | null>();
+const selectedBlock = defineModel<Interval | null>();
 const selectedDate = ref(today());
 
 const calendar = ref<QCalendarDay | null>(null);
@@ -103,7 +103,7 @@ function handleSwipe({ ...event }) {
 // }
 
 function blockStyles(
-  block: TimeBlock,
+  block: Interval,
   timeStartPos: (t: string) => string,
   timeDurationHeight: (d: number) => string
 ) {
@@ -154,7 +154,7 @@ interface DayBodyScope {
   timestamp: Timestamp;
 }
 
-function selectBlock(event: MouseEvent, scope: DayBodyScope, block: TimeBlock) {
+function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Interval) {
   // TODO: Disable blocks before today with updateDisabled and/or comparison
   selectedBlock.value === block
     ? (selectedBlock.value = null)
@@ -162,12 +162,12 @@ function selectBlock(event: MouseEvent, scope: DayBodyScope, block: TimeBlock) {
 }
 
 interface BoatBlocks {
-  [key: string]: TimeBlock[];
+  [key: string]: Interval[];
 }
 
 const boatBlocks = computed((): BoatBlocks => {
   return scheduleStore
-    .getTimeBlocksForDate(selectedDate.value)
+    .getIntervalsForDate(selectedDate.value)
     .reduce((result, tb) => {
       if (!result[tb.boatId]) result[tb.boatId] = [];
       result[tb.boatId].push(tb);
@@ -175,14 +175,14 @@ const boatBlocks = computed((): BoatBlocks => {
     }, <BoatBlocks>{});
 });
 
-function getBoatBlocks(scope: DayBodyScope): TimeBlock[] {
+function getBoatBlocks(scope: DayBodyScope): Interval[] {
   return boats.value[scope.columnIndex]
     ? boatBlocks.value[boats.value[scope.columnIndex].$id]
     : [];
 }
 
 // function changeEvent({ start }: { start: string }) {
-// const newBlocks = scheduleStore.getTimeBlocksForDate(start);
+// const newBlocks = scheduleStore.getIntervalsForDate(start);
 // const reservations = scheduleStore.getBoatReservations(
 //   parsed(start) as Timestamp
 // );
diff --git a/src/pages/schedule/BoatReservationPage.vue b/src/pages/schedule/BoatReservationPage.vue
index d9eb552..2ea4a78 100644
--- a/src/pages/schedule/BoatReservationPage.vue
+++ b/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,
diff --git a/src/pages/schedule/ManageCalendar.vue b/src/pages/schedule/ManageCalendar.vue
index 1b2c267..dea5f13 100644
--- a/src/pages/schedule/ManageCalendar.vue
+++ b/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)
diff --git a/src/stores/sampledata/schedule.ts b/src/stores/sampledata/schedule.ts
index 3d0ec90..101d0de 100644
--- a/src/stores/sampledata/schedule.ts
+++ b/src/stores/sampledata/schedule.ts
@@ -10,12 +10,12 @@ import {
 import type {
   StatusTypes,
   Reservation,
-  TimeBlockTemplate,
-  TimeBlock,
+  IntervalTemplate,
+  Interval,
   TimeTuple,
 } from '../schedule.types';
 
-export const templateA: TimeBlockTemplate = {
+export const templateA: IntervalTemplate = {
   id: '1',
   name: 'WeekdayBlocks',
   timeTuples: [
@@ -25,7 +25,7 @@ export const templateA: TimeBlockTemplate = {
   ],
 };
 
-export const templateB: TimeBlockTemplate = {
+export const templateB: IntervalTemplate = {
   id: '2',
   name: 'WeekendBlocks',
   timeTuples: [
@@ -36,18 +36,18 @@ export const templateB: TimeBlockTemplate = {
   ],
 };
 
-export function getSampleTimeBlocks(): TimeBlock[] {
+export function getSampleIntervals(): Interval[] {
   // Hard-code 30 days worth of blocks, for now.  Make them random templates
   const boats = useBoatStore().boats;
-  const result: TimeBlock[] = [];
+  const result: Interval[] = [];
   const tsToday: Timestamp = parseTimestamp(today()) as Timestamp;
 
   for (let i = 0; i <= 30; i++) {
     const template = templateB;
     result.push(
       ...boats
-        .map((b): TimeBlock[] => {
-          return template.blocks.map((t: TimeTuple): TimeBlock => {
+        .map((b): Interval[] => {
+          return template.blocks.map((t: TimeTuple): Interval => {
             return {
               $id: 'id' + Math.random().toString(32).slice(2),
               boatId: b.$id,
diff --git a/src/stores/schedule.ts b/src/stores/schedule.ts
index 633d106..090d9bd 100644
--- a/src/stores/schedule.ts
+++ b/src/stores/schedule.ts
@@ -10,18 +10,13 @@ import {
 
 import {
   Reservation,
-  TimeBlockTemplate,
+  IntervalTemplate,
   TimeTuple,
-  TimeBlock,
+  Interval,
 } from './schedule.types';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
 import { ID, Models } from 'appwrite';
 
-export type Interval = {
-  start: string;
-  end: string;
-};
-
 export function arrayToTimeTuples(arr: string[]) {
   const timeTuples: TimeTuple[] = [];
   for (let i = 0; i < arr.length; i += 2) {
@@ -34,16 +29,17 @@ export function timeTuplesOverlapped(tuples: TimeTuple[]): Interval[] {
   return blocksOverlapped(
     tuples.map((tuples) => {
       return {
+        boatId: '',
         start: '01/01/2001 ' + tuples[0],
         end: '01/01/2001 ' + tuples[1],
       };
     })
   ).map((t) => {
-    return { start: t.start.split(' ')[1], end: t.end.split(' ')[1] };
+    return { ...t, start: t.start.split(' ')[1], end: t.end.split(' ')[1] };
   });
 }
 
-export function blocksOverlapped(blocks: TimeBlock[] | Interval[]): Interval[] {
+export function blocksOverlapped(blocks: Interval[] | Interval[]): Interval[] {
   return Array.from(
     new Set(
       blocks
@@ -60,26 +56,30 @@ export function blocksOverlapped(blocks: TimeBlock[] | Interval[]): Interval[] {
 export function copyTimeTuples(tuples: TimeTuple[]): TimeTuple[] {
   return tuples.map((t) => Object.assign([], t));
 }
-export function copyTimeBlockTemplate(
-  template: TimeBlockTemplate
-): TimeBlockTemplate {
+export function copyIntervalTemplate(
+  template: IntervalTemplate
+): IntervalTemplate {
   return {
     ...template,
-    timeTuples: copyTimeTuples(template.timeTuples),
+    timeTuples: copyTimeTuples(template.timeTuples || []),
   };
 }
 
-export function buildTimeBlock(
+export function buildISODate(date: string, time: string | null): string {
+  return new Date(date + 'T' + time || '00:00').toISOString();
+}
+
+export function buildInterval(
   resource: Boat,
   time: TimeTuple,
   blockDate: string
-): TimeBlock {
+): Interval {
   /* When the time zone offset is absent, date-only forms are interpreted
      as a UTC time and date-time forms are interpreted as local time. */
   const result = {
     boatId: resource.$id,
-    start: new Date(blockDate + 'T' + time[0]).toISOString(),
-    end: new Date(blockDate + 'T' + time[1]).toISOString(),
+    start: buildISODate(blockDate, time[0]),
+    end: buildISODate(blockDate, time[1]),
   };
   return result;
 }
@@ -87,10 +87,10 @@ export function buildTimeBlock(
 export const useScheduleStore = defineStore('schedule', () => {
   // TODO: Implement functions to dynamically pull this data.
   const reservations = ref<Reservation[]>([]);
-  const timeblocks = ref<TimeBlock[]>([]);
-  const timeblockTemplates = ref<TimeBlockTemplate[]>([]);
+  const timeblocks = ref<Interval[]>([]);
+  const timeblockTemplates = ref<IntervalTemplate[]>([]);
 
-  const getTimeBlocks = (date: Timestamp, boat: Boat): TimeBlock[] => {
+  const getIntervals = (date: Timestamp, boat: Boat): Interval[] => {
     return timeblocks.value.filter((block) => {
       return (
         compareDate(parseDate(new Date(block.start)) as Timestamp, date) &&
@@ -98,7 +98,7 @@ export const useScheduleStore = defineStore('schedule', () => {
       );
     });
   };
-  const getTimeBlocksForDate = (date: string): TimeBlock[] => {
+  const getIntervalsForDate = (date: string): Interval[] => {
     // TODO: This needs to actually make sure we have the dates we need, stay in sync, etc.
     return timeblocks.value.filter((b) => {
       return compareDate(
@@ -123,37 +123,37 @@ export const useScheduleStore = defineStore('schedule', () => {
     });
   };
 
-  async function fetchTimeBlocks() {
+  async function fetchIntervals() {
     try {
       const response = await databases.listDocuments(
         AppwriteIds.databaseId,
         AppwriteIds.collection.timeBlock
       );
-      timeblocks.value = response.documents as TimeBlock[];
+      timeblocks.value = response.documents as Interval[];
     } catch (error) {
       console.error('Failed to fetch timeblocks', error);
     }
   }
 
-  async function fetchTimeBlockTemplates() {
+  async function fetchIntervalTemplates() {
     try {
       const response = await databases.listDocuments(
         AppwriteIds.databaseId,
         AppwriteIds.collection.timeBlockTemplate
       );
       timeblockTemplates.value = response.documents.map(
-        (d: Models.Document): TimeBlockTemplate => {
+        (d: Models.Document): IntervalTemplate => {
           return {
             ...d,
             timeTuples: arrayToTimeTuples(d.timeTuple),
-          } as TimeBlockTemplate;
+          } as IntervalTemplate;
         }
       );
     } catch (error) {
       console.error('Failed to fetch timeblock templates', error);
     }
   }
-  // const getConflicts = (timeblock: TimeBlock, boat: Boat) => {
+  // const getConflicts = (timeblock: Interval, boat: Boat) => {
   //   const start = date.buildDate({
   //     hour: timeblock.start.hour,
   //     minute: timeblock.start.minute,
@@ -212,21 +212,50 @@ export const useScheduleStore = defineStore('schedule', () => {
       : reservations.value.push(reservation);
   };
 
-  const createTimeBlock = async (block: TimeBlock) => {
+  const createInterval = async (interval: Interval) => {
     try {
       const response = await databases.createDocument(
         AppwriteIds.databaseId,
         AppwriteIds.collection.timeBlock,
         ID.unique(),
-        block
+        interval
       );
-      timeblocks.value.push(response as TimeBlock);
+      timeblocks.value.push(response as Interval);
     } catch (e) {
-      console.error('Error creating TimeBlock: ' + e);
+      console.error('Error creating Interval: ' + e);
     }
   };
-
-  const createTimeBlockTemplate = async (template: TimeBlockTemplate) => {
+  const updateInterval = async (interval: Interval) => {
+    try {
+      if (interval.$id) {
+        const response = await databases.updateDocument(
+          AppwriteIds.databaseId,
+          AppwriteIds.collection.timeBlock,
+          interval.$id,
+          { ...interval, $id: undefined }
+        );
+        timeblocks.value.push(response as Interval);
+        console.log(interval, response);
+      } else {
+        console.error('Update interval called without an ID');
+      }
+    } catch (e) {
+      console.error('Error updating Interval: ' + e);
+    }
+  };
+  const deleteInterval = async (id: string) => {
+    try {
+      await databases.deleteDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.timeBlock,
+        id
+      );
+      timeblocks.value = timeblocks.value.filter((block) => block.$id !== id);
+    } catch (e) {
+      console.error('Error deleting Interval: ' + e);
+    }
+  };
+  const createIntervalTemplate = async (template: IntervalTemplate) => {
     try {
       const response = await databases.createDocument(
         AppwriteIds.databaseId,
@@ -234,12 +263,12 @@ export const useScheduleStore = defineStore('schedule', () => {
         ID.unique(),
         { name: template.name, timeTuple: template.timeTuples.flat(2) }
       );
-      timeblockTemplates.value.push(response as TimeBlockTemplate);
+      timeblockTemplates.value.push(response as IntervalTemplate);
     } catch (e) {
-      console.error('Error updating TimeBlockTemplate: ' + e);
+      console.error('Error updating IntervalTemplate: ' + e);
     }
   };
-  const deleteTimeBlockTemplate = async (id: string) => {
+  const deleteIntervalTemplate = async (id: string) => {
     try {
       await databases.deleteDocument(
         AppwriteIds.databaseId,
@@ -250,11 +279,11 @@ export const useScheduleStore = defineStore('schedule', () => {
         (template) => template.$id !== id
       );
     } catch (e) {
-      console.error('Error deleting TimeBlockTemplate: ' + e);
+      console.error('Error deleting IntervalTemplate: ' + e);
     }
   };
-  const updateTimeBlockTemplate = async (
-    template: TimeBlockTemplate,
+  const updateIntervalTemplate = async (
+    template: IntervalTemplate,
     id: string
   ) => {
     try {
@@ -268,10 +297,15 @@ export const useScheduleStore = defineStore('schedule', () => {
         }
       );
       timeblockTemplates.value = timeblockTemplates.value.map((b) =>
-        b.$id !== id ? b : (response as TimeBlockTemplate)
+        b.$id !== id
+          ? b
+          : ({
+              ...response,
+              timeTuples: arrayToTimeTuples(response.timeTuple),
+            } as IntervalTemplate)
       );
     } catch (e) {
-      console.error('Error updating TimeBlockTemplate: ' + e);
+      console.error('Error updating IntervalTemplate: ' + e);
     }
   };
 
@@ -281,16 +315,18 @@ export const useScheduleStore = defineStore('schedule', () => {
     timeblockTemplates,
     getBoatReservations,
     getConflictingReservations,
-    getTimeBlocksForDate,
-    getTimeBlocks,
-    fetchTimeBlocks,
-    fetchTimeBlockTemplates,
+    getIntervalsForDate,
+    getIntervals,
+    fetchIntervals,
+    fetchIntervalTemplates,
     getNewId,
     addOrCreateReservation,
-    createTimeBlock,
-    createTimeBlockTemplate,
-    deleteTimeBlockTemplate,
-    updateTimeBlockTemplate,
+    createInterval,
+    updateInterval,
+    deleteInterval,
+    createIntervalTemplate,
+    deleteIntervalTemplate,
+    updateIntervalTemplate,
     isReservationOverlapped,
     isResourceTimeOverlapped,
   };
diff --git a/src/stores/schedule.types.ts b/src/stores/schedule.types.ts
index 0ed63df..1f9d23c 100644
--- a/src/stores/schedule.types.ts
+++ b/src/stores/schedule.types.ts
@@ -18,14 +18,14 @@ export interface Reservation {
    objects in here? */
 
 export type TimeTuple = [start: string, end: string];
-export type TimeBlock = Partial<Models.Document> & {
+export type Interval = Partial<Models.Document> & {
   boatId: string;
   start: string;
   end: string;
   selected?: false;
 };
 
-export type TimeBlockTemplate = Partial<Models.Document> & {
+export type IntervalTemplate = Partial<Models.Document> & {
   name: string;
   timeTuples: TimeTuple[];
 };