Some refactoring of existing information panels
- extracting out static strings where possible - create StepInformation component - rename step components to end in 'Step'
This commit is contained in:
Dana Lambert
parent
dd60ce03ee
commit
06e33d7ac6
8 changed files with 95 additions and 52 deletions
30
frontend/src/assets/data/staticText.json
Normal file
30
frontend/src/assets/data/staticText.json
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{
|
||||
"steps": {
|
||||
"location": {
|
||||
"title": "Right Plant Right Place Plant Selector Tool for New Zealand.",
|
||||
"description": "Your native plant selection starts here! Use the map to select a planting site location within New Zealand. On the following pages you will provide more details on your project until the system has enough information to create your plant species list and planting plan. To start, click on the map and pan and zoom to the site location. Once the location is selected, click on the “next step” button to complete the process. Repeat this process for sites at different locations."
|
||||
},
|
||||
"soil": {
|
||||
"title": "Soil Variant Selection",
|
||||
"description": "",
|
||||
"optionsLabel": "Soil Variant Options",
|
||||
"optionsHelperText": "Please select your soil variant from the options above."
|
||||
},
|
||||
"habitat": {
|
||||
"title": "",
|
||||
"description": ""
|
||||
},
|
||||
"zone": {
|
||||
"title": "",
|
||||
"description": ""
|
||||
},
|
||||
"projectSpecifics": {
|
||||
"title": "",
|
||||
"description": ""
|
||||
},
|
||||
"summary": {
|
||||
"title": "",
|
||||
"description": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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/locationstep/Location'
|
||||
import SoilStep from './steps/soilvariantstep/Soil'
|
||||
import LocationStep from './steps/locationstep/LocationStep'
|
||||
import SoilStep from './steps/soilvariantstep/SoilStep'
|
||||
import ResultsStep from './steps/Results'
|
||||
|
||||
const steps = [
|
||||
|
|
|
|||
9
frontend/src/components/steps/StepInformation.js
Normal file
9
frontend/src/components/steps/StepInformation.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default function StepInformation(props) {
|
||||
return (
|
||||
<div className='ph-4'>
|
||||
<h4>{props.title}</h4>
|
||||
<br/>
|
||||
{props.description}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
import Step from '../Step';
|
||||
import LocationSelectorMap from './Map'
|
||||
|
||||
export default function LocationStep(props) {
|
||||
const locationInfoPanel = (
|
||||
<div className='ph-4'>
|
||||
<h4>Right Plant Right Place Plant Selector Tool for New Zealand.</h4>
|
||||
<br/>
|
||||
<p>
|
||||
Your native plant selection starts here! Use the map to select a planting site location within New Zealand. On the following pages you will provide more details on your project until the system has enough information to create your plant species list and planting plan. To start, click on the map and pan and zoom to the site location. Once the location is selected, click on the “next step” button to complete the process. Repeat this process for sites at different locations.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
const locationSelectionPanel = (
|
||||
<LocationSelectorMap {...props} />
|
||||
)
|
||||
|
||||
return (
|
||||
<Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
|
||||
)
|
||||
}
|
||||
22
frontend/src/components/steps/locationstep/LocationStep.js
Normal file
22
frontend/src/components/steps/locationstep/LocationStep.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import Step from '../Step';
|
||||
import LocationSelectorMap from './Map'
|
||||
import StepInformation from '../StepInformation';
|
||||
import staticText from '../../../assets/data/staticText.json'
|
||||
|
||||
export default function LocationStep(props) {
|
||||
|
||||
const locationInfoPanel = (
|
||||
<StepInformation
|
||||
title={staticText.steps.location.title}
|
||||
description={<p>{staticText.steps.location.description}</p>}
|
||||
/>
|
||||
)
|
||||
|
||||
const locationSelectionPanel = (
|
||||
<LocationSelectorMap {...props} />
|
||||
)
|
||||
|
||||
return (
|
||||
<Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
|
||||
)
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import Step from '../Step';
|
||||
import SoilSelector from './SoilSelector';
|
||||
|
||||
export default function SoilVariantStep(props) {
|
||||
const soilVarientInfoPanel = (
|
||||
<div className='ph-4'>
|
||||
<h4>Soil Variant Selection</h4>
|
||||
<br />
|
||||
<p>
|
||||
From your site location, we use <a href="https://soils.landcareresearch.co.nz/describing-soils/nzsc/" target="blank">New Zealand Soil Classification</a> data and additional <a href="https://www.landcareresearch.co.nz" target="blank">Manaaki Whenua Landcare Research</a> 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.
|
||||
<br /><br />
|
||||
Please select an option from the choices listed to the right:
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
const soilVarientSelectionPanel = (
|
||||
<div className='p-5'>
|
||||
<SoilSelector {...props} />
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} />
|
||||
)
|
||||
}
|
||||
|
|
@ -6,6 +6,7 @@ import FormLabel from '@mui/material/FormLabel';
|
|||
import FormControl from '@mui/material/FormControl';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
import Tooltip from '@mui/material/Tooltip';
|
||||
import staticText from '../../../assets/data/staticText.json'
|
||||
|
||||
const WET_SOIL_DESCRIPTION = (<p>
|
||||
Is your ground/soil <strong>VERY WET</strong>? 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 <Tooltip arrow title="Topsoil is the uppermost layer of soil – usually 5-20cm of dark soil with high concentrations of organic matter. Subsoil is the layer under the topsoil and generally contains less organic matter and more of the small particles such as sand, silt and clay that characterize the mineral and geology of the location."><strong>subsoil</strong></Tooltip> is either very dark brown and <Tooltip arrow title="Peat is an accumulation of partially decayed vegetation or organic matter, usually brown and often formed in waterlogged areas."><strong>peat</strong></Tooltip>-like, or grey rather than a red, brown, or yellow rusty colour?
|
||||
|
|
@ -21,7 +22,7 @@ const MESIC_SOIL_DESCRIPTION = (<p>
|
|||
|
||||
export default function SoilSelector(props) {
|
||||
const [value, setValue] = React.useState(props.filters.soilVariant);
|
||||
const [helperText, setHelperText] = React.useState('Please select your soil variant from the options above.');
|
||||
const [helperText, setHelperText] = React.useState(staticText.steps.soil.optionsHelperText);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (props.filters.soilVariant) {
|
||||
|
|
@ -44,7 +45,7 @@ export default function SoilSelector(props) {
|
|||
component="fieldset"
|
||||
variant="standard"
|
||||
>
|
||||
<FormLabel component="legend">Soil Variant Options</FormLabel>
|
||||
<FormLabel component="legend">{staticText.steps.soil.optionsLabel}</FormLabel>
|
||||
<RadioGroup
|
||||
aria-label="soil-varient-selection"
|
||||
name="soil varient selection"
|
||||
|
|
|
|||
29
frontend/src/components/steps/soilvariantstep/SoilStep.js
Normal file
29
frontend/src/components/steps/soilvariantstep/SoilStep.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import Step from '../Step';
|
||||
import SoilSelector from './SoilSelector';
|
||||
import StepInformation from '../StepInformation';
|
||||
import staticText from '../../../assets/data/staticText.json'
|
||||
|
||||
export default function SoilVariantStep(props) {
|
||||
const SOIL_DESCRIPTION = (<p>
|
||||
From your site location, we use <a href="https://soils.landcareresearch.co.nz/describing-soils/nzsc/" target="blank">New Zealand Soil Classification</a> data and additional <a href="https://www.landcareresearch.co.nz" target="blank">Manaaki Whenua Landcare Research</a> 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.
|
||||
<br /><br />
|
||||
Please select an option from the choices listed to the right:
|
||||
</p>)
|
||||
|
||||
const soilVarientInfoPanel = (
|
||||
<StepInformation
|
||||
title={staticText.steps.location.title}
|
||||
description={SOIL_DESCRIPTION}
|
||||
/>
|
||||
)
|
||||
|
||||
const soilVarientSelectionPanel = (
|
||||
<div className='p-5'>
|
||||
<SoilSelector {...props} />
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<Step informationComponent={soilVarientInfoPanel} selectionComponent={soilVarientSelectionPanel} />
|
||||
)
|
||||
}
|
||||
Loading…
Reference in a new issue