update web deps

web/index.html

@@ -8,7 +8,7 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png" />
-    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg">
+    <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
     <link rel="manifest" href="/site.webmanifest" />
     <link rel="mask-icon" href="/images/favicon.svg" color="#3b82f7" />
     <meta name="msapplication-TileColor" content="#3b82f7" />

web/package.json

@@ -38,8 +38,8 @@
     "@testing-library/user-event": "^14.4.3",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
-    "@vitest/coverage-c8": "^0.31.0",
+    "@vitest/coverage-v8": "^0.32.2",
-    "@vitest/ui": "^0.31.0",
+    "@vitest/ui": "^0.32.2",
     "autoprefixer": "^10.4.14",
     "eslint": "^8.39.0",
     "eslint-config-preact": "^1.3.0",
@@ -53,6 +53,6 @@
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.4",
     "vite": "^4.3.5",
-    "vitest": "^0.31.0"
+    "vitest": "^0.32.2"
   }
 }

web/src/routes/Export.jsx

@@ -18,9 +18,9 @@ export default function Export() {
   const localISODate = localDate.toISOString().split('T')[0];
 
   const [startDate, setStartDate] = useState(localISODate);
-  const [startTime, setStartTime] = useState("00:00");
+  const [startTime, setStartTime] = useState('00:00');
   const [endDate, setEndDate] = useState(localISODate);
-  const [endTime, setEndTime] = useState("23:59");
+  const [endTime, setEndTime] = useState('23:59');
 
   const onHandleExport = () => {
     if (camera == 'select') {
@@ -33,8 +33,6 @@ export default function Export() {
       return;
     }
 
-    
-
     if (!startDate || !startTime || !endDate || !endTime) {
       setMessage({ text: 'A start and end time needs to be selected', error: true });
       return;
@@ -48,12 +46,13 @@ export default function Export() {
       return;
     }
 
-    axios.post(`export/${camera}/start/${start}/end/${end}`, { playback })
+    axios
+      .post(`export/${camera}/start/${start}/end/${end}`, { playback })
       .then(() => {
         setMessage({ text: 'Successfully started export. View the file in the /exports folder.', error: false });
       })
       .catch((error) => {
-        setMessage({ text: 'Failed to start export: '+error.response.data.message, error: true });
+        setMessage({ text: `Failed to start export: ${error.response.data.message}`, error: true });
       });
   };
 
@@ -93,13 +92,37 @@ export default function Export() {
         <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
-        <input className="dark:bg-slate-800" id="startTime" type="time" value={startTime} onChange={(e) => setStartTime(e.target.value)}/>
+          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
-        <input className="dark:bg-slate-800" id="endTime" type="time" value={endTime} onChange={(e) => setEndTime(e.target.value)}/>
+          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>