administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-12-06 21:44:13 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

improve display of in-progress events in explore tracking details

Browse Source
This commit is contained in:
Josh Hawkins 2025-11-17 18:20:47 -06:00
parent 01d52a8bf6
commit 0dbf648b3d
1 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/components/overlay/detail/TrackingDetails.tsx
View File

@ -177,21 +177,22 @@ export function TrackingDetails({
}) })
: ""; : "";
const formattedEnd = config const formattedEnd =
? formatUnixTimestampToDateTime(event.end_time ?? 0, { config && event.end_time != null
timezone: config.ui.timezone, ? formatUnixTimestampToDateTime(event.end_time, {
date_format: timezone: config.ui.timezone,
config.ui.time_format == "24hour" date_format:
? t("time.formattedTimestamp.24hour", { config.ui.time_format == "24hour"
ns: "common", ? t("time.formattedTimestamp.24hour", {
}) ns: "common",
: t("time.formattedTimestamp.12hour", { })
ns: "common", : t("time.formattedTimestamp.12hour", {
}), ns: "common",
time_style: "medium", }),
date_style: "medium", time_style: "medium",
}) date_style: "medium",
: ""; })
: "";
useEffect(() => { useEffect(() => {
if (!eventSequence || eventSequence.length === 0) return; if (!eventSequence || eventSequence.length === 0) return;
@ -525,9 +526,16 @@ export function TrackingDetails({
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="capitalize">{label}</span> <span className="capitalize">{label}</span>
<span className="md:text-md text-xs text-secondary-foreground"> <div className="md:text-md flex items-center text-xs text-secondary-foreground">
{formattedStart ?? ""} - {formattedEnd ?? ""} {formattedStart ?? ""}
</span> {event.end_time != null ? (
<> - {formattedEnd}</>
) : (
<div className="inline-block">
<ActivityIndicator className="ml-3 size-4" />
</div>
)}
</div>
{event.data?.recognized_license_plate && ( {event.data?.recognized_license_plate && (
<> <>
<span className="text-secondary-foreground">·</span> <span className="text-secondary-foreground">·</span>