Add habitat selection and habitat image selection
This commit is contained in:
Dana Lambert
parent
71b4118b4c
commit
316df45784
2 changed files with 122 additions and 6 deletions
|
|
@ -12,7 +12,9 @@
|
|||
},
|
||||
"habitat": {
|
||||
"title": "Habitat Selection",
|
||||
"description": "We now need to specify the type of environment that characterizes your site. Please select one of the options to the right."
|
||||
"description": "We now need to specify the type of environment that characterizes your site. Please select one of the options to the right.",
|
||||
"optionsLabel": "Habitat Options",
|
||||
"imageOptionsLabel": "Image Variations"
|
||||
},
|
||||
"zone": {
|
||||
"title": "Zone Selection",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,126 @@
|
|||
import { useEffect } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import SiteRepository from '../../../repository/SiteRepository';
|
||||
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 staticText from '../../../assets/data/staticText.json'
|
||||
|
||||
export default function HabitatSelector(props) {
|
||||
const [habitats, setHabitats] = useState([])
|
||||
const [habitatsMap, setHabitatsMap] = useState({})
|
||||
const [value, setValue] = React.useState(props.filters.habitat && props.filters.habitat.id);
|
||||
const [selectedHabitat, setSelectedHabitat] = React.useState({});
|
||||
const [imageValue, setImageValue] = React.useState(props.filters.habitatImage);
|
||||
|
||||
const getHabitats = () => {
|
||||
SiteRepository.getHabitats().then(response => {
|
||||
if (response.status === 200) {
|
||||
// Create a mapping from the habitat id to the object
|
||||
let habitatsJson = {}
|
||||
response.data.forEach(habitat => {
|
||||
habitatsJson[habitat.id] = habitat
|
||||
})
|
||||
setHabitats(response.data);
|
||||
setHabitatsMap(habitatsJson);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// Retrieves the habitats from the api if they are not loaded already
|
||||
habitats.length === 0 && getHabitats()
|
||||
|
||||
// Sets the selected habitat if its already set in filters
|
||||
if (props.filters.habitat && props.filters.habitat.id) {
|
||||
setSelectedHabitat(habitatsMap[props.filters.habitat.id])
|
||||
}
|
||||
|
||||
// If both the habitat and the image is selected, then enable the next step
|
||||
if (props.filters.habitat && props.filters.habitatImage) {
|
||||
props.setNextDisabled(false);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<h2>Habitat Selector</h2>
|
||||
)
|
||||
const setHabitatImage = (imageId) => {
|
||||
// Sets the selected image radio, updates filter state for image and enable the next button
|
||||
setImageValue(imageId);
|
||||
props.updateFilterState({ "habitatImage": imageId });
|
||||
props.setNextDisabled(false);
|
||||
}
|
||||
|
||||
const handleRadioChange = (event) => {
|
||||
// Retrieve and set the value of the radio button
|
||||
const habitatSelection = event.target.value;
|
||||
setValue(habitatSelection);
|
||||
|
||||
// Set the image default selection if there is only one image variation available
|
||||
const habitatObject = habitatsMap[habitatSelection]
|
||||
setSelectedHabitat(habitatObject)
|
||||
if (habitatObject.images.length === 1) {
|
||||
setHabitatImage(habitatObject.images[0].id)
|
||||
}
|
||||
|
||||
// Update the filters for the selected habitat
|
||||
props.updateFilterState({ "habitat": habitatObject });
|
||||
};
|
||||
|
||||
const handleImageRadioChange = (event) => {
|
||||
const habitatImageSelection = event.target.value;
|
||||
setHabitatImage(habitatImageSelection)
|
||||
};
|
||||
|
||||
const getImageLabel = (image) => {
|
||||
return (
|
||||
<div>
|
||||
<p>{image.name}</p>
|
||||
<img src={require(`../../../assets/img/habitats/${image.image_filename}`).default} style={{ "width": "300px" }} />
|
||||
</div>)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='d-flex align-top justify-space-between'>
|
||||
<form >
|
||||
<FormControl
|
||||
sx={{ m: 3 }}
|
||||
component="fieldset"
|
||||
variant="standard"
|
||||
>
|
||||
<FormLabel component="legend">{staticText.steps.habitat.optionsLabel}</FormLabel>
|
||||
<RadioGroup
|
||||
aria-label="habitat-selection"
|
||||
name="habitat selection"
|
||||
value={value ?? ""}
|
||||
onChange={handleRadioChange}
|
||||
>
|
||||
{habitats && Array.isArray(habitats) && habitats.map(habitat =>
|
||||
<FormControlLabel key={habitat.id} value={habitat.id} control={<Radio />} label={habitat.name} />
|
||||
)}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</form>
|
||||
<form >
|
||||
<FormControl
|
||||
sx={{ m: 3 }}
|
||||
component="fieldset"
|
||||
variant="standard"
|
||||
>
|
||||
<FormLabel component="legend">{staticText.steps.habitat.imageOptionsLabel}</FormLabel>
|
||||
<RadioGroup
|
||||
aria-label="habitat-image-selection"
|
||||
name="habitat image selection"
|
||||
value={imageValue ?? ""}
|
||||
onChange={handleImageRadioChange}
|
||||
>
|
||||
{selectedHabitat && selectedHabitat.images && Array.isArray(selectedHabitat.images) && selectedHabitat.images.map(image =>
|
||||
<FormControlLabel key={image.id} value={image.id} control={<Radio />} label={getImageLabel(image)} sx={{ paddingTop: '15px', paddingBottom: '15px' }} />
|
||||
)}
|
||||
{(!selectedHabitat || (selectedHabitat.images && selectedHabitat.images.length === 0)) && <p>No images available.</p>}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue