From 55077a0bc9384a7d7d1e5903c767995f2a500f07 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 6 Mar 2024 05:24:21 -0700
Subject: [PATCH] Add page for submitting to frigate+ (#10273)

* Add screen for submitting to frigate+

* Fix sizing
---
 web/src/App.tsx                  |  2 +
 web/src/pages/SubmitPlus.tsx     | 95 ++++++++++++++++++++++++++++++++
 web/src/pages/site-navigation.ts |  7 +++
 3 files changed, 104 insertions(+)
 create mode 100644 web/src/pages/SubmitPlus.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index 0512d15d3..21e579fc2 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -15,6 +15,7 @@ import Events from "./pages/Events";
 import { isDesktop, isMobile } from "react-device-detect";
 import Statusbar from "./components/Statusbar";
 import Bottombar from "./components/navigation/Bottombar";
+import SubmitPlus from "./pages/SubmitPlus";
 
 function App() {
   return (
@@ -34,6 +35,7 @@ function App() {
                 <Route path="/events" element={<Events />} />
                 <Route path="/export" element={<Export />} />
                 <Route path="/storage" element={<Storage />} />
+                <Route path="/plus" element={<SubmitPlus />} />
                 <Route path="/system" element={<System />} />
                 <Route path="/settings" element={<Settings />} />
                 <Route path="/config" element={<ConfigEditor />} />
diff --git a/web/src/pages/SubmitPlus.tsx b/web/src/pages/SubmitPlus.tsx
new file mode 100644
index 000000000..67dfd5230
--- /dev/null
+++ b/web/src/pages/SubmitPlus.tsx
@@ -0,0 +1,95 @@
+import { baseUrl } from "@/api/baseUrl";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Event } from "@/types/event";
+import axios from "axios";
+import { useCallback, useState } from "react";
+import useSWR from "swr";
+
+export default function SubmitPlus() {
+  const { data: events, mutate: refresh } = useSWR<Event[]>([
+    "events",
+    { limit: 100, in_progress: 0, is_submitted: 0 },
+  ]);
+  const [upload, setUpload] = useState<Event>();
+
+  const onSubmitToPlus = useCallback(
+    async (falsePositive: boolean) => {
+      if (!upload) {
+        return;
+      }
+
+      const resp = (await falsePositive)
+        ? await axios.put(`events/${upload.id}/false_positive`)
+        : await axios.post(`events/${upload.id}/plus`, {
+            include_annotation: 1,
+          });
+
+      if (resp.status == 200) {
+        refresh();
+      }
+    },
+    [refresh, upload],
+  );
+
+  return (
+    <div className="size-full p-2 grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 overflow-auto">
+      <AlertDialog
+        open={upload != undefined}
+        onOpenChange={(open) => (!open ? setUpload(undefined) : null)}
+      >
+        <AlertDialogContent className="md:max-w-4xl">
+          <AlertDialogHeader>
+            <AlertDialogTitle>Submit To Frigate+</AlertDialogTitle>
+            <AlertDialogDescription>
+              Objects in locations you want to avoid are not false positives.
+              Submitting them as false positives will confuse the model.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <img
+            className="flex-grow-0"
+            src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
+            alt={`${upload?.label}`}
+          />
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-success"
+              onClick={() => onSubmitToPlus(false)}
+            >
+              This is a {upload?.label}
+            </AlertDialogAction>
+            <AlertDialogAction
+              className="bg-danger"
+              onClick={() => onSubmitToPlus(true)}
+            >
+              This is not a {upload?.label}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {events?.map((event) => {
+        return (
+          <div
+            className="size-full aspect-video rounded-2xl flex justify-center items-center bg-black cursor-pointer"
+            onClick={() => setUpload(event)}
+          >
+            <img
+              className="h-full object-contain rounded-2xl"
+              src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/web/src/pages/site-navigation.ts b/web/src/pages/site-navigation.ts
index e23e09a1a..2810c8371 100644
--- a/web/src/pages/site-navigation.ts
+++ b/web/src/pages/site-navigation.ts
@@ -1,3 +1,4 @@
+import Logo from "@/components/Logo";
 import { FaCompactDisc, FaFlag, FaVideo } from "react-icons/fa";
 import { LuConstruction } from "react-icons/lu";
 
@@ -20,6 +21,12 @@ export const navbarLinks = [
     title: "Export",
     url: "/export",
   },
+  {
+    id: 5,
+    icon: Logo,
+    title: "Frigate+",
+    url: "/plus",
+  },
   {
     id: 4,
     icon: LuConstruction,