From 2603a3300b5ee7165524c9f3a89b6843c5011e77 Mon Sep 17 00:00:00 2001 From: jonnvega <47796239+jonnvega@users.noreply.github.com> Date: Tue, 3 Oct 2023 12:27:22 +0200 Subject: [PATCH 01/19] add buttons --- src/js/imagery/collectionMenuControls.jsx | 53 +++++++++++++++++++++-- 1 file changed, 50 insertions(+), 3 deletions(-) diff --git a/src/js/imagery/collectionMenuControls.jsx b/src/js/imagery/collectionMenuControls.jsx index 288c433ac..e1af380cf 100644 --- a/src/js/imagery/collectionMenuControls.jsx +++ b/src/js/imagery/collectionMenuControls.jsx @@ -3,6 +3,7 @@ import React from "react"; import Select from "../components/Select"; import { mercator } from "../utils/mercator"; import { monthlyMapping } from "../utils/generalUtils"; +import SvgIcon from "../components/svg/SvgIcon"; export class PlanetMenu extends React.Component { constructor(props) { @@ -193,6 +194,8 @@ export class PlanetNICFIMenu extends React.Component { selectedTime: this.props.sourceConfig.time, selectedBand: this.props.sourceConfig.band, nicfiLayers: [], + isDisabledLeft: false, + isDisabledRight: true }; } @@ -201,10 +204,22 @@ export class PlanetNICFIMenu extends React.Component { this.getNICFILayers(); } - componentDidUpdate(prevProps) { + componentDidUpdate(prevProps, prevState) { if (this.props.visible && prevProps.visible !== this.props.visible) { this.updateImageryInformation(); } + + if (prevState.selectedTime !== this.state.selectedTime) { + this.setState((state) => { + const { nicfiLayers, selectedTime } = state; + const index = nicfiLayers.indexOf(selectedTime); + + return { + isDisabledLeft: index >= nicfiLayers.length - 1, + isDisabledRight: index <= 0 + } + }) + } } getNICFILayers = () => { @@ -231,6 +246,21 @@ export class PlanetNICFIMenu extends React.Component { } }; + switchImagery = (direction) => { + this.setState((prevState) => { + const { nicfiLayers, selectedTime } = prevState; + const currentIndex = nicfiLayers.indexOf(selectedTime); + + const move = direction === "forward" ? -1 : 1; + const newIndex = currentIndex + move; + + // Check boundary conditions + if (newIndex < 0 || newIndex >= nicfiLayers.length) return {}; + + return { selectedTime: nicfiLayers[newIndex] }; + }); + } + updatePlanetLayer = () => { this.updateImageryInformation(); mercator.updateLayerSource( @@ -250,14 +280,15 @@ export class PlanetNICFIMenu extends React.Component { return ( nicfiLayers.length > 0 && (
-
-