feat(web): detect, clips, snapshots toggles

web/src/routes/Cameras.jsx

@@ -2,6 +2,10 @@ import { h } from 'preact';
 import ActivityIndicator from '../components/ActivityIndicator';
 import Card from '../components/Card';
 import CameraImage from '../components/CameraImage';
+import ClipIcon from '../icons/Clip';
+import MotionIcon from '../icons/Motion';
+import SnapshotIcon from '../icons/Snapshot';
+import { useDetectState, useClipsState, useSnapshotsState } from '../api/mqtt';
 import { useConfig, FetchStatus } from '../api';
 import { useMemo } from 'preact/hooks';
 
@@ -20,8 +24,42 @@ export default function Cameras() {
 }
 
 function Camera({ name }) {
+  const { payload: detectValue, send: sendDetect } = useDetectState(name);
+  const { payload: clipValue, send: sendClips } = useClipsState(name);
+  const { payload: snapshotValue, send: sendSnapshots } = useSnapshotsState(name);
   const href = `/cameras/${name}`;
   const buttons = useMemo(() => [{ name: 'Events', href: `/events?camera=${name}` }], [name]);
+  const icons = useMemo(
+    () => [
+      {
+        name: `Toggle detect ${detectValue === 'ON' ? 'off' : 'on'}`,
+        icon: MotionIcon,
+        color: detectValue === 'ON' ? 'blue' : 'gray',
+        onClick: () => {
+          sendDetect(detectValue === 'ON' ? 'OFF' : 'ON');
+        },
+      },
+      {
+        name: `Toggle clips ${clipValue === 'ON' ? 'off' : 'on'}`,
+        icon: ClipIcon,
+        color: clipValue === 'ON' ? 'blue' : 'gray',
+        onClick: () => {
+          sendClips(clipValue === 'ON' ? 'OFF' : 'ON');
+        },
+      },
+      {
+        name: `Toggle snapshots ${snapshotValue === 'ON' ? 'off' : 'on'}`,
+        icon: SnapshotIcon,
+        color: snapshotValue === 'ON' ? 'blue' : 'gray',
+        onClick: () => {
+          sendSnapshots(snapshotValue === 'ON' ? 'OFF' : 'ON');
+        },
+      },
+    ],
+    [detectValue, sendDetect, clipValue, sendClips, snapshotValue, sendSnapshots]
+  );
 
-  return <Card buttons={buttons} href={href} header={name} media={<CameraImage camera={name} stretch />} />;
+  return (
+    <Card buttons={buttons} href={href} header={name} icons={icons} media={<CameraImage camera={name} stretch />} />
+  );
 }