oys/bab-app
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

Many changes to try to improve reliability

Browse Source
This commit is contained in:
Patrick Toal
2024-05-17 18:17:25 -04:00
parent dd631b71bb
commit b506ab7ca9
11 changed files with 218 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
src/pages/schedule/ManageCalendar.vue
View File

@@ -23,7 +23,7 @@
>
<template #day="{ scope }">
<div
v-if="getIntervals(scope.timestamp, scope.resource)"
v-if="filteredIntervals(scope.timestamp, scope.resource).length"
style="
display: flex;
flex-wrap: wrap;
@@ -33,21 +33,22 @@
"
>
<template
v-for="block in getIntervals(
v-for="block in sortedIntervals(
scope.timestamp,
scope.resource
).sort((a, b) => Date.parse(a.start) - Date.parse(b.start))"
)"
:key="block.id"
>
<q-chip class="cursor-pointer">
{{ date.formatDate(block.start, 'HH:mm') }} -
{{ date.formatDate(block.end, 'HH:mm') }}
<q-popup-edit
<!-- <q-popup-edit
:model-value="block"
v-slot="scope"
buttons
@save="updateInterval(block)"
@save="saveInterval"
>
TODO: Why isn't this saving?
<q-input
:model-value="date.formatDate(scope.value.start, 'HH:mm')"
dense
@@ -56,13 +57,14 @@
label="start"
@keyup.enter="scope.set"
@update:model-value="
(t) =>
(block.start = buildISODate(
date.formatDate(scope.value.start, 'YYYY-MM-DD'),t as string
))
(t) => {
block.start = new Date(
scope.value.start.split('T')[0] + 'T' + t
).toISOString();
}
"
/>
<!-- TODO: Clean this up -->
TODO: Clean this up
<q-input
:model-value="date.formatDate(scope.value.end, 'HH:mm')"
dense
@@ -71,12 +73,12 @@
@keyup.enter="scope.set"
@update:model-value="
(t) =>
(block.end = buildISODate(
date.formatDate(scope.value.end, 'YYYY-MM-DD'),t as string
))
(block.end = new Date(
scope.value.end.split('T')[0] + 'T' + t
).toISOString())
"
/>
</q-popup-edit> </q-chip
</q-popup-edit>--> </q-chip
><q-btn
size="xs"
icon="delete"
@@ -89,7 +91,7 @@
</q-calendar-scheduler>
</div>
</div>
<div class="q-pa-md" style="width: 400">
<div class="q-pa-md" style="width: 400px">
<q-list padding bordered class="rounded-borders">
<q-item>
<q-item-section>
@@ -125,8 +127,12 @@
<div class="text-h6">Warning!</div>
</q-card-section>
<q-card-section class="q-pt-none">
This will overwrite existing blocks!
{{ overlapped }}
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 />
@@ -147,7 +153,6 @@ import {
useScheduleStore,
} from 'src/stores/schedule';
import { onMounted, ref } from 'vue';
import { buildISODate } from 'src/utils/misc';
import type {
Interval,
IntervalTemplate,
@@ -160,19 +165,17 @@ import { storeToRefs } from 'pinia';
const selectedDate = ref(today());
const { fetchBoats } = useBoatStore();
const { getIntervals, fetchIntervals, updateInterval, fetchIntervalTemplates } =
useScheduleStore();
const scheduleStore = useScheduleStore();
const { boats } = storeToRefs(useBoatStore());
const { timeblockTemplates } = storeToRefs(useScheduleStore());
const calendar = ref();
const overlapped = ref();
const blankTemplate: IntervalTemplate = {
const alert = ref(false);
const newTemplate = ref<IntervalTemplate>({
$id: '',
name: 'NewTemplate',
timeTuples: [['09:00', '12:00']],
};
const newTemplate = ref<IntervalTemplate>({ ...blankTemplate });
const alert = ref(false);
});
/* TODOS:
* Need more validation:
@@ -183,20 +186,37 @@ const alert = ref(false);
onMounted(async () => {
await fetchBoats();
await fetchIntervals();
await fetchIntervalTemplates();
await scheduleStore.fetchIntervals();
await scheduleStore.fetchIntervalTemplates();
});
const filteredIntervals = (date: Timestamp, boat: Boat) => {
return scheduleStore.getIntervals(date, boat).value;
};
const sortedIntervals = (date: Timestamp, boat: Boat) => {
return filteredIntervals(date, boat).sort(
(a, b) => Date.parse(a.start) - Date.parse(b.start)
);
};
function resetNewTemplate() {
newTemplate.value = { ...blankTemplate };
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) {
timeBlocksFromTemplate(boat, templateId, date)?.map((block) =>
useScheduleStore().createInterval(block)
);
const intervals = timeBlocksFromTemplate(boat, templateId, date);
intervals.forEach((interval) => scheduleStore.createInterval(interval));
}
function getIntervals(date: Timestamp, boat: Boat) {
return scheduleStore.getIntervals(date, boat);
}
function timeBlocksFromTemplate(
@@ -204,25 +224,28 @@ function timeBlocksFromTemplate(
templateId: string,
date: string
): Interval[] {
const timeBlock = timeblockTemplates.value.find((t) => t.$id === templateId);
return (
timeBlock?.timeTuples.map((tb: TimeTuple) =>
buildInterval(boat, tb, date)
) || []
);
const template = timeblockTemplates.value.find((t) => t.$id === templateId);
return template
? template.timeTuples.map((timeTuple: TimeTuple) =>
buildInterval(boat, timeTuple, date)
)
: [];
}
function deleteBlock(block: Interval) {
if (block.$id) {
useScheduleStore().deleteInterval(block.$id);
scheduleStore.deleteInterval(block.$id);
}
return false;
}
function onDragEnter(e: DragEvent, type: string) {
if (type === 'day' || type === 'head-day') {
e.preventDefault();
if (e.target instanceof HTMLDivElement)
if (
e.target instanceof HTMLDivElement &&
(e.target.classList.contains('q-calendar-scheduler__head--day') ||
e.target.classList.contains('q-calendar-scheduler__day'))
)
e.target.classList.add('bg-secondary');
}
}
@@ -230,16 +253,18 @@ function onDragEnter(e: DragEvent, type: string) {
function onDragOver(e: DragEvent, type: string) {
if (type === 'day' || type === 'head-day') {
e.preventDefault();
return true;
}
}
function onDragLeave(e: DragEvent, type: string) {
if (type === 'day' || type === 'head-day') {
e.preventDefault();
if (e.target instanceof HTMLDivElement)
if (
e.target instanceof HTMLDivElement &&
(e.target.classList.contains('q-calendar-scheduler__head--day') ||
e.target.classList.contains('q-calendar-scheduler__day'))
)
e.target.classList.remove('bg-secondary');
return false;
}
}
@@ -249,34 +274,28 @@ function onDrop(
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;
if (type === 'head-day') {
overlapped.value = boats.value.map((boat) =>
const resource = scope.resource;
const existingIntervals = getIntervals(scope.timestamp, resource).value;
const boatsToApply = type === 'head-day' ? boats.value : [resource];
overlapped.value = boatsToApply
.map((boat) =>
blocksOverlapped(
getIntervals(scope.timestamp, boat).concat(
existingIntervals.concat(
timeBlocksFromTemplate(boat, templateId, date)
)
)
);
if (overlapped.value.length === 0) {
boats.value.map((b) => createIntervals(b, templateId, date));
} else {
alert.value = true;
}
)
.flat(1);
if (overlapped.value.length === 0) {
boatsToApply.map((b) => createIntervals(b, templateId, date));
} else {
overlapped.value = blocksOverlapped(
getIntervals(scope.timestamp, scope.resource).concat(
timeBlocksFromTemplate(scope.resource, templateId, date)
)
);
if (overlapped.value.length === 0) {
createIntervals(scope.resource, templateId, date);
} else {
alert.value = true;
}
alert.value = true;
}
}
if (e.target instanceof HTMLDivElement)