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 { ArrowDropdown } from '../icons/ArrowDropdown';
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);
@ -23,18 +24,30 @@ export default function MultiSelect({ className, title, options, selection, onTo
</div>
{state.showMenu ? (
<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) => (
<label
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`}
key={item}>
<input
className="mx-4 m-0 align-middle"
type="checkbox"
checked={selection == "all" || selection.indexOf(item) > -1}
onChange={() => onToggle(item)} />
{item.replaceAll("_", " ")}
</label>
<div className='flex grow'>
<label
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`}
key={item}>
<input
className="mx-4 m-0 align-middle"
type="checkbox"
checked={selection == "all" || selection.split(',').indexOf(item) > -1}
onChange={() => onToggle(item)} />
{item.replaceAll("_", " ")}
</label>
<div className=' justify-right'>
<Button className="mx-2" onClick={() => onSolo(item)}>
👀
</Button>
</div>
</div>
))}
</Menu>
): null}

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

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