administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 05:05:26 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fixup dialog and marking item as uploaded

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-07 06:36:18 -07:00
parent 083337064b
commit 7c0a7aa0c3
1 changed files with 46 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
web/src/pages/SubmitPlus.tsx
View File

@ -1,14 +1,13 @@
import { baseUrl } from "@/api/baseUrl"; import { baseUrl } from "@/api/baseUrl";
import { Button } from "@/components/ui/button";
import { import {
AlertDialog, Dialog,
AlertDialogAction, DialogContent,
AlertDialogCancel, DialogDescription,
AlertDialogContent, DialogFooter,
AlertDialogDescription, DialogHeader,
AlertDialogFooter, DialogTitle,
AlertDialogHeader, } from "@/components/ui/dialog";
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Event } from "@/types/event"; import { Event } from "@/types/event";
import axios from "axios"; import axios from "axios";
import { useCallback, useState } from "react"; import { useCallback, useState } from "react";
@ -27,64 +26,75 @@ export default function SubmitPlus() {
return; return;
} }
const resp = (await falsePositive) falsePositive
? await axios.put(`events/${upload.id}/false_positive`) ? axios.put(`events/${upload.id}/false_positive`)
: await axios.post(`events/${upload.id}/plus`, { : axios.post(`events/${upload.id}/plus`, {
include_annotation: 1, include_annotation: 1,
}); });
if (resp.status == 200) { refresh(
refresh(); (data: Event[] | undefined) => {
if (!data) {
return data;
} }
const index = data.findIndex((e) => e.id == upload.id);
if (index == -1) {
return data;
}
return [...data.slice(0, index), ...data.slice(index + 1)];
},
{ revalidate: false, populateCache: true },
);
setUpload(undefined);
}, },
[refresh, upload], [refresh, upload],
); );
return ( 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"> <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 <Dialog
open={upload != undefined} open={upload != undefined}
onOpenChange={(open) => (!open ? setUpload(undefined) : null)} onOpenChange={(open) => (!open ? setUpload(undefined) : null)}
> >
<AlertDialogContent className="md:max-w-4xl"> <DialogContent className="md:max-w-4xl">
<AlertDialogHeader> <DialogHeader>
<AlertDialogTitle>Submit To Frigate+</AlertDialogTitle> <DialogTitle>Submit To Frigate+</DialogTitle>
<AlertDialogDescription> <DialogDescription>
Objects in locations you want to avoid are not false positives. Objects in locations you want to avoid are not false positives.
Submitting them as false positives will confuse the model. Submitting them as false positives will confuse the model.
</AlertDialogDescription> </DialogDescription>
</AlertDialogHeader> </DialogHeader>
<img <img
className="flex-grow-0" className="flex-grow-0"
src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`} src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
alt={`${upload?.label}`} alt={`${upload?.label}`}
/> />
<AlertDialogFooter> <DialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel> <Button>Cancel</Button>
<AlertDialogAction <Button
className="bg-success" className="bg-success"
onClick={() => onSubmitToPlus(false)} onClick={() => onSubmitToPlus(false)}
> >
This is a {upload?.label} This is a {upload?.label}
</AlertDialogAction> </Button>
<AlertDialogAction <Button variant="destructive" onClick={() => onSubmitToPlus(true)}>
className="bg-danger"
onClick={() => onSubmitToPlus(true)}
>
This is not a {upload?.label} This is not a {upload?.label}
</AlertDialogAction> </Button>
</AlertDialogFooter> </DialogFooter>
</AlertDialogContent> </DialogContent>
</AlertDialog> </Dialog>
{events?.map((event) => { {events?.map((event) => {
return ( return (
<div <div
className="size-full aspect-video rounded-2xl flex justify-center items-center bg-black cursor-pointer" className="size-full rounded-2xl flex justify-center items-center bg-black cursor-pointer"
onClick={() => setUpload(event)} onClick={() => setUpload(event)}
> >
<img <img
className="h-full object-contain rounded-2xl" className="aspect-video h-full object-contain rounded-2xl"
src={`${baseUrl}api/events/${event.id}/snapshot.jpg`} src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}
/> />
</div> </div>