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

5
src/components/ResourceScheduleViewerComponent.vue
View File

@@ -107,7 +107,6 @@ import {
QCalendarResource,
TimestampOrNull,
today,
parseDate,
parseTimestamp,
addToDate,
Timestamp,
@@ -172,8 +171,8 @@ function monthFormatter() {
}
function getEvents(scope: ResourceIntervalScope) {
const resourceEvents = reservationStore.getBoatReservations(
parseDate(date.extractDate(selectedDate.value, 'YYYY-MM-DD')) as Timestamp,
const resourceEvents = reservationStore.getReservationsByDate(
selectedDate.value,
scope.resource.$id
);

8
src/components/scheduling/boat/BoatScheduleTableComponent.vue
View File

@@ -70,6 +70,7 @@ import {
parseTimestamp,
parseDate,
addToDate,
getDate,
} from '@quasar/quasar-ui-qcalendar';
import CalendarHeaderComponent from './CalendarHeaderComponent.vue';
@@ -189,13 +190,13 @@ function getBoatBlocks(scope: DayBodyScope): Interval[] {
function getBoatReservations(scope: DayBodyScope): Reservation[] {
const boat = boats.value[scope.columnIndex];
return boat
? reservationStore.getBoatReservations(scope.timestamp, boat.$id)
? reservationStore.getReservationsByDate(getDate(scope.timestamp), boat.$id)
: [];
}
// function changeEvent({ start }: { start: string }) {
// const newBlocks = scheduleStore.getIntervalsForDate(start);
// const reservations = scheduleStore.getBoatReservations(
// const reservations = scheduleStore.getReservationsByDate(
// parsed(start) as Timestamp
// );
// boats.value.map((boat) => {
@@ -268,4 +269,7 @@ const disabledBefore = computed(() => {
font-size: 0.8em
.q-calendar-day__day.q-current-day
padding: 1px
.q-calendar-day__head--days__column
background: $primary
color: white
</style>

9
src/pages/schedule/BoatScheduleView.vue
View File

@@ -56,7 +56,12 @@ import { useReservationStore } from 'src/stores/reservation';
import { Reservation } from 'src/stores/schedule.types';
import { ref } from 'vue';
const reservationStore = useReservationStore();
import { TimestampOrNull, parsed, today } from '@quasar/quasar-ui-qcalendar';
import {
TimestampOrNull,
getDate,
parsed,
today,
} from '@quasar/quasar-ui-qcalendar';
import { QCalendarDay } from '@quasar/quasar-ui-qcalendar';
import { date } from 'quasar';
import { Timestamp } from '@quasar/quasar-ui-qcalendar';
@@ -87,7 +92,7 @@ function slotStyle(
}
function reservationEvents(timestamp: Timestamp) {
return reservationStore.getBoatReservations(timestamp);
return reservationStore.getReservationsByDate(getDate(timestamp));
}
function onMoved(data: Event) {
console.log('onMoved', data);

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)

12
src/stores/auth.ts
View File

@@ -44,12 +44,16 @@ export const useAuthStore = defineStore('auth', () => {
'/userinfo/' + id,
ExecutionMethod.GET
)
.then(
(res) => (userNames.value[id] = JSON.parse(res.responseBody).name)
);
.then((res) => {
if (res.responseBody) {
userNames.value[id] = JSON.parse(res.responseBody).name;
} else {
console.error(res, id);
}
});
}
} catch (e) {
console.log('Failed to get username. Error: ' + e);
console.error('Failed to get username. Error: ' + e);
}
return userNames.value[id];
}

92
src/stores/reservation.ts
View File

@@ -2,17 +2,20 @@ import { defineStore } from 'pinia';
import type { Reservation } from './schedule.types';
import { ref } from 'vue';
import { AppwriteIds, databases } from 'src/boot/appwrite';
import { Timestamp, parsed } from '@quasar/quasar-ui-qcalendar';
import { Query } from 'appwrite';
import { date } from 'quasar';
import { Timestamp, parseDate } from '@quasar/quasar-ui-qcalendar';
export const useReservationStore = defineStore('reservation', () => {
const reservations = ref<Reservation[]>([]);
const reservations = ref<Map<string, Reservation>>(new Map());
const datesLoaded = ref<Record<string, boolean>>({});
const getConflictingReservations = (
resource: string,
start: Date,
end: Date
): Reservation[] => {
const overlapped = reservations.value.filter(
const overlapped = Array.from(reservations.value.values()).filter(
(entry: Reservation) =>
entry.resource == resource &&
new Date(entry.start) < end &&
@@ -37,46 +40,75 @@ export const useReservationStore = defineStore('reservation', () => {
);
};
const addOrCreateReservation = (reservation: Reservation) => {
const index = reservations.value.findIndex(
(res) => res.id == reservation.id
);
index != -1
? (reservations.value[index] = reservation)
: reservations.value.push(reservation);
};
async function fetchReservations() {
function setDateLoaded(start: Date, end: Date, state: boolean) {
let curDate = start;
while (curDate < end) {
datesLoaded.value[(parseDate(curDate) as Timestamp).date] = state;
curDate = date.addToDate(curDate, { days: 1 });
}
}
async function fetchReservationsForDateRange(start: string, end?: string) {
const startDate = new Date(start + 'T00:00');
const endDate = new Date(end || start + 'T23:59');
datesLoaded.value[start] = false;
if (end) {
setDateLoaded(startDate, endDate, false);
}
try {
const response = await databases.listDocuments(
AppwriteIds.databaseId,
AppwriteIds.collection.reservation
);
reservations.value = response.documents as Reservation[];
databases
.listDocuments(
AppwriteIds.databaseId,
AppwriteIds.collection.reservation,
[
Query.and([
Query.greaterThanEqual('end', startDate.toISOString()),
Query.lessThanEqual('start', endDate.toISOString()),
]),
]
)
.then((response) => {
response.documents.forEach((d) =>
reservations.value.set(d.$id, d as Reservation)
);
setDateLoaded(startDate, endDate, true);
});
} catch (error) {
console.error('Failed to fetch timeblocks', error);
console.error('Failed to fetch reservations', error);
}
}
const getBoatReservations = (
searchDate: Timestamp,
async function fetchReservations() {
return;
// fetchReservationsForDateRange(
// today(),
// date.addToDate(today(), { days: 7 }).toLocaleDateString()
// );
}
const getReservationsByDate = (
searchDate: string,
boat?: string
): Reservation[] => {
const result = reservations.value.filter((x) => {
return (
((parsed(x.start)?.date == searchDate.date ||
parsed(x.end)?.date == searchDate.date) && // Part of reservation falls on day
x.resource != undefined && // A boat is defined
!boat) ||
x.resource == boat // A specific boat has been passed, and matches
);
if (!datesLoaded.value[searchDate]) {
fetchReservationsForDateRange(searchDate);
}
const result = Array.from(reservations.value.values()).filter((x) => {
return new Date(x.start) < new Date(searchDate + 'T' + '23:59') &&
new Date(x.end) > new Date(searchDate + 'T' + '00:00') && // Part of reservation falls on day
boat
? boat === x.boat
: true; // A specific boat has been passed, and matches
});
console.log(result);
return result;
};
return {
getBoatReservations,
getReservationsByDate,
fetchReservations,
addOrCreateReservation,
isReservationOverlapped,
isResourceTimeOverlapped,
getConflictingReservations,

54
src/stores/schedule.ts
View File

@@ -1,5 +1,5 @@
import { defineStore } from 'pinia';
import { ref } from 'vue';
import { ComputedRef, computed, ref } from 'vue';
import { Boat } from './boat';
import {
Timestamp,
@@ -11,7 +11,6 @@ import {
import { IntervalTemplate, TimeTuple, Interval } from './schedule.types';
import { AppwriteIds, databases } from 'src/boot/appwrite';
import { ID, Models } from 'appwrite';
import { buildISODate } from 'src/utils/misc';
export function arrayToTimeTuples(arr: string[]) {
const timeTuples: TimeTuple[] = [];
@@ -70,28 +69,34 @@ export function buildInterval(
as a UTC time and date-time forms are interpreted as local time. */
const result = {
boatId: resource.$id,
start: buildISODate(blockDate, time[0]),
end: buildISODate(blockDate, time[1]),
start: new Date(blockDate + 'T' + time[0]).toISOString(),
end: new Date(blockDate + 'T' + time[1]).toISOString(),
};
return result;
}
export const useScheduleStore = defineStore('schedule', () => {
// TODO: Implement functions to dynamically pull this data.
const timeblocks = ref<Interval[]>([]);
const timeblockTemplates = ref<IntervalTemplate[]>([]);
const intervals = ref<Interval[]>([]);
const intervalTemplates = ref<IntervalTemplate[]>([]);
const getIntervals = (date: Timestamp, boat: Boat): Interval[] => {
return timeblocks.value.filter((block) => {
return (
compareDate(parseDate(new Date(block.start)) as Timestamp, date) &&
block.boatId === boat.$id
);
});
const getIntervals = (
date: Timestamp,
boat: Boat
): ComputedRef<Interval[]> => {
return computed(() =>
intervals.value.filter((block) => {
return (
compareDate(parseDate(new Date(block.start)) as Timestamp, date) &&
block.boatId === boat.$id
);
})
);
};
const getIntervalsForDate = (date: string): Interval[] => {
// TODO: This needs to actually make sure we have the dates we need, stay in sync, etc.
return timeblocks.value.filter((b) => {
return intervals.value.filter((b) => {
return compareDate(
parseDate(new Date(b.start)) as Timestamp,
parsed(date) as Timestamp
@@ -105,7 +110,7 @@ export const useScheduleStore = defineStore('schedule', () => {
AppwriteIds.databaseId,
AppwriteIds.collection.timeBlock
);
timeblocks.value = response.documents as Interval[];
intervals.value = response.documents as Interval[];
} catch (error) {
console.error('Failed to fetch timeblocks', error);
}
@@ -117,7 +122,7 @@ export const useScheduleStore = defineStore('schedule', () => {
AppwriteIds.databaseId,
AppwriteIds.collection.timeBlockTemplate
);
timeblockTemplates.value = response.documents.map(
intervalTemplates.value = response.documents.map(
(d: Models.Document): IntervalTemplate => {
return {
...d,
@@ -153,7 +158,7 @@ export const useScheduleStore = defineStore('schedule', () => {
ID.unique(),
interval
);
timeblocks.value.push(response as Interval);
intervals.value.push(response as Interval);
} catch (e) {
console.error('Error creating Interval: ' + e);
}
@@ -167,7 +172,8 @@ export const useScheduleStore = defineStore('schedule', () => {
interval.$id,
{ ...interval, $id: undefined }
);
timeblocks.value.push(response as Interval);
intervals.value.push(response as Interval);
console.log(`Saved Interval: ${interval.$id}`);
} else {
console.error('Update interval called without an ID');
}
@@ -182,7 +188,7 @@ export const useScheduleStore = defineStore('schedule', () => {
AppwriteIds.collection.timeBlock,
id
);
timeblocks.value = timeblocks.value.filter((block) => block.$id !== id);
intervals.value = intervals.value.filter((block) => block.$id !== id);
} catch (e) {
console.error('Error deleting Interval: ' + e);
}
@@ -195,7 +201,7 @@ export const useScheduleStore = defineStore('schedule', () => {
ID.unique(),
{ name: template.name, timeTuple: template.timeTuples.flat(2) }
);
timeblockTemplates.value.push(response as IntervalTemplate);
intervalTemplates.value.push(response as IntervalTemplate);
} catch (e) {
console.error('Error updating IntervalTemplate: ' + e);
}
@@ -207,7 +213,7 @@ export const useScheduleStore = defineStore('schedule', () => {
AppwriteIds.collection.timeBlockTemplate,
id
);
timeblockTemplates.value = timeblockTemplates.value.filter(
intervalTemplates.value = intervalTemplates.value.filter(
(template) => template.$id !== id
);
} catch (e) {
@@ -228,7 +234,7 @@ export const useScheduleStore = defineStore('schedule', () => {
timeTuple: template.timeTuples.flat(2),
}
);
timeblockTemplates.value = timeblockTemplates.value.map((b) =>
intervalTemplates.value = intervalTemplates.value.map((b) =>
b.$id !== id
? b
: ({
@@ -242,8 +248,8 @@ export const useScheduleStore = defineStore('schedule', () => {
};
return {
timeblocks,
timeblockTemplates,
timeblocks: intervals,
timeblockTemplates: intervalTemplates,
getIntervalsForDate,
getIntervals,
fetchIntervals,

4
src/stores/schedule.types.ts
View File

@@ -3,8 +3,8 @@ import { Models } from 'appwrite';
export type StatusTypes = 'tentative' | 'confirmed' | 'pending' | undefined;
export type Reservation = Partial<Models.Document> & {
user: string;
start: string; // ISODate
end: string; //ISODate
start: string;
end: string;
resource: string; // Boat ID
status?: StatusTypes;
};

1
src/stores/task.ts
View File

@@ -151,7 +151,6 @@ export const useTaskStore = defineStore('tasks', {
const result = state.tasks.filter((task) =>
task.title.toLowerCase().includes(searchQuery.toLowerCase())
);
console.log(result);
return result;
},
},

4
src/utils/misc.ts
View File

@@ -1,7 +1,3 @@
export function buildISODate(date: string, time: string | null): string {
return new Date(date + 'T' + time || '00:00').toISOString();
}
export function getNewId(): string {
return [...Array(20)]
.map(() => Math.floor(Math.random() * 16).toString(16))