Enhancement: Add Date and Time Inputs to Export Component with Time V…

…alidation (#6750)

* 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 <[email protected]>

---------

Co-authored-by: Blake Blackshear <[email protected]>

web/src/routes/Export.jsx

@@ -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>