Some timeblock stuff working

2024-05-08 13:32:10 -04:00
parent 033993b1b8
commit 274d0193f7
6 changed files with 239 additions and 39 deletions
--- a/src/App.vue
+++ b/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>
--- a/src/components/scheduling/boat/BoatScheduleTableComponent.vue
+++ b/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();
 }
--- a/src/pages/schedule/ManageCalendar.vue
+++ b/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">
-                {{ item[0] }} - {{ item[1] }}
-              </q-badge>
+              <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>
-          </q-card>
-        </q-expansion-item></q-list
-      >
+            <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="save($event, template)"
+              />
+            </div>
+          </q-card> </q-expansion-item
+      ></q-list>
    </div>
  </div>
 </template>

-<script setup type="ts">
-import {QCalendarScheduler, today} from '@quasar/quasar-ui-qcalendar'
-import { useBoatStore } from 'src/stores/boat';
-import { useScheduleStore } from 'src/stores/schedule';
+<script setup lang="ts">
+import {
+  QCalendarScheduler,
+  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 scheduleStore = useScheduleStore()
-const boatStore = useBoatStore()
-const resources = boatStore.boats
-const timeblockTemplates = scheduleStore.timeblockTemplates
-onMounted(async() => {
+const selectedDate = ref(today());
+const scheduleStore = useScheduleStore();
+const boatStore = useBoatStore();
+const resources = boatStore.boats;
+const timeblockTemplates = scheduleStore.timeblockTemplates;
+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>
--- a/src/stores/sampledata/schedule.ts
+++ b/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'],
--- a/src/stores/schedule.ts
+++ b/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) => {
-        const timeTuples: TimeTuple[] = [];
-        for (let i = 0; i < d.timeTuple.length; i += 2) {
-          timeTuples.push([d.timeTuple[i], d.timeTuple[i + 1]]);
+      timeblockTemplates.value = response.documents.map(
+        (d: Models.Document): TimeBlockTemplate => {
+          return {
+            ...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,
  };
--- a/src/stores/schedule.types.ts
+++ b/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[];
 };