frontend for enabled_in_config

web/src/components/settings/PolygonItem.tsx

@@ -289,6 +289,10 @@ export default function PolygonItem({
   const handleToggleEnabled = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation();
+      // Prevent toggling if disabled in config
+      if (polygon.enabled_in_config === false) {
+        return;
+      }
       if (!polygon) {
         return;
       }
@@ -354,7 +358,7 @@ export default function PolygonItem({
                   <button
                     type="button"
                     onClick={handleToggleEnabled}
-                    disabled={isLoading}
+                    disabled={isLoading || polygon.enabled_in_config === false}
                     className="mr-2 cursor-pointer border-none bg-transparent p-0 transition-opacity hover:opacity-70 disabled:cursor-not-allowed disabled:opacity-50"
                   >
                     <PolygonItemIcon
@@ -370,14 +374,22 @@ export default function PolygonItem({
                   </button>
                 </TooltipTrigger>
                 <TooltipContent>
-                  {isPolygonEnabled
+                  {polygon.enabled_in_config === false
-                    ? t("button.disable", { ns: "common" })
+                    ? t("masksAndZones.disabledInConfig", {
-                    : t("button.enable", { ns: "common" })}
+                        ns: "views/settings",
+                      })
+                    : isPolygonEnabled
+                      ? t("button.disable", { ns: "common" })
+                      : t("button.enable", { ns: "common" })}
                 </TooltipContent>
               </Tooltip>
             ))}
           <p
-            className={`cursor-default ${!isPolygonEnabled ? "line-through" : ""}`}
+            className={cn(
+              "cursor-default",
+              !isPolygonEnabled && "opacity-60",
+              polygon.enabled_in_config === false && "line-through",
+            )}
           >
             {polygon.friendly_name ?? polygon.name}
             {!isPolygonEnabled && " (disabled)"}

web/src/types/canvas.ts

@@ -13,6 +13,7 @@ export type Polygon = {
   color: number[];
   friendly_name?: string;
   enabled?: boolean;
+  enabled_in_config?: boolean;
 };
 
 export type ZoneFormValuesType = {

web/src/types/frigateConfig.ts

@@ -110,6 +110,7 @@ export interface CameraConfig {
       [maskId: string]: {
         friendly_name?: string;
         enabled: boolean;
+        enabled_in_config?: boolean;
         coordinates: string;
       };
     };
@@ -138,6 +139,7 @@ export interface CameraConfig {
           [maskId: string]: {
             friendly_name?: string;
             enabled: boolean;
+            enabled_in_config?: boolean;
             coordinates: string;
           };
         };
@@ -153,6 +155,7 @@ export interface CameraConfig {
       [maskId: string]: {
         friendly_name?: string;
         enabled: boolean;
+        enabled_in_config?: boolean;
         coordinates: string;
       };
     };
@@ -291,6 +294,7 @@ export interface CameraConfig {
       coordinates: string;
       distances: string[];
       enabled: boolean;
+      enabled_in_config?: boolean;
       filters: Record<string, unknown>;
       inertia: number;
       loitering_time: number;

web/src/views/settings/MasksAndZonesView.tsx

@@ -235,6 +235,7 @@ export default function MasksAndZonesView({
           name,
           friendly_name: zoneData.friendly_name,
           enabled: zoneData.enabled,
+          enabled_in_config: zoneData.enabled_in_config,
           objects: zoneData.objects,
           points: interpolatePoints(
             parseCoordinates(zoneData.coordinates),
@@ -263,6 +264,7 @@ export default function MasksAndZonesView({
           name: maskId,
           friendly_name: maskData.friendly_name,
           enabled: maskData.enabled,
+          enabled_in_config: maskData.enabled_in_config,
           objects: [],
           points: interpolatePoints(
             parseCoordinates(maskData.coordinates),
@@ -286,6 +288,7 @@ export default function MasksAndZonesView({
           name: maskId,
           friendly_name: maskData.friendly_name,
           enabled: maskData.enabled,
+          enabled_in_config: maskData.enabled_in_config,
           objects: [],
           points: interpolatePoints(
             parseCoordinates(maskData.coordinates),
@@ -322,6 +325,7 @@ export default function MasksAndZonesView({
                 name: maskId,
                 friendly_name: maskData.friendly_name,
                 enabled: maskData.enabled,
+                enabled_in_config: maskData.enabled_in_config,
                 objects: [objectName],
                 points: interpolatePoints(
                   parseCoordinates(maskData.coordinates),