Add option to filter for filament names

Author: fgeck

docs/widgets/services/spoolman.md

@@ -5,11 +5,13 @@ description: Spoolman Widget Configuration
 
 Learn more about [Spoolman](https://github.com/Donkie/Spoolman).
 
-Keep track of your inventory of 3D-printer filament spools.
-Spoolman is a self-hosted web service designed to help you efficiently manage your 3D printer filament spools and monitor their usage. It acts as a centralized database that seamlessly integrates with popular 3D printing software like OctoPrint and Klipper/Moonraker. When connected, it automatically updates spool weights as printing progresses, giving you real-time insights into filament usage.
+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.
 
 ```yaml
 widget:
   type: spoolman
   url: http://spoolman.host.or.ip
+  filamentNames:
+    - orange
+    - blue
 ```

src/widgets/spoolman/component.jsx

@@ -10,10 +10,22 @@ 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 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}>
@@ -23,17 +35,34 @@ export default function Component({ service }) {
     );
   }
 
+  // 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.filamentNames);
+  filteredSpoolData = limitSpoolData(filteredSpoolData);
+
+  // Render filtered and limited spools
   return (
     <Container service={service}>
-      {spoolData.map((spool) => (
+      {filteredSpoolData.map((spool) => (
         <Block
           key={spool.id}
-          label={`${spool.filament.name}`}
-          value={`${t("common.percent", { value: ((spool.remaining_weight / spool.initial_weight)*100)})}`} 
+          label={spool.filament.name}
+          value={t("common.percent", {
+            value: (spool.remaining_weight / spool.initial_weight) * 100,
+          })}
         />
       ))}
     </Container>