Rename TimeBlock to Interva. More Interval functionality.

2024-05-10 09:50:04 -04:00
parent 77619b0741
commit 3a67f2fbb1
8 changed files with 293 additions and 139 deletions
--- 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>
--- a/src/components/scheduling/TimeBlockTemplateComponent.vue
+++ b/src/components/scheduling/TimeBlockTemplateComponent.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>
--- 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
 // );
--- 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,
--- 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)
--- 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,
--- 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,
  };
--- 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[];
 };