vh/homepage
1
0
Fork 0
mirror of https://github.com/gethomepage/homepage.git synced 2025-12-07 09:35:54 -08:00
Code Issues Actions 3 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
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"
},
"frigate": {
"camera": "Camera",
"cameras": "Cameras",
"uptime": "Uptime",
"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 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 }) {
const { t } = useTranslation();
const { widget } = service;
@@ -53,7 +33,7 @@ export default function Component({ service }) {
<>
<Container service={service}>
<Block
label={data.num_cameras === 1 ? "frigate.camera" : "frigate.cameras"}
label="frigate.cameras"
value={t("common.number", {
value: data.num_cameras,
})}
@@ -68,15 +48,22 @@ export default function Component({ service }) {
</Container>
{widget.enableRecentEvents &&
eventsData?.map((event) => (
<Event
camera={event.camera}
label={event.label}
startTime={event.start_time}
score={event.score}
type={event.type}
thumbnail={event.thumbnail}
<div
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>
))}
</>
);