Okay Djangolang in good shape now, at least for data loading- let's s…

…ee how many weeks it takes me to do the arduous aspects of packing / deployment
initialed85 · Aug 21, 2024 · 8649b91 · 8649b91
1 parent 6aeb256
commit 8649b91
Show file tree

Hide file tree

Showing 19 changed files with 1,318 additions and 706 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -54,12 +54,7 @@ function App() {
     >
       <Grid container sx={{ pb: 1 }}>
         <Grid xs={1}>
-          <Typography
-            level="h4"
-            component="h4"
-            sx={{ pt: 0.1, textAlign: "center" }}
-            color="neutral"
-          >
+          <Typography level="h4" component="h4" sx={{ pt: 0.1, textAlign: "center" }} color="neutral">
             {responsive ? "C" : "Camry"}
           </Typography>
         </Grid>
@@ -71,11 +66,8 @@ function App() {
             justifyContent: "flex-start",
           }}
         >
-          <CameraToggleButtonGroup
-            responsive={responsive}
-            setCameraId={setCameraId}
-          />
-          <DateDropdownMenu responsive={responsive} setDate={setDate} />
+          <CameraToggleButtonGroup responsive={responsive} setCameraId={setCameraId} />
+          <DateDropdownMenu responsive={responsive} date={date} setDate={setDate} />
           <Input size="sm" sx={{ mr: 1.5 }} />
         </Grid>
         <Grid xs={1} sx={{ display: "flex", justifyContent: "end", pr: 0.5 }}>

