diff --git a/web/src/components/filter/CamerasFilterButton.tsx b/web/src/components/filter/CamerasFilterButton.tsx
index 563af8752..94f1a838e 100644
--- a/web/src/components/filter/CamerasFilterButton.tsx
+++ b/web/src/components/filter/CamerasFilterButton.tsx
@@ -69,6 +69,70 @@ export function CamerasFilterButton({
);
const content = (
+
+ );
+
+ if (isMobile) {
+ return (
+ {
+ if (!open) {
+ setCurrentCameras(selectedCameras);
+ }
+
+ setOpen(open);
+ }}
+ >
+ {trigger}
+
+ {content}
+
+
+ );
+ }
+
+ return (
+ {
+ if (!open) {
+ setCurrentCameras(selectedCameras);
+ }
+ setOpen(open);
+ }}
+ >
+ {trigger}
+ {content}
+
+ );
+}
+
+type CamerasFilterContentProps = {
+ allCameras: string[];
+ currentCameras: string[] | undefined;
+ groups: [string, CameraGroupConfig][];
+ setCurrentCameras: (cameras: string[] | undefined) => void;
+ setOpen: (open: boolean) => void;
+ updateCameraFilter: (cameras: string[] | undefined) => void;
+};
+export function CamerasFilterContent({
+ allCameras,
+ currentCameras,
+ groups,
+ setCurrentCameras,
+ setOpen,
+ updateCameraFilter,
+}: CamerasFilterContentProps) {
+ return (
<>
{isMobile && (
<>
@@ -158,40 +222,4 @@ export function CamerasFilterButton({
>
);
-
- if (isMobile) {
- return (
- {
- if (!open) {
- setCurrentCameras(selectedCameras);
- }
-
- setOpen(open);
- }}
- >
- {trigger}
-
- {content}
-
-
- );
- }
-
- return (
- {
- if (!open) {
- setCurrentCameras(selectedCameras);
- }
- setOpen(open);
- }}
- >
- {trigger}
- {content}
-
- );
}
diff --git a/web/src/components/filter/SearchFilterGroup.tsx b/web/src/components/filter/SearchFilterGroup.tsx
index 30b554200..bbdac7513 100644
--- a/web/src/components/filter/SearchFilterGroup.tsx
+++ b/web/src/components/filter/SearchFilterGroup.tsx
@@ -10,7 +10,6 @@ import { Switch } from "../ui/switch";
import { Label } from "../ui/label";
import FilterSwitch from "./FilterSwitch";
import { FilterList } from "@/types/filter";
-import { CalendarRangeFilterButton } from "./CalendarFilterButton";
import { CamerasFilterButton } from "./CamerasFilterButton";
import {
DEFAULT_SEARCH_FILTERS,
@@ -80,8 +79,6 @@ export default function SearchFilterGroup({
return [...labels].sort();
}, [config, filterList, filter]);
- const { data: allSubLabels } = useSWR(["sub_labels", { split_joined: 1 }]);
-
const allZones = useMemo(() => {
if (filterList?.zones) {
return filterList.zones;
@@ -169,60 +166,12 @@ export default function SearchFilterGroup({
}}
/>
)}
-
- {filters.includes("date") && (
-
- )}
- {filters.includes("time") && (
-
- onUpdateFilter({ ...filter, time_range })
- }
- />
- )}
- {filters.includes("zone") && allZones.length > 0 && (
-
- onUpdateFilter({ ...filter, zones: newZones })
- }
- />
- )}
- {filters.includes("sub") && (
-
- onUpdateFilter({ ...filter, sub_labels: newSubLabels })
- }
- />
- )}
- {config?.semantic_search?.enabled &&
- filters.includes("source") &&
- !filter?.search_type?.includes("similarity") && (
-
- onUpdateFilter({ ...filter, search_type: newSearchSource })
- }
- />
- )}
+
);
}
diff --git a/web/src/components/overlay/dialog/PlatformAwareDialog.tsx b/web/src/components/overlay/dialog/PlatformAwareDialog.tsx
index f1c1834e3..a9aed8a65 100644
--- a/web/src/components/overlay/dialog/PlatformAwareDialog.tsx
+++ b/web/src/components/overlay/dialog/PlatformAwareDialog.tsx
@@ -65,9 +65,7 @@ export function PlatformAwareSheet({
if (isMobile) {
return (
-
+
{content}
diff --git a/web/src/components/overlay/dialog/SearchFilterDialog.tsx b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
index 017ac1e88..27b172f14 100644
--- a/web/src/components/overlay/dialog/SearchFilterDialog.tsx
+++ b/web/src/components/overlay/dialog/SearchFilterDialog.tsx
@@ -3,9 +3,37 @@ import { FaCog } from "react-icons/fa";
import { useState } from "react";
import { PlatformAwareSheet } from "./PlatformAwareDialog";
import { Button } from "@/components/ui/button";
+import { CamerasFilterContent } from "@/components/filter/CamerasFilterButton";
+import useSWR from "swr";
+import { SearchFilter, SearchSource } from "@/types/search";
+import { CameraGroupConfig } from "@/types/frigateConfig";
+
+type SearchFilterDialogProps = {
+ filter?: SearchFilter;
+ filterValues: {
+ cameras: string[];
+ labels: string[];
+ zones: string[];
+ search_type: SearchSource[];
+ };
+ groups: [string, CameraGroupConfig][];
+ onUpdateFilter: (filter: SearchFilter) => void;
+};
+export default function SearchFilterDialog({
+ filter,
+ filterValues,
+ groups,
+ onUpdateFilter,
+}: SearchFilterDialogProps) {
+ // data
+
+ const { data: allSubLabels } = useSWR(["sub_labels", { split_joined: 1 }]);
+ const [currentCameras, setCurrentCameras] = useState(
+ filter?.cameras,
+ );
+
+ // state
-type SearchFilterDialogProps = {};
-export default function SearchFilterDialog({}: SearchFilterDialogProps) {
const [open, setOpen] = useState(false);
const trigger = (
@@ -14,7 +42,20 @@ export default function SearchFilterDialog({}: SearchFilterDialogProps) {
More Filters
);
- const content = <>>;
+ const content = (
+ <>
+ {
+ onUpdateFilter({ ...filter, cameras: newCameras });
+ }}
+ />
+ >
+ );
return (
);
}
+
+/**
+ * {filters.includes("date") && (
+
+ )}
+ {filters.includes("time") && (
+
+ onUpdateFilter({ ...filter, time_range })
+ }
+ />
+ )}
+ {filters.includes("zone") && allZones.length > 0 && (
+
+ onUpdateFilter({ ...filter, zones: newZones })
+ }
+ />
+ )}
+ {filters.includes("sub") && (
+
+ onUpdateFilter({ ...filter, sub_labels: newSubLabels })
+ }
+ />
+ )}
+ {config?.semantic_search?.enabled &&
+ filters.includes("source") &&
+ !filter?.search_type?.includes("similarity") && (
+
+ onUpdateFilter({ ...filter, search_type: newSearchSource })
+ }
+ />
+ )}
+ */