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

moved clipDuration. cleaner jsx, sm hidden

Browse Source
This commit is contained in:
Bernt Christian Egeland 2023-01-15 13:58:51 +01:00
parent 5ff281befd
commit ac267a2baa
1 changed files with 12 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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