Allow filtering for spool id

Author: fgeck

docs/widgets/services/spoolman.md

@@ -5,13 +5,13 @@ 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 filamentNames configuration option to filter for spools by their filament name.
+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
-  filamentNames:
-    - orange
-    - blue
+  spoolIds:
+    - 1
+    - 4
 ```

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/spoolman/component.jsx

@@ -10,11 +10,11 @@ export default function Component({ service }) {
 
   const { data: spoolData, error: spoolError } = useWidgetAPI(widget, "spools");
 
-  // Helper to handle filtering based on filamentNames
-  const filterSpools = (data, filamentNames) => {
-    if (!filamentNames || filamentNames.length === 0) return data; // No filtering if no filamentNames
-    const limitedfilamentNames = filamentNames.slice(0, 4); // Limit to 4 names
-    return data.filter(spool => limitedfilamentNames.includes(spool.filament.name));
+  // 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
@@ -50,7 +50,7 @@ export default function Component({ service }) {
   }
 
   // Filter and limit spools
-  let filteredSpoolData = filterSpools(spoolData, widget.filamentNames);
+  let filteredSpoolData = filterSpools(spoolData, widget.spoolIds);
   filteredSpoolData = limitSpoolData(filteredSpoolData);
 
   // Render filtered and limited spools