Sorted out reactivity with storeToRefs

2024-05-08 23:43:18 -04:00
parent b860e1d977
commit ea785887a1
10 changed files with 289 additions and 156 deletions
--- a/src/components/scheduling/NavigationBar.vue
+++ b/src/components/scheduling/NavigationBar.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="row justify-center">
+    <div class="q-pa-md q-gutter-sm row">
+      <q-btn no-caps class="button" style="margin: 2px" @click="$emit('today')">
+        Today
+      </q-btn>
+      <q-btn no-caps class="button" style="margin: 2px" @click="$emit('prev')">
+        &lt; Prev
+      </q-btn>
+      <q-btn no-caps class="button" style="margin: 2px" @click="$emit('next')">
+        Next &gt;
+      </q-btn>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineEmits(['today', 'prev', 'next']);
+</script>
--- a/src/components/scheduling/TimeBlockTemplateComponent.vue
+++ b/src/components/scheduling/TimeBlockTemplateComponent.vue
@@ -0,0 +1,129 @@
+<template>
+  <q-card>
+    <q-card-section horizontal>
+      <div>
+        <q-input
+          label="Template name"
+          filled
+          dense
+          v-model="template.name"
+          v-if="editable"
+        />
+        <q-list dense>
+          <q-item v-for="item in template.timeTuples" :key="item[0]">
+            <q-input
+              dense
+              :filled="editable"
+              v-model="item[0]"
+              type="time"
+              label="Start"
+              :readonly="!editable"
+            />
+            <q-input
+              :filled="editable"
+              dense
+              v-model="item[1]"
+              type="time"
+              label="End"
+              :readonly="!editable"
+            /> </q-item></q-list
+        ><q-btn
+          v-if="editable"
+          dense
+          color="primary"
+          size="sm"
+          label="Add interval"
+          @click="template.timeTuples.push(['00:00', '00:00'])"
+        />
+      </div>
+      <q-card-actions align="right" vertical>
+        <q-btn
+          v-if="!editable"
+          color="primary"
+          icon="edit"
+          label="Edit"
+          @click="editable = !editable"
+        />
+        <q-btn
+          v-if="editable"
+          color="primary"
+          icon="save"
+          label="Save"
+          @click="saveTemplate($event, template)"
+        />
+        <q-btn
+          v-if="editable"
+          color="secondary"
+          icon="cancel"
+          label="Cancel"
+          @click="revert"
+        />
+        <q-btn
+          color="negative"
+          icon="delete"
+          label="Delete"
+          @click="deleteTemplate($event, template)"
+        />
+      </q-card-actions>
+    </q-card-section>
+  </q-card>
+  <q-dialog v-model="alert">
+    <q-card>
+      <q-card-section>
+        <div class="text-h6">Overlapped blocks!</div>
+      </q-card-section>
+      <q-card-section class="q-pt-none">
+        <q-chip
+          square
+          icon="schedule"
+          v-for="item in overlapped"
+          :key="item.start"
+        >
+          {{ item.start }}-{{ item.end }}</q-chip
+        >
+      </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">
+import { timeTuplesOverlapped, useScheduleStore } from 'src/stores/schedule';
+import { TimeBlockTemplate } from 'src/stores/schedule.types';
+import { ref } from 'vue';
+const editable = ref(false);
+const alert = ref(false);
+const overlapped = ref();
+const scheduleStore = useScheduleStore();
+const template = defineModel<TimeBlockTemplate>({ required: true });
+
+const revert = () => {
+  editable.value = false;
+};
+
+const deleteTemplate = (
+  event: Event,
+  template: TimeBlockTemplate | undefined
+) => {
+  if (template?.$id) scheduleStore.deleteTimeBlockTemplate(template.$id);
+};
+// const edit = () => {
+//   // TODO: Make it so that editing the template does not affect the store.  Need to be able to "cancel" editing, and revert to original data
+// };
+const saveTemplate = (evt: Event, template: TimeBlockTemplate | undefined) => {
+  if (!template) return false;
+  overlapped.value = timeTuplesOverlapped(template.timeTuples);
+  if (overlapped.value.length > 0) {
+    alert.value = true;
+  } else {
+    if (template.$id) {
+      console.log(template.$id);
+      scheduleStore.updateTimeBlockTemplate(template, template.$id);
+    } else {
+      scheduleStore.createTimeBlockTemplate(template);
+    }
+    editable.value = false;
+  }
+};
+</script>
--- a/src/components/scheduling/boat/BoatScheduleTableComponent.vue
+++ b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
@@ -14,7 +14,7 @@
        interval-start="06:00"
        :short-interval-label="true"
        v-model="selectedDate"
