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 }) + } + /> + )} + */