Add additional handling for spool weights

client/public/locales/en/common.json

@@ -144,6 +144,8 @@
             "measured_weight": "Measured Weight",
             "used_length": "Used Length",
             "remaining_length": "Remaining Length",
+            "initial_weight": "Initial Weight",
+            "empty_weight": "Empty Weight",
             "location": "Location",
             "lot_nr": "Lot Nr",
             "first_used": "First Used",
@@ -158,6 +160,8 @@
             "used_weight": "How much filament has been used from the spool. A new spool should have 0g used.",
             "remaining_weight": "How much filament is left on the spool. For a new spool this should match the spool weight.",
             "measured_weight": "How much the filament and spool weigh.",
+            "initial_weight": "The initial Total Weight of the filament and spool.",
+            "empty_weight": "The weight of the spool when it is empty.",
             "location": "Where the spool is located if you have multiple locations where you store your spools.",
             "lot_nr": "Manufacturer's lot number. Can be used to ensure a print has consistent color if multiple spools are used."
         },
@@ -227,9 +231,13 @@
         "fields": {
             "id": "ID",
             "name": "Name",
+            "empty_spool_weight": "Empty Spool Weight",
             "registered": "Registered",
             "comment": "Comment"
         },
+        "fields_help": {
+            "empty_spool_weight": "The weight of an empty spool from this vendor."
+        },
         "titles": {
             "create": "Create Vendor",
             "clone": "Clone Vendor",

client/src/pages/spools/create.tsx

@@ -114,25 +114,26 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
   const selectedFilament = filamentOptions?.find((obj) => {
     return obj.value === selectedFilamentID;
   });
-  const filamentWeight = selectedFilament?.weight || 0;
-  const spoolWeight = selectedFilament?.spool_weight || 0;
-
+
   const filamentChange = (newID: number) => {
+
     const newSelectedFilament = filamentOptions?.find((obj) => {
       return obj.value === newID;
     });
+
+    const initial_weight = form.getFieldValue("initial_weight") as number ?? 0;
+    const empty_weight = form.getFieldValue("empty_weight") as number ?? 0;
+
     const newFilamentWeight = newSelectedFilament?.weight || 0;
     const newSpoolWeight = newSelectedFilament?.spool_weight || 0;
 
-    if (weightToEnter >= 3) {
-      if (!(newFilamentWeight && newSpoolWeight)) {
-        setWeightToEnter(2);
-      }
+    const currentCalculatedFilamentWeight = getTotalWeightFromFilament();
+    if ((initial_weight === 0 || initial_weight === currentCalculatedFilamentWeight) && newFilamentWeight > 0) {
+      form.setFieldValue("initial_weight", newFilamentWeight + newSpoolWeight);
     }
-    if (weightToEnter >= 2) {
-      if (!newFilamentWeight) {
-        setWeightToEnter(1);
-      }
+
+    if ((empty_weight === 0 || empty_weight === (selectedFilament?.spool_weight ?? 0)) && newSpoolWeight > 0) {
+      form.setFieldValue("empty_weight", newSpoolWeight);
     }
   };
 
@@ -160,6 +161,98 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
     setQuantity(quantity - 1);
   };
 
+  const getSpoolTotalWeight = (): number => {
+    const initial_weight = form.getFieldValue("initial_weight") as number;
+    const empty_weight = form.getFieldValue("empty_weight") as number;
+    const spool_weight = empty_weight ?? selectedFilament?.spool_weight;
+    return initial_weight ?? (selectedFilament?.weight ?? 0) + spool_weight;
+  };
+
+  const getTotalWeightFromFilament = (): number => {
+    return (selectedFilament?.weight ?? 0) + (selectedFilament?.spool_weight ?? 0);
+  }
+
+  const getFilamentWeight = (): number => {
+    const initial_weight = form.getFieldValue("initial_weight") as number;
+    const empty_weight = form.getFieldValue("empty_weight") as number;
+    const spool_weight = empty_weight ?? selectedFilament?.spool_weight;
+    if (initial_weight) {
+      return initial_weight - (spool_weight ?? 0);
+    }
+    return selectedFilament?.weight ?? 0;
+  }
+
+  const getMeasuredWeight = (): number => {
+    const initial_weight = form.getFieldValue("initial_weight") as number;
+
+    if (initial_weight) {
+      return initial_weight - usedWeight;
+    }
+    const empty_weight = form.getFieldValue("empty_weight") as number;
+    const spool_weight = empty_weight ?? selectedFilament?.spool_weight;
+
+    if (selectedFilament?.weight && spool_weight) {
+      return selectedFilament?.weight - usedWeight + spool_weight;
+    }
+    return 0;
+  }
+
+  const getRemainingWeight = (): number => {
+    const initial_weight = form.getFieldValue("initial_weight") as number ?? 0;
+    const empty_weight = form.getFieldValue("empty_weight") as number;
+    const spool_weight = empty_weight ?? selectedFilament?.spool_weight;
+
+    let remaining_weight = 0;
+
+    if (initial_weight === 0) {
+      remaining_weight = (selectedFilament?.weight ?? 0) - usedWeight;
+    }
+    else {
+      remaining_weight = initial_weight - spool_weight - usedWeight;
+    }
+
+    return (remaining_weight >= 0) ? remaining_weight : 0;
+  }
+
+  const isMeasuredWeightEnabled = (): boolean => {
+
+    if (!isRemainingWeightEnabled()) {
+      return false;
+    }
+
+    const empty_weight = form.getFieldValue("empty_weight") as number;
+
+    return (empty_weight || selectedFilament?.spool_weight) ? true : false;
+  }
+
+  const isRemainingWeightEnabled = (): boolean => {
+    const initial_weight = form.getFieldValue("initial_weight") as number;
+
+    if (initial_weight) {
+      return true;
+    }
+
+    return selectedFilament?.weight ? true : false;
+  }
+
+  React.useEffect(() => {
+    if (weightToEnter >= 3) 
+    {
+      if (!isMeasuredWeightEnabled()) {
+        setWeightToEnter(2);
+        return;
+      }
+    }
+    if (weightToEnter >= 2)
+    {
+      if (!isRemainingWeightEnabled()) {
+        setWeightToEnter(1);
+        return;
+      }
+    }
+  }, [selectedFilament, weightChange])
+
+
   return (
     <Create
       title={props.mode === "create" ? t("spool.titles.create") : t("spool.titles.clone")}
@@ -236,8 +329,8 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
           />
         </Form.Item>
         <Form.Item
-          label={t("filament.fields.price")}
-          help={t("filament.fields_help.price")}
+          label={t("spool.fields.price")}
+          help={t("spool.fields_help.price")}
           name={["price"]}
           rules={[
             {
@@ -254,6 +347,36 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             parser={numberParser}
           />
         </Form.Item>
+        <Form.Item
+          label={t("spool.fields.initial_weight")}
+          help={t("spool.fields_help.initial_weight")}
+          name={["initial_weight"]}
+          rules={[
+            {
+              required: false,
+              type: "number",
+              min: 0,
+            },
+          ]}
+        >
+          <InputNumber addonAfter="g" precision={1}/>
+        </Form.Item>
+
+        <Form.Item
+          label={t("spool.fields.empty_weight")}
+          help={t("spool.fields_help.empty_weight")}
+          name={["empty_weight"]}
+          rules={[
+            {
+              required: false,
+              type: "number",
+              min: 0,
+            },
+          ]}
+        >
+          <InputNumber addonAfter="g" precision={1} />
+        </Form.Item>
+
         <Form.Item hidden={true} name={["used_weight"]} initialValue={0}>
           <InputNumber value={usedWeight} />
         </Form.Item>
@@ -267,10 +390,10 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             value={weightToEnter}
           >
             <Radio.Button value={1}>{t("spool.fields.used_weight")}</Radio.Button>
-            <Radio.Button value={2} disabled={!filamentWeight}>
+            <Radio.Button value={2} disabled={!isRemainingWeightEnabled()}>
               {t("spool.fields.remaining_weight")}
             </Radio.Button>
-            <Radio.Button value={3} disabled={!(filamentWeight && spoolWeight)}>
+            <Radio.Button value={3} disabled={!isMeasuredWeightEnabled()}>
               {t("spool.fields.measured_weight")}
             </Radio.Button>
           </Radio.Group>
@@ -302,9 +425,9 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             formatter={numberFormatter}
             parser={numberParser}
             disabled={weightToEnter != 2}
-            value={filamentWeight ? filamentWeight - usedWeight : 0}
+            value={getRemainingWeight()}
             onChange={(value) => {
-              weightChange(filamentWeight - (value ?? 0));
+              weightChange(getFilamentWeight() - (value ?? 0));
             }}
           />
         </Form.Item>
@@ -320,9 +443,10 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             formatter={numberFormatter}
             parser={numberParser}
             disabled={weightToEnter != 3}
-            value={filamentWeight && spoolWeight ? filamentWeight - usedWeight + spoolWeight : 0}
+            value={getMeasuredWeight()}
             onChange={(value) => {
-              weightChange(filamentWeight - ((value ?? 0) - spoolWeight));
+              const totalWeight = getSpoolTotalWeight();
+              weightChange(totalWeight - (value ?? 0));
             }}
           />
         </Form.Item>