From ea785887a182f04bc2543e487f8d57a1f87d7e47 Mon Sep 17 00:00:00 2001
From: Patrick Toal <ptoal@takeflight.ca>
Date: Wed, 8 May 2024 23:43:18 -0400
Subject: [PATCH] Sorted out reactivity with storeToRefs

---
 src/components/scheduling/NavigationBar.vue   |  19 +++
 .../scheduling/TimeBlockTemplateComponent.vue | 129 ++++++++++++++++
 .../boat/BoatScheduleTableComponent.vue       |  36 ++---
 src/components/task/TaskTableComponent.vue    |   2 +-
 src/pages/schedule/BoatReservationPage.vue    |   6 +-
 src/pages/schedule/ManageCalendar.vue         | 144 +++++-------------
 src/stores/boat.ts                            |  13 +-
 src/stores/sampledata/schedule.ts             |  14 +-
 src/stores/schedule.ts                        |  80 ++++++++--
 src/stores/schedule.types.ts                  |   2 +-
 10 files changed, 289 insertions(+), 156 deletions(-)
 create mode 100644 src/components/scheduling/NavigationBar.vue
 create mode 100644 src/components/scheduling/TimeBlockTemplateComponent.vue

diff --git a/src/components/scheduling/NavigationBar.vue b/src/components/scheduling/NavigationBar.vue
new file mode 100644
index 0000000..710c8e5
--- /dev/null
+++ 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>
diff --git a/src/components/scheduling/TimeBlockTemplateComponent.vue b/src/components/scheduling/TimeBlockTemplateComponent.vue
new file mode 100644
index 0000000..bd85c5a
--- /dev/null
+++ 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>
diff --git a/src/components/scheduling/boat/BoatScheduleTableComponent.vue b/src/components/scheduling/boat/BoatScheduleTableComponent.vue
index adc1ca9..04c2e1b 100644
--- 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
 //   );
diff --git a/src/components/task/TaskTableComponent.vue b/src/components/task/TaskTableComponent.vue
index cdc7c16..8822b2e 100644
--- 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,
   },
   {
diff --git a/src/pages/schedule/BoatReservationPage.vue b/src/pages/schedule/BoatReservationPage.vue
index 992debf..d9eb552 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 { 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);
diff --git a/src/pages/schedule/ManageCalendar.vue b/src/pages/schedule/ManageCalendar.vue
index bb2e73b..3d706d8 100644
--- 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>
diff --git a/src/stores/boat.ts b/src/stores/boat.ts
index d74210d..68cf8b7 100644
--- 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 };
 });
diff --git a/src/stores/sampledata/schedule.ts b/src/stores/sampledata/schedule.ts
index 1cecd8b..3d0ec90 100644
--- 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,
diff --git a/src/stores/schedule.ts b/src/stores/schedule.ts
index da9e98b..61735d8 100644
--- 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,
   };
diff --git a/src/stores/schedule.types.ts b/src/stores/schedule.types.ts
index 8498eef..0ed63df 100644
--- 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;