Developing Booking Form

src/components/ResourceScheduleViewerComponent.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="row justify-center">
+    <q-btn-group rounded>
+      <q-btn
+        color="primary"
+        rounded
+        icon="keyboard_arrow_left"
+        label="Prev"
+        @click="onPrev"
+      />
+      <q-btn
+        color="primary"
+        rounded
+        icon="today"
+        label="Today"
+        @click="onToday"
+      />
+      <q-btn
+        color="primary"
+        rounded
+        icon-right="keyboard_arrow_right"
+        label="Next"
+        @click="onNext"
+      />
+    </q-btn-group>
+  </div>
+  <div class="row justify-center">
+    <div style="display: flex; max-width: 1024px; width: 100%">
+      <q-calendar-resource
+        ref="calendar"
+        v-model="selectedDate"
+        :model-resources="boatStore.boats"
+        resource-key="id"
+        resource-label="name"
+        :interval-start="6"
+        :interval-count="12"
+        animated
+        bordered
+        @change="onChange"
+        @moved="onMoved"
+        @resource-expanded="onResourceExpanded"
+        @click-date="onClickDate"
+        @click-time="onClickTime"
+        @click-resource="onClickResource"
+        @click-head-resources="onClickHeadResources"
+        @click-interval="onClickInterval"
+      >
+        <template #resource-intervals="{ scope }">
+          <template v-for="(event, index) in getEvents(scope)" :key="index">
+            <q-badge
+              outline
+              color="primary"
+              :label="event.title"
+              :style="getStyle(event)"
+            />
+          </template>
+        </template>
+      </q-calendar-resource>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { QCalendarResource, today } from '@quasar/quasar-ui-qcalendar';
+import { Boat, useBoatStore } from 'src/stores/boat';
+import { useBookingStore } from 'src/stores/booking';
+
+const calendar = ref();
+const boatStore = useBoatStore();
+const bookingStore = useBookingStore();
+
+type ResourceIntervalScope = {
+  resource: Boat;
+  intervals: [];
+  timeStartPosX(start: string): number;
+  timeDurationWidth(duration: number): number;
+};
+
+const selectedDate = ref(today());
+function getEvents(scope: ResourceIntervalScope) {
+  const resourceEvents = bookingStore.bookings[scope.resource.id];
+  return resourceEvents.map((event) => ({
+    left: scope.timeStartPosX(event.start),
+    width: scope.timeDurationWidth(event.duration),
+    title: event.title,
+  }));
+}
+
+function getStyle(event: { left: number; width: number; title: string }) {
+  return {
+    position: 'absolute',
+    background: 'white',
+    left: `${event.left}px`,
+    width: `${event.width}px`,
+    height: '40px',
+    overflow: 'hidden',
+  };
+}
+
+function onToday() {
+  calendar.value.moveToToday();
+}
+function onPrev() {
+  calendar.value.prev();
+}
+function onNext() {
+  calendar.value.next();
+}
+function onMoved(data) {
+  console.log('onMoved', data);
+}
+function onChange(data) {
+  console.log('onChange', data);
+}
+function onResourceExpanded(data) {
+  console.log('onResourceExpanded', data);
+}
+function onClickDate(data) {
+  console.log('onClickDate', data);
+}
+function onClickTime(data) {
+  console.log('onClickTime', data);
+}
+function onClickResource(data) {
+  console.log('onClickResource', data);
+}
+function onClickHeadResources(data) {
+  console.log('onClickHeadResources', data);
+}
+function onClickInterval(data) {
+  console.log('onClickInterval', data);
+}
+</script>