New mask/zone editor and motion tuner (#11020)

* initial working konva

* working multi polygons

* multi zones

* clean up

* new zone dialog

* clean up

* relative coordinates and colors

* fix color order

* better motion tuner

* objects for zones

* progress

* merge dev

* edit pane

* motion and object masks

* filtering

* add objects and unsaved to type

* motion tuner, edit controls, tooltips

* object and motion edit panes

* polygon item component, switch color, object form, hover cards

* working zone edit pane

* working motion masks

* object masks and deletion of all types

* use FilterSwitch

* motion tuner fixes and tweaks

* clean up

* tweaks

* spaces in camera name

* tweaks

* allow dragging of points while drawing polygon

* turn off editing mode when switching camera

* limit interpolated coordinates and use crosshair cursor

* padding

* fix tooltip trigger for icons

* konva tweaks

* consolidate

* fix top menu items on mobile

web/src/pages/Settings.tsx

@@ -1,44 +1,272 @@
-import Heading from "@/components/ui/heading";
-import { Label } from "@/components/ui/label";
 import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
+import MotionTuner from "@/components/settings/MotionTuner";
+import MasksAndZones from "@/components/settings/MasksAndZones";
+import { Button } from "@/components/ui/button";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import useOptimisticState from "@/hooks/use-optimistic-state";
+import { isMobile } from "react-device-detect";
+import { FaVideo } from "react-icons/fa";
+import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
+import useSWR from "swr";
+import General from "@/components/settings/General";
+import FilterSwitch from "@/components/filter/FilterSwitch";
+import { ZoneMaskFilterButton } from "@/components/filter/ZoneMaskFilter";
+import { PolygonType } from "@/types/canvas";
+import ObjectSettings from "@/components/settings/ObjectSettings";
+
+export default function Settings() {
+  const settingsViews = [
+    "general",
+    "objects",
+    "masks / zones",
+    "motion tuner",
+  ] as const;
+
+  type SettingsType = (typeof settingsViews)[number];
+  const [page, setPage] = useState<SettingsType>("general");
+  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
+
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  // TODO: confirm leave page
+  const [unsavedChanges, setUnsavedChanges] = useState(false);
+  const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false);
+
+  const cameras = useMemo(() => {
+    if (!config) {
+      return [];
+    }
+
+    return Object.values(config.cameras)
+      .filter((conf) => conf.ui.dashboard && conf.enabled)
+      .sort((aConf, bConf) => aConf.ui.order - bConf.ui.order);
+  }, [config]);
+
+  const [selectedCamera, setSelectedCamera] = useState<string>("");
+
+  const [filterZoneMask, setFilterZoneMask] = useState<PolygonType[]>();
+
+  const handleDialog = useCallback(
+    (save: boolean) => {
+      if (unsavedChanges && save) {
+        // TODO
+      }
+      setConfirmationDialogOpen(false);
+      setUnsavedChanges(false);
+    },
+    [unsavedChanges],
+  );
+
+  useEffect(() => {
+    if (cameras.length) {
+      setSelectedCamera(cameras[0].name);
+    }
+    // only run once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-function Settings() {
   return (
-    <>
-      <Heading as="h2">Settings</Heading>
-      <div className="flex items-center space-x-2 mt-5">
-        <Switch id="detect" checked={false} onCheckedChange={() => {}} />
-        <Label htmlFor="detect">
-          Always show PTZ controls for ONVIF cameras
-        </Label>
+    <div className="size-full p-2 flex flex-col">
+      <div className="w-full h-11 relative flex justify-between items-center">
+        <div className="flex flex-row overflow-x-auto">
+          <ToggleGroup
+            className="*:px-3 *:py-4 *:rounded-md flex-shrink-0"
+            type="single"
+            size="sm"
+            value={pageToggle}
+            onValueChange={(value: SettingsType) => {
+              if (value) {
+                setPageToggle(value);
+              }
+            }}
+          >
+            {Object.values(settingsViews).map((item) => (
+              <ToggleGroupItem
+                key={item}
+                className={`flex items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+                value={item}
+                aria-label={`Select ${item}`}
+              >
+                <div className="capitalize">{item}</div>
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+        </div>
+        {(page == "objects" ||
+          page == "masks / zones" ||
+          page == "motion tuner") && (
+          <div className="flex items-center gap-2 ml-2 flex-shrink-0">
+            {page == "masks / zones" && (
+              <ZoneMaskFilterButton
+                selectedZoneMask={filterZoneMask}
+                updateZoneMaskFilter={setFilterZoneMask}
+              />
+            )}
+            <CameraSelectButton
+              allCameras={cameras}
+              selectedCamera={selectedCamera}
+              setSelectedCamera={setSelectedCamera}
+            />
+          </div>
+        )}
       </div>
-
-      <div className="flex items-center space-x-2 mt-5">
-        <Select>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Default Live Mode" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectLabel>Live Mode</SelectLabel>
-              <SelectItem value="jsmpeg">JSMpeg</SelectItem>
-              <SelectItem value="mse">MSE</SelectItem>
-              <SelectItem value="webrtc">WebRTC</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
+      <div className="mt-2 flex flex-col items-start w-full h-full md:h-dvh md:pb-24">
+        {page == "general" && <General />}
+        {page == "objects" && (
+          <ObjectSettings selectedCamera={selectedCamera} />
+        )}
+        {page == "masks / zones" && (
+          <MasksAndZones
+            selectedCamera={selectedCamera}
+            selectedZoneMask={filterZoneMask}
+            setUnsavedChanges={setUnsavedChanges}
+          />
+        )}
+        {page == "motion tuner" && (
+          <MotionTuner
+            selectedCamera={selectedCamera}
+            setUnsavedChanges={setUnsavedChanges}
+          />
+        )}
       </div>
-    </>
+      {confirmationDialogOpen && (
+        <AlertDialog
+          open={confirmationDialogOpen}
+          onOpenChange={() => setConfirmationDialogOpen(false)}
+        >
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>You have unsaved changes.</AlertDialogTitle>
+              <AlertDialogDescription>
+                Do you want to save your changes before continuing?
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel onClick={() => handleDialog(false)}>
+                Cancel
+              </AlertDialogCancel>
+              <AlertDialogAction onClick={() => handleDialog(true)}>
+                Save
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+    </div>
   );
 }
 
-export default Settings;
+type CameraSelectButtonProps = {
+  allCameras: CameraConfig[];
+  selectedCamera: string;
+  setSelectedCamera: React.Dispatch<React.SetStateAction<string>>;
+};
+
+function CameraSelectButton({
+  allCameras,
+  selectedCamera,
+  setSelectedCamera,
+}: CameraSelectButtonProps) {
+  const [open, setOpen] = useState(false);
+
+  if (!allCameras.length) {
+    return;
+  }
+
+  const trigger = (
+    <Button
+      className="flex items-center gap-2 capitalize bg-selected hover:bg-selected"
+      size="sm"
+    >
+      <FaVideo className="text-background dark:text-primary" />
+      <div className="hidden md:block text-background dark:text-primary">
+        {selectedCamera == undefined
+          ? "No Camera"
+          : selectedCamera.replaceAll("_", " ")}
+      </div>
+    </Button>
+  );
+  const content = (
+    <>
+      {isMobile && (
+        <>
+          <DropdownMenuLabel className="flex justify-center">
+            Camera
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+        </>
+      )}
+      <div className="h-auto p-4 mb-5 md:mb-1 overflow-y-auto overflow-x-hidden">
+        <div className="flex flex-col gap-2.5">
+          {allCameras.map((item) => (
+            <FilterSwitch
+              key={item.name}
+              isChecked={item.name === selectedCamera}
+              label={item.name.replaceAll("_", " ")}
+              onCheckedChange={(isChecked) => {
+                if (isChecked) {
+                  setSelectedCamera(item.name);
+                  setOpen(false);
+                }
+              }}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  );
+
+  if (isMobile) {
+    return (
+      <Drawer
+        open={open}
+        onOpenChange={(open: boolean) => {
+          if (!open) {
+            setSelectedCamera(selectedCamera);
+          }
+
+          setOpen(open);
+        }}
+      >
+        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
+        <DrawerContent className="max-h-[75dvh] overflow-hidden">
+          {content}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <DropdownMenu
+      open={open}
+      onOpenChange={(open: boolean) => {
+        if (!open) {
+          setSelectedCamera(selectedCamera);
+        }
+
+        setOpen(open);
+      }}
+    >
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent>{content}</DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

web/src/pages/SubmitPlus.tsx

@@ -24,7 +24,7 @@ import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { DualThumbSlider } from "@/components/ui/slider";
 import { Event } from "@/types/event";
-import { FrigateConfig } from "@/types/frigateConfig";
+import { ATTRIBUTE_LABELS, FrigateConfig } from "@/types/frigateConfig";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
@@ -199,8 +199,6 @@ export default function SubmitPlus() {
   );
 }
 
-const ATTRIBUTES = ["amazon", "face", "fedex", "license_plate", "ups"];
-
 type PlusFilterGroupProps = {
   selectedCameras: string[] | undefined;
   selectedLabels: string[] | undefined;
@@ -237,7 +235,7 @@ function PlusFilterGroup({
     cameras.forEach((camera) => {
       const cameraConfig = config.cameras[camera];
       cameraConfig.objects.track.forEach((label) => {
-        if (!ATTRIBUTES.includes(label)) {
+        if (!ATTRIBUTE_LABELS.includes(label)) {
           labels.add(label);
         }
       });