From 8626160df215d72da11c638c52044e703d1afeb7 Mon Sep 17 00:00:00 2001 From: Nicolas Mowen Date: Sun, 15 Oct 2023 11:01:44 -0600 Subject: [PATCH] Show ongoing events at top of events page (#8168) * Show ongoing events separately * Separate to separate event function * Change icon type * Hide in progress when date range search occurs * Collapse in progress when filtering * Fix event overlay * Make tooltip more clear Co-authored-by: Blake Blackshear --------- Co-authored-by: Blake Blackshear --- web/src/routes/Events.jsx | 468 +++++++++++++++++++++++--------------- 1 file changed, 287 insertions(+), 181 deletions(-) diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx index b0afff971..55ab44f95 100644 --- a/web/src/routes/Events.jsx +++ b/web/src/routes/Events.jsx @@ -31,6 +31,9 @@ import Timepicker from '../components/TimePicker'; import TimelineSummary from '../components/TimelineSummary'; import TimelineEventOverlay from '../components/TimelineEventOverlay'; import { Score } from '../icons/Score'; +import { About } from '../icons/About'; +import MenuIcon from '../icons/Menu'; +import { MenuOpen } from '../icons/MenuOpen'; const API_LIMIT = 25; @@ -91,13 +94,15 @@ export default function Events({ path, ...props }) { showDeleteFavorite: false, }); + const [showInProgress, setShowInProgress] = useState(true); + const eventsFetcher = useCallback( (path, params) => { if (searchParams.event) { path = `${path}/${searchParams.event}`; return axios.get(path).then((res) => [res.data]); } - params = { ...params, include_thumbnails: 0, limit: API_LIMIT }; + params = { ...params, in_progress: 0, include_thumbnails: 0, limit: API_LIMIT }; return axios.get(path, { params }).then((res) => res.data); }, [searchParams] @@ -116,6 +121,7 @@ export default function Events({ path, ...props }) { [searchParams] ); + const { data: ongoingEvents } = useSWR(['events', { in_progress: 1, include_thumbnails: 0 }]); const { data: eventPages, mutate, size, setSize, isValidating } = useSWRInfinite(getKey, eventsFetcher); const { data: allLabels } = useSWR(['labels']); @@ -238,6 +244,7 @@ export default function Events({ path, ...props }) { const handleSelectDateRange = useCallback( (dates) => { + setShowInProgress(false); setSearchParams({ ...searchParams, before: dates.before, after: dates.after }); setState({ ...state, showDatePicker: false }); }, @@ -253,6 +260,7 @@ export default function Events({ path, ...props }) { const onFilter = useCallback( (name, value) => { + setShowInProgress(false); const updatedParams = { ...searchParams, [name]: value }; setSearchParams(updatedParams); const queryString = Object.keys(updatedParams) @@ -604,192 +612,98 @@ export default function Events({ path, ...props }) { )}
+ {ongoingEvents ? ( +
+
+ + Ongoing Events + + + +
+ {showInProgress && + ongoingEvents.map((event, _) => { + return ( + { + this.player = null; + }} + onDownloadClick={onDownloadClick} + onReady={(player) => { + this.player = player; + this.player.on('playing', () => { + setEventOverlay(undefined); + }); + }} + onSave={onSave} + showSubmitToPlus={showSubmitToPlus} + /> + ); + })} +
+ ) : null} + + Past Events + {eventPages ? ( eventPages.map((page, i) => { const lastPage = eventPages.length === i + 1; return page.map((event, j) => { const lastEvent = lastPage && page.length === j + 1; return ( - -
(viewEvent === event.id ? setViewEvent(null) : setViewEvent(event.id))} - > -
- onSave(e, event.id, !event.retain_indefinitely)} - fill={event.retain_indefinitely ? 'currentColor' : 'none'} - /> - {event.end_time ? null : ( -
- In progress -
- )} -
-
-
-
- {event.label.replaceAll('_', ' ')} - {event.sub_label ? `: ${event.sub_label.replaceAll('_', ' ')}` : null} -
- -
- - {formatUnixTimestampToDateTime(event.start_time, { ...config.ui })} -
- - - -
-
- ( {getDurationFromTimestamps(event.start_time, event.end_time)} ) -
-
-
- - {event.camera.replaceAll('_', ' ')} -
- {event.zones.length ? ( -
- - {event.zones.join(', ').replaceAll('_', ' ')} -
- ) : null} -
- - {(event?.data?.top_score || event.top_score || 0) == 0 - ? null - : `${event.label}: ${((event?.data?.top_score || event.top_score) * 100).toFixed(0)}%`} - {(event?.data?.sub_label_score || 0) == 0 - ? null - : `, ${event.sub_label}: ${(event?.data?.sub_label_score * 100).toFixed(0)}%`} -
-
- -
- onDelete(e, event.id, event.retain_indefinitely)} - /> - - onDownloadClick(e, event)} - /> -
-
-
- {viewEvent !== event.id ? null : ( -
-
-
- - - - -
- -
- {eventDetailType == 'clip' && event.has_clip ? ( -
- - onEventFrameSelected(event, frame, seekSeconds) - } - /> -
- { - this.player = player; - this.player.on('playing', () => { - setEventOverlay(undefined); - }); - }} - onDispose={() => { - this.player = null; - }} - > - {eventOverlay ? ( - - ) : null} - -
-
- ) : null} - - {eventDetailType == 'image' || !event.has_clip ? ( -
- {`${event.label} -
- ) : null} -
-
-
- )} - + { + this.player = null; + }} + onDownloadClick={onDownloadClick} + onReady={(player) => { + this.player = player; + this.player.on('playing', () => { + setEventOverlay(undefined); + }); + }} + onSave={onSave} + showSubmitToPlus={showSubmitToPlus} + /> ); }); }) @@ -801,3 +715,195 @@ export default function Events({ path, ...props }) {
); } + +function Event({ + className = '', + config, + event, + eventDetailType, + eventOverlay, + viewEvent, + setViewEvent, + lastEvent, + lastEventRef, + uploading, + handleEventDetailTabChange, + onEventFrameSelected, + onDelete, + onDispose, + onDownloadClick, + onReady, + onSave, + showSubmitToPlus, +}) { + const apiHost = useApiHost(); + + return ( +
+
(viewEvent === event.id ? setViewEvent(null) : setViewEvent(event.id))} + > +
+ onSave(e, event.id, !event.retain_indefinitely)} + fill={event.retain_indefinitely ? 'currentColor' : 'none'} + /> + {event.end_time ? null : ( +
+ In progress +
+ )} +
+
+
+
+ {event.label.replaceAll('_', ' ')} + {event.sub_label ? `: ${event.sub_label.replaceAll('_', ' ')}` : null} +
+ +
+ + {formatUnixTimestampToDateTime(event.start_time, { ...config.ui })} +
+ - + +
+
+ ( {getDurationFromTimestamps(event.start_time, event.end_time)} ) +
+
+
+ + {event.camera.replaceAll('_', ' ')} +
+ {event.zones.length ? ( +
+ + {event.zones.join(', ').replaceAll('_', ' ')} +
+ ) : null} +
+ + {(event?.data?.top_score || event.top_score || 0) == 0 + ? null + : `${event.label}: ${((event?.data?.top_score || event.top_score) * 100).toFixed(0)}%`} + {(event?.data?.sub_label_score || 0) == 0 + ? null + : `, ${event.sub_label}: ${(event?.data?.sub_label_score * 100).toFixed(0)}%`} +
+
+ +
+ onDelete(e, event.id, event.retain_indefinitely)} + /> + + onDownloadClick(e, event)} + /> +
+
+
+ {viewEvent !== event.id ? null : ( +
+
+
+ + + + +
+ +
+ {eventDetailType == 'clip' && event.has_clip ? ( +
+ onEventFrameSelected(event, frame, seekSeconds)} + /> +
+ + {eventOverlay ? ( + + ) : null} + +
+
+ ) : null} + + {eventDetailType == 'image' || !event.has_clip ? ( +
+ {`${event.label} +
+ ) : null} +
+
+
+ )} +
+ ); +}