chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Rework events page to include timeago (#5097)

Browse Source 
* new timeago component

* added timeago to event

* clock icon

* clock icon. flex items center

* dense prop

* moved clipDuration. cleaner jsx, sm hidden

* renamed clipduration => getDurationFromTimestamps

* func description

* duration in parenthesis
This commit is contained in:
Bernt Christian Egeland
2023-01-15 16:43:40 +01:00
committed by GitHub
parent 367ac28a94
commit 621aa0cf61
4 changed files with 172 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,6 +15,7 @@ import { UploadPlus } from '../icons/UploadPlus';
import { Clip } from '../icons/Clip';
import { Zone } from '../icons/Zone';
import { Camera } from '../icons/Camera';
import { Clock } from '../icons/Clock';
import { Delete } from '../icons/Delete';
import { Download } from '../icons/Download';
import Menu, { MenuItem } from '../components/Menu';
@@ -22,8 +23,9 @@ import CalendarIcon from '../icons/Calendar';
import Calendar from '../components/Calendar';
import Button from '../components/Button';
import Dialog from '../components/Dialog';
import { fromUnixTime, intervalToDuration, formatDuration } from 'date-fns';
import MultiSelect from '../components/MultiSelect';
import { formatUnixTimestampToDateTime, getDurationFromTimestamps } from '../utils/dateUtil';
import TimeAgo from '../components/TimeAgo';
const API_LIMIT = 25;
@@ -39,16 +41,6 @@ const monthsAgo = (num) => {
return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() / 1000;
};
const clipDuration = (start_time, end_time) => {
const start = fromUnixTime(start_time);
const end = fromUnixTime(end_time);
let duration = 'In Progress';
if (end_time) {
duration = formatDuration(intervalToDuration({ start, end }));
}
return duration;
};
export default function Events({ path, ...props }) {
const apiHost = useApiHost();
const [searchParams, setSearchParams] = useState({
@@ -511,13 +503,19 @@ export default function Events({ path, ...props }) {
<div className="capitalize text-lg font-bold">
{event.sub_label
? `${event.label.replaceAll('_', ' ')}: ${event.sub_label.replaceAll('_', ' ')}`
: event.label.replaceAll('_', ' ')}{' '}
: event.label.replaceAll('_', ' ')}
({(event.top_score * 100).toFixed(0)}%)
</div>
<div className="text-sm">
{new Date(event.start_time * 1000).toLocaleDateString(locale, { timeZone: timezone })}{' '}
{new Date(event.start_time * 1000).toLocaleTimeString(locale, { timeZone: timezone })} (
{clipDuration(event.start_time, event.end_time)})
<div className="text-sm flex">
<Clock className="h-5 w-5 mr-2 inline" />
{formatUnixTimestampToDateTime(event.start_time, locale, timezone)}
<div className="hidden md:inline">
<span className="m-1">-</span>
<TimeAgo time={event.start_time * 1000} dense />
</div>
<div className="hidden md:inline">
<span className="m-1" />( {getDurationFromTimestamps(event.start_time, event.end_time)} )
</div>
</div>
<div className="capitalize text-sm flex align-center mt-1">
<Camera className="h-5 w-5 mr-2 inline" />