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,
FaSortAmountUp,
} from "react-icons/fa";
import { LuFolderX } from "react-icons/lu";
import { PiSlidersHorizontalFill } from "react-icons/pi";
import useSWR from "swr";
import useSWRInfinite from "swr/infinite";
@ -240,6 +241,14 @@ export default function SubmitPlus() {
<PlusSortSelector selectedSort={sort} setSelectedSort={setSort} />
</div>
<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">
<Dialog
open={upload != undefined}
@ -250,8 +259,8 @@ export default function SubmitPlus() {
<DialogTitle>Submit To Frigate+</DialogTitle>
<DialogDescription>
Objects in locations you want to avoid are not false
positives. Submitting them as false positives will confuse the
model.
positives. Submitting them as false positives will confuse
the model.
</DialogDescription>
</DialogHeader>
<img
@ -328,8 +337,8 @@ export default function SubmitPlus() {
);
})}
{!isValidating && !isDone && <div ref={lastEventRef} />}
{isValidating && <ActivityIndicator />}
</div>
)}
</div>
</div>
);

View File

@ -708,8 +708,13 @@ function Timeline({
isMobile && "sm:grid-cols-2",
)}
>
{mainCameraReviewItems.map((review) => {
if (review.severity == "significant_motion") {
{mainCameraReviewItems.length === 0 ? (
<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;
}
@ -726,7 +731,8 @@ function Timeline({
}}
/>
);
})}
})
)}
</div>
</div>
)}