Add Spoolman Widget

Author: xenadmin

docs/widgets/services/spoolman.md

@@ -0,0 +1,17 @@
+---
+title: Spoolman
+description: Spoolman Widget Configuration
+---
+
+Learn more about [Spoolman](https://github.com/Donkie/Spoolman).
+
+4 spools are displayed by default. If more than 4 spools are configured in spoolman you can use the spoolIds configuration option to filter for spools by their id.
+
+```yaml
+widget:
+  type: spoolman
+  url: http://spoolman.host.or.ip
+  spoolIds:
+    - 1
+    - 4
+```

mkdocs.yml

@@ -138,6 +138,7 @@ nav:
           - widgets/services/scrutiny.md
           - widgets/services/sonarr.md
           - widgets/services/speedtest-tracker.md
+          - widgets/services/spoolman.md
           - widgets/services/stash.md
           - widgets/services/stocks.md
           - widgets/services/swagdashboard.md

src/utils/config/service-helpers.js

@@ -492,6 +492,9 @@ export function cleanServiceGroups(groups) {
 
           // technitium
           range,
+
+          // spoolman
+          spoolIds
         } = cleanedService.widget;
 
         let fieldsList = fields;
@@ -653,6 +656,9 @@ export function cleanServiceGroups(groups) {
           if (metrics) cleanedService.widget.metrics = metrics;
           if (refreshInterval) cleanedService.widget.refreshInterval = refreshInterval;
         }
+        if (type === "spoolman") {
+          if (spoolIds !== undefined) cleanedService.widget.spoolIds = spoolIds;
+        }
       }
 
       return cleanedService;

src/widgets/components.js

@@ -111,6 +111,7 @@ const components = {
   scrutiny: dynamic(() => import("./scrutiny/component")),
   sonarr: dynamic(() => import("./sonarr/component")),
   speedtest: dynamic(() => import("./speedtest/component")),
+  spoolman: dynamic(() => import("./spoolman/component")),
   stash: dynamic(() => import("./stash/component")),
   stocks: dynamic(() => import("./stocks/component")),
   strelaysrv: dynamic(() => import("./strelaysrv/component")),

src/widgets/spoolman/component.jsx

@@ -0,0 +1,70 @@
+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: spoolData, error: spoolError } = useWidgetAPI(widget, "spools");
+
+  // Helper to handle filtering based on spoolIds
+  const filterSpools = (data, spoolIds) => {
+    if (!spoolIds || spoolIds.length === 0) return data; // No filtering if no spoolIds
+    const limitedspoolIds = spoolIds.slice(0, 4); // Limit to 4 names
+    return data.filter(spool => spoolIds.includes(spool.id));
+  };
+
+  // Helper to limit spoolData length
+  const limitSpoolData = (data, limit = 4) => (data.length > limit ? data.slice(0, limit) : data);
+
+  // Error handling
+  if (spoolError) {
+    return <Container service={service} error={spoolError} />;
+  }
+
+  // Loading state
+  if (!spoolData) {
+    return (
+      <Container service={service}>
+        <Block label="spoolman.spool1" />
+        <Block label="spoolman.spool2" />
+      </Container>
+    );
+  }
+
+  // API error or unexpected response
+  if (spoolData.error || spoolData.message) {
+    return <Container service={service} error={spoolData?.error ?? spoolData} />;
+  }
+
+  // No spools available
+  if (spoolData.length === 0) {
+    return (
+      <Container service={service}>
+        <Block label="spoolman.noSpools" />
+      </Container>
+    );
+  }
+
+  // Filter and limit spools
+  let filteredSpoolData = filterSpools(spoolData, widget.spoolIds);
+  filteredSpoolData = limitSpoolData(filteredSpoolData);
+
+  // Render filtered and limited spools
+  return (
+    <Container service={service}>
+      {filteredSpoolData.map((spool) => (
+        <Block
+          key={spool.id}
+          label={spool.filament.name}
+          value={t("common.percent", {
+            value: (spool.remaining_weight / spool.initial_weight) * 100,
+          })}
+        />
+      ))}
+    </Container>
+  );
+}

src/widgets/spoolman/widget.js

@@ -0,0 +1,14 @@
+import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
+
+const widget = {
+  api: "{url}/api/v1/{endpoint}",
+  proxyHandler: credentialedProxyHandler,
+
+  mappings: {
+    spools : {
+      endpoint: "spool",
+    }
+  },
+};
+
+export default widget;

src/widgets/widgets.js

@@ -102,6 +102,7 @@ import sabnzbd from "./sabnzbd/widget";
 import scrutiny from "./scrutiny/widget";
 import sonarr from "./sonarr/widget";
 import speedtest from "./speedtest/widget";
+import spoolman from "./spoolman/widget";
 import stash from "./stash/widget";
 import stocks from "./stocks/widget";
 import strelaysrv from "./strelaysrv/widget";
@@ -237,6 +238,7 @@ const widgets = {
   scrutiny,
   sonarr,
   speedtest,
+  spoolman,
   stash,
   stocks,
   strelaysrv,