administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-13 06:35:24 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Add message for when no events are found on plus view

Browse Source
This commit is contained in:
Josh Hawkins 2024-07-31 14:38:29 -05:00
parent 28fee26bc0
commit b368ee0ed0
1 changed files with 96 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -43,6 +43,7 @@ import {
FaSortAmountDown, FaSortAmountDown,
FaSortAmountUp, FaSortAmountUp,
} from "react-icons/fa"; } from "react-icons/fa";
import { LuFolderX } from "react-icons/lu";
import { PiSlidersHorizontalFill } from "react-icons/pi"; import { PiSlidersHorizontalFill } from "react-icons/pi";
import useSWR from "swr"; import useSWR from "swr";
import useSWRInfinite from "swr/infinite"; import useSWRInfinite from "swr/infinite";
@ -240,96 +241,103 @@ export default function SubmitPlus() {
<PlusSortSelector selectedSort={sort} setSelectedSort={setSort} /> <PlusSortSelector selectedSort={sort} setSelectedSort={setSort} />
</div> </div>
<div className="no-scrollbar flex size-full flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4"> <div className="no-scrollbar flex size-full flex-1 flex-wrap content-start gap-2 overflow-y-auto md:gap-4">
<div className="grid w-full gap-2 p-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5"> {events?.length === 0 ? (
<Dialog <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
open={upload != undefined} <LuFolderX className="size-16" />
onOpenChange={(open) => (!open ? setUpload(undefined) : null)} No events found
> </div>
<DialogContent className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl"> ) : (
<DialogHeader> <div className="grid w-full gap-2 p-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
<DialogTitle>Submit To Frigate+</DialogTitle> <Dialog
<DialogDescription> open={upload != undefined}
Objects in locations you want to avoid are not false onOpenChange={(open) => (!open ? setUpload(undefined) : null)}
positives. Submitting them as false positives will confuse the >
model. <DialogContent className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl">
</DialogDescription> <DialogHeader>
</DialogHeader> <DialogTitle>Submit To Frigate+</DialogTitle>
<img <DialogDescription>
className={`w-full ${grow} bg-black`} Objects in locations you want to avoid are not false
src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`} positives. Submitting them as false positives will confuse
alt={`${upload?.label}`} the model.
/> </DialogDescription>
<DialogFooter> </DialogHeader>
<Button onClick={() => setUpload(undefined)}>Cancel</Button>
<Button
className="bg-success"
onClick={() => onSubmitToPlus(false)}
>
This is a {upload?.label}
</Button>
<Button
className="text-white"
variant="destructive"
onClick={() => onSubmitToPlus(true)}
>
This is not a {upload?.label}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{events?.map((event) => {
if (event.data.type != "object" || event.plus_id) {
return;
}
return (
<div
key={event.id}
className="relative flex aspect-video w-full cursor-pointer items-center justify-center rounded-lg bg-black md:rounded-2xl"
onClick={() => setUpload(event)}
>
<div className="absolute left-0 top-2 z-40">
<Tooltip>
<div className="flex">
<TooltipTrigger asChild>
<div className="mx-3 pb-1 text-sm text-white">
<Chip
className={`z-0 flex items-center justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500`}
>
{[event.label].map((object) => {
return getIconForLabel(
object,
"size-3 text-white",
);
})}
<div className="text-xs">
{Math.round(event.data.score * 100)}%
</div>
</Chip>
</div>
</TooltipTrigger>
</div>
<TooltipContent className="capitalize">
{[event.label]
.map((text) => capitalizeFirstLetter(text))
.sort()
.join(", ")
.replaceAll("-verified", "")}
</TooltipContent>
</Tooltip>
</div>
<img <img
className="aspect-video h-full rounded-lg object-contain md:rounded-2xl" className={`w-full ${grow} bg-black`}
src={`${baseUrl}api/events/${event.id}/snapshot.jpg`} src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`}
loading="lazy" alt={`${upload?.label}`}
/> />
</div> <DialogFooter>
); <Button onClick={() => setUpload(undefined)}>Cancel</Button>
})} <Button
{!isValidating && !isDone && <div ref={lastEventRef} />} className="bg-success"
{isValidating && <ActivityIndicator />} onClick={() => onSubmitToPlus(false)}
</div> >
This is a {upload?.label}
</Button>
<Button
className="text-white"
variant="destructive"
onClick={() => onSubmitToPlus(true)}
>
This is not a {upload?.label}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{events?.map((event) => {
if (event.data.type != "object" || event.plus_id) {
return;
}
return (
<div
key={event.id}
className="relative flex aspect-video w-full cursor-pointer items-center justify-center rounded-lg bg-black md:rounded-2xl"
onClick={() => setUpload(event)}
>
<div className="absolute left-0 top-2 z-40">
<Tooltip>
<div className="flex">
<TooltipTrigger asChild>
<div className="mx-3 pb-1 text-sm text-white">
<Chip
className={`z-0 flex items-center justify-between space-x-1 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500`}
>
{[event.label].map((object) => {
return getIconForLabel(
object,
"size-3 text-white",
);
})}
<div className="text-xs">
{Math.round(event.data.score * 100)}%
</div>
</Chip>
</div>
</TooltipTrigger>
</div>
<TooltipContent className="capitalize">
{[event.label]
.map((text) => capitalizeFirstLetter(text))
.sort()
.join(", ")
.replaceAll("-verified", "")}
</TooltipContent>
</Tooltip>
</div>
<img
className="aspect-video h-full rounded-lg object-contain md:rounded-2xl"
src={`${baseUrl}api/events/${event.id}/snapshot.jpg`}
loading="lazy"
/>
</div>
);
})}
{!isValidating && !isDone && <div ref={lastEventRef} />}
</div>
)}
{isValidating && <ActivityIndicator />}
</div> </div>
</div> </div>
); );