add: Export button to events UI

web/src/icons/Export.jsx

@@ -0,0 +1,24 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function Export({ 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 24 24"
+      stroke={stroke}
+      onClick={onClick}
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"
+      />
+    </svg>
+  );
+}
+
+export default memo(Export);

web/src/routes/Events.jsx

@@ -19,6 +19,7 @@ import { Camera } from '../icons/Camera';
 import { Clock } from '../icons/Clock';
 import { Delete } from '../icons/Delete';
 import { Download } from '../icons/Download';
+import { Export } from '../icons/Export';
 import Menu, { MenuItem } from '../components/Menu';
 import CalendarIcon from '../icons/Calendar';
 import Calendar from '../components/Calendar';
@@ -216,6 +217,17 @@ export default function Events({ path, ...props }) {
     setState({ ...state, showDownloadMenu: true });
   };
 
+  const onExport = async (e, camera, start_time, end_time) => {
+    e.stopPropagation();
+
+    const response = await axios.post(`export/${camera}/start/${Math.round(start_time)}/end/${Math.round(end_time)}`, {playback : "realtime"});
+     
+    if (response.status === 200) {
+      mutate();
+    }
+    
+  };
+
   const showSubmitToPlus = (event_id, label, box, e) => {
     if (e) {
       e.stopPropagation();
@@ -663,6 +675,13 @@ export default function Events({ path, ...props }) {
                           </Fragment>
                         )}
                       </div>
+                      <div class="sm:flex flex-col justify-end mr-2">
+                        <Export
+                          className="h-6 w-6 cursor-pointer"
+                          stroke="#3b82f6"
+                          onClick={(e) => onExport(e, event.camera, event.start_time, event.end_time)}
+                        />
+                      </div>
                       <div class="flex flex-col">
                         <Delete
                           className="h-6 w-6 cursor-pointer"