removed redundant event details

This commit is contained in:
Bernt Christian Egeland 2021-08-22 13:38:20 +02:00
parent 287a96a630
commit 7b3d81e079

View File

@ -1,19 +1,15 @@
import { h, Fragment } from 'preact'; import { h, Fragment } from 'preact';
import { useCallback, useState } from 'preact/hooks'; import { useCallback, useState } from 'preact/hooks';
import { route } from 'preact-router';
import ActivityIndicator from '../components/ActivityIndicator'; import ActivityIndicator from '../components/ActivityIndicator';
import Button from '../components/Button'; import Button from '../components/Button';
import Clip from '../icons/Clip'; import Clip from '../icons/Clip';
import ArrowDown from '../icons/ArrowDropdown';
import Menu from '../icons/Menu'; import Menu from '../icons/Menu';
import Delete from '../icons/Delete'; import Delete from '../icons/Delete';
import Snapshot from '../icons/Snapshot'; import Snapshot from '../icons/Snapshot';
import Dialog from '../components/Dialog'; import Dialog from '../components/Dialog';
import Heading from '../components/Heading'; import Heading from '../components/Heading';
import Link from '../components/Link';
import VideoPlayer from '../components/VideoPlayer'; import VideoPlayer from '../components/VideoPlayer';
import { FetchStatus, useApiHost, useEvent, useDelete } from '../api'; import { FetchStatus, useApiHost, useEvent, useDelete } from '../api';
import { Table, Thead, Tbody, Th, Tr, Td } from '../components/Table';
export default function Event({ eventId, close }) { export default function Event({ eventId, close }) {
const apiHost = useApiHost(); const apiHost = useApiHost();
@ -49,9 +45,7 @@ export default function Event({ eventId, close }) {
return <ActivityIndicator />; return <ActivityIndicator />;
} }
const startime = new Date(data.start_time * 1000); console.log(data);
const endtime = new Date(data.end_time * 1000);
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="grid grid-cols-6 gap-4"> <div className="grid grid-cols-6 gap-4">
@ -62,10 +56,6 @@ export default function Event({ eventId, close }) {
<Button color="blue" href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`} download> <Button color="blue" href={`${apiHost}/api/events/${eventId}/snapshot.jpg?download=true`} download>
<Snapshot className="w-6" /> Download Snapshot <Snapshot className="w-6" /> Download Snapshot
</Button> </Button>
<Button className="self-start" onClick={() => setShowDetails(!showDetails)}>
<ArrowDown className="w-6" />
{`${showDetails ? 'Hide event Details' : 'View event Details'}`}
</Button>
</div> </div>
<div class="col-end-10 col-span-2 space-x-4"> <div class="col-end-10 col-span-2 space-x-4">
<Button color="gray" className="self-start" onClick={() => close()}> <Button color="gray" className="self-start" onClick={() => close()}>
@ -94,35 +84,6 @@ export default function Event({ eventId, close }) {
) : null} ) : null}
</div> </div>
<Table class="w-full">
<Thead>
<Th>Key</Th>
<Th>Value</Th>
</Thead>
<Tbody>
<Tr>
<Td>Camera</Td>
<Td>
<Link href={`/cameras/${data.camera}`}>{data.camera}</Link>
</Td>
</Tr>
<Tr index={1}>
<Td>Timeframe</Td>
<Td>
{startime.toLocaleString()} {endtime.toLocaleString()}
</Td>
</Tr>
<Tr>
<Td>Score</Td>
<Td>{(data.top_score * 100).toFixed(2)}%</Td>
</Tr>
<Tr index={1}>
<Td>Zones</Td>
<Td>{data.zones.join(', ')}</Td>
</Tr>
</Tbody>
</Table>
{data.has_clip ? ( {data.has_clip ? (
<Fragment> <Fragment>
<div className="outer-max-width m-auto"> <div className="outer-max-width m-auto">