diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index 3fe6e44..7dab76a 100644 --- a/client/public/locales/en/common.json +++ b/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." }, diff --git a/client/src/pages/spools/create.tsx b/client/src/pages/spools/create.tsx index 0cbbc3a..937fabb 100644 --- a/client/src/pages/spools/create.tsx +++ b/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 = (props) => { const t = useTranslate(); - const { formProps, saveButtonProps, formLoading } = useForm(); + const { form, formProps, saveButtonProps, formLoading } = useForm(); 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 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 ( typeof option?.label === "string" && option?.label.toLowerCase().includes(input.toLowerCase()) } + onChange={(value) => { + filamentChange(value); + }} /> + + + + + { + setWeightToEnter(value.target.value); + }} + defaultValue={1} + value={weightToEnter} + > + + {t("spool.fields.used_weight")} + + + {t("spool.fields.remaining_weight")} + + + {t("spool.fields.measured_weight")} + + + + - + { + weightChange(value ?? 0); + }} + /> + + + { + weightChange(filamentWeight - (value ?? 0)); + }} + /> + + + { + weightChange(filamentWeight - ((value ?? 0) - spoolWeight)); + }} + /> = () => { const t = useTranslate(); - const { formProps, saveButtonProps } = useForm(); + const { form, formProps, saveButtonProps } = useForm(); const { queryResult } = useSelect({ resource: "filament", @@ -35,14 +35,58 @@ export const SpoolEdit: React.FC = () => { 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 (
@@ -114,25 +158,98 @@ export const SpoolEdit: React.FC = () => { filterOption={(input, option) => typeof option?.label === "string" && option?.label.toLowerCase().includes(input.toLowerCase()) } + onChange={(value) => { + filamentChange(value); + }} /> + + + + { + setWeightToEnter(value.target.value); + }} + defaultValue={1} + value={weightToEnter} + > + + {t("spool.fields.used_weight")} + + + {t("spool.fields.remaining_weight")} + + + {t("spool.fields.measured_weight")} + + + + { + weightChange(value ?? 0); + }} + /> + + + { + weightChange(filamentWeight - (value ?? 0)); + }} + /> + + + { + weightChange(filamentWeight - ((value ?? 0) - spoolWeight)); + }} />