Feature: ESPHome widget (#2986)

Co-Authored-By: RoboMagus <68224306+RoboMagus@users.noreply.github.com>

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

docs/widgets/services/esphome.md

@@ -0,0 +1,16 @@
+---
+title: ESPHome
+description: ESPHome Widget Configuration
+---
+
+Learn more about [ESPHome](https://esphome.io/).
+
+Show the number of ESPHome devices based on their state.
+
+Allowed fields: `["total", "online", "offline", "unknown"]`.
+
+```yaml
+widget:
+  type: esphome
+  url: http://esphome.host.or.ip:port
+```

mkdocs.yml

@@ -49,6 +49,7 @@ nav:
       - widgets/services/diskstation.md
       - widgets/services/downloadstation.md
       - widgets/services/emby.md
+      - widgets/services/esphome.md
       - widgets/services/evcc.md
       - widgets/services/fileflows.md
       - widgets/services/flood.md

public/locales/en/common.json

@@ -107,6 +107,12 @@
         "episodes": "Episodes",
         "songs": "Songs"
     },
+    "esphome": {
+        "offline": "Offline",
+        "online": "Online",
+        "total": "Total",
+        "unknown": "Unknown"
+    },
     "evcc": {
         "pv_power": "Production",
         "battery_soc": "Battery",

src/widgets/components.js

@@ -23,6 +23,7 @@ const components = {
   docker: dynamic(() => import("./docker/component")),
   kubernetes: dynamic(() => import("./kubernetes/component")),
   emby: dynamic(() => import("./emby/component")),
+  esphome: dynamic(() => import("./esphome/component")),
   evcc: dynamic(() => import("./evcc/component")),
   fileflows: dynamic(() => import("./fileflows/component")),
   flood: dynamic(() => import("./flood/component")),

src/widgets/esphome/component.jsx

@@ -0,0 +1,41 @@
+import { useTranslation } from "next-i18next";
+
+import Block from "components/services/widget/block";
+import Container from "components/services/widget/container";
+import useWidgetAPI from "utils/proxy/use-widget-api";
+
+export default function Component({ service }) {
+  const { t } = useTranslation();
+
+  const { widget } = service;
+  const { data: resultData, error: resultError } = useWidgetAPI(widget);
+
+  if (resultError) {
+    return <Container service={service} error={resultError} />;
+  }
+
+  if (!resultData) {
+    return (
+      <Container service={service}>
+        <Block label="esphome.online" />
+        <Block label="esphome.offline" />
+        <Block label="esphome.unknown" />
+        <Block label="esphome.total" />
+      </Container>
+    );
+  }
+
+  const total = Object.keys(resultData).length;
+  const online = Object.entries(resultData).filter(([, v]) => v === true).length;
+  const offline = Object.entries(resultData).filter(([, v]) => v === false).length;
+  const unknown = Object.entries(resultData).filter(([, v]) => v === null).length;
+
+  return (
+    <Container service={service}>
+      <Block label="esphome.online" value={t("common.number", { value: online })} />
+      <Block label="esphome.offline" value={t("common.number", { value: offline })} />
+      <Block label="esphome.unknown" value={t("common.number", { value: unknown })} />
+      <Block label="esphome.total" value={t("common.number", { value: total })} />
+    </Container>
+  );
+}

src/widgets/esphome/widget.js

@@ -0,0 +1,8 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+
+const widget = {
+  api: "{url}/ping",
+  proxyHandler: genericProxyHandler,
+};
+
+export default widget;

src/widgets/widgets.js

@@ -17,6 +17,7 @@ import deluge from "./deluge/widget";
 import diskstation from "./diskstation/widget";
 import downloadstation from "./downloadstation/widget";
 import emby from "./emby/widget";
+import esphome from "./esphome/widget";
 import evcc from "./evcc/widget";
 import fileflows from "./fileflows/widget";
 import flood from "./flood/widget";
@@ -127,6 +128,7 @@ const widgets = {
   diskstation,
   downloadstation,
   emby,
+  esphome,
   evcc,
   fileflows,
   flood,