Display messages when no events exist (#12694)

* 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

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,6 +241,14 @@ 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">
{isValidating ? (
<ActivityIndicator className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" />
) : events?.length === 0 ? (
<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" />
No snapshots found
</div>
) : (
<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"> <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">
<Dialog <Dialog
open={upload != undefined} open={upload != undefined}
@ -250,8 +259,8 @@ export default function SubmitPlus() {
<DialogTitle>Submit To Frigate+</DialogTitle> <DialogTitle>Submit To Frigate+</DialogTitle>
<DialogDescription> <DialogDescription>
Objects in locations you want to avoid are not false Objects in locations you want to avoid are not false
positives. Submitting them as false positives will confuse the positives. Submitting them as false positives will confuse
model. the model.
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<img <img
@ -328,8 +337,8 @@ export default function SubmitPlus() {
); );
})} })}
{!isValidating && !isDone && <div ref={lastEventRef} />} {!isValidating && !isDone && <div ref={lastEventRef} />}
{isValidating && <ActivityIndicator />}
</div> </div>
)}
</div> </div>
</div> </div>
); );

View File

@ -708,8 +708,13 @@ 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">
No events found for this time period.
</div>
) : (
mainCameraReviewItems.map((review) => {
if (review.severity === "significant_motion") {
return; return;
} }
@ -726,7 +731,8 @@ function Timeline({
}} }}
/> />
); );
})} })
)}
</div> </div>
</div> </div>
)} )}