Adjusted chart mode date picker to display 1 or 2 pickers based on ch…

…art mode (date or range)
nasa-gibs · Jul 25, 2023 · e0b1e1e · e0b1e1e
1 parent 735c441
commit e0b1e1e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 17 deletions.
diff --git a/web/js/components/charting/charting-date-selector.js b/web/js/components/charting/charting-date-selector.js
@@ -2,19 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import DateRangeSelector from '../date-selector/date-range-selector';
+import DateSelector from '../date-selector/date-selector';
 import {
   changeChartingStartDate,
   changeChartingEndDate,
 } from '../../modules/charting/actions';
-// import { offsetLineStringStyle } from '../../modules/vector-styles/util';
 
 function ChartingDateSelector (props) {
   const {
-    onUpdateStartDate, onUpdateEndDate, timeSpanStartDate, timeSpanEndDate, date, layerStartDate, layerEndDate,
+    onUpdateStartDate, onUpdateEndDate, timeSpanStartDate, timeSpanEndDate, timeSpanSelection, date, layerStartDate, layerEndDate,
   } = props;
-  // console.log(`layerStartDate: ${layerStartDate}`);
-  // console.log(`layerEndDate: ${layerEndDate}`);
-
   const { selected, selectedB } = date;
   const startdate = timeSpanStartDate == null ? selected : timeSpanStartDate;
   const endDate = timeSpanEndDate == null ? selectedB : timeSpanEndDate;
@@ -33,18 +30,41 @@ function ChartingDateSelector (props) {
     }
   }
 
+  function onSingleDateChange(newStartDate) {
+    if (newStartDate !== timeSpanStartDate) {
+      onUpdateStartDate(newStartDate);
+    }
+  }
+
   return (
     <div className="charting-date-container">
-      <DateRangeSelector
-        idSuffix="charting-date-picker"
-        startDate={validStartDate}
-        endDate={validEndDate}
-        setDateRange={onDateChange}
-        minDate={layerStartDate}
-        maxDate={layerEndDate}
-        subDailyMode={false}
-        isDisabled={false}
-      />
+      {/* single date mode */}
+      {timeSpanSelection === 'date'
+        ? (
+          <DateSelector
+            idSuffix="charting-date-picker"
+            date={validStartDate}
+            onDateChange={onSingleDateChange}
+            maxDate={layerEndDate}
+            minDate={layerStartDate}
+            subDailyMode={false}
+            isDisabled={false}
+            isEndDate
+          />
+        )
+        : (
+          <DateRangeSelector
+            idSuffix="charting-date-picker"
+            startDate={validStartDate}
+            endDate={validEndDate}
+            setDateRange={onDateChange}
+            minDate={layerStartDate}
+            maxDate={layerEndDate}
+            subDailyMode={false}
+            isDisabled={false}
+          />
+        )}
+
     </div>
   );
 }
@@ -74,6 +94,7 @@ ChartingDateSelector.propTypes = {
   onUpdateStartDate: PropTypes.func,
   onUpdateEndDate: PropTypes.func,
   date: PropTypes.object,
+  timeSpanSelection: PropTypes.string,
 };
 
 export default connect(

diff --git a/web/js/components/sidebar/charting-mode-options.js b/web/js/components/sidebar/charting-mode-options.js
@@ -363,7 +363,7 @@ function ChartingModeOptions (props) {
     const layerInfo = getActiveChartingLayer();
     const layerStartDate = new Date(layerInfo.dateRanges[0].startDate);
     const layerEndDate = new Date(layerInfo.dateRanges[layerInfo.dateRanges.length - 1].endDate);
-    openChartingDateModal({ layerStartDate, layerEndDate });
+    openChartingDateModal({ layerStartDate, layerEndDate }, timeSpanSelection);
   }
 
   const aoiTextPrompt = aoiSelected ? 'Area of Interest Selected' : 'Select Area of Interest';
@@ -504,7 +504,7 @@ const mapDispatchToProps = (dispatch) => ({
       }),
     );
   },
-  openChartingDateModal: (dateObj) => {
+  openChartingDateModal: (dateObj, timeSpanSelection) => {
     dispatch(
       openCustomContent('CHARTING_DATE_MODAL', {
         headerText: 'Charting Mode Date Selection',
@@ -515,6 +515,7 @@ const mapDispatchToProps = (dispatch) => ({
         bodyComponentProps: {
           layerStartDate: dateObj.layerStartDate,
           layerEndDate: dateObj.layerEndDate,
+          timeSpanSelection,
         },
       }),
     );