refactor: everything to nuxt.js
This commit is contained in:
28
app/pages/schedule/book.vue
Normal file
28
app/pages/schedule/book.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<script setup lang="ts">
|
||||
import BoatReservationComponent from '~/components/BoatReservationComponent.vue';
|
||||
import { useIntervalStore } from '~/stores/interval';
|
||||
import type { Interval, Reservation } from '~/utils/schedule.types';
|
||||
import { ref } from 'vue';
|
||||
|
||||
const route = useRoute();
|
||||
const newReservation = ref<Reservation>();
|
||||
|
||||
if (typeof route.query.interval === 'string') {
|
||||
useIntervalStore()
|
||||
.fetchInterval(route.query.interval)
|
||||
.then(
|
||||
(interval: Interval) =>
|
||||
(newReservation.value = <Reservation>{
|
||||
resource: interval.resource,
|
||||
start: interval.start,
|
||||
end: interval.end,
|
||||
})
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-page>
|
||||
<BoatReservationComponent v-model="newReservation" />
|
||||
</q-page>
|
||||
</template>
|
||||
20
app/pages/schedule/edit/[id].vue
Normal file
20
app/pages/schedule/edit/[id].vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import BoatReservationComponent from '~/components/BoatReservationComponent.vue';
|
||||
import { useReservationStore } from '~/stores/reservation';
|
||||
import type { Reservation } from '~/utils/schedule.types';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const route = useRoute();
|
||||
const reservation = ref<Reservation>();
|
||||
|
||||
onMounted(async () => {
|
||||
const id = route.params.id as string;
|
||||
reservation.value = await useReservationStore().getReservationById(id);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-page>
|
||||
<BoatReservationComponent v-model="reservation" />
|
||||
</q-page>
|
||||
</template>
|
||||
22
app/pages/schedule/index.vue
Normal file
22
app/pages/schedule/index.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<script setup lang="ts">
|
||||
import { useNavLinks } from '~/utils/navlinks';
|
||||
|
||||
const { enabledLinks } = useNavLinks();
|
||||
const navlinks = enabledLinks.find((link) => link.name === 'Schedule')?.sublinks;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-page padding>
|
||||
<q-item v-for="link in navlinks" :key="link.name">
|
||||
<q-btn
|
||||
:icon="link.icon"
|
||||
:color="link.color ? link.color : 'primary'"
|
||||
size="1.25em"
|
||||
:to="link.to"
|
||||
:label="link.name"
|
||||
rounded
|
||||
class="full-width"
|
||||
align="left" />
|
||||
</q-item>
|
||||
</q-page>
|
||||
</template>
|
||||
55
app/pages/schedule/list.vue
Normal file
55
app/pages/schedule/list.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<script setup lang="ts">
|
||||
import { useReservationStore } from '~/stores/reservation';
|
||||
import ReservationCardComponent from '~/components/scheduling/ReservationCardComponent.vue';
|
||||
import { onMounted, ref } from 'vue';
|
||||
|
||||
const reservationStore = useReservationStore();
|
||||
onMounted(() => reservationStore.fetchUserReservations());
|
||||
|
||||
const tab = ref('upcoming');
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<q-page>
|
||||
<q-tabs v-model="tab" inline-label class="text-primary">
|
||||
<q-tab name="upcoming" icon="schedule" label="Upcoming" />
|
||||
<q-tab name="past" icon="history" label="Past" />
|
||||
</q-tabs>
|
||||
<q-separator />
|
||||
<q-tab-panels v-model="tab" animated>
|
||||
<q-tab-panel name="upcoming" class="q-pa-none">
|
||||
<q-card clas="q-ma-md" v-if="!reservationStore.futureUserReservations.length">
|
||||
<q-card-section>
|
||||
<div class="text-h6">You don't have any upcoming bookings!</div>
|
||||
<div class="text-h8">Why don't you go make one?</div>
|
||||
</q-card-section>
|
||||
<q-card-actions>
|
||||
<q-btn
|
||||
color="primary"
|
||||
icon="event"
|
||||
:size="`1.25em`"
|
||||
label="Book Now"
|
||||
rounded
|
||||
class="full-width"
|
||||
:align="'left'"
|
||||
to="/schedule/book" />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
<div v-else>
|
||||
<div
|
||||
v-for="reservation in reservationStore.futureUserReservations"
|
||||
:key="reservation.$id">
|
||||
<ReservationCardComponent :modelValue="reservation" />
|
||||
</div>
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
<q-tab-panel name="past" class="q-pa-none">
|
||||
<div
|
||||
v-for="reservation in reservationStore.pastUserReservations"
|
||||
:key="reservation.$id">
|
||||
<ReservationCardComponent :modelValue="reservation" />
|
||||
</div>
|
||||
</q-tab-panel>
|
||||
</q-tab-panels>
|
||||
</q-page>
|
||||
</template>
|
||||
238
app/pages/schedule/manage.vue
Normal file
238
app/pages/schedule/manage.vue
Normal file
@@ -0,0 +1,238 @@
|
||||
<script setup lang="ts">
|
||||
import type { Timestamp } from '@quasar/quasar-ui-qcalendar';
|
||||
import {
|
||||
QCalendarScheduler,
|
||||
today,
|
||||
} from '@quasar/quasar-ui-qcalendar';
|
||||
import type { Boat } from '~/utils/boat.types';
|
||||
import { useIntervalStore } from '~/stores/interval';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import type { Interval, IntervalTemplate, TimeTuple } from '~/utils/schedule.types';
|
||||
import { date } from 'quasar';
|
||||
import IntervalTemplateComponent from '~/components/scheduling/IntervalTemplateComponent.vue';
|
||||
import NavigationBar from '~/components/scheduling/NavigationBar.vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { buildInterval, intervalsOverlapped } from '~/utils/schedule';
|
||||
import { useIntervalTemplateStore } from '~/stores/intervalTemplate';
|
||||
|
||||
definePageMeta({ requiredRoles: ['Schedule Admins'] });
|
||||
|
||||
const selectedDate = ref(today());
|
||||
const { fetchBoats } = useBoatStore();
|
||||
const intervalStore = useIntervalStore();
|
||||
const intervalTemplateStore = useIntervalTemplateStore();
|
||||
const { boats } = storeToRefs(useBoatStore());
|
||||
const intervalTemplates = intervalTemplateStore.getIntervalTemplates();
|
||||
const calendar = ref();
|
||||
const overlapped = ref();
|
||||
const alert = ref(false);
|
||||
const newTemplate = ref<IntervalTemplate>({
|
||||
$id: '',
|
||||
name: 'NewTemplate',
|
||||
timeTuples: [['09:00', '12:00']],
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchBoats();
|
||||
await intervalTemplateStore.fetchIntervalTemplates();
|
||||
});
|
||||
|
||||
const filteredIntervals = (ts: Timestamp, boat: Boat) => {
|
||||
return intervalStore.getIntervals(ts, boat);
|
||||
};
|
||||
|
||||
const sortedIntervals = (ts: Timestamp, boat: Boat) => {
|
||||
return computed(() =>
|
||||
filteredIntervals(ts, boat).value.sort(
|
||||
(a, b) => Date.parse(a.start) - Date.parse(b.start)
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
function resetNewTemplate() {
|
||||
newTemplate.value = {
|
||||
$id: 'unsaved',
|
||||
name: 'NewTemplate',
|
||||
timeTuples: [['09:00', '12:00']],
|
||||
};
|
||||
}
|
||||
function createTemplate() {
|
||||
newTemplate.value.$id = 'unsaved';
|
||||
}
|
||||
function createIntervals(boat: Boat, templateId: string, dateStr: string) {
|
||||
const intervals = intervalsFromTemplate(boat, templateId, dateStr);
|
||||
intervals.forEach((interval) => intervalStore.createInterval(interval));
|
||||
}
|
||||
|
||||
function getIntervals(ts: Timestamp, boat: Boat) {
|
||||
return intervalStore.getIntervals(ts, boat);
|
||||
}
|
||||
|
||||
function intervalsFromTemplate(
|
||||
boat: Boat,
|
||||
templateId: string,
|
||||
dateStr: string
|
||||
): Interval[] {
|
||||
const template = intervalTemplateStore
|
||||
.getIntervalTemplates()
|
||||
.value.find((t) => t.$id === templateId);
|
||||
return template
|
||||
? template.timeTuples.map((timeTuple: TimeTuple) =>
|
||||
buildInterval(boat, timeTuple, dateStr)
|
||||
)
|
||||
: [];
|
||||
}
|
||||
|
||||
function deleteBlock(block: Interval) {
|
||||
if (block.$id) {
|
||||
intervalStore.deleteInterval(block.$id);
|
||||
}
|
||||
}
|
||||
|
||||
function onDragEnter(e: DragEvent, type: string) {
|
||||
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) {
|
||||
if (type === 'day' || type === 'head-day') {
|
||||
e.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
function onDragLeave(e: DragEvent, type: string) {
|
||||
if (type === 'day' || type === 'head-day') {
|
||||
e.preventDefault();
|
||||
if (e.target instanceof HTMLDivElement)
|
||||
e.target.classList.remove('bg-secondary');
|
||||
}
|
||||
}
|
||||
|
||||
function onDrop(
|
||||
e: DragEvent,
|
||||
type: string,
|
||||
scope: { resource: Boat; timestamp: Timestamp }
|
||||
) {
|
||||
if (e.target instanceof HTMLDivElement)
|
||||
e.target.classList.remove('bg-secondary');
|
||||
|
||||
if ((type === 'day' || type === 'head-day') && e.dataTransfer) {
|
||||
const templateId = e.dataTransfer.getData('ID');
|
||||
const dateStr = scope.timestamp.date;
|
||||
const resource = scope.resource;
|
||||
const existingIntervals = getIntervals(scope.timestamp, resource);
|
||||
const boatsToApply = type === 'head-day' ? boats.value : [resource];
|
||||
overlapped.value = boatsToApply
|
||||
.map((boat) =>
|
||||
intervalsOverlapped(
|
||||
existingIntervals.value.concat(
|
||||
intervalsFromTemplate(boat, templateId, dateStr)
|
||||
)
|
||||
)
|
||||
)
|
||||
.flat(1);
|
||||
if (overlapped.value.length === 0) {
|
||||
boatsToApply.map((b) => createIntervals(b, templateId, dateStr));
|
||||
} else {
|
||||
alert.value = true;
|
||||
}
|
||||
}
|
||||
if (e.target instanceof HTMLDivElement)
|
||||
e.target.classList.remove('bg-secondary');
|
||||
return false;
|
||||
}
|
||||
|
||||
function onToday() { calendar.value.moveToToday(); }
|
||||
function onPrev() { calendar.value.prev(); }
|
||||
function onNext() { calendar.value.next(); }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="fit row">
|
||||
<div class="q-pa-md">
|
||||
<div class="scheduler col-12">
|
||||
<NavigationBar @next="onNext" @today="onToday" @prev="onPrev" />
|
||||
<q-calendar-scheduler
|
||||
ref="calendar"
|
||||
v-model="selectedDate"
|
||||
v-model:model-resources="boats"
|
||||
resource-key="$id"
|
||||
resource-label="name"
|
||||
view="week"
|
||||
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
|
||||
animated
|
||||
bordered
|
||||
:drag-enter-func="onDragEnter"
|
||||
:drag-over-func="onDragOver"
|
||||
:drag-leave-func="onDragLeave"
|
||||
:drop-func="onDrop"
|
||||
day-min-height="50px"
|
||||
cell-width="150px">
|
||||
<template #day="{ scope }">
|
||||
<div
|
||||
v-if="filteredIntervals(scope.timestamp, scope.resource).value.length"
|
||||
style="display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; font-size: 12px;">
|
||||
<template
|
||||
v-for="block in sortedIntervals(scope.timestamp, scope.resource).value"
|
||||
:key="block.$id">
|
||||
<q-chip class="cursor-pointer">
|
||||
{{ date.formatDate(block.start, 'HH:mm') }} -
|
||||
{{ date.formatDate(block.end, 'HH:mm') }}
|
||||
</q-chip>
|
||||
<q-btn size="xs" icon="delete" round @click="deleteBlock(block)" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</q-calendar-scheduler>
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-pa-md" style="width: 400px">
|
||||
<q-list padding bordered class="rounded-borders">
|
||||
<q-item>
|
||||
<q-item-section>
|
||||
<q-item-label overline>Availability Templates</q-item-label>
|
||||
<q-item-label caption>
|
||||
Drag and drop a template to a boat / date to create booking availability
|
||||
</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-card-actions align="right">
|
||||
<q-btn label="Add Template" color="primary" @click="createTemplate" />
|
||||
</q-card-actions>
|
||||
<q-item v-if="newTemplate.$id === 'unsaved'">
|
||||
<IntervalTemplateComponent
|
||||
:model-value="newTemplate"
|
||||
:edit="true"
|
||||
@cancel="resetNewTemplate"
|
||||
@saved="resetNewTemplate" />
|
||||
</q-item>
|
||||
<q-separator spaced />
|
||||
<IntervalTemplateComponent
|
||||
v-for="template in intervalTemplates"
|
||||
:key="template.$id"
|
||||
:model-value="template" />
|
||||
</q-list>
|
||||
</div>
|
||||
<q-dialog v-model="alert">
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
<div class="text-h6">Warning!</div>
|
||||
</q-card-section>
|
||||
<q-card-section class="q-pt-none">
|
||||
Conflicting times! Please delete overlapped items!
|
||||
<q-chip v-for="item in overlapped" :key="item.index">
|
||||
{{ boats.find((b) => b.$id === item.boatId)?.name }}:
|
||||
{{ date.formatDate(item.start, 'hh:mm') }} -
|
||||
{{ date.formatDate(item.end, 'hh:mm') }}
|
||||
</q-chip>
|
||||
</q-card-section>
|
||||
<q-card-actions align="right">
|
||||
<q-btn flat label="OK" color="primary" v-close-popup />
|
||||
</q-card-actions>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
</div>
|
||||
</template>
|
||||
120
app/pages/schedule/view.vue
Normal file
120
app/pages/schedule/view.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user