From 98085a028ba3ae5264284dd308ba04f029ee6c21 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 18 Apr 2024 10:33:13 -0500
Subject: [PATCH] tweaks

---
 web/src/components/settings/PolygonItem.tsx  | 12 ++---
 web/src/components/settings/ZoneEditPane.tsx | 52 +++++++++++++-------
 web/src/pages/Settings.tsx                   |  4 +-
 3 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/web/src/components/settings/PolygonItem.tsx b/web/src/components/settings/PolygonItem.tsx
index 449572ddd..b0b402064 100644
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@@ -286,14 +286,14 @@ export default function PolygonItem({
         {!isMobile && hoveredPolygonIndex === index && (
           <div className="flex flex-row gap-2 items-center">
             <div
-              className="cursor-pointer size-[15px]"
+              className="cursor-pointer"
               onClick={() => {
                 setActivePolygonIndex(index);
                 setEditPane(polygon.type);
               }}
             >
               <Tooltip>
-                <TooltipTrigger>
+                <TooltipTrigger asChild>
                   <LuPencil
                     className={`size-[15px] ${
                       hoveredPolygonIndex === index && "text-primary-variant"
@@ -304,11 +304,11 @@ export default function PolygonItem({
               </Tooltip>
             </div>
             <div
-              className="cursor-pointer size-[15px]"
+              className="cursor-pointer"
               onClick={() => handleCopyCoordinates(index)}
             >
               <Tooltip>
-                <TooltipTrigger>
+                <TooltipTrigger asChild>
                   <LuCopy
                     className={`size-[15px] ${
                       hoveredPolygonIndex === index && "text-primary-variant"
@@ -319,11 +319,11 @@ export default function PolygonItem({
               </Tooltip>
             </div>
             <div
-              className="cursor-pointer size-[15px]"
+              className="cursor-pointer"
               onClick={() => !isLoading && setDeleteDialogOpen(true)}
             >
               <Tooltip>
-                <TooltipTrigger>
+                <TooltipTrigger asChild>
                   <HiTrash
                     className={`size-[15px] ${
                       hoveredPolygonIndex === index &&
diff --git a/web/src/components/settings/ZoneEditPane.tsx b/web/src/components/settings/ZoneEditPane.tsx
index f8db2c45d..803d172d8 100644
--- a/web/src/components/settings/ZoneEditPane.tsx
+++ b/web/src/components/settings/ZoneEditPane.tsx
@@ -107,12 +107,19 @@ export default function ZoneEditPane({
           message: "Zone name already exists on this camera.",
         },
       ),
-    inertia: z.coerce.number().min(1, {
-      message: "Inertia must be above 0.",
-    }),
-    loitering_time: z.coerce.number().min(0, {
-      message: "Loitering time must be greater than or equal to 0.",
-    }),
+    inertia: z.coerce
+      .number()
+      .min(1, {
+        message: "Inertia must be above 0.",
+      })
+      .or(z.literal("")),
+    loitering_time: z.coerce
+      .number()
+      .min(0, {
+        message: "Loitering time must be greater than or equal to 0.",
+      })
+      .optional()
+      .or(z.literal("")),
     isFinished: z.boolean().refine(() => polygon?.isFinished === true, {
       message: "The polygon drawing must be finished before saving.",
     }),
@@ -127,16 +134,13 @@ export default function ZoneEditPane({
     defaultValues: {
       name: polygon?.name ?? "",
       inertia:
-        (polygon?.camera &&
-          polygon?.name &&
-          config?.cameras[polygon.camera]?.zones[polygon.name]?.inertia) ||
-        3,
+        polygon?.camera &&
+        polygon?.name &&
+        config?.cameras[polygon.camera]?.zones[polygon.name]?.inertia,
       loitering_time:
-        (polygon?.camera &&
-          polygon?.name &&
-          config?.cameras[polygon.camera]?.zones[polygon.name]
-            ?.loitering_time) ||
-        0,
+        polygon?.camera &&
+        polygon?.name &&
+        config?.cameras[polygon.camera]?.zones[polygon.name]?.loitering_time,
       isFinished: polygon?.isFinished ?? false,
       objects: polygon?.objects ?? [],
       review_alerts:
@@ -240,9 +244,19 @@ export default function ZoneEditPane({
           .required_zones || [],
       );
 
+      let inertiaQuery = "";
+      if (inertia) {
+        inertiaQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.inertia=${inertia}`;
+      }
+
+      let loiteringTimeQuery = "";
+      if (loitering_time) {
+        loiteringTimeQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.loitering_time=${loitering_time}`;
+      }
+
       axios
         .put(
-          `config/set?cameras.${polygon?.camera}.zones.${zoneName}.coordinates=${coordinates}&cameras.${polygon?.camera}.zones.${zoneName}.inertia=${inertia}&cameras.${polygon?.camera}.zones.${zoneName}.loitering_time=${loitering_time}${objectQueries}${alertQueries}${detectionQueries}`,
+          `config/set?cameras.${polygon?.camera}.zones.${zoneName}.coordinates=${coordinates}${inertiaQuery}${loiteringTimeQuery}${objectQueries}${alertQueries}${detectionQueries}`,
           { requires_restart: 0 },
         )
         .then((res) => {
@@ -346,7 +360,7 @@ export default function ZoneEditPane({
                 <FormLabel>Name</FormLabel>
                 <FormControl>
                   <Input
-                    className="w-full p-2 border border-input bg-background text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     placeholder="Enter a name..."
                     {...field}
                   />
@@ -368,7 +382,7 @@ export default function ZoneEditPane({
                 <FormLabel>Inertia</FormLabel>
                 <FormControl>
                   <Input
-                    className="w-full p-2 border border-input bg-background text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     placeholder="3"
                     {...field}
                   />
@@ -390,7 +404,7 @@ export default function ZoneEditPane({
                 <FormLabel>Loitering Time</FormLabel>
                 <FormControl>
                   <Input
-                    className="w-full p-2 border border-input bg-background text-secondary-foreground hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     placeholder="0"
                     {...field}
                   />
diff --git a/web/src/pages/Settings.tsx b/web/src/pages/Settings.tsx
index dbf9046c4..48ab59eeb 100644
--- a/web/src/pages/Settings.tsx
+++ b/web/src/pages/Settings.tsx
@@ -196,7 +196,9 @@ function CameraSelectButton({
     >
       <FaVideo className="text-background dark:text-primary" />
       <div className="hidden md:block text-background dark:text-primary">
-        {selectedCamera == undefined ? "No Camera" : selectedCamera}
+        {selectedCamera == undefined
+          ? "No Camera"
+          : selectedCamera.replaceAll("_", " ")}
       </div>
     </Button>
   );