Add tooltip and change default value for is_submitted (#14910)

This commit is contained in:
Josh Hawkins 2024-11-10 19:25:16 -06:00 committed by GitHub
parent 0829517b72
commit 64b3397f8e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -27,6 +27,12 @@ import { DualThumbSlider } from "@/components/ui/slider";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
type SearchFilterDialogProps = { type SearchFilterDialogProps = {
config?: FrigateConfig; config?: FrigateConfig;
@ -541,9 +547,7 @@ export function SnapshotClipFilterContent({
hasClip !== undefined, hasClip !== undefined,
); );
const [isFrigatePlusFilterActive, setIsFrigatePlusFilterActive] = useState( const [isFrigatePlusFilterActive, setIsFrigatePlusFilterActive] = useState(
submittedToFrigatePlus !== undefined && submittedToFrigatePlus !== undefined,
isSnapshotFilterActive &&
hasSnapshot === true,
); );
useEffect(() => { useEffect(() => {
@ -555,12 +559,11 @@ export function SnapshotClipFilterContent({
}, [hasClip]); }, [hasClip]);
useEffect(() => { useEffect(() => {
setIsFrigatePlusFilterActive( setIsFrigatePlusFilterActive(submittedToFrigatePlus !== undefined);
submittedToFrigatePlus !== undefined && }, [submittedToFrigatePlus]);
isSnapshotFilterActive &&
hasSnapshot === true, const isFrigatePlusFilterDisabled =
); !isSnapshotFilterActive || hasSnapshot !== true;
}, [submittedToFrigatePlus, isSnapshotFilterActive, hasSnapshot]);
return ( return (
<div className="overflow-x-hidden"> <div className="overflow-x-hidden">
@ -623,20 +626,42 @@ export function SnapshotClipFilterContent({
{config?.plus?.enabled && ( {config?.plus?.enabled && (
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
<Checkbox <TooltipProvider>
id="plus-filter" <Tooltip>
className="size-5 text-white accent-white data-[state=checked]:bg-selected data-[state=checked]:text-white" <TooltipTrigger asChild>
checked={isFrigatePlusFilterActive} <div className="inline-flex">
disabled={!isSnapshotFilterActive || hasSnapshot !== true} <Checkbox
onCheckedChange={(checked) => { id="plus-filter"
setIsFrigatePlusFilterActive(checked as boolean); className="size-5 text-white accent-white data-[state=checked]:bg-selected data-[state=checked]:text-white"
if (checked) { checked={isFrigatePlusFilterActive}
setSnapshotClip(hasSnapshot, hasClip, true); disabled={isFrigatePlusFilterDisabled}
} else { onCheckedChange={(checked) => {
setSnapshotClip(hasSnapshot, hasClip, undefined); setIsFrigatePlusFilterActive(checked as boolean);
} if (checked) {
}} setSnapshotClip(hasSnapshot, hasClip, false);
/> } else {
setSnapshotClip(hasSnapshot, hasClip, undefined);
}
}}
/>
</div>
</TooltipTrigger>
{isFrigatePlusFilterDisabled && (
<TooltipContent
className="max-w-60"
side="left"
sideOffset={5}
>
You must first filter on tracked objects that have a
snapshot.
<br />
<br />
Tracked objects without a snapshot cannot be submitted to
Frigate+.
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
<Label <Label
htmlFor="plus-filter" htmlFor="plus-filter"
className="cursor-pointer text-sm font-medium leading-none" className="cursor-pointer text-sm font-medium leading-none"