Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show / Download Exported recordings UI #7171

Merged
merged 4 commits into from Jul 15, 2023
Merged

Show / Download Exported recordings UI #7171

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
06d0e70
Start with getting list of exports
NickM-27 Jul 15, 2023
bda14d4
List downloadable exports in export page
NickM-27 Jul 15, 2023
107b7f8
Fix downloading
NickM-27 Jul 15, 2023
b3511ae
use swr instead of effect
NickM-27 Jul 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
165 changes: 106 additions & 59 deletions web/src/routes/Export.jsx
View file
Open in desktop
Expand Up @@ -3,10 +3,15 @@ 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';
import { useEffect } from 'react';

export default function Export() {
const { data: config } = useSWR('config');

const [exports, setExports] = useState([]);
const [camera, setCamera] = useState('select');
const [playback, setPlayback] = useState('select');
const [message, setMessage] = useState({ text: '', error: false });
Expand All @@ -22,6 +27,10 @@ export default function Export() {
const [endDate, setEndDate] = useState(localISODate);
const [endTime, setEndTime] = useState('23:59');

useEffect(() => {
NickM-27 marked this conversation as resolved.
Show resolved Hide resolved
axios({ baseURL: baseUrl, url: 'exports/' }).then((res) => setExports(res.data));
}, [])

const onHandleExport = () => {
if (camera == 'select') {
setMessage({ text: 'A camera needs to be selected.', error: true });
Expand Down Expand Up @@ -64,67 +73,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>
);
}