diff --git a/web/src/components/settings/ZoneEditPane.tsx b/web/src/components/settings/ZoneEditPane.tsx index ebcb5d2ed..a4797b645 100644 --- a/web/src/components/settings/ZoneEditPane.tsx +++ b/web/src/components/settings/ZoneEditPane.tsx @@ -178,6 +178,7 @@ export default function ZoneEditPane({ message: t("masksAndZones.form.zoneName.error.alreadyExists"), }, ), + enabled: z.boolean().default(true), inertia: z.coerce .number() .min(1, { @@ -271,6 +272,13 @@ export default function ZoneEditPane({ defaultValues: { name: polygon?.name ?? "", friendly_name: polygon?.friendly_name ?? polygon?.name ?? "", + enabled: + polygon?.camera && + polygon?.name && + config?.cameras[polygon.camera]?.zones[polygon.name]?.enabled !== + undefined + ? config?.cameras[polygon.camera]?.zones[polygon.name]?.enabled + : (polygon?.enabled ?? true), inertia: polygon?.camera && polygon?.name && @@ -311,6 +319,7 @@ export default function ZoneEditPane({ { name: zoneName, friendly_name, + enabled, inertia, loitering_time, objects: form_objects, @@ -445,9 +454,11 @@ export default function ZoneEditPane({ friendlyNameQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.friendly_name=${encodeURIComponent(friendly_name)}`; } + const enabledQuery = `&cameras.${polygon?.camera}.zones.${zoneName}.enabled=${enabled}`; + axios .put( - `config/set?cameras.${polygon?.camera}.zones.${zoneName}.coordinates=${coordinates}${inertiaQuery}${loiteringTimeQuery}${speedThresholdQuery}${distancesQuery}${objectQueries}${friendlyNameQuery}${alertQueries}${detectionQueries}`, + `config/set?cameras.${polygon?.camera}.zones.${zoneName}.coordinates=${coordinates}${enabledQuery}${inertiaQuery}${loiteringTimeQuery}${speedThresholdQuery}${distancesQuery}${objectQueries}${friendlyNameQuery}${alertQueries}${detectionQueries}`, { requires_restart: 0, update_topic: `config/cameras/${polygon.camera}/zones`, @@ -581,6 +592,28 @@ export default function ZoneEditPane({ nameDescription={t("masksAndZones.zones.name.tips")} placeholderName={t("masksAndZones.zones.name.inputPlaceHolder")} /> + ( + +
+ + {t("masksAndZones.zones.enabled.title")} + + + {t("masksAndZones.zones.enabled.description")} + +
+ + + +
+ )} + /> ; inertia: number; loitering_time: number; diff --git a/web/src/views/settings/MasksAndZonesView.tsx b/web/src/views/settings/MasksAndZonesView.tsx index 4beac3948..54e329f44 100644 --- a/web/src/views/settings/MasksAndZonesView.tsx +++ b/web/src/views/settings/MasksAndZonesView.tsx @@ -230,6 +230,7 @@ export default function MasksAndZonesView({ camera: cameraConfig.name, name, friendly_name: zoneData.friendly_name, + enabled: zoneData.enabled, objects: zoneData.objects, points: interpolatePoints( parseCoordinates(zoneData.coordinates), @@ -241,7 +242,7 @@ export default function MasksAndZonesView({ distances: zoneData.distances?.map((distance) => parseFloat(distance)) ?? [], isFinished: true, - color: zoneData.color, + color: zoneData.enabled ? zoneData.color : [100, 100, 100], }), );