@eeacms/volto-arcgis-block 0.1.102 → 0.1.103

package/CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.103](https://github.com/eea/volto-arcgis-block/compare/0.1.102...0.1.103) - 21 February 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1810 [Amanda Rodriguez - [`5add6fb`](https://github.com/eea/volto-arcgis-block/commit/5add6fb11971f1cf1d8e3023a30076cda9dcce30)]
+- CLMS-1808 [Amanda Rodriguez - [`16093bb`](https://github.com/eea/volto-arcgis-block/commit/16093bb2fbd2d45405cf2725247b8787e70be545)]
 ### [0.1.102](https://github.com/eea/volto-arcgis-block/compare/0.1.101...0.1.102) - 21 February 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.102",
+  "version": "0.1.103",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/AreaWidget.jsx

@@ -25,7 +25,7 @@ class AreaWidget extends React.Component {
     //not be showing the basemap panel
     this.state = {
       showMapMenu: false,
-      showInfoPopup: false,
+      showInfoPopup: this.props.download ? true : false,
       infoPopupType: 'area',
     };
     this.menuClass =
@@ -181,6 +181,10 @@ class AreaWidget extends React.Component {
           showInfoPopup: true,
           infoPopupType: 'download',
         });
+        if (this.props.download) {
+          document.querySelector('.drawRectanglePopup-block').style.display =
+            'none';
+        }
       } else if (e.action === 'update') {
         if (extentGraphic) this.props.view.graphics.remove(extentGraphic);
         let p = this.props.view.toMap(e);
@@ -218,6 +222,10 @@ class AreaWidget extends React.Component {
     this.setState({
       infoPopupType: 'area',
     });
+    if (this.props.download) {
+      document.querySelector('.drawRectanglePopup-block').style.display =
+        'block';
+    }
   }
   /**
    * This method is executed after the rener method is executed
@@ -264,6 +272,11 @@ class AreaWidget extends React.Component {
                   showInfoPopup: true,
                   infoPopupType: 'download',
                 });
+                if (this.props.download) {
+                  document.querySelector(
+                    '.drawRectanglePopup-block',
+                  ).style.display = 'none';
+                }
               }
             }
           }
@@ -274,6 +287,16 @@ class AreaWidget extends React.Component {
     this.props.download
       ? this.container !== null && this.props.view.ui.add(this.container)
       : this.props.view.ui.add(this.container.current, 'top-right');
+
+    var z = document.createElement('div'); // is a node
+    z.className = 'drawRectanglePopup-block';
+    z.innerHTML =
+      '<div class="drawRectanglePopup-content">' +
+      '<span class="drawRectanglePopup-icon"><span class="esri-icon-cursor-marquee"></span></span>' +
+      '<div class="drawRectanglePopup-text">Select an area of interest to download a dataset</div>' +
+      '</div>';
+
+    this.props.download && this.props.view.ui.add(z, 'top-right');
   }
 
   /**
@@ -415,7 +438,7 @@ class AreaWidget extends React.Component {
               </div>
             </div>
           </div>
-          {this.state.showInfoPopup && (
+          {!this.props.download && this.state.showInfoPopup && (
             <div className="map-container">
               <div className="drawRectanglePopup-block">
                 <div className="drawRectanglePopup-content">

package/src/components/MapViewer/MenuWidget.jsx

@@ -55,21 +55,10 @@ export const AddCartItem = ({
         area = '';
       }
     }
-    if (download) {
-      if (area) {
-        let data = checkCartData(cartData, area);
-        addCartItem(data).then(() => {
-          showMessageTimer('Added to cart', 'success', 'Success');
-        });
-      } else {
-        showMessageTimer('Please select an area', 'warning', 'Warning');
-      }
-    } else {
-      let data = checkCartData(cartData, area, dataset);
-      addCartItem(data).then(() => {
-        showMessageTimer('Added to cart', 'success', 'Success');
-      });
-    }
+    let data = checkCartData(cartData, area, dataset);
+    addCartItem(data).then(() => {
+      showMessageTimer('Added to cart', 'success', 'Success');
+    });
   };
 
   const checkCartData = (cartData, area, dataset) => {
@@ -108,6 +97,7 @@ export const AddCartItem = ({
     mapViewer.view.popup.close();
     mapViewer.view.graphics.removeAll();
     props.updateArea('');
+    document.querySelector('.drawRectanglePopup-block').style.display = 'block';
   };
 
   const showMessageTimer = (msg, type, title) => {
@@ -134,9 +124,8 @@ export const AddCartItem = ({
     return datasetActive ? datasetActive.hasAttribute('time-start') : false;
   };
 
-  let timeData;
-  if (dataset.IsTimeSeries) {
-    timeData = checkTimeData(dataset);
+  if (!dataset) {
+    dataset = cartData[0].Products[0].Datasets[0];
   }
 
   return (
@@ -146,7 +135,25 @@ export const AddCartItem = ({
           <button
             id="map_download_add"
             className="ccl-button ccl-button-green"
-            onClick={() => checkArea()}
+            onClick={(e) => {
+              if (dataset.IsTimeSeries && !checkTimeData(dataset)) {
+                document.getElementById('active_label').click();
+                if (!document.querySelector('.timeslider-container')) {
+                  let layerId = document
+                    .querySelector(
+                      '[datasetid="' + dataset.DatasetId + '"] input',
+                    )
+                    .getAttribute('defcheck');
+                  document
+                    .querySelector(
+                      "[layer-id='" + layerId + "'] .active-layer-time",
+                    )
+                    .click(e);
+                }
+              } else if (areaData) {
+                checkArea(e);
+              }
+            }}
           >
             Add to cart
           </button>
@@ -167,7 +174,7 @@ export const AddCartItem = ({
                 (isLoggedIn ? ' logged' : '')
               }
               onClick={(e) => {
-                if (dataset.IsTimeSeries && !timeData) {
+                if (dataset.IsTimeSeries && !checkTimeData(dataset)) {
                   document.getElementById('active_label').click();
                   if (!document.querySelector('.timeslider-container')) {
                     let layerId = document
@@ -195,7 +202,7 @@ export const AddCartItem = ({
                 }
               }}
               onKeyDown={(e) => {
-                if (dataset.IsTimeSeries && !timeData) {
+                if (dataset.IsTimeSeries && !checkTimeData(dataset)) {
                   document.getElementById('active_label').click();
                   if (!document.querySelector('.timeslider-container')) {
                     let layerId = document
@@ -436,7 +443,13 @@ class MenuWidget extends React.Component {
       if (this.props.download && this.layers) {
         let layerid = Object.keys(this.layers)[0];
 
-        if (layerid && this.layers[layerid].isTimeSeries) {
+        if (
+          layerid &&
+          this.layers[layerid].isTimeSeries &&
+          !this.container.current
+            .querySelector('.esri-widget')
+            .classList.contains('esri-icon-drag-horizontal')
+        ) {
           // select active on map tab
           let event = new MouseEvent('click', {
             view: window,
@@ -448,7 +461,7 @@ class MenuWidget extends React.Component {
 
           //open time slider
           let layerElem = document.getElementById(layerid);
-          this.showTimeSlider(layerElem);
+          this.showTimeSlider(layerElem, true);
         }
       }
   }
@@ -487,7 +500,7 @@ class MenuWidget extends React.Component {
    */
 
   componentDidUpdate(prevProps) {
-    if (this.props !== prevProps) {
+    if (!this.props.download && this.props !== prevProps) {
       let isLoggedIn = document
         .querySelector('[defcheck=' + this.props.elem.id + ']')
         .parentElement.querySelector('.map-menu-icon-login')
@@ -1400,6 +1413,7 @@ class MenuWidget extends React.Component {
       delete this.timeLayers[elem.id];
     }
     this.updateCheckDataset(parentId);
+    //!this.props.download && this.toggleHotspotWidget();
     this.toggleHotspotWidget();
     this.layersReorder();
     this.checkInfoWidget();
@@ -1423,6 +1437,9 @@ class MenuWidget extends React.Component {
   toggleHotspotWidget() {
     let hotspotButton = document.querySelector('#hotspot_button');
     let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
+    if (this.props.download) {
+      checkedLayers = Object.keys(this.activeLayersJSON);
+    }
     checkedLayers.forEach((key) => {
       // if key includes all_present_lc_a_pol or all_lcc_a_pol and if the activeWidget is not the hotspot widget, click on the hotspot button, else close the active widget and set the hotspot container to display to none
       if (

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -28,6 +28,10 @@ class TimesliderWidget extends React.Component {
       dateStart: this.props.time.start ? new Date(this.props.time.start) : null,
       dateEnd: this.props.time.end ? new Date(this.props.time.end) : null,
       periodicity: null,
+      inputStart: this.props.time.start
+        ? new Date(this.props.time.start)
+        : null,
+      inputEnd: this.props.time.end ? new Date(this.props.time.end) : null,
     };
     this.map = this.props.map;
     this.layer = this.props.layer;
@@ -240,7 +244,8 @@ class TimesliderWidget extends React.Component {
           }
           this.setState({
             lockDatePanel: false,
-            showCalendar: this.props.fromDownload ? true : false,
+            showCalendar:
+              this.props.fromDownload || this.props.download ? true : false,
           });
         }
       },
@@ -487,30 +492,40 @@ class TimesliderWidget extends React.Component {
     });
   }
 
+  handleInputChange(e) {
+    if (e.currentTarget.id === 'date_start') {
+      this.setState({ inputStart: e.currentTarget.value });
+    } else if (e.currentTarget.id === 'date_end') {
+      this.setState({ inputEnd: e.currentTarget.value });
+    }
+  }
+
+  formatDate(date) {
+    return new Date(date).toISOString().split('T')[0].toString();
+  }
+
   /**
    * This method renders the component
    * @returns jsx
    */
   render() {
+    let inputStart;
+    let inputEnd;
     let timeStart;
     let timeEnd;
     if (this.state.showCalendar) {
-      timeStart = new Date(
-        this.state.dateStart
-          ? this.state.dateStart
+      inputStart = this.formatDate(
+        this.state.inputStart
+          ? this.state.inputStart
           : this.TimesliderWidget.fullTimeExtent.start,
-      )
-        .toISOString()
-        .split('T')[0]
-        .toString();
-      timeEnd = new Date(
-        this.state.dateEnd
-          ? this.state.dateEnd
+      );
+      inputEnd = this.formatDate(
+        this.state.inputEnd
+          ? this.state.inputEnd
           : this.TimesliderWidget.fullTimeExtent.end,
-      )
-        .toISOString()
-        .split('T')[0]
-        .toString();
+      );
+      timeStart = this.formatDate(this.TimesliderWidget.fullTimeExtent.start);
+      timeEnd = this.formatDate(this.TimesliderWidget.fullTimeExtent.end);
     }
     return (
       <>
@@ -529,7 +544,7 @@ class TimesliderWidget extends React.Component {
           <div className="timeslider-panel"></div>
           {this.state.showDatePanel && (
             <div className="timeslider-calendar-button">
-              {this.props.logged ? (
+              {this.props.logged || this.props.download ? (
                 <button
                   onClick={() => {
                     this.showCalendar();
@@ -586,9 +601,14 @@ class TimesliderWidget extends React.Component {
                   <input
                     type="date"
                     id="date_start"
-                    defaultValue={timeStart}
                     min={timeStart}
-                    max={timeEnd}
+                    max={
+                      Date.parse(inputEnd) < Date.parse(timeEnd)
+                        ? inputEnd
+                        : timeEnd
+                    }
+                    value={inputStart}
+                    onChange={(e) => this.handleInputChange(e)}
                   />
                 </div>
                 <div className="timeslider-calendar-row">
@@ -596,9 +616,14 @@ class TimesliderWidget extends React.Component {
                   <input
                     type="date"
                     id="date_end"
-                    defaultValue={timeEnd}
-                    min={timeStart}
+                    min={
+                      Date.parse(inputStart) > Date.parse(timeStart)
+                        ? inputStart
+                        : timeStart
+                    }
                     max={timeEnd}
+                    value={inputEnd}
+                    onChange={(e) => this.handleInputChange(e)}
                   />
                 </div>
                 <button

package/src/components/MapViewer/css/ArcgisMap.css

@@ -1224,6 +1224,16 @@ input[type='range']::-ms-track {
   font-size: 0.875rem;
 }
 
+.esri-component.drawRectanglePopup-block {
+  margin: 0 !important;
+}
+
+.esri-component .drawRectanglePopup-content {
+  top: 0;
+  right: -450px;
+  transform: translate(-50vw, 0);
+}
+
 /* Hotspot*/
 .hotspot-container {
   display: none;