working wled logic

public/locales/en/common.json

@@ -770,7 +770,7 @@
         "ping": "Ping"
     },
     "urbackup": {
-        "ok" : "Ok",
+        "ok": "Ok",
         "errored": "Errors",
         "noRecent": "Out of Date",
         "totalUsed": "Used Storage"
@@ -825,5 +825,9 @@
     "netdata": {
         "warnings": "Warnings",
         "criticals": "Criticals"
+    },
+    "wled": {
+        "deviceName": "Device Name",
+        "deviceState": "Device State"
     }
 }

src/widgets/components.js

@@ -110,6 +110,7 @@ const components = {
   urbackup: dynamic(() => import("./urbackup/component")),
   watchtower: dynamic(() => import("./watchtower/component")),
   whatsupdocker: dynamic(() => import("./whatsupdocker/component")),
+  wled: dynamic(() => import("./wled/component")),
   xteve: dynamic(() => import("./xteve/component")),
 };
 

src/widgets/widgets.js

@@ -104,6 +104,7 @@ import whatsupdocker from "./whatsupdocker/widget";
 import xteve from "./xteve/widget";
 import urbackup from "./urbackup/widget";
 import romm from "./romm/widget";
+import wled from "./wled/widget";
 
 const widgets = {
   adguard,
@@ -214,6 +215,7 @@ const widgets = {
   watchtower,
   whatsupdocker,
   xteve,
+  wled
 };
 
 export default widgets;

src/widgets/wled/component.jsx

@@ -0,0 +1,36 @@
+import Container from "components/services/widget/container";
+import Block from "components/services/widget/block";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { widget } = service;
+
+  const { data: wledData, error: wledError } = useWidgetAPI(widget, "api");
+
+  if (wledError) {
+    return <Container service={service} error={wledError} />;
+  }
+
+  if (!wledData) {
+    return (
+      <Container service={service}>
+        <Block label="wled.deviceName" />
+        <Block label="wled.deviceState " />
+      </Container>
+    );
+  }
+  let state
+  if (wledData.state.on === 1){
+    state = "On";
+  } else {
+    state = "Off";
+  }
+
+  return (
+
+    <Container service={service}>
+      <Block label="wled.deviceName" value= {wledData.info.name} />
+      <Block label="wled.deviceState" value={state} />
+    </Container>
+  );
+}

src/widgets/wled/proxy.js

@@ -0,0 +1,36 @@
+import { formatApiCall } from "utils/proxy/api-helpers";
+import { httpProxy } from "utils/proxy/http";
+import createLogger from "utils/logger";
+import widgets from "widgets/widgets";
+import getServiceWidget from "utils/config/service-helpers";
+
+const logger = createLogger("wledProxyHandler");
+
+export default async function wledProxyHandler(req, res) {
+  const { group, service, endpoint } = req.query;
+
+  if (!group || !service) {
+    return res.status(400).json({ error: "Invalid proxy service type" });
+  }
+
+  const widget = await getServiceWidget(group, service);
+  const api = widgets?.[widget.type]?.api;
+  if (!api) {
+    return res.status(403).json({ error: "Service does not support API calls" });
+  }
+
+  const url = formatApiCall(api, { endpoint, ...widget });
+  const method = "GET";
+
+  const [status, contentType, data] = await httpProxy(url, {
+    method,
+  });
+
+  if (status !== 200) {
+    logger.debug("Error %d calling wled endpoint %s", status, url);
+    return res.status(status).json({ error: { message: `HTTP Error ${status}`, url, data } });
+  }
+
+  if (contentType) res.setHeader("Content-Type", contentType);
+  return res.status(status).send(data);
+}

src/widgets/wled/widget.js

@@ -0,0 +1,14 @@
+import wledProxyHandler from "./proxy";
+
+const widget = {
+  api: "{url}/{endpoint}",
+  proxyHandler: wledProxyHandler,
+
+  mappings: {
+    api: {
+      endpoint: "json/",
+    },
+  },
+};
+
+export default widget;