rename vars and add validation

web/src/components/settings/ZoneEditPane.tsx

@@ -82,7 +82,7 @@ export default function ZoneEditPane({
     }
   }, [polygon, config]);
 
-  const [topWidth, bottomWidth, leftDepth, rightDepth] = useMemo(() => {
+  const [lineA, lineB, lineC, lineD] = useMemo(() => {
     const distances =
       polygon?.camera &&
       polygon?.name &&
@@ -93,7 +93,8 @@ export default function ZoneEditPane({
       : [0, 0, 0, 0];
   }, [polygon, config]);
 
-  const formSchema = z.object({
+  const formSchema = z
+    .object({
       name: z
         .string()
         .min(2, {
@@ -152,35 +153,47 @@ export default function ZoneEditPane({
       review_alerts: z.boolean().default(false).optional(),
       review_detections: z.boolean().default(false).optional(),
       speedEstimation: z.boolean().default(false),
-    topWidth: z.coerce
+      lineA: z.coerce
         .number()
         .min(0.1, {
           message: "Distance must be greater than or equal to 0.1",
         })
         .optional()
         .or(z.literal("")),
-    bottomWidth: z.coerce
+      lineB: z.coerce
         .number()
         .min(0.1, {
           message: "Distance must be greater than or equal to 0.1",
         })
         .optional()
         .or(z.literal("")),
-    leftDepth: z.coerce
+      lineC: z.coerce
         .number()
         .min(0.1, {
           message: "Distance must be greater than or equal to 0.1",
         })
         .optional()
         .or(z.literal("")),
-    rightDepth: z.coerce
+      lineD: z.coerce
         .number()
         .min(0.1, {
           message: "Distance must be greater than or equal to 0.1",
         })
         .optional()
         .or(z.literal("")),
-  });
+    })
+    .refine(
+      (data) => {
+        if (data.speedEstimation) {
+          return !!data.lineA && !!data.lineB && !!data.lineC && !!data.lineD;
+        }
+        return true;
+      },
+      {
+        message: "All distance fields must be filled to use speed estimation.",
+        path: ["speedEstimation"],
+      },
+    );
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -197,11 +210,11 @@ export default function ZoneEditPane({
         config?.cameras[polygon.camera]?.zones[polygon.name]?.loitering_time,
       isFinished: polygon?.isFinished ?? false,
       objects: polygon?.objects ?? [],
-      speedEstimation: !!(topWidth || bottomWidth || leftDepth || rightDepth),
+      speedEstimation: !!(lineA || lineB || lineC || lineD),
-      topWidth,
+      lineA,
-      bottomWidth,
+      lineB,
-      leftDepth,
+      lineC,
-      rightDepth,
+      lineD,
     },
   });
 
@@ -213,10 +226,10 @@ export default function ZoneEditPane({
         loitering_time,
         objects: form_objects,
         speedEstimation,
-        topWidth,
+        lineA,
-        bottomWidth,
+        lineB,
-        leftDepth,
+        lineC,
-        rightDepth,
+        lineD,
       }: ZoneFormValuesType, // values submitted via the form
       objects: string[],
     ) => {
@@ -314,9 +327,7 @@ export default function ZoneEditPane({
       }
 
       let distancesQuery = "";
-      const distances = [topWidth, bottomWidth, leftDepth, rightDepth].join(
+      const distances = [lineA, lineB, lineC, lineD].join(",");
-        ",",
-      );
       if (speedEstimation) {
         distancesQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.distances=${distances}`;
       } else {
@@ -543,7 +554,7 @@ export default function ZoneEditPane({
                             polygons[activePolygonIndex].points.length !== 4
                           ) {
                             toast.error(
-                              "Zones with speed estimation must have exactly 4 points",
+                              "Zones with speed estimation must have exactly 4 points.",
                             );
                             return;
                           }
@@ -557,6 +568,7 @@ export default function ZoneEditPane({
                   Enable speed estimation for objects in this zone. The zone
                   must have exactly 4 points.
                 </FormDescription>
+                <FormMessage />
               </FormItem>
             )}
           />
@@ -568,7 +580,7 @@ export default function ZoneEditPane({
               <>
                 <FormField
                   control={form.control}
-                  name="topWidth"
+                  name="lineA"
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>Line A distance</FormLabel>
@@ -584,7 +596,7 @@ export default function ZoneEditPane({
                 />
                 <FormField
                   control={form.control}
-                  name="bottomWidth"
+                  name="lineB"
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>Line B distance</FormLabel>
@@ -600,7 +612,7 @@ export default function ZoneEditPane({
                 />
                 <FormField
                   control={form.control}
-                  name="leftDepth"
+                  name="lineC"
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>Line C distance</FormLabel>
@@ -616,7 +628,7 @@ export default function ZoneEditPane({
                 />
                 <FormField
                   control={form.control}
-                  name="rightDepth"
+                  name="lineD"
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>Line D distance</FormLabel>

web/src/types/canvas.ts

@@ -20,10 +20,10 @@ export type ZoneFormValuesType = {
   isFinished: boolean;
   objects: string[];
   speedEstimation: boolean;
-  topWidth: number;
+  lineA: number;
-  bottomWidth: number;
+  lineB: number;
-  leftDepth: number;
+  lineC: number;
-  rightDepth: number;
+  lineD: number;
 };
 
 export type ObjectMaskFormValuesType = {