- added button for show details

web/src/routes/Event.jsx

@@ -4,6 +4,7 @@ import { route } from 'preact-router';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Button from '../components/Button';
 import Clip from '../icons/Clip';
+import ArrowDown from '../icons/ArrowDropdown';
 import Delete from '../icons/Delete';
 import Snapshot from '../icons/Snapshot';
 import Dialog from '../components/Dialog';
@@ -17,6 +18,7 @@ export default function Event({ eventId }) {
   const apiHost = useApiHost();
   const { data, status } = useEvent(eventId);
   const [showDialog, setShowDialog] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
   const [deleteStatus, setDeleteStatus] = useState(FetchStatus.NONE);
   const setDeleteEvent = useDelete();
 
@@ -53,10 +55,14 @@ export default function Event({ eventId }) {
 
   return (
     <div className="space-y-4">
-      <div className="flex">
+      <div className="flex flex-wrap space-x-4">
         <Heading className="flex-grow">
           {data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span>
         </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}>
           <Delete className="w-6" /> Delete event
         </Button>
@@ -79,34 +85,36 @@ export default function Event({ eventId }) {
         ) : null}
       </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>
+      {showDetails ? (
+        <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>
+      ) : null}
 
       {data.has_clip ? (
         <Fragment>