Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +01:00
Code Issues Projects Releases Wiki Activity

Add None option to zones & sub labels (#4886)

Browse Source 
* Add None option to zones

* Catch blank sub labels too
This commit is contained in:
Nicolas Mowen 2023-01-03 18:29:25 -07:00 committed by GitHub
parent d547680116
commit b6592c67d1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -107,19 +107,22 @@ export default function Events({ path, ...props }) {
const filterValues = useMemo( const filterValues = useMemo(
() => ({ () => ({
cameras: Object.keys(config?.cameras || {}), cameras: Object.keys(config?.cameras || {}),
zones: Object.values(config?.cameras || {}) zones: [
.reduce((memo, camera) => { ...Object.values(config?.cameras || {})
memo = memo.concat(Object.keys(camera?.zones || {})); .reduce((memo, camera) => {
return memo; memo = memo.concat(Object.keys(camera?.zones || {}));
}, []) return memo;
.filter((value, i, self) => self.indexOf(value) === i), }, [])
.filter((value, i, self) => self.indexOf(value) === i),
'None',
],
labels: Object.values(config?.cameras || {}) labels: Object.values(config?.cameras || {})
.reduce((memo, camera) => { .reduce((memo, camera) => {
memo = memo.concat(camera?.objects?.track || []); memo = memo.concat(camera?.objects?.track || []);
return memo; return memo;
}, config?.objects?.track || []) }, config?.objects?.track || [])
.filter((value, i, self) => self.indexOf(value) === i), .filter((value, i, self) => self.indexOf(value) === i),
sub_labels: Object.values(allSubLabels || []), sub_labels: (allSubLabels || []).length > 0 ? [...Object.values(allSubLabels), "None"] : [],
}), }),
[config, allSubLabels] [config, allSubLabels]
); );
@ -159,12 +162,12 @@ export default function Events({ path, ...props }) {
// don't remove all if only one option // don't remove all if only one option
if (currentItems.length > 1) { if (currentItems.length > 1) {
currentItems.splice(currentItems.indexOf(item), 1); currentItems.splice(currentItems.indexOf(item), 1);
items = currentItems.join(","); items = currentItems.join(',');
} else { } else {
items = ["all"]; items = ['all'];
} }
} else { } else {
let currentItems = searchParams[name].length > 0 ? searchParams[name].split(",") : []; let currentItems = searchParams[name].length > 0 ? searchParams[name].split(',') : [];
if (currentItems.includes(item)) { if (currentItems.includes(item)) {
// don't remove the last item in the filter list // don't remove the last item in the filter list
@ -172,12 +175,12 @@ export default function Events({ path, ...props }) {
currentItems.splice(currentItems.indexOf(item), 1); currentItems.splice(currentItems.indexOf(item), 1);
} }
items = currentItems.join(","); items = currentItems.join(',');
} else if ((currentItems.length + 1) == filterValues[name].length) { } else if (currentItems.length + 1 == filterValues[name].length) {
items = ["all"]; items = ['all'];
} else { } else {
currentItems.push(item); currentItems.push(item);
items = currentItems.join(","); items = currentItems.join(',');
} }
} }
@ -301,47 +304,46 @@ export default function Events({ path, ...props }) {
title="Cameras" title="Cameras"
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"])} onShowAll={() => onFilter('cameras', ['all'])}
onSelectSingle={(item) => onFilter("cameras", item)} onSelectSingle={(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"
title="Labels" title="Labels"
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"])} onShowAll={() => onFilter('labels', ['all'])}
onSelectSingle={(item) => onFilter("labels", item)} onSelectSingle={(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"
title="Zones" title="Zones"
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"])} onShowAll={() => onFilter('zones', ['all'])}
onSelectSingle={(item) => onFilter("zones", item)} onSelectSingle={(item) => onFilter('zones', item)}
/> />
{ {filterValues.sub_labels.length > 0 && (
filterValues.sub_labels.length > 0 && ( <MultiSelect
<MultiSelect className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
className="basis-1/5 cursor-pointer rounded dark:bg-slate-800" title="Sub Labels"
title="Sub Labels" 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'])}
onShowAll={() => onFilter("sub_labels", ["all"])} onSelectSingle={(item) => onFilter('sub_labels', item)}
onSelectSingle={(item) => onFilter("sub_labels", item)} />
/> )}
)}
<StarRecording <StarRecording
className="h-10 w-10 text-yellow-300 cursor-pointer ml-auto" className="h-10 w-10 text-yellow-300 cursor-pointer ml-auto"
onClick={() => onFilter("favorites", searchParams.favorites ? 0 : 1)} onClick={() => onFilter('favorites', searchParams.favorites ? 0 : 1)}
fill={searchParams.favorites == 1 ? 'currentColor' : 'none'} fill={searchParams.favorites == 1 ? 'currentColor' : 'none'}
/> />
<div ref={datePicker} className="ml-right"> <div ref={datePicker} className="ml-right">
<CalendarIcon <CalendarIcon
className="h-8 w-8 cursor-pointer" className="h-8 w-8 cursor-pointer"