OpenSource/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement suggested changes for date/percent formatting

Browse Source
This commit is contained in:
Jamie Norton 2024-07-17 22:09:18 +12:00
parent 6a9137c770
commit a2b79542ca
2 changed files with 16 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/locales/en/common.json
View File

@ -902,7 +902,6 @@
"invalidConfiguration": "Invalid Configuration" "invalidConfiguration": "Invalid Configuration"
}, },
"frigate": { "frigate": {
"camera": "Camera",
"cameras": "Cameras", "cameras": "Cameras",
"uptime": "Uptime", "uptime": "Uptime",
"version": "Version" "version": "Version"

45
src/widgets/frigate/component.jsx
View File

@ -4,26 +4,6 @@ import Container from "components/services/widget/container";
import Block from "components/services/widget/block"; import Block from "components/services/widget/block";
import useWidgetAPI from "utils/proxy/use-widget-api"; import useWidgetAPI from "utils/proxy/use-widget-api";
function Event({ camera, label, startTime, score }) {
const { i18n } = useTranslation();
const dateFormatter = new Intl.DateTimeFormat(i18n.language, { timeStyle: "short", dateStyle: "medium" });
const percentFormatter = new Intl.NumberFormat(i18n.language, { style: "percent" });
return (
<div className="text-theme-700 dark:text-theme-200 _relative h-5 rounded-md bg-theme-200/50 dark:bg-theme-900/20 m-1 px-1 flex">
<div className="text-xs z-10 self-center ml-2 relative h-4 grow mr-2">
<div className="absolute w-full h-4 whitespace-nowrap text-ellipsis overflow-hidden text-left">
{camera} ({label} {percentFormatter.format(score)})
</div>
</div>
<div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10 text-ellipsis overflow-hidden whitespace-nowrap">
{dateFormatter.format(new Date(startTime))}
</div>
</div>
);
}
export default function Component({ service }) { export default function Component({ service }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { widget } = service; const { widget } = service;
@ -53,7 +33,7 @@ export default function Component({ service }) {
<> <>
<Container service={service}> <Container service={service}>
<Block <Block
label={data.num_cameras === 1 ? "frigate.camera" : "frigate.cameras"} label="frigate.cameras"
value={t("common.number", { value={t("common.number", {
value: data.num_cameras, value: data.num_cameras,
})} })}
@ -68,15 +48,22 @@ export default function Component({ service }) {
</Container> </Container>
{widget.enableRecentEvents && {widget.enableRecentEvents &&
eventsData?.map((event) => ( eventsData?.map((event) => (
<Event <div
camera={event.camera}
label={event.label}
startTime={event.start_time}
score={event.score}
type={event.type}
thumbnail={event.thumbnail}
key={event.id} key={event.id}
/> className="text-theme-700 dark:text-theme-200 _relative h-5 rounded-md bg-theme-200/50 dark:bg-theme-900/20 m-1 px-1 flex"
>
<div className="text-xs z-10 self-center ml-2 relative h-4 grow mr-2">
<div className="absolute w-full h-4 whitespace-nowrap text-ellipsis overflow-hidden text-left">
{event.camera} ({event.label} {t("common.percent", { value: event.score * 100 })})
</div>
</div>
<div className="self-center text-xs flex justify-end mr-1.5 pl-1 z-10 text-ellipsis overflow-hidden whitespace-nowrap">
{t("common.date", {
value: event.start_time,
formatParams: { value: { timeStyle: "short", dateStyle: "medium" } },
})}
</div>
</div>
))} ))}
</> </>
); );