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

Show All and Solo selection buttons for MultiSelect.

Browse Source 
Similar to previous behavior of viewing events for single camera with 1 click, or All.

* Fix visual bug with MultiSelect when selecting similar named options.
   eg. options like frontdoor, frontside, backdoor, etc
This commit is contained in:
spacebares 2022-12-16 18:46:06 -08:00
parent 9b99ba81e5
commit 0f7a78876b
2 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/components/MultiSelect.jsx
View File

@ -3,8 +3,9 @@ import { useRef, useState } from 'preact/hooks';
import Menu from './Menu'; import Menu from './Menu';
import { ArrowDropdown } from '../icons/ArrowDropdown'; import { ArrowDropdown } from '../icons/ArrowDropdown';
import Heading from './Heading'; import Heading from './Heading';
import Button from './Button';
export default function MultiSelect({ className, title, options, selection, onToggle }) { export default function MultiSelect({ className, title, options, selection, onToggle, onShowAll, onSolo }) {
const popupRef = useRef(null); const popupRef = useRef(null);
@ -23,18 +24,30 @@ export default function MultiSelect({ className, title, options, selection, onTo
</div> </div>
{state.showMenu ? ( {state.showMenu ? (
<Menu relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}> <Menu relativeTo={popupRef} onDismiss={() => setState({ showMenu: false })}>
<Heading className="p-4 justify-center" size="md">{title}</Heading> <div className="flex flex-wrap gap-2 items-center">
<Heading className="p-4 justify-center" size="md">{title}</Heading>
<Button className="mx-2" onClick={() => onShowAll() }>
Show All
</Button>
</div>
{options.map((item) => ( {options.map((item) => (
<label <div className='flex grow'>
className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`} <label
key={item}> className={`flex flex-shrink space-x-2 p-1 my-1 min-w-[176px] hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-white cursor-pointer capitalize text-sm`}
<input key={item}>
className="mx-4 m-0 align-middle" <input
type="checkbox" className="mx-4 m-0 align-middle"
checked={selection == "all" || selection.indexOf(item) > -1} type="checkbox"
onChange={() => onToggle(item)} /> checked={selection == "all" || selection.split(',').indexOf(item) > -1}
{item.replaceAll("_", " ")} onChange={() => onToggle(item)} />
</label> {item.replaceAll("_", " ")}
</label>
<div className=' justify-right'>
<Button className="mx-2" onClick={() => onSolo(item)}>
👀
</Button>
</div>
</div>
))} ))}
</Menu> </Menu>
): null} ): null}

8
web/src/routes/Events.jsx
View File

@ -301,6 +301,8 @@ export default function Events({ path, ...props }) {
options={filterValues.cameras} options={filterValues.cameras}
selection={searchParams.cameras} selection={searchParams.cameras}
onToggle={(item) => onToggleNamedFilter("cameras", item)} onToggle={(item) => onToggleNamedFilter("cameras", item)}
onShowAll={() => onFilter("cameras", ["all"])}
onSolo={(item) => onFilter("cameras", item)}
/> />
<MultiSelect <MultiSelect
className="basis-1/5 cursor-pointer rounded dark:bg-slate-800" className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@ -308,6 +310,8 @@ export default function Events({ path, ...props }) {
options={filterValues.labels} options={filterValues.labels}
selection={searchParams.labels} selection={searchParams.labels}
onToggle={(item) => onToggleNamedFilter("labels", item) } onToggle={(item) => onToggleNamedFilter("labels", item) }
onShowAll={() => onFilter("labels", ["all"])}
onSolo={(item) => onFilter("labels", item)}
/> />
<MultiSelect <MultiSelect
className="basis-1/5 cursor-pointer rounded dark:bg-slate-800" className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@ -315,6 +319,8 @@ export default function Events({ path, ...props }) {
options={filterValues.zones} options={filterValues.zones}
selection={searchParams.zones} selection={searchParams.zones}
onToggle={(item) => onToggleNamedFilter("zones", item) } onToggle={(item) => onToggleNamedFilter("zones", item) }
onShowAll={() => onFilter("zones", ["all"])}
onSolo={(item) => onFilter("zones", item)}
/> />
{ {
filterValues.sub_labels.length > 0 && ( filterValues.sub_labels.length > 0 && (
@ -324,6 +330,8 @@ export default function Events({ path, ...props }) {
options={filterValues.sub_labels} options={filterValues.sub_labels}
selection={searchParams.sub_labels} selection={searchParams.sub_labels}
onToggle={(item) => onToggleNamedFilter("sub_labels", item) } onToggle={(item) => onToggleNamedFilter("sub_labels", item) }
onShowAll={() => onFilter("sub_labels", ["all"])}
onSolo={(item) => onFilter("sub_labels", item)}
/> />
)} )}
<div ref={datePicker} className="ml-auto"> <div ref={datePicker} className="ml-auto">