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

Center and show all filters when semantic search is not enabled

Browse Source
This commit is contained in:
Nicolas Mowen 2024-09-09 15:33:14 -06:00
parent ce39ae26b8
commit 8ee10f6656
2 changed files with 47 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/src/components/filter/SearchFilterGroup.tsx
View File

@ -37,7 +37,9 @@ export default function SearchFilterGroup({
filterList, filterList,
onUpdateFilter, onUpdateFilter,
}: SearchFilterGroupProps) { }: SearchFilterGroupProps) {
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false,
});
const allLabels = useMemo<string[]>(() => { const allLabels = useMemo<string[]>(() => {
if (filterList?.labels) { if (filterList?.labels) {
@ -147,6 +149,11 @@ export default function SearchFilterGroup({
[filter, onUpdateFilter], [filter, onUpdateFilter],
); );
const showAllFilters = useMemo(
() => isDesktop || !config?.semantic_search?.enabled,
[config],
);
return ( return (
<div className="flex justify-center gap-2"> <div className="flex justify-center gap-2">
{filters.includes("cameras") && ( {filters.includes("cameras") && (
@ -159,7 +166,7 @@ export default function SearchFilterGroup({
}} }}
/> />
)} )}
{isDesktop && filters.includes("date") && ( {showAllFilters && filters.includes("date") && (
<CalendarRangeFilterButton <CalendarRangeFilterButton
range={ range={
filter?.after == undefined || filter?.before == undefined filter?.after == undefined || filter?.before == undefined
@ -173,7 +180,7 @@ export default function SearchFilterGroup({
updateSelectedRange={onUpdateSelectedRange} updateSelectedRange={onUpdateSelectedRange}
/> />
)} )}
{isDesktop && filters.includes("general") && ( {showAllFilters && filters.includes("general") && (
<GeneralFilterButton <GeneralFilterButton
allLabels={filterValues.labels} allLabels={filterValues.labels}
selectedLabels={filter?.labels} selectedLabels={filter?.labels}
@ -193,7 +200,7 @@ export default function SearchFilterGroup({
} }
/> />
)} )}
{isMobile && mobileSettingsFeatures.length > 0 && ( {!showAllFilters && mobileSettingsFeatures.length > 0 && (
<MobileReviewSettingsDrawer <MobileReviewSettingsDrawer
features={mobileSettingsFeatures} features={mobileSettingsFeatures}
filter={filter} filter={filter}

57
web/src/views/search/SearchView.tsx
View File

@ -11,6 +11,7 @@ import {
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { FrigateConfig } from "@/types/frigateConfig";
import { Preview } from "@/types/preview"; import { Preview } from "@/types/preview";
import { SearchFilter, SearchResult } from "@/types/search"; import { SearchFilter, SearchResult } from "@/types/search";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useMemo, useState } from "react";
@ -24,6 +25,7 @@ import {
LuXCircle, LuXCircle,
} from "react-icons/lu"; } from "react-icons/lu";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import useSWR from "swr";
type SearchViewProps = { type SearchViewProps = {
search: string; search: string;
@ -51,6 +53,10 @@ export default function SearchView({
onUpdateFilter, onUpdateFilter,
onOpenSearch, onOpenSearch,
}: SearchViewProps) { }: SearchViewProps) {
const { data: config } = useSWR<FrigateConfig>("config", {
revalidateOnFocus: false,
});
// remove duplicate event ids // remove duplicate event ids
const uniqueResults = useMemo(() => { const uniqueResults = useMemo(() => {
@ -112,28 +118,37 @@ export default function SearchView({
} }
/> />
<div className="relative mb-2 flex h-11 items-center justify-between pl-2 pr-2 md:pl-3"> <div
<div className={cn(
className={cn( "relative mb-2 flex h-11 items-center pl-2 pr-2 md:pl-3",
"relative w-full", config?.semantic_search?.enabled
hasExistingSearch ? "mr-3 md:w-1/3" : "md:ml-[25%] md:w-1/2", ? "justify-between"
)} : "justify-center",
> )}
<Input >
className="text-md w-full bg-muted pr-10" {config?.semantic_search?.enabled && (
placeholder={ <div
isMobileOnly ? "Search" : "Search for a detected object..." className={cn(
} "relative w-full",
value={similaritySearch ? "" : search} hasExistingSearch ? "mr-3 md:w-1/3" : "md:ml-[25%] md:w-1/2",
onChange={(e) => setSearch(e.target.value)} )}
/> >
{search && ( <Input
<LuXCircle className="text-md w-full bg-muted pr-10"
className="absolute right-2 top-1/2 h-5 w-5 -translate-y-1/2 cursor-pointer text-muted-foreground hover:text-primary" placeholder={
onClick={() => setSearch("")} isMobileOnly ? "Search" : "Search for a detected object..."
}
value={similaritySearch ? "" : search}
onChange={(e) => setSearch(e.target.value)}
/> />
)} {search && (
</div> <LuXCircle
className="absolute right-2 top-1/2 h-5 w-5 -translate-y-1/2 cursor-pointer text-muted-foreground hover:text-primary"
onClick={() => setSearch("")}
/>
)}
</div>
)}
{hasExistingSearch && ( {hasExistingSearch && (
<SearchFilterGroup <SearchFilterGroup