fix(web): dark mode text color fixes

fixes #544

web/src/Event.jsx

@@ -1,6 +1,9 @@
-import { h } from 'preact';
+import { h, Fragment } from 'preact';
 import { ApiHost } from './context';
+import Box from './components/Box';
 import Heading from './components/Heading';
+import Link from './components/Link';
+import { Table, Thead, Tbody, Tfoot, Th, Tr, Td } from './components/Table';
 import { useContext, useEffect, useState } from 'preact/hooks';
 
 export default function Event({ eventId }) {
@@ -22,24 +25,66 @@ export default function Event({ eventId }) {
     );
   }
 
-  const datetime = new Date(data.start_time * 1000);
+  const startime = new Date(data.start_time * 1000);
+  const endtime = new Date(data.end_time * 1000);
 
   return (
-    <div>
+    <div className="space-y-4">
       <Heading>
-        {data.camera} {data.label} <span className="text-sm">{datetime.toLocaleString()}</span>
+        {data.camera} {data.label} <span className="text-sm">{startime.toLocaleString()}</span>
       </Heading>
-      <img
-        src={`${apiHost}/clips/${data.camera}-${eventId}.jpg`}
-        alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
-      />
-      {data.has_clip ? (
-        <video className="w-96" src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} controls />
-      ) : (
-        <p>No clip available</p>
-      )}
 
-      <pre>{JSON.stringify(data, null, 2)}</pre>
+      <Box>
+        {data.has_clip ? (
+          <Fragment>
+            <Heading size="sm">Clip</Heading>
+            <video className="w-100" src={`${apiHost}/clips/${data.camera}-${eventId}.mp4`} controls />
+          </Fragment>
+        ) : (
+          <p>No clip available</p>
+        )}
+      </Box>
+
+      <Box>
+        <Heading size="sm">{data.has_snapshot ? 'Best image' : 'Thumbnail'}</Heading>
+        <img
+          src={
+            data.has_snapshot
+              ? `${apiHost}/clips/${data.camera}-${eventId}.jpg`
+              : `data:image/jpeg;base64,${data.thumbnail}`
+          }
+          alt={`${data.label} at ${(data.top_score * 100).toFixed(1)}% confidence`}
+        />
+      </Box>
+
+      <Table>
+        <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>
     </div>
   );
 }