Skip to content

Commit a788f3a

Browse files
brundonsmithbrundonsmith
committed
Remove "buffer" time from event scheduling overlap logic, and improve UI when there is an overlap
1 parent 7ed6835 commit a788f3a

File tree

3 files changed

+34
-70
lines changed

3 files changed

+34
-70
lines changed

‎back-end/utils/misc.ts‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -178,14 +178,14 @@ type FakeDayjs = {
178178
diff: (other: any, unit: 'minutes') => number,
179179
add: (n: number, unit: 'minutes') => FakeDayjs,
180180
subtract: (n: number, unit: 'minutes') => FakeDayjs,
181+
isSame: (other: any) => boolean,
181182
isAfter: (other: any) => boolean,
182183
isBefore: (other: any) => boolean
183184
}
184185

185186
export function checkInProgressEventOverlap(
186187
newEvent: { start_datetime: FakeDayjs | null, end_datetime: FakeDayjs | null, event_site_location: string | null, event_id: string | undefined },
187188
existingEvent: { start_datetime: FakeDayjs, end_datetime: FakeDayjs | null, event_site_location: string | null, event_id: string },
188-
bufferMinutes = 0
189189
): boolean {
190190
if (
191191
!newEvent.start_datetime ||
@@ -206,23 +206,18 @@ export function checkInProgressEventOverlap(
206206
if (!end1) {
207207
if (!end2) {
208208
// if neither has an end time, just check if they start at the same time
209-
return Math.abs(start1.diff(start2, 'minutes')) <= bufferMinutes
209+
return start1.isSame(start2)
210210
} else {
211211
// if only 2 has an end time, see if 1 starts during 2
212-
return start1.isAfter(start2.subtract(bufferMinutes, 'minutes'))
213-
&& start1.isBefore(end2.add(bufferMinutes, 'minutes'))
212+
return start1.isAfter(start2) && start1.isBefore(end2)
214213
}
215214
} else {
216215
if (!end2) {
217216
// if only 1 has an end time, see if 2 starts during 1
218-
return start2.isAfter(start1.subtract(bufferMinutes, 'minutes'))
219-
&& start2.isBefore(end1.add(bufferMinutes, 'minutes'))
217+
return start2.isAfter(start1) && start2.isBefore(end1)
220218
} else {
221219
// if both have end times, test overlap
222-
return (
223-
start1.isBefore(end2.add(bufferMinutes, 'minutes')) &&
224-
end1.isAfter(start2.subtract(bufferMinutes, 'minutes'))
225-
)
220+
return start1.isBefore(end2) && end1.isAfter(start2)
226221
}
227222
}
228223
}

‎front-end/src/components/events/Event.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export function EventInfo({ event, editEvent }: Pick<Props, 'event' | 'editEvent
157157
)
158158
}
159159

160-
const formatEventTime = (event: Props['event']) => {
160+
export const formatEventTime = (event: Props['event']) => {
161161
const now = dayjs.utc()
162162
const timeOnly = 'h:mma'
163163
const dateAndTime = (d: Dayjs) => (

‎front-end/src/components/events/EventOverlapModal.tsx‎

Lines changed: 28 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@ import React from 'react'
33
import { DayjsEvent } from '../../hooks/useStore'
44
import Button from '../core/Button'
55
import Col from '../core/Col'
6+
import Icon from '../core/Icon'
67
import Modal from '../core/Modal'
78
import Spacer from '../core/Spacer'
9+
import { formatEventLocation, formatEventTime } from './Event'
810

911
type Props = {
1012
isOpen: boolean,
@@ -17,71 +19,38 @@ export default React.memo(({ isOpen, onClose, onConfirm, overlappingEvents }: Pr
1719
return (
1820
<Modal isOpen={isOpen} side='right'>
1921
{() => (
20-
<Col align='center' justify='center' padding={20} pageLevel>
22+
<Col align='stretch' justify='center' padding={20} pageLevel>
2123
<div style={{ fontSize: 22, textAlign: 'center' }}>
2224
This event overlaps with the following. Schedule it anyway?
2325
</div>
2426

2527
<Spacer size={16} />
2628

27-
<table style={{ tableLayout: 'fixed', width: '100%', borderSpacing: 0 }}>
28-
<thead>
29-
<tr>
30-
<th
31-
style={{
32-
textAlign: 'left',
33-
}}
34-
>
35-
When
36-
</th>
37-
<th style={{ textAlign: 'left' }}>
38-
What
39-
</th>
40-
<th style={{ textAlign: 'left' }}>
41-
Where
42-
</th>
43-
</tr>
44-
</thead>
45-
<tbody>
46-
{overlappingEvents.map((event, index) => (
47-
<tr
48-
key={event.event_id}
49-
style={{
50-
backgroundColor:
51-
index % 2 ? 'transparent' : 'rgba(0, 0, 0, 0.1)',
52-
}}
53-
>
54-
<td
55-
style={{
56-
whiteSpace: 'nowrap',
57-
overflow: 'hidden',
58-
textOverflow: 'ellipsis',
59-
}}
60-
>
61-
{event.start_datetime.format('ddd h:mma')}
62-
</td>
63-
<td
64-
style={{
65-
whiteSpace: 'nowrap',
66-
overflow: 'hidden',
67-
textOverflow: 'ellipsis',
68-
}}
69-
>
70-
{event.name}
71-
</td>
72-
<td
73-
style={{
74-
whiteSpace: 'nowrap',
75-
overflow: 'hidden',
76-
textOverflow: 'ellipsis',
77-
}}
78-
>
79-
{event.event_site_location_name}
80-
</td>
81-
</tr>
82-
))}
83-
</tbody>
84-
</table>
29+
<div style={{ maxHeight: '40vh', overflowY: 'auto' }}>
30+
{overlappingEvents.map((event, index) =>
31+
<div className='card' style={{ marginTop: index > 0 ? 12 : undefined }} key={event.event_id}>
32+
<div>
33+
{event.name}
34+
</div>
35+
36+
<Spacer size={8} />
37+
38+
<div style={{ display: 'flex', alignItems: 'center' }}>
39+
<Icon name='schedule' style={{ fontSize: 18 }} />
40+
<Spacer size={6} />
41+
{formatEventTime(event)}
42+
</div>
43+
44+
<Spacer size={8} />
45+
46+
<div style={{ display: 'flex', alignItems: 'center' }}>
47+
<Icon name='location_on' style={{ fontSize: 18 }} />
48+
<Spacer size={6} />
49+
{formatEventLocation(event)}
50+
</div>
51+
</div>
52+
)}
53+
</div>
8554

8655
<Spacer size={16} />
8756

0 commit comments

Comments
 (0)