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,67 +68,105 @@ export default function Export() {
         <div className={`max-h-20 ${message.error ? 'text-red-500' : 'text-green-500'}`}>{message.text}</div>
       )}
 
-      <div>
-        <select
-          className="me-2 cursor-pointer rounded dark:bg-slate-800"
-          value={camera}
-          onChange={(e) => setCamera(e.target.value)}
-        >
-          <option value="select">Select A Camera</option>
-          {Object.keys(config?.cameras || {}).map((item) => (
-            <option key={item} value={item}>
-              {item.replaceAll('_', ' ')}
-            </option>
-          ))}
-        </select>
-        <select
-          className="ms-2 cursor-pointer rounded dark:bg-slate-800"
-          value={playback}
-          onChange={(e) => setPlayback(e.target.value)}
-        >
-          <option value="select">Select A Playback Factor</option>
-          <option value="realtime">Realtime</option>
-          <option value="timelapse_25x">Timelapse</option>
-        </select>
-      </div>
+      <div className="xl:flex justify-between">
+        <div>
+          <div>
+            <select
+              className="me-2 cursor-pointer rounded dark:bg-slate-800"
+              value={camera}
+              onChange={(e) => setCamera(e.target.value)}
+            >
+              <option value="select">Select A Camera</option>
+              {Object.keys(config?.cameras || {}).map((item) => (
+                <option key={item} value={item}>
+                  {item.replaceAll('_', ' ')}
+                </option>
+              ))}
+            </select>
+            <select
+              className="ms-2 cursor-pointer rounded dark:bg-slate-800"
+              value={playback}
+              onChange={(e) => setPlayback(e.target.value)}
+            >
+              <option value="select">Select A Playback Factor</option>
+              <option value="realtime">Realtime</option>
+              <option value="timelapse_25x">Timelapse</option>
+            </select>
+          </div>
 
-      <div>
-        <Heading className="py-2" size="sm">
-          From:
-        </Heading>
-        <input
-          className="dark:bg-slate-800"
-          id="startDate"
-          type="date"
-          value={startDate}
-          onChange={(e) => setStartDate(e.target.value)}
-        />
-        <input
-          className="dark:bg-slate-800"
-          id="startTime"
-          type="time"
-          value={startTime}
-          onChange={(e) => setStartTime(e.target.value)}
-        />
-        <Heading className="py-2" size="sm">
-          To:
-        </Heading>
-        <input
-          className="dark:bg-slate-800"
-          id="endDate"
-          type="date"
-          value={endDate}
-          onChange={(e) => setEndDate(e.target.value)}
-        />
-        <input
-          className="dark:bg-slate-800"
-          id="endTime"
-          type="time"
-          value={endTime}
-          onChange={(e) => setEndTime(e.target.value)}
-        />
+          <div>
+            <Heading className="py-2" size="sm">
+              From:
+            </Heading>
+            <input
+              className="dark:bg-slate-800"
+              id="startDate"
+              type="date"
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+            />
+            <input
+              className="dark:bg-slate-800"
+              id="startTime"
+              type="time"
+              value={startTime}
+              onChange={(e) => setStartTime(e.target.value)}
+            />
+            <Heading className="py-2" size="sm">
+              To:
+            </Heading>
+            <input
+              className="dark:bg-slate-800"
+              id="endDate"
+              type="date"
+              value={endDate}
+              onChange={(e) => setEndDate(e.target.value)}
+            />
+            <input
+              className="dark:bg-slate-800"
+              id="endTime"
+              type="time"
+              value={endTime}
+              onChange={(e) => setEndTime(e.target.value)}
+            />
+          </div>
+          <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>
-      <Button onClick={() => onHandleExport()}>Submit</Button>
     </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>
+  );
+}