121 lines
3.8 KiB
Vue
121 lines
3.8 KiB
Vue
<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>
|