From b6592c67d1a4b92dcc600ef31113018c20b7dddb Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 3 Jan 2023 18:29:25 -0700
Subject: [PATCH] Add None option to zones & sub labels (#4886)

* Add None option to zones

* Catch blank sub labels too
---
 web/src/routes/Events.jsx | 78 ++++++++++++++++++++-------------------
 1 file changed, 40 insertions(+), 38 deletions(-)

diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index c37a1b2f5..dc123696d 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -107,19 +107,22 @@ export default function Events({ path, ...props }) {
   const filterValues = useMemo(
     () => ({
       cameras: Object.keys(config?.cameras || {}),
-      zones: Object.values(config?.cameras || {})
-        .reduce((memo, camera) => {
-          memo = memo.concat(Object.keys(camera?.zones || {}));
-          return memo;
-        }, [])
-        .filter((value, i, self) => self.indexOf(value) === i),
+      zones: [
+        ...Object.values(config?.cameras || {})
+          .reduce((memo, camera) => {
+            memo = memo.concat(Object.keys(camera?.zones || {}));
+            return memo;
+          }, [])
+          .filter((value, i, self) => self.indexOf(value) === i),
+        'None',
+      ],
       labels: Object.values(config?.cameras || {})
         .reduce((memo, camera) => {
           memo = memo.concat(camera?.objects?.track || []);
           return memo;
         }, config?.objects?.track || [])
         .filter((value, i, self) => self.indexOf(value) === i),
-      sub_labels: Object.values(allSubLabels || []),
+      sub_labels: (allSubLabels || []).length > 0 ? [...Object.values(allSubLabels), "None"] : [],
     }),
     [config, allSubLabels]
   );
@@ -159,12 +162,12 @@ export default function Events({ path, ...props }) {
       // don't remove all if only one option
       if (currentItems.length > 1) {
         currentItems.splice(currentItems.indexOf(item), 1);
-        items = currentItems.join(",");
+        items = currentItems.join(',');
       } else {
-        items = ["all"];
+        items = ['all'];
       }
     } else {
-      let currentItems = searchParams[name].length > 0 ? searchParams[name].split(",") : [];
+      let currentItems = searchParams[name].length > 0 ? searchParams[name].split(',') : [];
 
       if (currentItems.includes(item)) {
         // 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);
         }
 
-        items = currentItems.join(",");
-      } else if ((currentItems.length + 1) == filterValues[name].length) {
-        items = ["all"];
+        items = currentItems.join(',');
+      } else if (currentItems.length + 1 == filterValues[name].length) {
+        items = ['all'];
       } else {
         currentItems.push(item);
-        items = currentItems.join(",");
+        items = currentItems.join(',');
       }
     }
 
@@ -301,47 +304,46 @@ export default function Events({ path, ...props }) {
           title="Cameras"
           options={filterValues.cameras}
           selection={searchParams.cameras}
-          onToggle={(item) => onToggleNamedFilter("cameras", item)}
-          onShowAll={() => onFilter("cameras", ["all"])}
-          onSelectSingle={(item) => onFilter("cameras", item)}
+          onToggle={(item) => onToggleNamedFilter('cameras', item)}
+          onShowAll={() => onFilter('cameras', ['all'])}
+          onSelectSingle={(item) => onFilter('cameras', item)}
         />
         <MultiSelect
           className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
           title="Labels"
           options={filterValues.labels}
           selection={searchParams.labels}
-          onToggle={(item) => onToggleNamedFilter("labels", item) }
-          onShowAll={() => onFilter("labels", ["all"])}
-          onSelectSingle={(item) => onFilter("labels", item)}
+          onToggle={(item) => onToggleNamedFilter('labels', item)}
+          onShowAll={() => onFilter('labels', ['all'])}
+          onSelectSingle={(item) => onFilter('labels', item)}
         />
         <MultiSelect
           className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
           title="Zones"
           options={filterValues.zones}
           selection={searchParams.zones}
-          onToggle={(item) => onToggleNamedFilter("zones", item) }
-          onShowAll={() => onFilter("zones", ["all"])}
-          onSelectSingle={(item) => onFilter("zones", item)}
+          onToggle={(item) => onToggleNamedFilter('zones', item)}
+          onShowAll={() => onFilter('zones', ['all'])}
+          onSelectSingle={(item) => onFilter('zones', item)}
         />
-        {
-          filterValues.sub_labels.length > 0 && (
-            <MultiSelect
-              className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
-              title="Sub Labels"
-              options={filterValues.sub_labels}
-              selection={searchParams.sub_labels}
-              onToggle={(item) => onToggleNamedFilter("sub_labels", item) }
-              onShowAll={() => onFilter("sub_labels", ["all"])}
-              onSelectSingle={(item) => onFilter("sub_labels", item)}
-            />
-          )}
-          
+        {filterValues.sub_labels.length > 0 && (
+          <MultiSelect
+            className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
+            title="Sub Labels"
+            options={filterValues.sub_labels}
+            selection={searchParams.sub_labels}
+            onToggle={(item) => onToggleNamedFilter('sub_labels', item)}
+            onShowAll={() => onFilter('sub_labels', ['all'])}
+            onSelectSingle={(item) => onFilter('sub_labels', item)}
+          />
+        )}
+
         <StarRecording
           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'}
         />
-          
+
         <div ref={datePicker} className="ml-right">
           <CalendarIcon
             className="h-8 w-8 cursor-pointer"