Create zone segment selection step

frontend/src/assets/styles/step.scss

@@ -25,4 +25,17 @@
     .MuiTablePagination-selectLabel {
         margin-top: 1rem;
     }
-}
+}
+
+.selectable-section {
+    height: 100%;
+}
+
+.selectable-section:hover {
+    background-color: #ffffff55;
+    cursor: pointer;
+}
+
+.selected-segment {
+    background-color: #eeeeee55;
+}

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 (
-        <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>
     )
 }

frontend/src/repository/SiteRepository.js

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