From 5f892204d22dc6d2463c613d7bd23baf7e7cee12 Mon Sep 17 00:00:00 2001
From: Sergey Krashevich <svk@svk.su>
Date: Sun, 2 Jul 2023 04:40:45 +0300
Subject: [PATCH] Add new Stop icon and functionality for stopping an event

---
 web/src/icons/Stop.jsx    | 25 +++++++++++++++++++++++++
 web/src/routes/Events.jsx | 17 +++++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 web/src/icons/Stop.jsx

diff --git a/web/src/icons/Stop.jsx b/web/src/icons/Stop.jsx
new file mode 100644
index 000000000..35619069b
--- /dev/null
+++ b/web/src/icons/Stop.jsx
@@ -0,0 +1,25 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function Stop({ className = 'h-6 w-6', stroke = 'currentColor', fill = 'none', onClick = () => {} }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      fill={fill}
+      viewBox="0 0 10.334 10.334"
+      stroke={stroke}
+      onClick={onClick}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        style="fill:030104"
+        d="M10.333,9.816c0,0.285-0.231,0.518-0.517,0.518H0.517C0.233,10.334,0,10.102,0,9.816V0.517 C0,0.232,0.231,0,0.517,0h9.299c0.285,0,0.517,0.231,0.517,0.517V9.816z"
+      />
+    </svg>
+  );
+}
+
+export default memo(Stop);
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 9d503cb8b..771195f3d 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -18,6 +18,7 @@ import { Zone } from '../icons/Zone';
 import { Camera } from '../icons/Camera';
 import { Clock } from '../icons/Clock';
 import { Delete } from '../icons/Delete';
+import { Stop } from '../icons/Stop';
 import { Download } from '../icons/Download';
 import Menu, { MenuItem } from '../components/Menu';
 import CalendarIcon from '../icons/Calendar';
@@ -154,6 +155,14 @@ export default function Events({ path, ...props }) {
     }
   };
 
+  const onStop = async (e, eventId) => {
+    e.stopPropagation();
+    const response = await axios.put(`events/${eventId}/end`);
+    if (response.status === 200) {
+      mutate();
+    }
+  };
+
   const onToggleNamedFilter = (name, item) => {
     let items;
 
@@ -662,6 +671,14 @@ export default function Events({ path, ...props }) {
                           stroke="#f87171"
                           onClick={(e) => onDelete(e, event.id, event.retain_indefinitely)}
                         />
+                        {!event.end_time ? (
+                          <Stop
+                            className="h-6 w-6 cursor-pointer"
+                            stroke="#f87171"
+                            onClick={(e) => onStop(e, event.id)}
+                          />
+                        ) : null}
+
 
                         <Download
                           className="h-6 w-6 mt-auto"