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

dev

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-07-17 11:12:17 +02:00
parent 8495bc7a2d
commit ddfd2b5f6c
4 changed files with 92 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/Calender.jsx
View File

@ -173,7 +173,7 @@ const Calender = ({ onChange, calenderRef }) => {
// setDateToInput(day.timestamp);
if (onChange) {
onChange([{ before: range.selectedRange.before, after: range.selectedRange.after }]);
onChange({ before: range.selectedRange.before, after: range.selectedRange.after });
}
};

71
web/src/components/DatePicker.jsx
View File

@ -8,58 +8,48 @@ export const DateFilterOptions = [
},
{
label: 'Today',
value: [
{
//Before
before: new Date().setHours(24, 0, 0, 0) / 1000,
//After
after: new Date().setHours(0, 0, 0, 0) / 1000,
},
],
value: {
//Before
before: new Date().setHours(24, 0, 0, 0) / 1000,
//After
after: new Date().setHours(0, 0, 0, 0) / 1000,
},
},
{
label: 'Yesterday',
value: [
{
//Before
before: new Date(new Date().setDate(new Date().getDate() - 1)).setHours(24, 0, 0, 0) / 1000,
//After
after: new Date(new Date().setDate(new Date().getDate() - 1)).setHours(0, 0, 0, 0) / 1000,
},
],
value: {
//Before
before: new Date(new Date().setDate(new Date().getDate() - 1)).setHours(24, 0, 0, 0) / 1000,
//After
after: new Date(new Date().setDate(new Date().getDate() - 1)).setHours(0, 0, 0, 0) / 1000,
},
},
{
label: 'Last 7 Days',
value: [
{
//Before
before: new Date().setHours(24, 0, 0, 0) / 1000,
//After
after: new Date(new Date().setDate(new Date().getDate() - 7)).setHours(0, 0, 0, 0) / 1000,
},
],
value: {
//Before
before: new Date().setHours(24, 0, 0, 0) / 1000,
//After
after: new Date(new Date().setDate(new Date().getDate() - 7)).setHours(0, 0, 0, 0) / 1000,
},
},
{
label: 'This Month',
value: [
{
//Before
before: new Date().setHours(24, 0, 0, 0) / 1000,
//After
after: new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime() / 1000,
},
],
value: {
//Before
before: new Date().setHours(24, 0, 0, 0) / 1000,
//After
after: new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime() / 1000,
},
},
{
label: 'Last Month',
value: [
{
//Before
before: new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime() / 1000,
//After
after: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1).getTime() / 1000,
},
],
value: {
//Before
before: new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime() / 1000,
//After
after: new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1).getTime() / 1000,
},
},
{
label: 'Custom Range',
@ -176,6 +166,7 @@ export default function DatePicker({
onInput={handleChange}
tabIndex="0"
onClick={onClick}
value={propValue}
/>
<div
className={`absolute top-3 transition transform text-gray-600 dark:text-gray-400 ${

40
web/src/components/Select.jsx
View File

@ -23,15 +23,35 @@ export default function Select({
const [showMenu, setShowMenu] = useState(false);
const [selected, setSelected] = useState();
const [datePickerValue, setDatePickerValue] = useState();
useEffect(() => {
setSelected(
Math.max(
options.findIndex(({ value }) => propSelected.includes(value)),
0
)
);
}, [options, propSelected]);
if (type === 'datepicker' && 'after' && 'before' in propSelected) {
for (let i = 0; i < inputOptions.length; i++) {
if (
inputOptions[i].value &&
Object.entries(inputOptions[i].value).sort().toString() === Object.entries(propSelected).sort().toString()
) {
setDatePickerValue(inputOptions[i]?.label);
break;
} else {
setDatePickerValue(
`${new Date(propSelected.after * 1000).toLocaleDateString()} -> ${new Date(
propSelected.before * 1000 - 1
).toLocaleDateString()}`
);
}
}
}
if (type === 'dropdown') {
setSelected(
Math.max(
options.findIndex(({ value }) => Object.values(propSelected).includes(value)),
0
)
);
}
}, [inputOptions, propSelected, setSelected]);
const [focused, setFocused] = useState(null);
const [showDatePicker, setShowDatePicker] = useState(false);
@ -141,8 +161,8 @@ export default function Select({
onclick={handleClick}
onkeydown={handleKeydown}
trailingIcon={showMenu ? ArrowDropup : ArrowDropdown}
value={options[selected]}
></DatePicker>
value={datePickerValue}
/>
{showDatePicker && (
<Menu className="rounded-t-none" onDismiss={handleDismiss} relativeTo={ref}>
<Calender onChange={handleDateRange} calenderRef={calenderRef} />
@ -178,7 +198,7 @@ export default function Select({
label={label}
focus={focused === i}
onSelect={handleSelect}
value={[{ [paramName]: value }]}
value={{ [paramName]: value }}
/>
))}
</Menu>

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

@ -261,6 +261,30 @@ function Filters({ onChange, searchParams }) {
label="Camera"
searchParams={searchParams}
/>
<Filter
type="dropdown"
onChange={onChange}
options={zones}
paramName={['zone']}
label="Zone"
searchParams={searchParams}
/>
<Filter
type="dropdown"
onChange={onChange}
options={labels}
paramName={['label']}
label="Label"
searchParams={searchParams}
/>
<Filter
type="datepicker"
onChange={onChange}
options={DateFilterOptions}
paramName={['before', 'after']}
label="DatePicker"
searchParams={searchParams}
/>
</div>
</Fragment>
);
@ -270,11 +294,9 @@ function Filter({ onChange, searchParams, paramName, options, type, ...rest }) {
const handleSelect = useCallback(
(key) => {
const newParams = new URLSearchParams(searchParams.toString());
key.map((queryArray) => {
if (queryArray[paramName] !== 'all') {
for (let query in queryArray) {
newParams.set(query, queryArray[query]);
}
Object.keys(key).map((entries) => {
if (key[entries] !== 'all') {
newParams.set(entries, key[entries]);
} else {
paramName.map((p) => newParams.delete(p));
}
@ -286,13 +308,14 @@ function Filter({ onChange, searchParams, paramName, options, type, ...rest }) {
);
const selectOptions = useMemo(() => ['all', ...options], [options]);
const selected = useMemo(() => paramName.map((p) => searchParams.get(p) || 'all'));
let obj = {};
paramName.map((p) => Object.assign(obj, { [p]: searchParams.get(p) }), [searchParams]);
return (
<Select
onChange={handleSelect}
options={selectOptions}
selected={selected}
selected={obj}
paramName={paramName}
type={type}
{...rest}