Some timeblock stuff working

src/App.vue

@@ -3,9 +3,19 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent, onMounted } from 'vue';
+import { useScheduleStore } from './stores/schedule';
+import { useBoatStore } from './stores/boat';
+import { useAuthStore } from './stores/auth';
 
 defineComponent({
   name: 'OYS Borrow-a-Boat',
 });
+
+onMounted(async () => {
+  await useAuthStore().init();
+  await useScheduleStore().fetchTimeBlockTemplates();
+  await useScheduleStore().fetchTimeBlocks();
+  await useBoatStore().fetchBoats();
+});
 </script>

src/components/scheduling/boat/BoatScheduleTableComponent.vue

@@ -73,7 +73,7 @@ import {
 } from '@quasar/quasar-ui-qcalendar';
 import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
 
-import { ref, computed, onMounted } from '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';
@@ -86,12 +86,6 @@ const selectedDate = ref(today());
 
 const calendar = ref<QCalendarDay | null>(null);
 
-onMounted(async () => {
-  await boatStore.fetchBoats();
-  await scheduleStore.fetchTimeBlocks();
-  //  useScheduleStore().fetchReservations()
-}); // TODO: Probably need this to be more sophisticated.
-
 function handleSwipe({ ...event }) {
   event.direction === 'right' ? calendar.value?.prev() : calendar.value?.next();
 }

src/pages/schedule/ManageCalendar.vue

@@ -6,14 +6,49 @@
           ref="calendar"
           v-model="selectedDate"
           v-model:model-resources="resources"
+          resource-key="$id"
+          resource-label="name"
           view="week"
           :weekdays="[1, 2, 3, 4, 5, 6, 0]"
           hoverable
           animated
           bordered
+          :drag-enter-func="onDragEnter"
+          :drag-over-func="onDragOver"
+          :drag-leave-func="onDragLeave"
+          :drop-func="onDrop"
           :day-min-height="50"
           :day-height="0"
-        ></q-calendar-scheduler>
+        >
+          <template #day="{ scope }">
+            <div
+              v-if="
+                scheduleStore.getTimeblocks(scope.timestamp, scope.resource)
+              "
+              style="
+                display: flex;
+                flex: 1 0 auto;
+                flex-wrap: wrap;
+                justify-content: space-evenly;
+                align-items: center;
+                font-size: 12px;
+              "
+            >
+              <template
+                v-for="event in scheduleStore.getTimeblocks(
+                  scope.timestamp,
+                  scope.resource
+                )"
+                :key="event.id"
+              >
+                <q-chip square icon="schedule">
+                  {{ date.formatDate(event.start, 'HH:mm') }} -
+                  {{ date.formatDate(event.end, 'HH:mm') }}</q-chip
+                >
+              </template>
+            </div>
+          </template>
+        </q-calendar-scheduler>
       </div>
     </div>
     <div class="col-3 q-pa-md">
@@ -37,33 +72,149 @@
           :label="template.name"
           style="font-size: 0.8em"
           draggable="true"
+          @dragstart="onDragStart($event, template)"
         >
           <q-card>
             <q-card-section>
-              <q-badge v-for="item in template.timeTuple" :key="item.$id">
+              <q-input
-                {{ item[0] }} - {{ item[1] }}
+                label="Template name"
-              </q-badge>
+                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>
-          </q-card>
+            <div class="row justify-end q-pa-sm">
-        </q-expansion-item></q-list
+              <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="save($event, template)"
+              />
+            </div>
+          </q-card> </q-expansion-item
+      ></q-list>
     </div>
   </div>
 </template>
 
-<script setup type="ts">
+<script setup lang="ts">
-import {QCalendarScheduler, today} from '@quasar/quasar-ui-qcalendar'
+import {
-import { useBoatStore } from 'src/stores/boat';
+  QCalendarScheduler,
-import { useScheduleStore } from 'src/stores/schedule';
+  Timestamp,
+  today,
+} from '@quasar/quasar-ui-qcalendar';
+import { Boat, useBoatStore } from 'src/stores/boat';
+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';
 
-const selectedDate = ref(today())
+const selectedDate = ref(today());
-const scheduleStore = useScheduleStore()
+const scheduleStore = useScheduleStore();
-const boatStore = useBoatStore()
+const boatStore = useBoatStore();
-const resources = boatStore.boats
+const resources = boatStore.boats;
-const timeblockTemplates = scheduleStore.timeblockTemplates
+const timeblockTemplates = scheduleStore.timeblockTemplates;
-onMounted(async() => {
+const editable = ref(false);
+
+const save = (evt: Event, template: TimeBlockTemplate) => {
+  editable.value = false;
+  console.log(evt, template);
+};
+
+onMounted(async () => {
   await boatStore.fetchBoats();
   await scheduleStore.fetchTimeBlockTemplates();
-  await scheduleStore.fetchTimeBlockTemplates()})
+  await scheduleStore.fetchTimeBlockTemplates();
+});
+
+function onDragStart(e: DragEvent, template: TimeBlockTemplate) {
+  if (e.dataTransfer) {
+    console.log('Drag start: ', e);
+    e.dataTransfer.dropEffect = 'copy';
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData('ID', template.$id || '');
+  }
+}
+function onDragEnter(e: DragEvent, type: string) {
+  console.log('onDragEnter', e, type);
+  if (type === 'day' || type === 'head-day') {
+    e.preventDefault();
+    if (e.target instanceof HTMLDivElement)
+      e.target.classList.add('bg-secondary');
+  }
+}
+
+function onDragOver(e: DragEvent, type: string) {
+  console.log('onDragOver');
+  if (type === 'day' || type === 'head-day') {
+    e.preventDefault();
+    return true;
+  }
+}
+
+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 createTimeblock(boat: Boat, templateId: string, date: string) {
+  const timeBlock = timeblockTemplates.find((t) => t.$id === templateId);
+  timeBlock?.timeTuples.map((tb: TimeTuple) =>
+    scheduleStore.createTimeblock(buildTimeBlock(boat, tb, date))
+  );
+}
+
+function onDrop(
+  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') {
+      resources.value.map((r) => createTimeblock(r, templateId, date));
+    } else {
+      createTimeblock(scope.resource, templateId, date);
+    }
+  }
+  if (e.target instanceof HTMLDivElement)
+    e.target.classList.remove('bg-secondary');
+  return false;
+}
 </script>

