diff --git a/frontend/src/components/Stepper.js b/frontend/src/components/Stepper.js index 6d42c9f..f294ddb 100644 --- a/frontend/src/components/Stepper.js +++ b/frontend/src/components/Stepper.js @@ -5,8 +5,8 @@ import Step from '@mui/material/Step'; import StepLabel from '@mui/material/StepLabel'; import Button from '@mui/material/Button'; -import LocationStep from './steps/location/Location' -import SoilStep from './steps/Soil' +import LocationStep from './steps/locationstep/Location' +import SoilStep from './steps/soilvariantstep/Soil' import ResultsStep from './steps/Results' const steps = [ diff --git a/frontend/src/components/steps/Soil.js b/frontend/src/components/steps/Soil.js deleted file mode 100644 index efa5042..0000000 --- a/frontend/src/components/steps/Soil.js +++ /dev/null @@ -1,15 +0,0 @@ -import Step from './Step'; - -export default function SoilVariantStep() { - const soilVarientInfoPanel = ( -

Soil Information

- ) - - const soilVarientSelectionPanel = ( -

Soil Selection

- ) - - return ( - - ) -} diff --git a/frontend/src/components/steps/Step.js b/frontend/src/components/steps/Step.js index b786caf..b6c3068 100644 --- a/frontend/src/components/steps/Step.js +++ b/frontend/src/components/steps/Step.js @@ -14,10 +14,10 @@ export default function Step(props) { props.contentComponent ) : ( - + {props.informationComponent} - + {props.selectionComponent} diff --git a/frontend/src/components/steps/location/Location.js b/frontend/src/components/steps/locationstep/Location.js similarity index 97% rename from frontend/src/components/steps/location/Location.js rename to frontend/src/components/steps/locationstep/Location.js index a5329b0..72a512b 100644 --- a/frontend/src/components/steps/location/Location.js +++ b/frontend/src/components/steps/locationstep/Location.js @@ -3,7 +3,7 @@ import LocationSelectorMap from './Map' export default function LocationStep(props) { const locationInfoPanel = ( -
+

Right Plant Right Place Plant Selector Tool for New Zealand.


diff --git a/frontend/src/components/steps/location/Map.js b/frontend/src/components/steps/locationstep/Map.js similarity index 97% rename from frontend/src/components/steps/location/Map.js rename to frontend/src/components/steps/locationstep/Map.js index 7ee7f2e..8a63d8c 100644 --- a/frontend/src/components/steps/location/Map.js +++ b/frontend/src/components/steps/locationstep/Map.js @@ -39,7 +39,7 @@ const fitNZBounds = (map) => { function CoordinatesDisplay(props) { const savedCoordinates = props.filters["coordinates"]; return savedCoordinates ? ( -

+
Latitude: {savedCoordinates.lat}
Longitude: {savedCoordinates.lng}
diff --git a/frontend/src/components/steps/soilvariantstep/Soil.js b/frontend/src/components/steps/soilvariantstep/Soil.js new file mode 100644 index 0000000..34667bd --- /dev/null +++ b/frontend/src/components/steps/soilvariantstep/Soil.js @@ -0,0 +1,26 @@ +import Step from '../Step'; +import SoilSelector from './SoilSelector'; + +export default function SoilVariantStep(props) { + const soilVarientInfoPanel = ( +
+

Soil Variant Selection

+
+

+ From your site location, we use New Zealand Soil Classification data and additional Manaaki Whenua Landcare Research data to determine overall soil type. However we also need to know as much as possible about the moisture content of the soil at your planting site location. +

+ Please select an option from the choices listed to the right: +

+
+ ) + + const soilVarientSelectionPanel = ( +
+ +
+ ) + + return ( + + ) +} diff --git a/frontend/src/components/steps/soilvariantstep/SoilSelector.js b/frontend/src/components/steps/soilvariantstep/SoilSelector.js new file mode 100644 index 0000000..12fc9b1 --- /dev/null +++ b/frontend/src/components/steps/soilvariantstep/SoilSelector.js @@ -0,0 +1,56 @@ +import * as React from 'react'; +import Radio from '@mui/material/Radio'; +import RadioGroup from '@mui/material/RadioGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormLabel from '@mui/material/FormLabel'; +import FormControl from '@mui/material/FormControl'; +import FormHelperText from '@mui/material/FormHelperText'; +import Tooltip from '@mui/material/Tooltip'; + +const WET_SOIL_DESCRIPTION = (

+ Is your ground/soil VERY WET? i.e. is it soft and squishy under foot with ground water at or near surface for three months of year or more? Your soil is considered wet if the subsoil is either very dark brown and peat-like, or grey rather than a red, brown, or yellow rusty colour? +

); + +const DRY_SOIL_DESCRIPTION = (

+ Is your ground/soil VERY DRY? i.e. If your soil is very well drained, stony, sandy or shallow (less than one metre depth to bed rock, stones or other hard/artificial surface), or is it completely dry for three months of year or more, and not irrigated then we consider it dry. +

); + +const MESIC_SOIL_DESCRIPTION = (

+ If your ground/soil does not meet either of the two previous definitions, we’d likely classify it as MOIST, or somewhere in between very wet and very dry. Your ground is considered moist if it has compacted soil that is fine or has a soft/crumbly texture. The sand, silt and clay mixture known as loam is considered moist in this context. Moist soils are more than one metre above an impervious layer, and are never water-logged nor are they completely dry for more than three months. If you are unsure, or if you plan to irrigate your site, then select this option. +

); + +export default function SoilSelector(props) { + const [value, setValue] = React.useState(''); + const [helperText, setHelperText] = React.useState('Please select your soil variant from the options above.'); + + const handleRadioChange = (event) => { + const soilVariantSelection = event.target.value; + setValue(soilVariantSelection); + setHelperText(' '); + props.updateFilterState({ "soilVariant": soilVariantSelection }); + props.setNextDisabled(false); + }; + + return ( +
+ + Soil Variant Options + + } label={DRY_SOIL_DESCRIPTION} sx={{ paddingTop: '15px', paddingBottom: '15px' }}/> + } label={WET_SOIL_DESCRIPTION} sx={{ paddingTop: '15px', paddingBottom: '15px' }} /> + } label={MESIC_SOIL_DESCRIPTION} sx={{ paddingTop: '15px', paddingBottom: '15px' }} /> + + {helperText} + +
+ ); +}