- 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,6 +85,7 @@ export default function Event({ eventId }) {
         ) : null}
       </div>
 
+      {showDetails ? (
         <Table class="w-full">
           <Thead>
             <Th>Key</Th>
@@ -107,6 +114,7 @@ export default function Event({ eventId }) {
             </Tr>
           </Tbody>
         </Table>
+      ) : null}
 
       {data.has_clip ? (
         <Fragment>