src/stores/sampledata/schedule.ts

@@ -18,7 +18,7 @@ import type {
 export const templateA: TimeBlockTemplate = {
   id: '1',
   name: 'WeekdayBlocks',
-  timeTuple: [
+  timeTuples: [
     ['08:00', '12:00'],
     ['12:00', '16:00'],
     ['17:00', '21:00'],
@@ -28,7 +28,7 @@ export const templateA: TimeBlockTemplate = {
 export const templateB: TimeBlockTemplate = {
   id: '2',
   name: 'WeekendBlocks',
-  timeTuple: [
+  timeTuples: [
     ['07:00', '10:00'],
     ['10:00', '13:00'],
     ['13:00', '16:00'],

src/stores/schedule.ts

@@ -15,6 +15,30 @@ import {
   Timeblock,
 } from './schedule.types';
 import { AppwriteIds, databases } from 'src/boot/appwrite';
+import { ID, Models } from 'appwrite';
+
+export function arrayToTimeTuples(arr: string[]) {
+  const timeTuples: TimeTuple[] = [];
+  for (let i = 0; i < arr.length; i += 2) {
+    timeTuples.push([arr[i], arr[i + 1]]);
+  }
+  return timeTuples;
+}
+
+export function buildTimeBlock(
+  resource: Boat,
+  time: TimeTuple,
+  blockDate: string
+): 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 = {
+    boatId: resource.$id,
+    start: new Date(blockDate + 'T' + time[0]).toISOString(),
+    end: new Date(blockDate + 'T' + time[1]).toISOString(),
+  };
+  return result;
+}
 
 export const useScheduleStore = defineStore('schedule', () => {
   // TODO: Implement functions to dynamically pull this data.
@@ -22,11 +46,16 @@ export const useScheduleStore = defineStore('schedule', () => {
   const timeblocks = ref<Timeblock[]>([]);
   const timeblockTemplates = ref<TimeBlockTemplate[]>([]);
 
+  const getTimeblocks = (date: Timestamp, boat: Boat): Timeblock[] => {
+    return timeblocks.value.filter((block) => {
+      return (
+        compareDate(parseDate(new Date(block.start)) as Timestamp, date) &&
+        block.boatId === boat.$id
+      );
+    });
+  };
   const getTimeblocksForDate = (date: string): Timeblock[] => {
     // TODO: This needs to actually make sure we have the dates we need, stay in sync, etc.
-    if (!timeblocks.value) {
-      fetchTimeBlocks();
-    }
     return timeblocks.value.filter((b) => {
       return compareDate(
         parseDate(new Date(b.start)) as Timestamp,
@@ -68,14 +97,14 @@ export const useScheduleStore = defineStore('schedule', () => {
         AppwriteIds.databaseId,
         AppwriteIds.collection.timeBlockTemplate
       );
-      const res = response.documents.map((d) => {
+      timeblockTemplates.value = response.documents.map(
-        const timeTuples: TimeTuple[] = [];
+        (d: Models.Document): TimeBlockTemplate => {
-        for (let i = 0; i < d.timeTuple.length; i += 2) {
+          return {
-          timeTuples.push([d.timeTuple[i], d.timeTuple[i + 1]]);
+            ...d,
+            timeTuples: arrayToTimeTuples(d.timeTuple),
+          } as TimeBlockTemplate;
         }
-        return { ...d, timeTuple: timeTuples };
+      );
-      }) as TimeBlockTemplate[];
-      timeblockTemplates.value = res;
     } catch (error) {
       console.error('Failed to fetch timeblock templates', error);
     }
@@ -139,6 +168,20 @@ export const useScheduleStore = defineStore('schedule', () => {
       : reservations.value.push(reservation);
   };
 
+  const createTimeblock = async (block: Timeblock) => {
+    try {
+      const response = await databases.createDocument(
+        AppwriteIds.databaseId,
+        AppwriteIds.collection.timeBlock,
+        ID.unique(),
+        block
+      );
+      timeblocks.value.push(response as Timeblock);
+    } catch (e) {
+      console.log('Error creating Timeblock: ' + e);
+    }
+  };
+
   return {
     reservations,
     timeblocks,
@@ -146,10 +189,12 @@ export const useScheduleStore = defineStore('schedule', () => {
     getBoatReservations,
     getConflictingReservations,
     getTimeblocksForDate,
+    getTimeblocks,
     fetchTimeBlocks,
     fetchTimeBlockTemplates,
     getNewId,
     addOrCreateReservation,
+    createTimeblock,
     isReservationOverlapped,
     isResourceTimeOverlapped,
   };

src/stores/schedule.types.ts

@@ -27,5 +27,5 @@ export type Timeblock = Partial<Models.Document> & {
 
 export type TimeBlockTemplate = Partial<Models.Document> & {
   name: string;
-  timeTuple: TimeTuple[];
+  timeTuples: TimeTuple[];
 };