Setup basic UI for timeline in events

web/src/components/TimelineSummary.jsx

@@ -0,0 +1,37 @@
+import { h } from 'preact';
+import useSWR from 'swr';
+import Heading from './Heading';
+import ActivityIndicator from './ActivityIndicator';
+import { formatUnixTimestampToDateTime } from '../utils/dateUtil';
+
+export default function TimelineSummary({ event }) {
+  const { data: eventTimeline } = useSWR([
+    'timeline',
+    {
+      source_id: event.id,
+    },
+  ]);
+
+  if (!eventTimeline) {
+    return <ActivityIndicator />;
+  }
+
+  return (
+    <div>
+      <Heading>Timeline:</Heading>
+      {eventTimeline.map((item, index) => (
+        <div key="index">{getTimelineItemDescription(item, event, index)}</div>
+      ))}
+    </div>
+  );
+}
+
+function getTimelineItemDescription(timelineItem, event, index) {
+  if (timelineItem.class_type == 'visible') {
+    return `${index}. ${event.label} detected at ${formatUnixTimestampToDateTime(event.start_time, { date_style: "short", time_style: "medium" })}`;
+  } else if (timelineItem.class_type == 'entered_zone') {
+    return `${index}. ${event.label} entered ${timelineItem.data.zones} at ${formatUnixTimestampToDateTime(event.start_time, { date_style: "short", time_style: "medium" })}`;
+  }
+
+  return `${index}. ${event.label} left at ${formatUnixTimestampToDateTime(event.start_time, { date_style: "short", time_style: "medium" })}`;
+}

web/src/routes/Events.jsx

@@ -26,6 +26,7 @@ import Dialog from '../components/Dialog';
 import MultiSelect from '../components/MultiSelect';
 import { formatUnixTimestampToDateTime, getDurationFromTimestamps } from '../utils/dateUtil';
 import TimeAgo from '../components/TimeAgo';
+import TimelineSummary from '../components/TimelineSummary';
 
 const API_LIMIT = 25;
 
@@ -560,6 +561,9 @@ export default function Events({ path, ...props }) {
                   {viewEvent !== event.id ? null : (
                     <div className="space-y-4">
                       <div className="mx-auto max-w-7xl">
+                        <div>
+                          <TimelineSummary event={event} />
+                        </div>
                         <div className="flex justify-center w-full py-2">
                           <Tabs
                             selectedIndex={event.has_clip && eventDetailType == 'clip' ? 0 : 1}