From 8b6b83bd6269c07046c49194c352ebf08df8ab02 Mon Sep 17 00:00:00 2001
From: tpjanssen <25168870+tpjanssen@users.noreply.github.com>
Date: Thu, 2 Nov 2023 00:19:46 +0100
Subject: [PATCH] Filtering on Frigate+ submits in frontend (#8344)

* Initial draft for filtering Frigate+ submits in frontend

* Hide filter when Frigate+ is not enabled

* Update http.py

* Revert "Update http.py"

This reverts commit fa292682d6fb157941418ee6027a0327b078b828.
---
 frigate/http.py             |  2 +-
 web/src/icons/Submitted.jsx | 19 +++++++++++++++++++
 web/src/routes/Events.jsx   | 33 ++++++++++++++++++++++++++++-----
 3 files changed, 48 insertions(+), 6 deletions(-)
 create mode 100644 web/src/icons/Submitted.jsx

diff --git a/frigate/http.py b/frigate/http.py
index 725a6f467..6bfe04432 100644
--- a/frigate/http.py
+++ b/frigate/http.py
@@ -946,7 +946,7 @@ def events():
     if is_submitted is not None:
         if is_submitted == 0:
             clauses.append((Event.plus_id.is_null()))
-        else:
+        elif is_submitted > 0:
             clauses.append((Event.plus_id != ""))
 
     if len(clauses) == 0:
diff --git a/web/src/icons/Submitted.jsx b/web/src/icons/Submitted.jsx
new file mode 100644
index 000000000..e7612a79f
--- /dev/null
+++ b/web/src/icons/Submitted.jsx
@@ -0,0 +1,19 @@
+import { h } from 'preact';
+import { memo } from 'preact/compat';
+
+export function Submitted({ className = 'h-6 w-6', inner_fill = 'none', outer_stroke = 'currentColor', onClick = () => {} }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      viewBox="0 0 32 32"
+      onClick={onClick}
+    >
+    <rect x="10" y="15" fill={inner_fill} width="12" height="2"/>
+    <rect x="15" y="10" fill={inner_fill} width="2" height="12"/>
+    <circle fill="none" stroke={outer_stroke} stroke-width="2" stroke-miterlimit="10" cx="16" cy="16" r="12"/>
+  </svg>
+  );
+}
+
+export default memo(Submitted);
diff --git a/web/src/routes/Events.jsx b/web/src/routes/Events.jsx
index 24183c631..dfa6b67bc 100644
--- a/web/src/routes/Events.jsx
+++ b/web/src/routes/Events.jsx
@@ -11,6 +11,7 @@ import axios from 'axios';
 import { useState, useRef, useCallback, useMemo } from 'preact/hooks';
 import VideoPlayer from '../components/VideoPlayer';
 import { StarRecording } from '../icons/StarRecording';
+import { Submitted } from '../icons/Submitted';
 import { Snapshot } from '../icons/Snapshot';
 import { UploadPlus } from '../icons/UploadPlus';
 import { Clip } from '../icons/Clip';
@@ -63,6 +64,7 @@ export default function Events({ path, ...props }) {
     time_range: '00:00,24:00',
     timezone,
     favorites: props.favorites ?? 0,
+    is_submitted: props.is_submitted ?? -1,
     event: props.event,
   });
   const [state, setState] = useState({
@@ -281,6 +283,16 @@ export default function Events({ path, ...props }) {
     [path, searchParams, setSearchParams]
   );
 
+  const onClickFilterSubmitted = useCallback(
+    () => {
+      if( ++searchParams.is_submitted > 1 ) {
+        searchParams.is_submitted = -1;
+      }
+      onFilter('is_submitted', searchParams.is_submitted);
+    },
+    [searchParams, onFilter]
+  );
+
   const isDone = (eventPages?.[eventPages.length - 1]?.length ?? 0) < API_LIMIT;
 
   // hooks for infinite scroll
@@ -394,11 +406,22 @@ export default function Events({ path, ...props }) {
           </Button>
         )}
 
-        <StarRecording
-          className="h-10 w-10 text-yellow-300 cursor-pointer ml-auto"
-          onClick={() => onFilter('favorites', searchParams.favorites ? 0 : 1)}
-          fill={searchParams.favorites == 1 ? 'currentColor' : 'none'}
-        />
+        <div className="ml-auto flex">
+          {config.plus.enabled && (
+            <Submitted
+              className="h-10 w-10 text-yellow-300 cursor-pointer ml-auto"
+              onClick={() => onClickFilterSubmitted()}
+              inner_fill={searchParams.is_submitted == 1 ? 'currentColor' : 'gray'}
+              outer_stroke={searchParams.is_submitted >= 0 ? 'currentColor' : 'gray'}
+            />
+          )}
+
+          <StarRecording
+            className="h-10 w-10 text-yellow-300 cursor-pointer ml-auto"
+            onClick={() => onFilter('favorites', searchParams.favorites ? 0 : 1)}
+            fill={searchParams.favorites == 1 ? 'currentColor' : 'none'}
+          />
+        </div>
 
         <div ref={datePicker} className="ml-right">
           <CalendarIcon