lightweight/right-tree
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Add redirect demo

Browse source
This commit is contained in:
Dana Lambert 2021-11-11 13:26:04 +13:00 • committed by Alistair McIntyre
parent f5629f1def
commit 044f7c78ea
8 changed files with 70 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

27
frontend/src/components/steps/zone/ZoneSelector.js
View file

@ -25,8 +25,17 @@ export default function ZoneSelector(props) {
})
}
const setZone = (zoneSegment) => {
setZoneSegment(zoneSegment)
const setZoneOrRedirect = (zoneSegment) => {
const redirectHabitat = zoneSegment && zoneSegment.zone && zoneSegment.zone.redirect_habitat;
setZoneSegment(zoneSegment);
if (redirectHabitat) {
props.updateFilterState({ "habitat": { "id": redirectHabitat.id, "name": redirectHabitat.name } });
props.setRedirectBack(true)
} else {
props.updateFilterState({ "zone": zoneSegment.zone });
}
props.setNextDisabled(false);
}
@ -39,15 +48,15 @@ export default function ZoneSelector(props) {
setImageHeight(newHeight);
}
// Retrieves the habitat image from the api if they are not loaded already
// Retrieves the habitat image from the api if it's not loaded already
Object.keys(habitatImageObject).length === 0 && getHabitatImage(findAndSetImageHeight)
// Sets the image height such that the full image always displays on page resize
window.addEventListener("resize", () => findAndSetImageHeight(habitatImageFile), false);
// Temporarily bypass if there is no image available
if (props.filters.zone || !props.filters.habitatImage) {
setZone(props.filters.zone)
if (props.filters.zone || !props.filters.habitatImage || (habitatImageObject && habitatImageObject.image_segments)) {
props.setNextDisabled(false);
}
});
@ -61,12 +70,6 @@ export default function ZoneSelector(props) {
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 (
<div ref={imageContainer} style={{ width: '100%' }}>
<p>{habitatImageObject && habitatImageObject.name}</p>
@ -80,7 +83,7 @@ export default function ZoneSelector(props) {
// Actual zone selector
(<div style={stepBackground}>
{habitatImageObject && habitatImageObject.image_segments && Array.isArray(habitatImageObject.image_segments) && habitatImageObject.image_segments.map(segment =>
<div key={segment.id} onClick={() => { selectZone(segment) }} className={`selectable-section ${selectedZoneSegment === segment.zone ? 'selected-segment' : ''}`} style={{ width: `${segment.segment_percentage_width}%`, height: '100%' }}></div>
<div key={segment.id} onClick={() => { setZoneOrRedirect(segment) }} className={`selectable-section ${selectedZoneSegment === segment ? 'selected-segment' : ''}`} style={{ width: `${segment.segment_percentage_width}%`, height: '100%' }}></div>
)}
</div>
)}