Add sub label selector to events UI

This commit is contained in:
Nick Mowen 2022-05-05 22:12:12 -06:00
parent ba5fc7583a
commit 191de73126

View File

@ -44,6 +44,7 @@ export default function Events({ path, ...props }) {
camera: props.camera ?? 'all', camera: props.camera ?? 'all',
label: props.label ?? 'all', label: props.label ?? 'all',
zone: props.zone ?? 'all', zone: props.zone ?? 'all',
sub_label: props.sub_label ?? 'all',
}); });
const [state, setState] = useState({ const [state, setState] = useState({
showDownloadMenu: false, showDownloadMenu: false,
@ -82,6 +83,8 @@ export default function Events({ path, ...props }) {
const { data: config } = useSWR('config'); const { data: config } = useSWR('config');
const { data: allSubLabels } = useSWR('sub_labels')
const filterValues = useMemo( const filterValues = useMemo(
() => ({ () => ({
cameras: Object.keys(config?.cameras || {}), cameras: Object.keys(config?.cameras || {}),
@ -97,9 +100,9 @@ export default function Events({ path, ...props }) {
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(), sub_labels: Object.values(allSubLabels || []),
}), }),
[config] [config, allSubLabels]
); );
const onSave = async (e, eventId, save) => { const onSave = async (e, eventId, save) => {
@ -267,6 +270,18 @@ export default function Events({ path, ...props }) {
</option> </option>
))} ))}
</select> </select>
<select
className="basis-1/4 cursor-pointer rounded dark:bg-slate-800"
value={searchParams.sub_label}
onChange={(e) => onFilter('sub_label', e.target.value)}
>
<option value="all">all sub labels</option>
{filterValues.sub_labels.map((item) => (
<option key={item} value={item}>
{item}
</option>
))}
</select>
<div ref={datePicker} className="ml-auto"> <div ref={datePicker} className="ml-auto">
<CalendarIcon <CalendarIcon
className="h-8 w-8 cursor-pointer" className="h-8 w-8 cursor-pointer"