From fad7cecbc026714359e64942b63cac4214b83747 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Wed, 4 Oct 2023 06:20:26 -0600
Subject: [PATCH] Add support for other icons

---
 web/src/components/TimelineSummary.jsx | 12 +++++++++---
 web/src/icons/DeliveryTruck.jsx        | 15 +++++++++++++++
 web/src/icons/LicensePlate.jsx         | 15 +++++++++++++++
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 web/src/icons/DeliveryTruck.jsx
 create mode 100644 web/src/icons/LicensePlate.jsx

diff --git a/web/src/components/TimelineSummary.jsx b/web/src/components/TimelineSummary.jsx
index 02db2e26f..fd7a85411 100644
--- a/web/src/components/TimelineSummary.jsx
+++ b/web/src/components/TimelineSummary.jsx
@@ -8,7 +8,9 @@ import PlayIcon from '../icons/Play';
 import ExitIcon from '../icons/Exit';
 import StationaryObjectIcon from '../icons/StationaryObject';
 import FaceIcon from '../icons/Face';
-import { Zone } from '../icons/Zone';
+import LicensePlateIcon from '../icons/LicensePlate';
+import DeliveryTruckIcon from '../icons/DeliveryTruck';
+import ZoneIcon from '../icons/Zone';
 import { useMemo, useState } from 'preact/hooks';
 import Button from './Button';
 
@@ -125,11 +127,15 @@ function getTimelineIcon(timelineItem) {
     case 'stationary':
       return <StationaryObjectIcon className="w-8" />;
     case 'entered_zone':
-      return <Zone className="w-8" />;
+      return <ZoneIcon className="w-8" />;
     case 'attribute':
       switch (timelineItem.data.attribute) {
         case 'face':
           return <FaceIcon className="w-8" />;
+        case 'license_plate':
+          return <LicensePlateIcon className="w-8" />;
+        default:
+          return <DeliveryTruckIcon className="w-8" />;
       }
   }
 }
@@ -169,7 +175,7 @@ function getTimelineItemDescription(config, timelineItem, event) {
           date_style: 'short',
           time_style: 'medium',
           time_format: config.ui.time_format,
-        },
+        }
       )}`;
     case 'gone':
       return `${event.label} left at ${formatUnixTimestampToDateTime(timelineItem.timestamp, {
diff --git a/web/src/icons/DeliveryTruck.jsx b/web/src/icons/DeliveryTruck.jsx
new file mode 100644
index 000000000..01a48e5f2
--- /dev/null
+++ b/web/src/icons/DeliveryTruck.jsx
@@ -0,0 +1,15 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function StationaryObject({ className = '' }) {
+  return (
+    <svg className={`fill-current ${className}`} viewBox="0 -960 960 960">
+      <path
+        fill="currentColor"
+        d="M240-160q-50 0-85-35t-35-85H40v-440q0-33 23.5-56.5T120-800h560v160h120l120 160v200h-80q0 50-35 85t-85 35q-50 0-85-35t-35-85H360q0 50-35 85t-85 35Zm0-80q17 0 28.5-11.5T280-280q0-17-11.5-28.5T240-320q-17 0-28.5 11.5T200-280q0 17 11.5 28.5T240-240ZM120-360h32q17-18 39-29t49-11q27 0 49 11t39 29h272v-360H120v360Zm600 120q17 0 28.5-11.5T760-280q0-17-11.5-28.5T720-320q-17 0-28.5 11.5T680-280q0 17 11.5 28.5T720-240Zm-40-200h170l-90-120h-80v120ZM360-540Z"
+      />
+    </svg>
+  );
+}
+
+export default memo(StationaryObject);
diff --git a/web/src/icons/LicensePlate.jsx b/web/src/icons/LicensePlate.jsx
new file mode 100644
index 000000000..e2f4aae8f
--- /dev/null
+++ b/web/src/icons/LicensePlate.jsx
@@ -0,0 +1,15 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function StationaryObject({ className = '' }) {
+  return (
+    <svg className={`fill-current ${className}`} viewBox="0 -960 960 960">
+      <path
+        fill="currentColor"
+        d="M400-280h360v-240H400v240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z"
+      />
+    </svg>
+  );
+}
+
+export default memo(StationaryObject);