From 060e9240c621285ada1c21a48b1b1ebfb3dc53b3 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sat, 14 Dec 2024 13:22:36 -0600
Subject: [PATCH] frontend

---
 web/src/api/ws.tsx                            | 25 +++++++++
 web/src/types/frigateConfig.ts                |  2 +
 web/src/views/settings/CameraSettingsView.tsx | 51 +++++++++++++++++++
 3 files changed, 78 insertions(+)

diff --git a/web/src/api/ws.tsx b/web/src/api/ws.tsx
index 9b8924d1b..1174d35f3 100644
--- a/web/src/api/ws.tsx
+++ b/web/src/api/ws.tsx
@@ -200,6 +200,31 @@ export function useAutotrackingState(camera: string): {
   return { payload: payload as ToggleableSetting, send };
 }
 
+export function useAlertsState(camera: string): {
+  payload: ToggleableSetting;
+  send: (payload: ToggleableSetting, retain?: boolean) => void;
+} {
+  const {
+    value: { payload },
+    send,
+  } = useWs(`${camera}/review/alerts/state`, `${camera}/review/alerts/set`);
+  return { payload: payload as ToggleableSetting, send };
+}
+
+export function useDetectionsState(camera: string): {
+  payload: ToggleableSetting;
+  send: (payload: ToggleableSetting, retain?: boolean) => void;
+} {
+  const {
+    value: { payload },
+    send,
+  } = useWs(
+    `${camera}/review/detections/state`,
+    `${camera}/review/detections/set`,
+  );
+  return { payload: payload as ToggleableSetting, send };
+}
+
 export function usePtzCommand(camera: string): {
   payload: string;
   send: (payload: string, retain?: boolean) => void;
diff --git a/web/src/types/frigateConfig.ts b/web/src/types/frigateConfig.ts
index 5c5971fc0..b19e5553f 100644
--- a/web/src/types/frigateConfig.ts
+++ b/web/src/types/frigateConfig.ts
@@ -172,10 +172,12 @@ export interface CameraConfig {
   };
   review: {
     alerts: {
+      enabled: boolean;
       required_zones: string[];
       labels: string[];
     };
     detections: {
+      enabled: boolean;
       required_zones: string[];
       labels: string[];
     };
diff --git a/web/src/views/settings/CameraSettingsView.tsx b/web/src/views/settings/CameraSettingsView.tsx
index 30c6229e1..2f97cc1f4 100644
--- a/web/src/views/settings/CameraSettingsView.tsx
+++ b/web/src/views/settings/CameraSettingsView.tsx
@@ -27,6 +27,9 @@ import { LuExternalLink } from "react-icons/lu";
 import { capitalizeFirstLetter } from "@/utils/stringUtil";
 import { MdCircle } from "react-icons/md";
 import { cn } from "@/lib/utils";
+import { Switch } from "@/components/ui/switch";
+import { Label } from "@/components/ui/label";
+import { useAlertsState, useDetectionsState } from "@/api/ws";
 
 type CameraSettingsViewProps = {
   selectedCamera: string;
@@ -105,6 +108,11 @@ export default function CameraSettingsView({
   const watchedAlertsZones = form.watch("alerts_zones");
   const watchedDetectionsZones = form.watch("detections_zones");
 
+  const { payload: alertsState, send: sendAlerts } =
+    useAlertsState(selectedCamera);
+  const { payload: detectionsState, send: sendDetections } =
+    useDetectionsState(selectedCamera);
+
   const handleCheckedChange = useCallback(
     (isChecked: boolean) => {
       if (!isChecked) {
@@ -244,6 +252,49 @@ export default function CameraSettingsView({
 
           <Separator className="my-2 flex bg-secondary" />
 
+          <Heading as="h4" className="my-2">
+            Review
+          </Heading>
+
+          <div className="mb-5 mt-2 flex max-w-5xl flex-col gap-2 space-y-3 text-sm text-primary-variant">
+            <div className="flex flex-row items-center">
+              <Switch
+                id="alerts-enabled"
+                className="mr-3"
+                disabled={alertsState == "OFF"}
+                checked={alertsState == "ON"}
+                onCheckedChange={(isChecked) => {
+                  sendAlerts(isChecked ? "OFF" : "ON");
+                }}
+              />
+              <div className="space-y-0.5">
+                <Label htmlFor="alerts-enabled">Alerts</Label>
+              </div>
+            </div>
+            <div className="flex flex-col">
+              <div className="flex flex-row items-center">
+                <Switch
+                  id="detections-enabled"
+                  className="mr-3"
+                  disabled={detectionsState == "OFF"}
+                  checked={detectionsState == "ON"}
+                  onCheckedChange={(isChecked) => {
+                    sendDetections(isChecked ? "OFF" : "ON");
+                  }}
+                />
+                <div className="space-y-0.5">
+                  <Label htmlFor="detections-enabled">Detections</Label>
+                </div>
+              </div>
+              <div className="mt-3 text-sm text-muted-foreground">
+                Enable/disable alerts and detections for this camera. When
+                disabled, no new review items will be generated.
+              </div>
+            </div>
+          </div>
+
+          <Separator className="my-2 flex bg-secondary" />
+
           <Heading as="h4" className="my-2">
             Review Classification
           </Heading>