From a2b79542caea18d1ad3edd2590bd65dd65d7b261 Mon Sep 17 00:00:00 2001
From: Jamie Norton <jamie@norton.net.nz>
Date: Wed, 17 Jul 2024 22:09:18 +1200
Subject: [PATCH] Implement suggested changes for date/percent formatting

---
 public/locales/en/common.json     |  1 -
 src/widgets/frigate/component.jsx | 45 +++++++++++--------------------
 2 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index b21c9a357..28c548953 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -902,7 +902,6 @@
         "invalidConfiguration": "Invalid Configuration"
     },
     "frigate": {
-        "camera": "Camera",
         "cameras": "Cameras",
         "uptime": "Uptime",
         "version": "Version"
diff --git a/src/widgets/frigate/component.jsx b/src/widgets/frigate/component.jsx
index bd8f1dd2f..43b566e8e 100644
--- a/src/widgets/frigate/component.jsx
+++ b/src/widgets/frigate/component.jsx
@@ -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>
         ))}
     </>
   );