Refactor: update RomM widget (#3886)

---------

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

docs/widgets/services/romm.md

@@ -3,7 +3,8 @@ title: Romm
 description: Romm Widget Configuration
 ---
 
-Allowed fields: `["platforms", "totalRoms"]`.
+Allowed fields: `["platforms", "totalRoms", "saves", "states", "screenshots", "totalfilesize"]`.
+If more than (4) fields are provided, only the first (4) will be used.
 
 ```yaml
 widget:
@@ -11,4 +12,5 @@ widget:
   url: http://romm.host.or.ip
   username: username # optional
   password: password # optional
+  fields: ["platforms", "totalRoms", "saves", "states"] # optional - default fields shown
 ```

public/locales/en/common.json

@@ -831,7 +831,11 @@
     },
     "romm": {
         "platforms": "Platforms",
-        "totalRoms": "Total ROMs"
+        "totalRoms": "Games",
+        "saves": "Saves",
+        "states": "States",
+        "screenshots": "Screenshots",
+        "totalfilesize": "Total Size"
     },
     "netdata": {
       "warnings": "Warnings",

src/widgets/romm/component.jsx

@@ -4,31 +4,46 @@ import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
+const ROMM_DEFAULT_FIELDS = ["platforms", "totalRoms", "saves", "states"];
+const MAX_ALLOWED_FIELDS = 4;
+
 export default function Component({ service }) {
   const { widget } = service;
   const { t } = useTranslation();
-
   const { data: response, error: responseError } = useWidgetAPI(widget, "statistics");
 
   if (responseError) {
+    return <Container service={service} error={responseError} />;
+  }
+
+  if (!widget.fields?.length > 0) {
+    widget.fields = ROMM_DEFAULT_FIELDS;
+  } else if (widget.fields.length > MAX_ALLOWED_FIELDS) {
+    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
+  }
+
+  if (!response) {
     return (
       <Container service={service}>
-        <Block label="Error" value={responseError.message} />
+        <Block label="romm.platforms" />
+        <Block label="romm.totalRoms" />
+        <Block label="romm.saves" />
+        <Block label="romm.states" />
+        <Block label="romm.screenshots" />
+        <Block label="romm.totalfilesize" />
       </Container>
     );
   }
 
-  if (responseError) {
-    return <Container service={service} error={responseError} />;
-  }
-
   if (response) {
-    const platforms = response.filter((x) => x.rom_count !== 0).length;
-    const totalRoms = response.reduce((total, stat) => total + stat.rom_count, 0);
     return (
       <Container service={service}>
-        <Block label="romm.platforms" value={t("common.number", { value: platforms })} />
+        <Block label="romm.platforms" value={t("common.number", { value: response.PLATFORMS })} />
-        <Block label="romm.totalRoms" value={t("common.number", { value: totalRoms })} />
+        <Block label="romm.totalRoms" value={t("common.number", { value: response.ROMS })} />
+        <Block label="romm.saves" value={t("common.number", { value: response.SAVES })} />
+        <Block label="romm.states" value={t("common.number", { value: response.STATES })} />
+        <Block label="romm.screenshots" value={t("common.number", { value: response.SCREENSHOTS })} />
+        <Block label="romm.totalfilesize" value={t("common.bytes", { value: response.FILESIZE })} />
       </Container>
     );
   }

src/widgets/romm/widget.js

@@ -6,7 +6,7 @@ const widget = {
 
   mappings: {
     statistics: {
-      endpoint: "platforms",
+      endpoint: "stats",
     },
   },
 };