administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-04 18:25:22 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Setup basic UI for timeline in events

Browse Source
This commit is contained in:
Nick Mowen 2023-04-20 17:01:13 -06:00
parent 2da8581729
commit 04ea6dce2d
2 changed files with 41 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/components/TimelineSummary.jsx Normal file
View File

@ -0,0 +1,37 @@
import { h } from 'preact';
import useSWR from 'swr';
import Heading from './Heading';
import ActivityIndicator from './ActivityIndicator';
import { formatUnixTimestampToDateTime } from '../utils/dateUtil';
export default function TimelineSummary({ event }) {
const { data: eventTimeline } = useSWR([
'timeline',
{
source_id: event.id,
},
]);
if (!eventTimeline) {
return <ActivityIndicator />;
}
return (
<div>
<Heading>Timeline:</Heading>
{eventTimeline.map((item, index) => (
<div key="index">{getTimelineItemDescription(item, event, index)}</div>
))}
</div>
);
}
function getTimelineItemDescription(timelineItem, event, index) {
if (timelineItem.class_type == 'visible') {
return `${index}. ${event.label} detected at ${formatUnixTimestampToDateTime(event.start_time, { date_style: "short", time_style: "medium" })}`;
} else if (timelineItem.class_type == 'entered_zone') {
return `${index}. ${event.label} entered ${timelineItem.data.zones} at ${formatUnixTimestampToDateTime(event.start_time, { date_style: "short", time_style: "medium" })}`;
}
return `${index}. ${event.label} left at ${formatUnixTimestampToDateTime(event.start_time, { date_style: "short", time_style: "medium" })}`;
}

4
web/src/routes/Events.jsx
View File

@ -26,6 +26,7 @@ import Dialog from '../components/Dialog';
import MultiSelect from '../components/MultiSelect';
import { formatUnixTimestampToDateTime, getDurationFromTimestamps } from '../utils/dateUtil';
import TimeAgo from '../components/TimeAgo';
import TimelineSummary from '../components/TimelineSummary';
const API_LIMIT = 25;
@ -560,6 +561,9 @@ export default function Events({ path, ...props }) {
{viewEvent !== event.id ? null : (
<div className="space-y-4">
<div className="mx-auto max-w-7xl">
<div>
<TimelineSummary event={event} />
</div>
<div className="flex justify-center w-full py-2">
<Tabs
selectedIndex={event.has_clip && eventDetailType == 'clip' ? 0 : 1}