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,6 +92,9 @@ export default function TimelineItemCard({
             date_style: "medium",
           })}
         </div>
+        {timeline.source == "tracked_object" && (
+          <AlertDialog>
+            <AlertDialogTrigger asChild>
               <Button
                 className="absolute bottom-1 right-1 hidden xl:flex"
                 size="sm"
@@ -78,6 +105,39 @@ export default function TimelineItemCard({
                 </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>
   );