Create zone segment selection step

This commit is contained in:
Dana Lambert 2021-11-05 14:30:40 +13:00
parent c79d287384
commit f92bb7290c
3 changed files with 81 additions and 5 deletions

View file

@ -26,3 +26,16 @@
margin-top: 1rem;
}
}
.selectable-section {
height: 100%;
}
.selectable-section:hover {
background-color: #ffffff55;
cursor: pointer;
}
.selected-segment {
background-color: #eeeeee55;
}

View file

@ -1,12 +1,71 @@
import { useEffect } from 'react';
import { useEffect, useState } from 'react';
import SampleBackground from '../../../assets/img/sample-bg.jpg';
import SiteRepository from '../../../repository/SiteRepository';
export default function ZoneSelector(props) {
useEffect(() => {
const [habitatImageObject, setHabitatImageObject] = useState({});
const [habitatImageFile, setHabitatImageFile] = useState(SampleBackground);
const [selectedZoneSegment, setZoneSegment] = useState(null);
const getHabitatImage = () => {
SiteRepository.getHabitatImage(props.filters.habitatImage).then(response => {
if (response.status === 200) {
const imageData = response.data
setHabitatImageObject(imageData)
setHabitatImageFile(require(`../../../assets/img/habitats/${imageData.image_filename}`).default)
}
})
}
const setZone = (zoneSegment) => {
setZoneSegment(zoneSegment)
props.setNextDisabled(false);
}
useEffect(() => {
// Retrieves the habitat image from the api if they are not loaded already
Object.keys(habitatImageObject).length === 0 && getHabitatImage()
// Temporarily bypass if there is no image available
if (props.filters.zone || !props.filters.habitatImage) {
setZone(props.filters.zone)
}
});
const stepBackground = {
backgroundImage: `url(${habitatImageFile})`,
backgroundSize: '100% auto',
height: '100%',
width: '100%',
display: 'flex'
}
const selectZone = (zoneSegment) => {
// Update the filters for the selected zone and enable the next button
setZone(zoneSegment)
props.updateFilterState({ "zone": zoneSegment.zone });
};
return (
<h2>Zone Selector</h2>
<div style={{ height: '80%', width: '100%' }}>
<p>{habitatImageObject && habitatImageObject.name}</p>
{Object.keys(habitatImageObject).length === 0 ? (
// Sample segment selector (temporary if no image is available)
<div style={stepBackground}>
<div className='selectable-section' style={{ width: '50%', height: '100%' }}></div>
<div className='selectable-section' style={{ width: '20%', height: '100%' }}></div>
<div className='selectable-section' style={{ width: '30%', height: '100%' }}></div>
</div>) :
// Actual zone selector
(<div style={stepBackground}>
{habitatImageObject && habitatImageObject.image_segments && Array.isArray(habitatImageObject.image_segments) && habitatImageObject.image_segments.map(segment =>
<div onClick={() => { selectZone(segment) }} className={`selectable-section ${selectedZoneSegment == segment.zone ? 'selected-segment' : ''}`} style={{ width: `${segment.segment_percentage_width}%`, height: '100%' }}></div>
)}
</div>
)}
</div>
)
}

View file

@ -4,6 +4,10 @@ const SiteRepository = {
getHabitats() {
return Repository.get(`/habitats/`);
},
getHabitatImage(habitatImageID) {
return Repository.get(`/habitatimage/${habitatImageID}/`);
}
}