From 3a8d4a0cc5bead1e46980cf447bc5969200da604 Mon Sep 17 00:00:00 2001 From: Nicolas Mowen Date: Wed, 11 Sep 2024 07:02:25 -0600 Subject: [PATCH] Cleanup mobile filters --- .../filter/CalendarFilterButton.tsx | 2 +- .../components/filter/CamerasFilterButton.tsx | 22 ++++- .../components/filter/SearchFilterGroup.tsx | 93 +++++++++++++++---- web/src/components/icons/SubFilterIcon.tsx | 4 +- 4 files changed, 96 insertions(+), 25 deletions(-) diff --git a/web/src/components/filter/CalendarFilterButton.tsx b/web/src/components/filter/CalendarFilterButton.tsx index cfa69faf6..5c98aca79 100644 --- a/web/src/components/filter/CalendarFilterButton.tsx +++ b/web/src/components/filter/CalendarFilterButton.tsx @@ -110,7 +110,7 @@ export function CalendarRangeFilterButton({ className={`${range == undefined ? "text-secondary-foreground" : "text-selected-foreground"}`} />
{range == undefined ? defaultText : selectedDate}
diff --git a/web/src/components/filter/CamerasFilterButton.tsx b/web/src/components/filter/CamerasFilterButton.tsx index b1878bf12..dfe3fdaa1 100644 --- a/web/src/components/filter/CamerasFilterButton.tsx +++ b/web/src/components/filter/CamerasFilterButton.tsx @@ -1,6 +1,6 @@ import { Button } from "../ui/button"; import { CameraGroupConfig } from "@/types/frigateConfig"; -import { useState } from "react"; +import { useMemo, useState } from "react"; import { DropdownMenu, DropdownMenuContent, @@ -17,12 +17,14 @@ type CameraFilterButtonProps = { allCameras: string[]; groups: [string, CameraGroupConfig][]; selectedCameras: string[] | undefined; + hideText?: boolean; updateCameraFilter: (cameras: string[] | undefined) => void; }; export function CamerasFilterButton({ allCameras, groups, selectedCameras, + hideText = isMobile, updateCameraFilter, }: CameraFilterButtonProps) { const [open, setOpen] = useState(false); @@ -30,6 +32,18 @@ export function CamerasFilterButton({ selectedCameras, ); + const buttonText = useMemo(() => { + if (isMobile) { + return "Cameras"; + } + + if (!selectedCameras || selectedCameras.length == 0) { + return "All Cameras"; + } + + return `${selectedCameras.includes("birdseye") ? selectedCameras.length - 1 : selectedCameras.length} Camera${selectedCameras.length !== 1 ? "s" : ""}`; + }, [selectedCameras]); + const trigger = ( ); diff --git a/web/src/components/filter/SearchFilterGroup.tsx b/web/src/components/filter/SearchFilterGroup.tsx index 8aaf04c44..2b5f9793d 100644 --- a/web/src/components/filter/SearchFilterGroup.tsx +++ b/web/src/components/filter/SearchFilterGroup.tsx @@ -5,7 +5,7 @@ import { FrigateConfig } from "@/types/frigateConfig"; import { useCallback, useMemo, useState } from "react"; import { DropdownMenuSeparator } from "../ui/dropdown-menu"; import { getEndOfDayTimestamp } from "@/utils/dateUtil"; -import { isMobile } from "react-device-detect"; +import { isDesktop, isMobile } from "react-device-detect"; import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer"; import { Switch } from "../ui/switch"; import { Label } from "../ui/label"; @@ -155,12 +155,13 @@ export default function SearchFilterGroup({ ); return ( -
+
{filters.includes("cameras") && ( { onUpdateFilter({ ...filter, cameras: newCameras }); }} @@ -176,7 +177,7 @@ export default function SearchFilterGroup({ to: new Date(filter.before * 1000), } } - defaultText="All Dates" + defaultText={isMobile ? "Dates" : "All Dates"} updateSelectedRange={onUpdateSelectedRange} /> )} @@ -236,6 +237,22 @@ function GeneralFilterButton({ selectedLabels, ); + const buttonText = useMemo(() => { + if (isMobile) { + return "Labels"; + } + + if (!selectedLabels || selectedLabels.length == 0) { + return "All Labels"; + } + + if (selectedLabels.length == 1) { + return selectedLabels[0]; + } + + return `${selectedLabels.length} Labels`; + }, [selectedLabels]); + const trigger = ( ); @@ -406,6 +423,22 @@ function ZoneFilterButton({ selectedZones, ); + const buttonText = useMemo(() => { + if (isMobile) { + return "Zones"; + } + + if (!selectedZones || selectedZones.length == 0) { + return "All Zones"; + } + + if (selectedZones.length == 1) { + return selectedZones[0]; + } + + return `${selectedZones.length} Zones`; + }, [selectedZones]); + const trigger = ( ); @@ -586,6 +617,22 @@ function SubFilterButton({ string[] | undefined >(selectedSubLabels); + const buttonText = useMemo(() => { + if (isMobile) { + return "Sub Labels"; + } + + if (!selectedSubLabels || selectedSubLabels.length == 0) { + return "All Sub Labels"; + } + + if (selectedSubLabels.length == 1) { + return selectedSubLabels[0]; + } + + return `${selectedSubLabels.length} Sub Labels`; + }, [selectedSubLabels]); + const trigger = ( ); @@ -758,6 +803,22 @@ function SearchTypeButton({ SearchSource[] >(selectedSearchSources); + const buttonText = useMemo(() => { + if (isMobile) { + return "Sources"; + } + + if (!selectedSearchSources || selectedSearchSources.length == 0) { + return "All Search Sources"; + } + + if (selectedSearchSources.length == 1) { + return selectedSearchSources[0]; + } + + return `${selectedSearchSources.length} Search Sources`; + }, [selectedSearchSources]); + const trigger = ( ); diff --git a/web/src/components/icons/SubFilterIcon.tsx b/web/src/components/icons/SubFilterIcon.tsx index 4bcbafcac..0e47c8e3a 100644 --- a/web/src/components/icons/SubFilterIcon.tsx +++ b/web/src/components/icons/SubFilterIcon.tsx @@ -16,8 +16,8 @@ const SubFilterIcon = forwardRef( className={cn("relative flex items-center", className)} onClick={onClick} > - - + +
); },