From fb1434f817d00776e82a2f93287e032c54c50484 Mon Sep 17 00:00:00 2001 From: csawatzky Date: Mon, 15 Dec 2025 16:29:54 -0600 Subject: [PATCH] putting the grain form in the component form and adding a custom grain toggle, also tweaked the form to be just the form when no grains are saved and to use a search select and put the form in an accordion when there are saved custom grains --- src/component/ComponentForm.tsx | 52 +++++++++++++--- src/grain/CustomGrainForm.tsx | 104 ++++++++++++++++++++------------ src/models/Component.ts | 5 ++ 3 files changed, 116 insertions(+), 45 deletions(-) diff --git a/src/component/ComponentForm.tsx b/src/component/ComponentForm.tsx index e542ed0..77f5ced 100644 --- a/src/component/ComponentForm.tsx +++ b/src/component/ComponentForm.tsx @@ -4,6 +4,7 @@ import { AccordionSummary, Alert, AlertTitle, + Box, Button, Collapse, FormControl, @@ -47,6 +48,7 @@ import { getDistanceUnit } from "utils"; import { GrainOptions } from "grain"; import CompModes from "component/ComponentMode.json"; import FanPicker from "fans/fanPicker"; +import CustomGrainForm from "grain/CustomGrainForm"; const useStyles = makeStyles((theme: Theme) => { return ({ @@ -136,6 +138,7 @@ export default function ComponentForm(props: Props) { sensorDistance: "0", }); const [compMode, setCompMode] = useState(); + const [useCustomGrain, setUseCustomGrain] = useState(false) //const [numCalibrations, setNumCalibrations] = useState(0) useEffect(() => { @@ -192,6 +195,10 @@ export default function ComponentForm(props: Props) { sensorDistance = sensorDistance / 30.48; } + if(formComponent.settings.customGrain){ + setUseCustomGrain(true) + } + setForm({ component: formComponent, measure: formComponent.settings.measurementPeriodMs > 0, @@ -383,6 +390,14 @@ export default function ComponentForm(props: Props) { setForm(f); }; + const updateCustomGrain = (grainSettings?: pond.GrainSettings) => { + console.log("update custom grain") + let f = cloneDeep(form) + f.component.settings.customGrain = grainSettings + f.component.settings.grainType = pond.Grain.GRAIN_CUSTOM + setForm(f) + } + const updateGrainType = (option: Option | null) => { let f = cloneDeep(form); @@ -622,13 +637,36 @@ export default function ComponentForm(props: Props) { const grainSelect = () => { let selected = findSelectedGrain(grainOptions); return ( - + + { + setUseCustomGrain(!useCustomGrain); + updateCustomGrain() + }} + /> + } + label="Custom Grain" + labelPlacement="start" + /> + {useCustomGrain ? + + + + : + + } + ); }; diff --git a/src/grain/CustomGrainForm.tsx b/src/grain/CustomGrainForm.tsx index 7c77faa..72e3b74 100644 --- a/src/grain/CustomGrainForm.tsx +++ b/src/grain/CustomGrainForm.tsx @@ -1,4 +1,5 @@ -import { Box, Button, MenuItem, TextField, Typography } from "@mui/material" +import { ExpandMore } from "@mui/icons-material" +import { Accordion, AccordionDetails, AccordionSummary, Box, Button, MenuItem, TextField, Typography } from "@mui/material" import SearchSelect, { Option } from "common/SearchSelect" import { cloneDeep } from "lodash" import { pond } from "protobuf-ts/pond" @@ -45,9 +46,9 @@ export default function CustomGrainForm(props: Props) { useEffect(()=>{ grainAPI.listGrains(0, 0, "asc", "name", undefined, undefined, undefined, as).then(resp => { + let options: Option[] = [] + let map: Map = new Map() if (resp.data.grains){ - let map: Map = new Map() - let options: Option[] = [] resp.data.grains.forEach(grain => { map.set(grain.key, grain) options.push({ @@ -56,9 +57,9 @@ export default function CustomGrainForm(props: Props) { group: grain.settings?.group, }) }) - setGrainOptions(options) - setGrainMap(map) } + setGrainOptions(options) + setGrainMap(map) }) },[grainAPI]) @@ -83,43 +84,13 @@ export default function CustomGrainForm(props: Props) { } const settingsChanged = (newSettings: pond.GrainSettings) => { - setSelectedOption(null) setNewGrainSettings(newSettings) onGrainSettingsChange(newSettings) } - return ( - - - { - setIsNew(false) - setSelectedOption(option) - //when an option is selected set all of the state variables controlling the form entries - let grain = grainMap.get(option?.value) - if(grain && grain.settings){ - //set the form values - setName(grain.name) - setGroup(grain.settings.group) - setEquation(grain.settings.equation) - setConstantA(grain.settings.a.toString()) - setConstantB(grain.settings.b.toString()) - setConstantC(grain.settings.c.toString()) - setKgPerBushel(grain.settings.kgPerBushel.toString()) - setBushelsPerTonne(grain.settings.bushelsPerTonne.toString()) - //the the new grain settings object - setNewGrainSettings(grain.settings) - //pass that settings object back up - settingsChanged(grain.settings) - } - }} - group - options={grainOptions} - /> - - Custom Grain Properties + const newGrain = () => { + return ( + } + + ) + } + + const grainAccordion = () => { + return ( + + }>Custom Grain Properties + + {newGrain()} + + + ) + } + + return ( + + {grainOptions.length === 0 ? + + Custom Grain Properties + {newGrain()} + + : + + + { + setIsNew(false) + setSelectedOption(option) + //when an option is selected set all of the state variables controlling the form entries + let grain = grainMap.get(option?.value) + if(grain && grain.settings){ + //set the form values + setName(grain.name) + setGroup(grain.settings.group) + setEquation(grain.settings.equation) + setConstantA(grain.settings.a.toString()) + setConstantB(grain.settings.b.toString()) + setConstantC(grain.settings.c.toString()) + setKgPerBushel(grain.settings.kgPerBushel.toString()) + setBushelsPerTonne(grain.settings.bushelsPerTonne.toString()) + //the the new grain settings object + setNewGrainSettings(grain.settings) + //pass that settings object back up + settingsChanged(grain.settings) + } + }} + group + options={grainOptions} + /> + + {grainAccordion()} + + + } ) } \ No newline at end of file diff --git a/src/models/Component.ts b/src/models/Component.ts index 473d85d..60ff4ab 100644 --- a/src/models/Component.ts +++ b/src/models/Component.ts @@ -142,4 +142,9 @@ export class Component { return getFriendlyAddressTypeName(this.settings.addressType); } }; + + public customGrainProps(): pond.GrainSettings | undefined { + if(this.settings.customGrain) return this.settings.customGrain + return + } }