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 (
+
+ );
+}
+
+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 ? (
+ onStop(e, event.id)}
+ />
+ ) : null}
+