-        :column-count="boatData.length"
+        :column-count="boats.length"
        v-touch-swipe.left.right="handleSwipe"
      >
        <template #head-day="{ scope }">
@@ -34,12 +34,12 @@
              :id="block.id"
              @click="selectBlock($event, scope, block)"
            >
-              {{ boatData[scope.columnIndex].name }}<br />
+              {{ boats[scope.columnIndex].name }}<br />
              {{ selectedBlock?.$id === block.$id ? 'Selected' : 'Available' }}
            </div>
          </div>
          <!-- <div
-            v-for="r in boatData[scope.columnIndex].reservations"
+            v-for="r in boats[scope.columnIndex].reservations"
            :key="r.id"
          >
            <div
@@ -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 { TimeBlock } from 'src/stores/schedule.types';
+import { storeToRefs } from 'pinia';

 const scheduleStore = useScheduleStore();
-const boatStore = useBoatStore();
-const boatData = boatStore.boats;
-const selectedBlock = defineModel<Timeblock | null>();
+const { boats } = storeToRefs(useBoatStore());
+const selectedBlock = defineModel<TimeBlock | null>();
 const selectedDate = ref(today());

 const calendar = ref<QCalendarDay | null>(null);
@@ -103,7 +103,7 @@ function handleSwipe({ ...event }) {
 // }

 function blockStyles(
-  block: Timeblock,
+  block: TimeBlock,
  timeStartPos: (t: string) => string,
  timeDurationHeight: (d: number) => string
 ) {
@@ -116,8 +116,8 @@ function blockStyles(
 }

 function getBoatDisplayName(scope: DayBodyScope) {
-  return boatData && boatData.value[scope.columnIndex]
-    ? boatData.value[scope.columnIndex].displayName
+  return boats && boats.value[scope.columnIndex]
+    ? boats.value[scope.columnIndex].displayName
    : '';
 }

@@ -154,7 +154,7 @@ interface DayBodyScope {
  timestamp: Timestamp;
 }

-function selectBlock(event: MouseEvent, scope: DayBodyScope, block: Timeblock) {
+function selectBlock(event: MouseEvent, scope: DayBodyScope, block: TimeBlock) {
  // 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]: TimeBlock[];
 }

 const boatBlocks = computed((): BoatBlocks => {
  return scheduleStore
-    .getTimeblocksForDate(selectedDate.value)
+    .getTimeBlocksForDate(selectedDate.value)
    .reduce((result, tb) => {
      if (!result[tb.boatId]) result[tb.boatId] = [];
      result[tb.boatId].push(tb);
@@ -175,18 +175,18 @@ const boatBlocks = computed((): BoatBlocks => {
    }, <BoatBlocks>{});
 });

-function getBoatBlocks(scope: DayBodyScope): Timeblock[] {
-  return boatData.value[scope.columnIndex]
-    ? boatBlocks.value[boatData.value[scope.columnIndex].$id]
+function getBoatBlocks(scope: DayBodyScope): TimeBlock[] {
+  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.getTimeBlocksForDate(start);
 // const reservations = scheduleStore.getBoatReservations(
 //   parsed(start) as Timestamp
 // );
-// boatData.value.map((boat) => {
+// boats.value.map((boat) => {
 //   boat.reservations = reservations.filter(
 //     (reservation) => reservation.resource === boat
 //   );
--- a/src/components/task/TaskTableComponent.vue
+++ b/src/components/task/TaskTableComponent.vue
@@ -264,7 +264,7 @@ const columns = <QTableProps['columns']>[
    align: 'left',
    label: 'Boat',
    field: (row) =>
-      useBoatStore().boats.value.find((boat) => boat.$id === row.boat)?.name,
+      useBoatStore().boats.find((boat) => boat.$id === row.boat)?.name,
    sortable: true,
  },
  {
--- 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 { TimeBlock } 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<TimeBlock>();
 const bookingForm = ref<BookingForm>({
  bookingId: scheduleStore.getNewId(),
  name: auth.currentUser?.name,
@@ -131,7 +131,7 @@ const bookingForm = ref<BookingForm>({
 });

 watch(timeblock, (tb_new) => {
-  bookingForm.value.boat = useBoatStore().boats.value.find(
+  bookingForm.value.boat = useBoatStore().boats.find(
    (b) => b.$id === tb_new?.boatId
  );
  bookingForm.value.startDate = date.formatDate(tb_new?.start, dateFormat);
--- a/src/pages/schedule/ManageCalendar.vue
+++ b/src/pages/schedule/ManageCalendar.vue
@@ -2,10 +2,11 @@
  <div class="fit row wrap justify-start items-start content-start">
    <div class="col-9 q-pa-md">
      <div class="scheduler">
+        <NavigationBar @next="onNext" @today="onToday" @prev="onPrev" />
        <q-calendar-scheduler
          ref="calendar"
          v-model="selectedDate"
-          v-model:model-resources="resources"
+          v-model:model-resources="boats"
          resource-key="$id"
          resource-label="name"
          view="week"
@@ -22,9 +23,7 @@
        >
          <template #day="{ scope }">
            <div
-              v-if="
-                scheduleStore.getTimeblocks(scope.timestamp, scope.resource)
-              "
+              v-if="getTimeBlocks(scope.timestamp, scope.resource)"
              style="
                display: flex;
                flex: 1 0 auto;
@@ -35,13 +34,10 @@
              "
            >
              <template
-                v-for="event in scheduleStore.getTimeblocks(
-                  scope.timestamp,
-                  scope.resource
-                )"
+                v-for="event in getTimeBlocks(scope.timestamp, scope.resource)"
                :key="event.id"
              >
-                <q-chip square icon="schedule">
+                <q-chip clickable square icon="schedule">
                  {{ date.formatDate(event.start, 'HH:mm') }} -
                  {{ date.formatDate(event.end, 'HH:mm') }}</q-chip
                >
@@ -62,6 +58,9 @@
            >
          </q-item-section>
        </q-item>
+        <q-card-actions align="right">
+          <q-btn label="Add Template" color="primary" @click="addTemplate" />
+        </q-card-actions>
        <q-separator spaced />
        <q-expansion-item
          v-for="template in timeblockTemplates"
@@ -74,72 +73,10 @@
          draggable="true"
          @dragstart="onDragStart($event, template)"
        >
-          <q-card>
-            <q-card-section>
-              <q-input
-                label="Template name"
-                filled
-                dense
-                v-model="template.name"
-                v-if="editable"
-              />
-              <q-list dense>
-                <q-item v-for="item in template.timeTuples" :key="item[0]">
-                  <q-input
-                    dense
-                    :filled="editable"
-                    v-model="item[0]"
-                    type="time"
-                    label="Start"
-                    :readonly="!editable"
-                  />
-                  <q-input
-                    :filled="editable"
-                    dense
-                    v-model="item[1]"
-                    type="time"
-                    label="End"
-                    :readonly="!editable"
-                  /> </q-item
-              ></q-list>
-            </q-card-section>
-            <div class="row justify-end q-pa-sm">
-              <q-btn
-                v-if="!editable"
-                color="primary"
-                icon="edit"
-                label="Edit"
-                @click="editable = !editable"
-              />
-              <q-btn
-                v-if="editable"
-                color="accent"
-                icon="save"
-                label="Save"
-                @click="saveTemplate($event, template)"
-              />
-            </div>
-          </q-card> </q-expansion-item
+          <TimeBlockTemplateComponent
+            :model-value="template"
+          /> </q-expansion-item
      ></q-list>
-      <q-dialog v-model="alert">
-        <q-card>
-          <q-card-section>
-            <div class="text-h6">Overlapped blocks!</div>
-          </q-card-section>
-          <q-card-section class="q-pt-none">
-            <q-chip
-              square
-              icon="schedule"
-              v-for="item in overlapped"
-              :key="item.start"
-            >
-              {{ item.start }}-{{ item.end }}</q-chip
-            >
-          </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>
    </div>
  </div>
 </template>
@@ -151,42 +88,35 @@ import {
  today,
 } from '@quasar/quasar-ui-qcalendar';
 import { Boat, useBoatStore } from 'src/stores/boat';
-import {
-  buildTimeBlock,
-  timeTuplesOverlapped,
-  useScheduleStore,
-} from 'src/stores/schedule';
+import { buildTimeBlock, useScheduleStore } from 'src/stores/schedule';
 import { onMounted, ref } from 'vue';
 import type { TimeBlockTemplate, TimeTuple } from 'src/stores/schedule.types';
 import { date } from 'quasar';
+import TimeBlockTemplateComponent from 'src/components/scheduling/TimeBlockTemplateComponent.vue';
+import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
+import { storeToRefs } from 'pinia';

 const selectedDate = ref(today());
-const scheduleStore = useScheduleStore();
-const boatStore = useBoatStore();
-const resources = boatStore.boats;
-const timeblockTemplates = scheduleStore.timeblockTemplates;
-const editable = ref(false);
-const alert = ref(false);
-const overlapped = ref<{ start: string; end: string }[]>();
+const { fetchBoats } = useBoatStore();
+const { getTimeBlocks, fetchTimeBlocks, fetchTimeBlockTemplates } =
+  useScheduleStore();
+const { boats } = storeToRefs(useBoatStore());
+const { timeblockTemplates } = storeToRefs(useScheduleStore());
+const calendar = ref();

 onMounted(async () => {
-  await boatStore.fetchBoats();
-  await scheduleStore.fetchTimeBlockTemplates();
-  await scheduleStore.fetchTimeBlockTemplates();
+  await fetchBoats();
+  await fetchTimeBlocks();
+  await fetchTimeBlockTemplates();
 });

-const saveTemplate = (evt: Event, template: TimeBlockTemplate) => {
-  overlapped.value = timeTuplesOverlapped(template.timeTuples);
-  console.log(overlapped.value);
-  alert.value = overlapped.value.length > 0;
-  editable.value = false;
-  console.log(evt, template);
-};
-
-function createTimeblock(boat: Boat, templateId: string, date: string) {
-  const timeBlock = timeblockTemplates.find((t) => t.$id === templateId);
+function addTemplate() {
+  timeblockTemplates.value.push({ name: 'New Template', timeTuples: [] });
+}
+function createTimeBlock(boat: Boat, templateId: string, date: string) {
+  const timeBlock = timeblockTemplates.value.find((t) => t.$id === templateId);
  timeBlock?.timeTuples.map((tb: TimeTuple) =>
-    scheduleStore.createTimeblock(buildTimeBlock(boat, tb, date))
+    useScheduleStore().createTimeBlock(buildTimeBlock(boat, tb, date))
  );
 }

@@ -236,13 +166,23 @@ function onDrop(
    const templateId = e.dataTransfer.getData('ID');
    const date = scope.timestamp.date;
    if (type === 'head-day') {
-      resources.value.map((r) => createTimeblock(r, templateId, date));
+      boats.value.map((r) => createTimeBlock(r, templateId, date));
    } else {
-      createTimeblock(scope.resource, templateId, date);
+      createTimeBlock(scope.resource, templateId, date);
    }
  }
  if (e.target instanceof HTMLDivElement)
    e.target.classList.remove('bg-secondary');
  return false;
 }
+
+function onToday() {
+  calendar.value.moveToToday();
+}
+function onPrev() {
+  calendar.value.prev();
+}
+function onNext() {
+  calendar.value.next();
+}
 </script>
--- a/src/stores/boat.ts
+++ b/src/stores/boat.ts
@@ -1,7 +1,7 @@
 import { Models } from 'appwrite';
 import { defineStore } from 'pinia';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
-import { computed, ref } from 'vue';
+import { ref } from 'vue';

 // const boatSource = null;

@@ -25,7 +25,7 @@ export interface Boat extends Models.Document {
 }

 export const useBoatStore = defineStore('boat', () => {
-  const boatData = ref<Boat[]>([]);
+  const boats = ref<Boat[]>([]);

  async function fetchBoats() {
    try {
@@ -33,18 +33,11 @@ export const useBoatStore = defineStore('boat', () => {
        AppwriteIds.databaseId,
        AppwriteIds.collection.boat
      );
-      boatData.value = response.documents as Boat[];
+      boats.value = response.documents as Boat[];
    } catch (error) {
      console.error('Failed to fetch boats', error);
    }
  }

-  const boats = computed(() => {
-    if (!boatData.value) {
-      fetchBoats();
-    }
-    return boatData;
-  });
-
  return { boats, fetchBoats };
 });
--- a/src/stores/sampledata/schedule.ts
+++ b/src/stores/sampledata/schedule.ts
@@ -11,7 +11,7 @@ import type {
  StatusTypes,
  Reservation,
  TimeBlockTemplate,
-  Timeblock,
+  TimeBlock,
  TimeTuple,
 } from '../schedule.types';

@@ -36,18 +36,18 @@ export const templateB: TimeBlockTemplate = {
  ],
 };

-export function getSampleTimeBlocks(): Timeblock[] {
+export function getSampleTimeBlocks(): TimeBlock[] {
  // Hard-code 30 days worth of blocks, for now.  Make them random templates
  const boats = useBoatStore().boats;
-  const result: Timeblock[] = [];
+  const result: TimeBlock[] = [];
  const tsToday: Timestamp = parseTimestamp(today()) as Timestamp;

  for (let i = 0; i <= 30; i++) {
    const template = templateB;
    result.push(
-      ...boats.value
-        .map((b): Timeblock[] => {
-          return template.blocks.map((t: TimeTuple): Timeblock => {
+      ...boats
+        .map((b): TimeBlock[] => {
+          return template.blocks.map((t: TimeTuple): TimeBlock => {
            return {
              $id: 'id' + Math.random().toString(32).slice(2),
              boatId: b.$id,
@@ -127,7 +127,7 @@ export function getSampleReservations(): Reservation[] {
  };

  return sampleData.map((entry): Reservation => {
-    const boat = <Boat>boatStore.boats.value.find((b) => b.$id == entry.boat);
+    const boat = <Boat>boatStore.boats.find((b) => b.$id == entry.boat);
    return {
      id: entry.id,
      user: entry.user,
--- a/src/stores/schedule.ts
+++ b/src/stores/schedule.ts
@@ -12,7 +12,7 @@ import {
  Reservation,
  TimeBlockTemplate,
  TimeTuple,
-  Timeblock,
+  TimeBlock,
 } from './schedule.types';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
 import { ID, Models } from 'appwrite';
@@ -43,7 +43,7 @@ export function timeTuplesOverlapped(tuples: TimeTuple[]): Interval[] {
  });
 }

-export function blocksOverlapped(blocks: Timeblock[] | Interval[]): Interval[] {
+export function blocksOverlapped(blocks: TimeBlock[] | Interval[]): Interval[] {
  return Array.from(
    new Set(
      blocks
@@ -61,7 +61,7 @@ export function buildTimeBlock(
  resource: Boat,
  time: TimeTuple,
  blockDate: string
-): Timeblock {
+): TimeBlock {
  /* 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 = {
@@ -75,10 +75,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 timeblocks = ref<TimeBlock[]>([]);
  const timeblockTemplates = ref<TimeBlockTemplate[]>([]);

-  const getTimeblocks = (date: Timestamp, boat: Boat): Timeblock[] => {
+  const getTimeBlocks = (date: Timestamp, boat: Boat): TimeBlock[] => {
    return timeblocks.value.filter((block) => {
      return (
        compareDate(parseDate(new Date(block.start)) as Timestamp, date) &&
@@ -86,7 +86,7 @@ export const useScheduleStore = defineStore('schedule', () => {
      );
    });
  };
-  const getTimeblocksForDate = (date: string): Timeblock[] => {
+  const getTimeBlocksForDate = (date: string): TimeBlock[] => {
    // TODO: This needs to actually make sure we have the dates we need, stay in sync, etc.
    return timeblocks.value.filter((b) => {
      return compareDate(
@@ -117,7 +117,7 @@ export const useScheduleStore = defineStore('schedule', () => {
        AppwriteIds.databaseId,
        AppwriteIds.collection.timeBlock
      );
-      timeblocks.value = response.documents as Timeblock[];
+      timeblocks.value = response.documents as TimeBlock[];
    } catch (error) {
      console.error('Failed to fetch timeblocks', error);
    }
@@ -141,7 +141,7 @@ export const useScheduleStore = defineStore('schedule', () => {
      console.error('Failed to fetch timeblock templates', error);
    }
  }
-  // const getConflicts = (timeblock: Timeblock, boat: Boat) => {
+  // const getConflicts = (timeblock: TimeBlock, boat: Boat) => {
  //   const start = date.buildDate({
  //     hour: timeblock.start.hour,
  //     minute: timeblock.start.minute,
@@ -200,7 +200,7 @@ export const useScheduleStore = defineStore('schedule', () => {
      : reservations.value.push(reservation);
  };

-  const createTimeblock = async (block: Timeblock) => {
+  const createTimeBlock = async (block: TimeBlock) => {
    try {
      const response = await databases.createDocument(
        AppwriteIds.databaseId,
@@ -208,9 +208,58 @@ export const useScheduleStore = defineStore('schedule', () => {
        ID.unique(),
        block
      );
-      timeblocks.value.push(response as Timeblock);
+      timeblocks.value.push(response as TimeBlock);
    } catch (e) {
-      console.log('Error creating Timeblock: ' + e);
+      console.error('Error creating TimeBlock: ' + e);
+    }
+  };
+
+  const createTimeBlockTemplate = async (template: TimeBlockTemplate) => {
+    try {
+      const response = await databases.createDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.timeBlockTemplate,
+        ID.unique(),
+        { name: template.name, timeTuple: template.timeTuples.flat(2) }
+      );
+      timeblockTemplates.value.push(response as TimeBlockTemplate);
+    } catch (e) {
+      console.error('Error updating TimeBlockTemplate: ' + e);
+    }
+  };
+  const deleteTimeBlockTemplate = async (id: string) => {
+    try {
+      await databases.deleteDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.timeBlockTemplate,
+        id
+      );
+      timeblockTemplates.value = timeblockTemplates.value.filter(
+        (template) => template.$id !== id
+      );
+    } catch (e) {
+      console.error('Error deleting TimeBlockTemplate: ' + e);
+    }
+  };
+  const updateTimeBlockTemplate = async (
+    template: TimeBlockTemplate,
+    id: string
+  ) => {
+    try {
+      const response = await databases.updateDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.timeBlockTemplate,
+        id,
+        {
+          name: template.name,
+          timeTuple: template.timeTuples.flat(2),
+        }
+      );
+      timeblockTemplates.value = timeblockTemplates.value.map((b) =>
+        b.$id !== id ? b : (response as TimeBlockTemplate)
+      );
+    } catch (e) {
+      console.error('Error updating TimeBlockTemplate: ' + e);
    }
  };

@@ -220,13 +269,16 @@ export const useScheduleStore = defineStore('schedule', () => {
    timeblockTemplates,
    getBoatReservations,
    getConflictingReservations,
-    getTimeblocksForDate,
-    getTimeblocks,
+    getTimeBlocksForDate,
+    getTimeBlocks,
    fetchTimeBlocks,
    fetchTimeBlockTemplates,
    getNewId,
    addOrCreateReservation,
-    createTimeblock,
+    createTimeBlock,
+    createTimeBlockTemplate,
+    deleteTimeBlockTemplate,
+    updateTimeBlockTemplate,
    isReservationOverlapped,
    isResourceTimeOverlapped,
  };
--- a/src/stores/schedule.types.ts
+++ b/src/stores/schedule.types.ts
@@ -18,7 +18,7 @@ export interface Reservation {
   objects in here? */

 export type TimeTuple = [start: string, end: string];
-export type Timeblock = Partial<Models.Document> & {
+export type TimeBlock = Partial<Models.Document> & {
  boatId: string;
  start: string;
  end: string;