Add ChangeDetection.io widget

public/locales/en/common.json

@@ -16,10 +16,10 @@
         "status": "Status"
     },
     "weather": {
-      "current": "Current Location",
-      "allow": "Click to allow",
-      "updating": "Updating",
-      "wait": "Please wait"
+        "current": "Current Location",
+        "allow": "Click to allow",
+        "updating": "Updating",
+        "wait": "Please wait"
     },
     "search": {
         "placeholder": "Search…"
@@ -55,6 +55,10 @@
         "bitrate": "Bitrate",
         "no_active": "No Active Streams"
     },
+    "changedetectionio": {
+        "totalObserved": "Total Observed",
+        "diffsDetected": "Diffs Detected"
+    },
     "tautulli": {
         "playing": "Playing",
         "transcoding": "Transcoding",
@@ -128,20 +132,20 @@
         "available": "Available"
     },
     "overseerr": {
-      "pending": "Pending",
-      "approved": "Approved",
-      "available": "Available"
+        "pending": "Pending",
+        "approved": "Approved",
+        "available": "Available"
     },
     "pihole": {
         "queries": "Queries",
         "blocked": "Blocked",
         "gravity": "Gravity"
     },
     "adguard": {
-      "queries": "Queries",
-      "blocked": "Blocked",
-      "filtered": "Filtered",
-      "latency": "Latency"
+        "queries": "Queries",
+        "blocked": "Blocked",
+        "filtered": "Filtered",
+        "latency": "Latency"
     },
     "speedtest": {
         "upload": "Upload",
@@ -175,7 +179,7 @@
         "clients": "Clients",
         "messages": "Messages"
     },
-    "prowlarr":{
+    "prowlarr": {
         "enableIndexers": "Indexers",
         "numberOfGrabs": "Grabs",
         "numberOfQueries": "Queries",

src/widgets/changedetectionio/component.jsx

@@ -0,0 +1,33 @@
+import { useTranslation } from "next-i18next";
+
+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 { t } = useTranslation();
+
+  const { widget } = service;
+
+  const { data } = useWidgetAPI(widget, "info");
+
+  if (!data) {
+    return <Container error="widget.api_error" />;
+  }
+
+  const totalObserved = Object.keys(data).length;
+  let diffsDetected = 0;
+
+  Object.keys(data).forEach((key) => {
+    if (data[key].last_checked === data[key].last_changed) {
+      diffsDetected += 1;
+    }
+  });
+
+  return (
+    <Container service={service}>
+      <Block label="changedetectionio.diffsDetected" value={t("common.number", { value: diffsDetected })} />
+      <Block label="changedetectionio.totalObserved" value={t("common.number", { value: totalObserved })} />
+    </Container>
+  );
+}

src/widgets/changedetectionio/widget.js

@@ -0,0 +1,15 @@
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+const widget = {
+  api: "{url}/api/v1/{endpoint}",
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    info: {
+      method: "GET",
+      endpoint: "watch",
+    },
+  },
+};
+
+export default widget;

src/widgets/components.js

@@ -4,6 +4,7 @@ const components = {
   adguard: dynamic(() => import("./adguard/component")),
   authentik: dynamic(() => import("./authentik/component")),
   bazarr: dynamic(() => import("./bazarr/component")),
+  changedetectionio: dynamic(() => import("./changedetectionio/component")),
   coinmarketcap: dynamic(() => import("./coinmarketcap/component")),
   docker: dynamic(() => import("./docker/component")),
   emby: dynamic(() => import("./emby/component")),

src/widgets/widgets.js

@@ -1,6 +1,7 @@
 import adguard from "./adguard/widget";
 import authentik from "./authentik/widget";
 import bazarr from "./bazarr/widget";
+import changedetectionio from "./changedetectionio/widget";
 import coinmarketcap from "./coinmarketcap/widget";
 import emby from "./emby/widget";
 import gotify from "./gotify/widget";
@@ -34,6 +35,7 @@ const widgets = {
   adguard,
   authentik,
   bazarr,
+  changedetectionio,
   coinmarketcap,
   emby,
   gotify,
@@ -63,7 +65,7 @@ const widgets = {
   traefik,
   transmission,
   unifi,
-  unifi_console: unifi
+  unifi_console: unifi,
 };
 
 export default widgets;