Spartan/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-26 02:40:44 -06:00
Code Issues Packages Projects Releases Wiki Activity

Display messages when no events exist (#12694)

Browse Source 
* Display message in desktop events list when no events exist

* Add message for when no events are found on plus view

* validating check

* activity indicator check

* clarify error message
This commit is contained in:
Josh Hawkins 2024-07-31 15:08:07 -05:00 committed by GitHub
parent 599dd7eecb
commit 8e7b83d2f1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 121 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
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,104 @@ 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"> {isValidating ? (
<Dialog <ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
open={upload != undefined} ) : events?.length === 0 ? (
onOpenChange={(open) => (!open ? setUpload(undefined) : null)} <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">
> <LuFolderX className="size-16" />
<DialogContent className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl"> No snapshots found
<DialogHeader> </div>
<DialogTitle>Submit To Frigate+</DialogTitle> ) : (
<DialogDescription> <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">
Objects in locations you want to avoid are not false <Dialog
positives. Submitting them as false positives will confuse the open={upload != undefined}
model. onOpenChange={(open) => (!open ? setUpload(undefined) : null)}
</DialogDescription> >
</DialogHeader> <DialogContent className="md:max-w-2xl lg:max-w-3xl xl:max-w-4xl">
<img <DialogHeader>
className={`w-full ${grow} bg-black`} <DialogTitle>Submit To Frigate+</DialogTitle>
src={`${baseUrl}api/events/${upload?.id}/snapshot.jpg`} <DialogDescription>
alt={`${upload?.label}`} Objects in locations you want to avoid are not false
/> positives. Submitting them as false positives will confuse
<DialogFooter> the model.
<Button onClick={() => setUpload(undefined)}>Cancel</Button> </DialogDescription>
<Button </DialogHeader>
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>
)}
</div> </div>
</div> </div>
); );

42
web/src/views/events/RecordingView.tsx
View File

@ -708,25 +708,31 @@ function Timeline({
isMobile && "sm:grid-cols-2", isMobile && "sm:grid-cols-2",
)} )}
> >
{mainCameraReviewItems.map((review) => { {mainCameraReviewItems.length === 0 ? (
if (review.severity == "significant_motion") { <div className="mt-5 text-center text-primary">
return; No events found for this time period.
} </div>
) : (
mainCameraReviewItems.map((review) => {
if (review.severity === "significant_motion") {
return;
}
return ( return (
<ReviewCard <ReviewCard
key={review.id} key={review.id}
event={review} event={review}
currentTime={currentTime} currentTime={currentTime}
onClick={() => { onClick={() => {
manuallySetCurrentTime( manuallySetCurrentTime(
review.start_time - REVIEW_PADDING, review.start_time - REVIEW_PADDING,
true, true,
); );
}} }}
/> />
); );
})} })
)}
</div> </div>
</div> </div>
)} )}