Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Enhancement: Add Date and Time Inputs to Export Component with Time Validation (#6750)

Browse Source 
* Add date and time inputs to Export component and ensure end time is larger than start time

* Update web/src/routes/Export.jsx

Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>

---------

Co-authored-by: Blake Blackshear <blakeb@blakeshome.com>
This commit is contained in:
Sergey Krashevich 2023-06-11 16:01:16 +03:00 committed by GitHub
parent b160abac0d
commit 7459a1cdde
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,5 @@
import { h } from 'preact';
import Heading from '../components/Heading';
import { useState } from 'preact/hooks';
import { useState, useEffect } from 'preact/hooks';
import useSWR from 'swr';
import Button from '../components/Button';
import axios from 'axios';
@ -11,6 +10,21 @@ export default function Export() {
const [camera, setCamera] = useState('select');
const [playback, setPlayback] = useState('select');
const [message, setMessage] = useState({ text: '', error: false });
const [startDate, setStartDate] = useState('input');
const [startTime, setStartTime] = useState('input');
const [endDate, setEndDate] = useState('input');
const [endTime, setEndTime] = useState('input');
useEffect(() => {
const currentDate = new Date();
currentDate.setHours(0, 0, 0, 0);
const offsetMs = currentDate.getTimezoneOffset() * 60 * 1000;
const localISOTime = (new Date(currentDate.getTime() - offsetMs)).toISOString().slice(0,16);
setStartDate(localISOTime);
setStartTime("00:00");
setEndDate(localISOTime);
setEndTime("23:59");
}, []);
const onHandleExport = () => {
if (camera == 'select') {
@ -23,14 +37,21 @@ export default function Export() {
return;
}
const start = new Date(document.getElementById('start').value).getTime() / 1000;
const end = new Date(document.getElementById('end').value).getTime() / 1000;
if (!start || !end) {
if (!startDate || !startTime || !endDate || !endTime) {
setMessage({ text: 'A start and end time needs to be selected', error: true });
return;
}
const start = new Date(`${startDate}T${startTime}`).getTime() / 1000;
const end = new Date(`${endDate}T${endTime}`).getTime() / 1000;
if (end <= start) {
setMessage({ text: 'The end time must be after the start time.', error: true });
return;
}
setMessage({ text: 'Successfully started export. View the file in the /exports folder.', error: false });
axios.post(`export/${camera}/start/${start}/end/${end}`, { playback });
};
@ -71,11 +92,13 @@ export default function Export() {
<Heading className="py-2" size="sm">
From:
</Heading>
<input className="dark:bg-slate-800" id="start" type="datetime-local" />
<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="end" type="datetime-local" />
<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 onClick={() => onHandleExport()}>Submit</Button>
</div>