From 04ea6dce2dc5ab57e3867a0bdc190f68f4491970 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Thu, 20 Apr 2023 17:01:13 -0600
Subject: [PATCH] Setup basic UI for timeline in events

---
 web/src/components/TimelineSummary.jsx | 37 ++++++++++++++++++++++++++
 web/src/routes/Events.jsx              |  4 +++
 2 files changed, 41 insertions(+)
 create mode 100644 web/src/components/TimelineSummary.jsx

diff --git a/web/src/components/TimelineSummary.jsx b/web/src/components/TimelineSummary.jsx
new file mode 100644
index 000000000..cf966c6ba
--- /dev/null
+++ b/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" })}`;
+}
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 25036f505..b0696a6b1 100644
--- a/web/src/routes/Events.jsx
+++ b/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}