dev

web/src/components/Calender.jsx

@@ -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 });
     }
   };
 

web/src/components/DatePicker.jsx

@@ -8,58 +8,48 @@ export const DateFilterOptions = [
   },
   {
     label: 'Today',
-    value: [
+    value: {
-      {
       //Before
       before: new Date().setHours(24, 0, 0, 0) / 1000,
       //After
       after: new Date().setHours(0, 0, 0, 0) / 1000,
     },
-    ],
   },
   {
     label: 'Yesterday',
-    value: [
+    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: [
+    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: [
+    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: [
+    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 ${

web/src/components/Select.jsx

@@ -23,15 +23,35 @@ export default function Select({
 
   const [showMenu, setShowMenu] = useState(false);
   const [selected, setSelected] = useState();
+  const [datePickerValue, setDatePickerValue] = useState();
 
   useEffect(() => {
+    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 }) => propSelected.includes(value)),
+          options.findIndex(({ value }) => Object.values(propSelected).includes(value)),
           0
         )
       );
-  }, [options, propSelected]);
+    }
+  }, [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]}
+            value={datePickerValue}
-          ></DatePicker>
+          />
           {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>

web/src/routes/Events.jsx

@@ -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) => {
+      Object.keys(key).map((entries) => {
-        if (queryArray[paramName] !== 'all') {
+        if (key[entries] !== 'all') {
-          for (let query in queryArray) {
+          newParams.set(entries, key[entries]);
-            newParams.set(query, queryArray[query]);
-          }
         } 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}