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

- added button for show details

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-08-19 18:45:27 +02:00
parent a969b7435e
commit 62bc3dd67e
1 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
web/src/routes/Event.jsx
View File

@ -4,6 +4,7 @@ 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 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';
@ -17,6 +18,7 @@ export default function Event({ eventId }) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const { data, status } = useEvent(eventId); const { data, status } = useEvent(eventId);
const [showDialog, setShowDialog] = useState(false); const [showDialog, setShowDialog] = useState(false);
const [showDetails, setShowDetails] = useState(false);
const [deleteStatus, setDeleteStatus] = useState(FetchStatus.NONE); const [deleteStatus, setDeleteStatus] = useState(FetchStatus.NONE);
const setDeleteEvent = useDelete(); const setDeleteEvent = useDelete();
@ -53,10 +55,14 @@ export default function Event({ eventId }) {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<div className="flex"> <div className="flex flex-wrap space-x-4">
<Heading className="flex-grow"> <Heading className="flex-grow">
{data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span> {data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span>
</Heading> </Heading>
<Button className="self-start" onClick={() => setShowDetails(!showDetails)} color="gray">
<ArrowDown className="w-6" />
{`${showDetails ? 'Hide event Details' : 'View event Details'}`}
</Button>
<Button className="self-start" color="red" onClick={handleClickDelete}> <Button className="self-start" color="red" onClick={handleClickDelete}>
<Delete className="w-6" /> Delete event <Delete className="w-6" /> Delete event
</Button> </Button>
@ -79,34 +85,36 @@ export default function Event({ eventId }) {
) : null} ) : null}
</div> </div>
<Table class="w-full"> {showDetails ? (
<Thead> <Table class="w-full">
<Th>Key</Th> <Thead>
<Th>Value</Th> <Th>Key</Th>
</Thead> <Th>Value</Th>
<Tbody> </Thead>
<Tr> <Tbody>
<Td>Camera</Td> <Tr>
<Td> <Td>Camera</Td>
<Link href={`/cameras/${data.camera}`}>{data.camera}</Link> <Td>
</Td> <Link href={`/cameras/${data.camera}`}>{data.camera}</Link>
</Tr> </Td>
<Tr index={1}> </Tr>
<Td>Timeframe</Td> <Tr index={1}>
<Td> <Td>Timeframe</Td>
{startime.toLocaleString()} – {endtime.toLocaleString()} <Td>
</Td> {startime.toLocaleString()} – {endtime.toLocaleString()}
</Tr> </Td>
<Tr> </Tr>
<Td>Score</Td> <Tr>
<Td>{(data.top_score * 100).toFixed(2)}%</Td> <Td>Score</Td>
</Tr> <Td>{(data.top_score * 100).toFixed(2)}%</Td>
<Tr index={1}> </Tr>
<Td>Zones</Td> <Tr index={1}>
<Td>{data.zones.join(', ')}</Td> <Td>Zones</Td>
</Tr> <Td>{data.zones.join(', ')}</Td>
</Tbody> </Tr>
</Table> </Tbody>
</Table>
) : null}
{data.has_clip ? ( {data.has_clip ? (
<Fragment> <Fragment>