administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 13:45:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Use switch for camera to be consistent

Browse Source
This commit is contained in:
Nicolas Mowen 2024-04-16 07:31:21 -06:00
parent 5c5834c93b
commit 88659fada9
2 changed files with 67 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/components/filter/FilterSwitch.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Switch } from "../ui/switch";
import { Label } from "../ui/label";
type FilterSwitchProps = {
label: string;
isChecked: boolean;
onCheckedChange: (checked: boolean) => void;
};
export default function FilterSwitch({
label,
isChecked,
onCheckedChange,
}: FilterSwitchProps) {
return (
<div className="flex justify-between items-center gap-1">
<Label
className="w-full mx-2 text-primary capitalize cursor-pointer"
htmlFor={label}
>
{label}
</Label>
<Switch
id={label}
checked={isChecked}
onCheckedChange={onCheckedChange}
/>
</div>
);
}

74
web/src/components/filter/ReviewFilterGroup.tsx
View File

@ -30,6 +30,7 @@ import MobileReviewSettingsDrawer, {
DrawerFeatures, DrawerFeatures,
} from "../overlay/MobileReviewSettingsDrawer"; } from "../overlay/MobileReviewSettingsDrawer";
import useOptimisticState from "@/hooks/use-optimistic-state"; import useOptimisticState from "@/hooks/use-optimistic-state";
import FilterSwitch from "./FilterSwitch";
const REVIEW_FILTERS = [ const REVIEW_FILTERS = [
"cameras", "cameras",
@ -248,8 +249,8 @@ export function CamerasFilterButton({
<DropdownMenuSeparator /> <DropdownMenuSeparator />
</> </>
)} )}
<div className="h-auto overflow-y-auto overflow-x-hidden"> <div className="h-auto pt-2 overflow-y-auto overflow-x-hidden">
<FilterCheckBox <FilterSwitch
isChecked={currentCameras == undefined} isChecked={currentCameras == undefined}
label="All Cameras" label="All Cameras"
onCheckedChange={(isChecked) => { onCheckedChange={(isChecked) => {
@ -260,51 +261,52 @@ export function CamerasFilterButton({
/> />
{groups.length > 0 && ( {groups.length > 0 && (
<> <>
<DropdownMenuSeparator /> <DropdownMenuSeparator className="mt-2" />
{groups.map(([name, conf]) => { {groups.map(([name, conf]) => {
return ( return (
<FilterCheckBox <div
key={name} key={name}
label={name} className="w-full px-2 py-1.5 text-sm text-primary capitalize cursor-pointer rounded-lg hover:bg-muted"
isChecked={false} onClick={() => setCurrentCameras([...conf.cameras])}
onCheckedChange={() => { >
setCurrentCameras([...conf.cameras]); {name}
}} </div>
/>
); );
})} })}
</> </>
)} )}
<DropdownMenuSeparator /> <DropdownMenuSeparator className="my-2" />
{allCameras.map((item) => ( <div className="flex flex-col gap-2.5">
<FilterCheckBox {allCameras.map((item) => (
key={item} <FilterSwitch
isChecked={currentCameras?.includes(item) ?? false} key={item}
label={item.replaceAll("_", " ")} isChecked={currentCameras?.includes(item) ?? false}
onCheckedChange={(isChecked) => { label={item.replaceAll("_", " ")}
if (isChecked) { onCheckedChange={(isChecked) => {
const updatedCameras = currentCameras if (isChecked) {
? [...currentCameras] const updatedCameras = currentCameras
: []; ? [...currentCameras]
: [];
updatedCameras.push(item); updatedCameras.push(item);
setCurrentCameras(updatedCameras);
} else {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
// can not deselect the last item
if (updatedCameras.length > 1) {
updatedCameras.splice(updatedCameras.indexOf(item), 1);
setCurrentCameras(updatedCameras); setCurrentCameras(updatedCameras);
} else {
const updatedCameras = currentCameras
? [...currentCameras]
: [];
// can not deselect the last item
if (updatedCameras.length > 1) {
updatedCameras.splice(updatedCameras.indexOf(item), 1);
setCurrentCameras(updatedCameras);
}
} }
} }}
}} />
/> ))}
))} </div>
</div> </div>
<DropdownMenuSeparator /> <DropdownMenuSeparator className="my-2" />
<div className="p-2 flex justify-evenly items-center"> <div className="p-2 flex justify-evenly items-center">
<Button <Button
variant="select" variant="select"