refactor: everything to nuxt.js

app/pages/schedule/view.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { useReservationStore } from '~/stores/reservation';
+import { ref } from 'vue';
+import { useAuthStore } from '~/stores/auth';
+import type { Timestamp } from '@quasar/quasar-ui-qcalendar';
+import { getDate, QCalendarScheduler } from '@quasar/quasar-ui-qcalendar';
+import type { Boat } from '~/utils/boat.types';
+import NavigationBar from '~/components/scheduling/NavigationBar.vue';
+import { useQuasar } from 'quasar';
+import { formatTime } from '~/utils/schedule';
+import { useIntervalStore } from '~/stores/interval';
+import type { Interval, Reservation } from '~/utils/schedule.types';
+import { storeToRefs } from 'pinia';
+
+const reservationStore = useReservationStore();
+const boatStore = useBoatStore();
+const calendar = ref();
+const $q = useQuasar();
+const { getAvailableIntervals } = useIntervalStore();
+const { selectedDate } = storeToRefs(useIntervalStore());
+const currentUser = useAuthStore().currentUser;
+
+const getSortedIntervals = (timestamp: Timestamp, boat?: Boat): Interval[] => {
+  return getAvailableIntervals(timestamp, boat)
+    .value.concat(boatReservationEvents(timestamp, boat))
+    .sort((a, b) => Date.parse(a.start) - Date.parse(b.start));
+};
+
+const createReservationFromInterval = (interval: Interval | Reservation) => {
+  if (interval.user) {
+    if (interval.user === currentUser?.$id) {
+      navigateTo(`/schedule/edit/${interval.$id}`);
+    } else {
+      return false;
+    }
+  } else {
+    navigateTo({ path: '/schedule/book', query: { interval: interval.$id } });
+  }
+};
+
+function handleSwipe({ ...event }: { direction: string }) {
+  if (event.direction === 'right') {
+    calendar.value?.prev();
+  } else {
+    calendar.value?.next();
+  }
+}
+
+const boatReservationEvents = (
+  timestamp: Timestamp,
+  resource: Boat | undefined
+): Reservation[] => {
+  if (!resource) return [] as Reservation[];
+  return reservationStore.getReservationsByDate(
+    getDate(timestamp),
+    (resource as Boat).$id
+  ).value;
+};
+
+function onToday() { calendar.value.moveToToday(); }
+function onPrev() { calendar.value.prev(); }
+function onNext() { calendar.value.next(); }
+</script>
+
+<template>
+  <q-page>
+    <div class="col">
+      <navigation-bar @today="onToday" @prev="onPrev" @next="onNext" />
+    </div>
+    <div class="col q-ma-sm">
+      <q-calendar-scheduler
+        ref="calendar"
+        v-model="selectedDate"
+        v-model:model-resources="boatStore.boats"
+        resource-key="$id"
+        resource-label="displayName"
+        :weekdays="[1, 2, 3, 4, 5, 6, 0]"
+        :view="$q.screen.gt.md ? 'week' : 'day'"
+        v-touch-swipe.mouse.left.right="handleSwipe"
+        :max-days="$q.screen.lt.sm ? 3 : 7"
+        animated
+        bordered
+        style="--calendar-resources-width: 40px">
+        <template #day="{ scope }">
+          <div
+            v-for="interval in getSortedIntervals(scope.timestamp, scope.resource)"
+            :key="interval.$id"
+            class="q-pb-xs row"
+            @click="createReservationFromInterval(interval)">
+            <q-badge
+              multi-line
+              :class="!interval.user ? 'cursor-pointer' : null"
+              class="col-12 q-pa-sm"
+              :transparent="interval.user != undefined"
+              :color="interval.user ? 'secondary' : 'primary'"
+              :outline="!interval.user"
+              :id="interval.$id">
+              {{
+                interval.user
+                  ? useAuthStore().getUserNameById(interval.user)
+                  : 'Available'
+              }}
+              <br />
+              {{ formatTime(interval.start) }} to
+              <br />
+              {{ formatTime(interval.end) }}
+            </q-badge>
+          </div>
+        </template>
+      </q-calendar-scheduler>
+    </div>
+  </q-page>
+</template>
+
+<style lang="sass">
+.q-calendar-scheduler__resource
+  background-color: $primary
+  color: white
+  font-weight: bold
+</style>