325 lines
9.5 KiB
Vue
325 lines
9.5 KiB
Vue
<template>
|
|
<div class="fit row wrap justify-start items-start content-start">
|
|
<div class="q-pa-md">
|
|
<div
|
|
class="scheduler"
|
|
style="max-width: 1200px">
|
|
<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-popup-edit
|
|
:model-value="block"
|
|
v-slot="scope"
|
|
buttons
|
|
@save="saveInterval"
|
|
>
|
|
TODO: Why isn't this saving?
|
|
<q-input
|
|
:model-value="date.formatDate(scope.value.start, 'HH:mm')"
|
|
dense
|
|
autofocus
|
|
type="time"
|
|
label="start"
|
|
@keyup.enter="scope.set"
|
|
@update:model-value="
|
|
(t) => {
|
|
block.start = new Date(
|
|
scope.value.start.split('T')[0] + 'T' + t
|
|
).toISOString();
|
|
}
|
|
"
|
|
/>
|
|
TODO: Clean this up
|
|
<q-input
|
|
:model-value="date.formatDate(scope.value.end, 'HH:mm')"
|
|
dense
|
|
type="time"
|
|
label="end"
|
|
@keyup.enter="scope.set"
|
|
@update:model-value="
|
|
(t) =>
|
|
(block.end = new Date(
|
|
scope.value.end.split('T')[0] + 'T' + t
|
|
).toISOString())
|
|
"
|
|
/>
|
|
</q-popup-edit>-->
|
|
</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>
|
|
</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>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
QCalendarScheduler,
|
|
Timestamp,
|
|
today,
|
|
} from '@quasar/quasar-ui-qcalendar';
|
|
import { Boat, useBoatStore } from 'src/stores/boat';
|
|
import { useIntervalStore } from 'src/stores/interval';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import type {
|
|
Interval,
|
|
IntervalTemplate,
|
|
TimeTuple,
|
|
} from 'src/stores/schedule.types';
|
|
import { date } from 'quasar';
|
|
import IntervalTemplateComponent from 'src/components/scheduling/IntervalTemplateComponent.vue';
|
|
import NavigationBar from 'src/components/scheduling/NavigationBar.vue';
|
|
import { storeToRefs } from 'pinia';
|
|
import { buildInterval, intervalsOverlapped } from 'src/utils/schedule';
|
|
import { useIntervalTemplateStore } from 'src/stores/intervalTemplate';
|
|
|
|
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']],
|
|
});
|
|
|
|
/* TODOS:
|
|
* Need more validation:
|
|
- Interval start < end
|
|
- Intervals don't overlap
|
|
* Need to handle case of overnight blocks.
|
|
*/
|
|
|
|
onMounted(async () => {
|
|
await fetchBoats();
|
|
await intervalTemplateStore.fetchIntervalTemplates();
|
|
});
|
|
|
|
const filteredIntervals = (date: Timestamp, boat: Boat) => {
|
|
return intervalStore.getIntervals(date, boat);
|
|
};
|
|
|
|
const sortedIntervals = (date: Timestamp, boat: Boat) => {
|
|
return computed(() =>
|
|
filteredIntervals(date, 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, date: string) {
|
|
const intervals = intervalsFromTemplate(boat, templateId, date);
|
|
intervals.forEach((interval) => intervalStore.createInterval(interval));
|
|
}
|
|
|
|
function getIntervals(date: Timestamp, boat: Boat) {
|
|
return intervalStore.getIntervals(date, boat);
|
|
}
|
|
|
|
function intervalsFromTemplate(
|
|
boat: Boat,
|
|
templateId: string,
|
|
date: string
|
|
): Interval[] {
|
|
const template = intervalTemplateStore
|
|
.getIntervalTemplates()
|
|
.value.find((t) => t.$id === templateId);
|
|
return template
|
|
? template.timeTuples.map((timeTuple: TimeTuple) =>
|
|
buildInterval(boat, timeTuple, date)
|
|
)
|
|
: [];
|
|
}
|
|
|
|
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(
|
|
//TODO: Move all overlap checking to the store. This is too messy right now.
|
|
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 date = 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, date)
|
|
)
|
|
)
|
|
)
|
|
.flat(1);
|
|
if (overlapped.value.length === 0) {
|
|
boatsToApply.map((b) => createIntervals(b, templateId, date));
|
|
} 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>
|