Implement basic Frigate+ submitting from timeline

web/src/components/card/TimelineItemCard.tsx

@@ -7,6 +7,19 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import VideoPlayer from "../player/VideoPlayer";
 import { Card } from "../ui/card";
 import { useApiHost } from "@/api";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../ui/alert-dialog";
+import { useCallback } from "react";
+import axios from "axios";
 
 type TimelineItemCardProps = {
   timeline: Timeline;
@@ -21,12 +34,23 @@ export default function TimelineItemCard({
   const { data: config } = useSWR<FrigateConfig>("config");
   const apiHost = useApiHost();
 
+  const onSubmitToPlus = useCallback(
+    async (falsePositive: boolean) => {
+      falsePositive
+        ? await axios.put(`events/${timeline.source_id}/false_positive`)
+        : await axios.post(`events/${timeline.source_id}/plus`, {
+            include_annotation: 1,
+          });
+    },
+    [timeline]
+  );
+
   return (
     <Card
       className="relative m-2 flex w-full h-20 xl:h-24 3xl:h-28 4xl:h-36 cursor-pointer"
       onClick={onSelect}
     >
-      <div className="w-32 xl:w-40 3xl:w-[180px] 4xl:w-60 p-2">
+      <div className="w-32 xl:w-40 3xl:w-44 4xl:w-60 p-2">
         <VideoPlayer
           options={{
             preload: "auto",
@@ -68,16 +92,52 @@ export default function TimelineItemCard({
             date_style: "medium",
           })}
         </div>
-        <Button
-          className="absolute bottom-1 right-1 hidden xl:flex"
-          size="sm"
-          variant="secondary"
-        >
-          <div className="w-8 h-8">
-            <Logo />
-          </div>
-          +
-        </Button>
+        {timeline.source == "tracked_object" && (
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
+              <Button
+                className="absolute bottom-1 right-1 hidden xl:flex"
+                size="sm"
+                variant="secondary"
+              >
+                <div className="w-8 h-8">
+                  <Logo />
+                </div>
+                +
+              </Button>
+            </AlertDialogTrigger>
+            <AlertDialogContent>
+              <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={`${apiHost}api/events/${timeline.source_id}/snapshot.jpg`}
+                alt={`${timeline.data.label}`}
+              />
+              <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction
+                  className="bg-success"
+                  onClick={() => onSubmitToPlus(false)}
+                >
+                  This is a {timeline.data.label}
+                </AlertDialogAction>
+                <AlertDialogAction
+                  className="bg-danger"
+                  onClick={() => onSubmitToPlus(true)}
+                >
+                  This is not a {timeline.data.label}
+                </AlertDialogAction>
+              </AlertDialogFooter>
+            </AlertDialogContent>
+          </AlertDialog>
+        )}
       </div>
     </Card>
   );