Add new Stop icon and functionality for stopping an event

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);

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"