add teslamate widget

public/locales/en/common.json

@@ -959,5 +959,10 @@
       "tasks7d": "Tasks Due This Week",
       "tasksOverdue": "Overdue Tasks",
       "tasksInProgress": "Tasks In Progress"
+    },
+    "teslamate": {
+        "car_name": "Car name",
+        "odometer": "Odometer",
+        "battery_level": "Battery level"
     }
 }

src/widgets/components.js

@@ -115,6 +115,7 @@ const components = {
   tandoor: dynamic(() => import("./tandoor/component")),
   tautulli: dynamic(() => import("./tautulli/component")),
   technitium: dynamic(() => import("./technitium/component")),
+  teslamate: dynamic(() => import("./teslamate/component")),
   tdarr: dynamic(() => import("./tdarr/component")),
   traefik: dynamic(() => import("./traefik/component")),
   transmission: dynamic(() => import("./transmission/component")),

src/widgets/teslamate/component.jsx

@@ -0,0 +1,32 @@
+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: statusData, error: statusError } = useWidgetAPI(widget, "status");
+
+  if (statusError) {
+    return <Container service={service} error={statusError ?? 'error'} />;
+  }
+
+  if (!statusData) {
+    return (
+      <Container service={service}>
+        <Block label="teslamate.car_name" />
+        <Block label="teslamate.odometer" />
+        <Block label="teslamate.battery_level" />
+      </Container>
+    );
+  }
+
+  return (
+    <>
+      <Container service={service}>
+        <Block label="teslamate.car_name" value={statusData.car_name} />
+        <Block label="teslamate.odometer" value={`${statusData.odometer} kms`} />
+        <Block label="teslamate.battery_level" value={`${statusData.battery_level}%`} />
+      </Container>
+    </>
+  );
+}

src/widgets/teslamate/widget.js

@@ -0,0 +1,20 @@
+import genericProxyHandler from "utils/proxy/handlers/generic";
+import { asJson } from "utils/proxy/api-helpers";
+
+const widget = {
+  api: "{url}/api/v1/cars/{car_id}/{endpoint}",
+  proxyHandler: genericProxyHandler,
+
+  mappings: {
+    status: {
+      endpoint: "status",
+      map: (data) => ({
+        car_name: asJson(data).data.car.car_name,
+        odometer: asJson(data).data.status.odometer,
+        battery_level: asJson(data).data.status.battery_details.battery_level,
+      }),
+    },
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -123,6 +123,7 @@ import xteve from "./xteve/widget";
 import urbackup from "./urbackup/widget";
 import romm from "./romm/widget";
 import zabbix from "./zabbix/widget";
+import teslamate from "./teslamate/widget"
 
 const widgets = {
   adguard,
@@ -236,6 +237,7 @@ const widgets = {
   tandoor,
   tautulli,
   technitium,
+  teslamate,
   tdarr,
   traefik,
   transmission,