Show / Download Exported recordings UI (#7171)

* Start with getting list of exports

* List downloadable exports in export page

* Fix downloading

* use swr instead of effect

web/src/routes/Export.jsx

@@ -3,9 +3,13 @@ import { useState } from 'preact/hooks';
 import useSWR from 'swr';
 import Button from '../components/Button';
 import axios from 'axios';
+import { baseUrl } from '../api/baseUrl';
+import { Fragment } from 'preact';
+import ActivityIndicator from '../components/ActivityIndicator';
 
 export default function Export() {
   const { data: config } = useSWR('config');
+  const { data: exports } = useSWR('exports/', (url) => axios({ baseURL: baseUrl, url }).then((res) => res.data));
 
   const [camera, setCamera] = useState('select');
   const [playback, setPlayback] = useState('select');
@@ -64,6 +68,8 @@ export default function Export() {
         <div className={`max-h-20 ${message.error ? 'text-red-500' : 'text-green-500'}`}>{message.text}</div>
       )}
 
+      <div className="xl:flex justify-between">
+        <div>
           <div>
             <select
               className="me-2 cursor-pointer rounded dark:bg-slate-800"
@@ -124,7 +130,43 @@ export default function Export() {
               onChange={(e) => setEndTime(e.target.value)}
             />
           </div>
-      <Button onClick={() => onHandleExport()}>Submit</Button>
+          <Button className="my-4" onClick={() => onHandleExport()}>
+            Submit
+          </Button>
+        </div>
+
+        {exports && (
+          <div className="p-4 bg-gray-800 xl:w-1/2">
+            <Heading size="md">Exports</Heading>
+            <Exports exports={exports} />
+          </div>
+        )}
+      </div>
     </div>
   );
 }
+
+function Exports({ exports }) {
+  return (
+    <Fragment>
+      {exports.map((item) => (
+        <div className="my-4 p-4 bg-gray-700" key={item.name}>
+          {item.name.startsWith('in_progress') ? (
+            <div className="flex justify-start text-center items-center">
+              <div>
+                <ActivityIndicator size="sm" />
+              </div>
+              <div className="px-2">{item.name.substring(12, item.name.length - 4)}</div>
+            </div>
+          ) : (
+            <div className="flex justify-start items-center">
+              <a className="text-blue-500 hover:underline" href={`${baseUrl}exports/${item.name}`} download>
+                {item.name.substring(0, item.name.length - 4)}
+              </a>
+            </div>
+          )}
+        </div>
+      ))}
+    </Fragment>
+  );
+}