diff --git a/frontend/src/assets/styles/step.scss b/frontend/src/assets/styles/step.scss index a1a03e7..88d8e9d 100644 --- a/frontend/src/assets/styles/step.scss +++ b/frontend/src/assets/styles/step.scss @@ -25,4 +25,17 @@ .MuiTablePagination-selectLabel { margin-top: 1rem; } -} \ No newline at end of file +} + +.selectable-section { + height: 100%; +} + +.selectable-section:hover { + background-color: #ffffff55; + cursor: pointer; +} + +.selected-segment { + background-color: #eeeeee55; +} diff --git a/frontend/src/components/steps/zone/ZoneSelector.js b/frontend/src/components/steps/zone/ZoneSelector.js index 4b2128c..4899afe 100644 --- a/frontend/src/components/steps/zone/ZoneSelector.js +++ b/frontend/src/components/steps/zone/ZoneSelector.js @@ -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 ( -
{habitatImageObject && habitatImageObject.name}
+ {Object.keys(habitatImageObject).length === 0 ? ( + // Sample segment selector (temporary if no image is available) +