Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-01-31 00:18:55 +01:00
Code Issues Projects Releases Wiki Activity

Show / Download Exported recordings UI (#7171)

Browse Source 
* Start with getting list of exports

* List downloadable exports in export page

* Fix downloading

* use swr instead of effect
This commit is contained in:
Nicolas Mowen 2023-07-15 14:13:53 -06:00 committed by GitHub
parent 8e584cf844
commit 07155b1fa9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 101 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
web/src/routes/Export.jsx
View File

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