diff --git a/frontend/src/api/api.d.ts b/frontend/src/api/api.d.ts
@@ -210,8 +210,10 @@ export interface operations {
         limit?: number;
         /** @description SQL OFFSET operator */
         offset?: number;
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
         /** @description SQL = operator */
         id__eq?: string;
         /** @description SQL != operator */
@@ -589,8 +591,10 @@ export interface operations {
   PostCameras: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path?: never;
@@ -636,8 +640,10 @@ export interface operations {
   GetCamera: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {
@@ -682,8 +688,10 @@ export interface operations {
   PutCamera: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {
@@ -732,8 +740,10 @@ export interface operations {
   DeleteCamera: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {
@@ -770,8 +780,10 @@ export interface operations {
   PatchCamera: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {
@@ -824,8 +836,10 @@ export interface operations {
         limit?: number;
         /** @description SQL OFFSET operator */
         offset?: number;
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
         /** @description SQL = operator */
         id__eq?: string;
         /** @description SQL != operator */
@@ -1347,8 +1361,10 @@ export interface operations {
   PostDetections: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path?: never;
@@ -1394,8 +1410,10 @@ export interface operations {
   GetDetection: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {
@@ -1440,8 +1458,10 @@ export interface operations {
   PutDetection: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {
@@ -1490,8 +1510,10 @@ export interface operations {
   DeleteDetection: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {
@@ -1528,8 +1550,10 @@ export interface operations {
   PatchDetection: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {
@@ -1582,8 +1606,10 @@ export interface operations {
         limit?: number;
         /** @description SQL OFFSET operator */
         offset?: number;
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
         /** @description SQL = operator */
         id__eq?: string;
         /** @description SQL != operator */
@@ -2201,8 +2227,10 @@ export interface operations {
   PostVideos: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path?: never;
@@ -2248,8 +2276,10 @@ export interface operations {
   GetVideo: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {
@@ -2294,8 +2324,10 @@ export interface operations {
   PutVideo: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {
@@ -2344,8 +2376,10 @@ export interface operations {
   DeleteVideo: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {
@@ -2382,8 +2416,10 @@ export interface operations {
   PatchVideo: {
     parameters: {
       query?: {
-        /** @description Disable loading of foreign objects (both direct and referenced-by), value is ignored (presence of key is sufficient) */
-        shallow?: string;
+        /** @description Max recursion depth for loading foreign objects; default = 1
+         *
+         *     (0 = recurse until graph cycle detected, 1 = this object only, 2 = this object + neighbours, 3 = this object + neighbours + their neighbours... etc) */
+        depth?: number;
       };
       header?: never;
       path: {

diff --git a/frontend/src/components/DateDropdownMenu.tsx b/frontend/src/components/DateDropdownMenu.tsx
@@ -7,6 +7,7 @@ import { Dispatch, SetStateAction } from "react";
 
 export interface DateDropdownMenuProps {
   responsive: boolean;
+  date: string | null | undefined;
   setDate: Dispatch<SetStateAction<string | null | undefined>>;
 }
 
@@ -37,19 +38,15 @@ export default function DateDropdownMenu(props: DateDropdownMenuProps) {
 
   return (
     <Dropdown>
-      <MenuButton
-        variant="soft"
-        color="danger"
-        size={"sm"}
-        sx={{ marginLeft: 0.5, marginRight: 1, width: 33 }}
-      >
+      <MenuButton variant="soft" color="danger" size={"sm"} sx={{ marginLeft: 0.5, marginRight: 1, width: 33 }}>
         <CalendarMonthIcon />
       </MenuButton>
       <Menu>
         {dates.map((date) => {
           return (
             <MenuItem
               key={date}
+              selected={props.date === date}
               onClick={(event) => {
                 props.setDate(date);
               }}

diff --git a/frontend/src/components/VideoTable.tsx b/frontend/src/components/VideoTable.tsx
@@ -18,12 +18,8 @@ export function VideoTable(props: VideoTableProps) {
       query: {
         started_at__desc: "",
         camera_id__eq: props.cameraId || undefined,
-        started_at__gte: props.date
-          ? `${props.date}T00:00:00+08:00`
-          : undefined,
-        started_at__lte: props.date
-          ? `${props.date}T23:59:59+08:00`
-          : undefined,
+        started_at__gte: props.date ? `${props.date}T00:00:00+08:00` : undefined,
+        started_at__lte: props.date ? `${props.date}T23:59:59+08:00` : undefined,
       },
     },
   });
@@ -77,29 +73,19 @@ export function VideoTable(props: VideoTableProps) {
 
             const available = video?.status !== "recording";
 
-            const minutes = Math.floor(
-              (video?.duration || 0) / (1_000_000_000 * 60),
-            );
-            const seconds = Math.floor(
-              (video?.duration || 0) / 1_000_000_000 - minutes * 60,
-            );
+            const minutes = Math.floor((video?.duration || 0) / (1_000_000_000 * 60));
+            const seconds = Math.floor((video?.duration || 0) / 1_000_000_000 - minutes * 60);
 
             const fileSize = (video?.file_size || 0.0).toFixed(2);
 
             var cameraName =
-              video?.camera_id_object && video?.camera_id_object?.name
-                ? video.camera_id_object.name
-                : "-";
+              video?.camera_id_object && video?.camera_id_object?.name ? video.camera_id_object.name : "-";
 
             if (props.responsive) {
               cameraName = cameraName[0];
             }
 
-            const statusText = (
-              video?.status
-                ? video.status[0].toUpperCase() + video.status.slice(1)
-                : "-"
-            ).trim();
+            const statusText = (video?.status ? video.status[0].toUpperCase() + video.status.slice(1) : "-").trim();
 
             const status =
               statusText === "Recording" ? (
@@ -109,7 +95,7 @@ export function VideoTable(props: VideoTableProps) {
                       from: "#ff5555",
                       to: "#5555ff",
                       type: "linear",
-                      degree: 45,
+                      degree: 90,
                     }}
                     animate
                     animateDuration={1_000}
@@ -126,11 +112,7 @@ export function VideoTable(props: VideoTableProps) {
 
             if (video?.thumbnail_name) {
               thumbnail = (
-                <a
-                  target="_blank"
-                  rel="noreferrer"
-                  href={`/media/${video?.thumbnail_name}`}
-                >
+                <a target="_blank" rel="noreferrer" href={`/media/${video?.thumbnail_name}`}>
                   <img
                     style={{ width: props.responsive ? 160 : 320 }}
                     alt={`still from ${video?.camera_id_object?.name} @ ${props.date} ${startedAt}`}
@@ -150,8 +132,7 @@ export function VideoTable(props: VideoTableProps) {
                 <td>
                   <Typography>
                     {startedAt.toTimeString().split(" ")[0]} <br />
-                    {endedAt ? endedAt.toTimeString().split(" ")[0] : "-"}{" "}
-                    <br />
+                    {endedAt ? endedAt.toTimeString().split(" ")[0] : "-"} <br />
                   </Typography>
                   <Typography color="neutral">
                     {minutes}m{seconds}s
@@ -173,11 +154,7 @@ export function VideoTable(props: VideoTableProps) {
                 </td>
                 <td>
                   {available ? (
-                    <a
-                      target="_blank"
-                      rel="noreferrer"
-                      href={`/media/${video?.file_name}`}
-                    >
+                    <a target="_blank" rel="noreferrer" href={`/media/${video?.file_name}`}>
                       <CloudDownloadOutlinedIcon color={"success"} />
                     </a>
                   ) : (
@@ -190,9 +167,7 @@ export function VideoTable(props: VideoTableProps) {
         ) : (
           <tr>
             <td colSpan={6}>
-              <Typography color={"neutral"}>
-                (No videos for the selected camera / date)
-              </Typography>
+              <Typography color={"neutral"}>(No videos for the selected camera / date)</Typography>
             </td>
           </tr>
         )}