Merge pull request #82 from TomW1605/master

client/public/locales/en/common.json

@@ -133,8 +133,10 @@
       "filament_name": "Filament",
       "filament": "Filament",
       "material": "Material",
+      "weight_to_use": "Weight",
       "used_weight": "Used Weight",
       "remaining_weight": "Remaining Weight",
+      "measured_weight": "Measured Weight",
       "used_length": "Used Length",
       "remaining_length": "Remaining Length",
       "location": "Location",
@@ -146,7 +148,10 @@
       "archived": "Archived"
     },
     "fields_help": {
+      "weight_to_use": "Select what weight value to enter. Measured weight is only available if the spool weight is set for the selected filament",
       "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.",
       "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."
     },

client/src/pages/spools/create.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Create, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, DatePicker, Select, InputNumber } from "antd";
+import { Form, Input, DatePicker, Select, InputNumber, Radio } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { IFilament } from "../filaments/model";
@@ -15,7 +15,7 @@ interface CreateOrCloneProps {
 export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => {
   const t = useTranslate();
 
-  const { formProps, saveButtonProps, formLoading } = useForm<ISpool>();
+  const { form, formProps, saveButtonProps, formLoading } = useForm<ISpool>();
 
   if (props.mode === "clone" && formProps.initialValues) {
     // Clear out the values that we don't want to clone
@@ -49,10 +49,48 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
     return {
       label: label,
       value: item.id,
+      weight: item.weight,
+      spool_weight: item.spool_weight,
     };
   });
   filamentOptions?.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
 
+  const [weightToEnter, setWeightToEnter] = useState(1);
+  const [usedWeight, setUsedWeight] = useState(0);
+
+  const selectedFilamentID = Form.useWatch("filament_id", form);
+  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 newFilamentWeight = newSelectedFilament?.weight || 0;
+    const newSpoolWeight = newSelectedFilament?.spool_weight || 0;
+
+    if (weightToEnter >= 3) {
+      if (!(newFilamentWeight && newSpoolWeight)) {
+        setWeightToEnter(2);
+      }
+    }
+    if (weightToEnter >= 2) {
+      if (!newFilamentWeight) {
+        setWeightToEnter(1);
+      }
+    }
+  };
+
+  const weightChange = (weight: number) => {
+    setUsedWeight(weight);
+    form.setFieldsValue({
+      used_weight: weight,
+    });
+  };
+
   return (
     <Create
       title={props.mode === "create" ? t("spool.titles.create") : t("spool.titles.clone")}
@@ -103,19 +141,100 @@ export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps
             filterOption={(input, option) =>
               typeof option?.label === "string" && option?.label.toLowerCase().includes(input.toLowerCase())
             }
+            onChange={(value) => {
+              filamentChange(value);
+            }}
           />
         </Form.Item>
+
+        <Form.Item hidden={true} name={["used_weight"]} initialValue={0}>
+          <InputNumber value={usedWeight} />
+        </Form.Item>
+
+        <Form.Item label={t("spool.fields.weight_to_use")} help={t("spool.fields_help.weight_to_use")}>
+          <Radio.Group
+            onChange={(value) => {
+              setWeightToEnter(value.target.value);
+            }}
+            defaultValue={1}
+            value={weightToEnter}
+          >
+            <Radio.Button
+              value={1}
+            >
+              {t("spool.fields.used_weight")}
+            </Radio.Button>
+            <Radio.Button
+              value={2}
+              disabled={!filamentWeight}
+            >
+              {t("spool.fields.remaining_weight")}
+            </Radio.Button>
+            <Radio.Button
+              value={3}
+              disabled={!(filamentWeight && spoolWeight)}
+            >
+              {t("spool.fields.measured_weight")}
+            </Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+
         <Form.Item
           label={t("spool.fields.used_weight")}
           help={t("spool.fields_help.used_weight")}
-          name={["used_weight"]}
+          // name={["used_weight"]}
-          rules={[
+          initialValue={0}
-            {
-              required: true,
-            },
-          ]}
         >
-          <InputNumber min={0} addonAfter="g" precision={1} formatter={numberFormatter} parser={numberParser} />
+          <InputNumber
+            min={0}
+            addonAfter="g"
+            precision={1}
+            formatter={numberFormatter}
+            parser={numberParser}
+            disabled={weightToEnter != 1}
+            value={usedWeight}
+            onChange={(value) => {
+              weightChange(value ?? 0);
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          label={t("spool.fields.remaining_weight")}
+          help={t("spool.fields_help.remaining_weight")}
+          // name={["remaining_weight"]}
+          initialValue={0}
+        >
+          <InputNumber
+            min={0}
+            addonAfter="g"
+            precision={1}
+            formatter={numberFormatter}
+            parser={numberParser}
+            disabled={weightToEnter != 2}
+            value={filamentWeight ? filamentWeight - usedWeight : 0}
+            onChange={(value) => {
+              weightChange(filamentWeight - (value ?? 0));
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          label={t("spool.fields.measured_weight")}
+          help={t("spool.fields_help.measured_weight")}
+          // name={["measured_weight"]}
+          initialValue={0}
+        >
+          <InputNumber
+            min={0}
+            addonAfter="g"
+            precision={1}
+            formatter={numberFormatter}
+            parser={numberParser}
+            disabled={weightToEnter != 3}
+            value={filamentWeight && spoolWeight ? filamentWeight - usedWeight + spoolWeight : 0}
+            onChange={(value) => {
+              weightChange(filamentWeight - ((value ?? 0) - spoolWeight));
+            }}
+          />
         </Form.Item>
         <Form.Item
           label={t("spool.fields.location")}

client/src/pages/spools/edit.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
 import { Edit, useForm, useSelect } from "@refinedev/antd";
-import { Form, Input, DatePicker, Select, InputNumber } from "antd";
+import { Form, Input, DatePicker, Select, InputNumber, Radio } from "antd";
 import dayjs from "dayjs";
 import TextArea from "antd/es/input/TextArea";
 import { IFilament } from "../filaments/model";
@@ -11,7 +11,7 @@ import { numberFormatter, numberParser } from "../../utils/parsing";
 export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
   const t = useTranslate();
 
-  const { formProps, saveButtonProps } = useForm<ISpool>();
+  const { form, formProps, saveButtonProps } = useForm<ISpool>();
 
   const { queryResult } = useSelect<IFilament>({
     resource: "filament",
@@ -35,14 +35,58 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
     return {
       label: label,
       value: item.id,
+      weight: item.weight,
+      spool_weight: item.spool_weight,
     };
   });
   filamentOptions?.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }));
 
+  const [weightToEnter, setWeightToEnter] = useState(1);
+  const [usedWeight, setUsedWeight] = useState(0);
+
+  const selectedFilamentID = Form.useWatch("filament_id", form);
+  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 newFilamentWeight = newSelectedFilament?.weight || 0;
+    const newSpoolWeight = newSelectedFilament?.spool_weight || 0;
+
+    if (weightToEnter >= 3) {
+      if (!(newFilamentWeight && newSpoolWeight)) {
+        setWeightToEnter(2);
+      }
+    }
+    if (weightToEnter >= 2) {
+      if (!newFilamentWeight) {
+        setWeightToEnter(1);
+      }
+    }
+  };
+
+  const weightChange = (weight: number) => {
+    setUsedWeight(weight);
+    form.setFieldsValue({
+      used_weight: weight,
+    });
+  };
+
   if (formProps.initialValues) {
     formProps.initialValues["filament_id"] = formProps.initialValues["filament"].id;
   }
 
+  useEffect(() => {
+    if (formProps.initialValues && usedWeight != formProps.initialValues["used_weight"]) {
+      setUsedWeight(formProps.initialValues["used_weight"])
+    }
+  }, []);
+
   return (
     <Edit saveButtonProps={saveButtonProps}>
       <Form {...formProps} layout="vertical">
@@ -114,25 +158,98 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
             filterOption={(input, option) =>
               typeof option?.label === "string" && option?.label.toLowerCase().includes(input.toLowerCase())
             }
+            onChange={(value) => {
+              filamentChange(value);
+            }}
           />
         </Form.Item>
+        <Form.Item hidden={false} name={["used_weight"]} initialValue={0}>
+          <InputNumber value={usedWeight} />
+        </Form.Item>
+
+        <Form.Item label={t("spool.fields.weight_to_use")} help={t("spool.fields_help.weight_to_use")}>
+          <Radio.Group
+            onChange={(value) => {
+              setWeightToEnter(value.target.value);
+            }}
+            defaultValue={1}
+            value={weightToEnter}
+          >
+            <Radio.Button
+              value={1}
+            >
+              {t("spool.fields.used_weight")}
+            </Radio.Button>
+            <Radio.Button
+              value={2}
+              disabled={!filamentWeight}
+            >
+              {t("spool.fields.remaining_weight")}
+            </Radio.Button>
+            <Radio.Button
+              value={3}
+              disabled={!(filamentWeight && spoolWeight)}
+            >
+              {t("spool.fields.measured_weight")}
+            </Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+
         <Form.Item
           label={t("spool.fields.used_weight")}
           help={t("spool.fields_help.used_weight")}
-          name={["used_weight"]}
+          // name={["used_weight"]}
-          rules={[
+          // initialValue={usedWeight}
-            {
-              required: true,
-            },
-          ]}
         >
           <InputNumber
             min={0}
             addonAfter="g"
             precision={1}
-            max={1e6}
             formatter={numberFormatter}
             parser={numberParser}
+            disabled={weightToEnter != 1}
+            value={usedWeight}
+            onChange={(value) => {
+              weightChange(value ?? 0);
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          label={t("spool.fields.remaining_weight")}
+          help={t("spool.fields_help.remaining_weight")}
+          // name={["remaining_weight"]}
+          // initialValue={filamentWeight ? filamentWeight - usedWeight : 0}
+        >
+          <InputNumber
+            min={0}
+            addonAfter="g"
+            precision={1}
+            formatter={numberFormatter}
+            parser={numberParser}
+            disabled={weightToEnter != 2}
+            value={filamentWeight ? filamentWeight - usedWeight : 0}
+            onChange={(value) => {
+              weightChange(filamentWeight - (value ?? 0));
+            }}
+          />
+        </Form.Item>
+        <Form.Item
+          label={t("spool.fields.measured_weight")}
+          help={t("spool.fields_help.measured_weight")}
+          // name={["measured_weight"]}
+          // initialValue={filamentWeight && spoolWeight ? filamentWeight - usedWeight + spoolWeight : 0}
+        >
+          <InputNumber
+            min={0}
+            addonAfter="g"
+            precision={1}
+            formatter={numberFormatter}
+            parser={numberParser}
+            disabled={weightToEnter != 3}
+            value={filamentWeight && spoolWeight ? filamentWeight - usedWeight + spoolWeight : 0}
+            onChange={(value) => {
+              weightChange(filamentWeight - ((value ?? 0) - spoolWeight));
+            }}
           />
         </Form.Item>
         <Form.Item