@eeacms/volto-arcgis-block 0.1.107 → 0.1.108

package/CHANGELOG.md

@@ -4,6 +4,14 @@ 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.108](https://github.com/eea/volto-arcgis-block/compare/0.1.107...0.1.108) - 27 February 2023
+
+#### :hammer_and_wrench: Others
+
+- Delete comment [Amanda Rodriguez - [`873a594`](https://github.com/eea/volto-arcgis-block/commit/873a594332908ee6d39dfbbc2239a06455a9ebc6)]
+- CLMS-1831 [Amanda Rodriguez - [`0df846a`](https://github.com/eea/volto-arcgis-block/commit/0df846a7fce73e2d6b395b26677175702cc49b36)]
+- CLMS-1843 [Amanda Rodriguez - [`839a331`](https://github.com/eea/volto-arcgis-block/commit/839a331049cf47d396300c2825eef6666e159609)]
+- Time slider bug fix [Amanda Rodriguez - [`d383ee3`](https://github.com/eea/volto-arcgis-block/commit/d383ee38625ee2a528e07babf65340717aab9034)]
 ### [0.1.107](https://github.com/eea/volto-arcgis-block/compare/0.1.106...0.1.107) - 23 February 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/MenuWidget.jsx

@@ -78,9 +78,7 @@ export const AddCartItem = ({
       if (hasTimeStart) {
         let datasetInput = document.querySelector(
           '#active_' +
-            datasetElem
-              .querySelector('.map-dataset-checkbox input')
-              .getAttribute('defcheck'),
+            datasetElem.querySelector('.map-menu-layer input:checked').id,
         );
         let time = {
           start: parseInt(datasetInput.getAttribute('time-start')),
@@ -117,9 +115,7 @@ export const AddCartItem = ({
     let datasetElem = document.querySelector('[datasetid="' + id + '"]');
     let datasetActive = document.querySelector(
       '#active_' +
-        datasetElem
-          .querySelector('.map-dataset-checkbox input')
-          .getAttribute('defcheck'),
+        datasetElem.querySelector('.map-menu-layer input:checked').id,
     );
     return datasetActive ? datasetActive.hasAttribute('time-start') : false;
   };
@@ -139,11 +135,11 @@ export const AddCartItem = ({
               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');
+                  let layerId = document.querySelector(
+                    '[datasetid="' +
+                      dataset.DatasetId +
+                      '"] .map-menu-layer input:checked',
+                  ).id;
                   document
                     .querySelector(
                       "[layer-id='" + layerId + "'] .active-layer-time",
@@ -177,11 +173,11 @@ export const AddCartItem = ({
                 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');
+                    let layerId = document.querySelector(
+                      '[datasetid="' +
+                        dataset.DatasetId +
+                        '"] .map-menu-layer input:checked',
+                    ).id;
                     document
                       .querySelector(
                         "[layer-id='" + layerId + "'] .active-layer-time",
@@ -205,11 +201,11 @@ export const AddCartItem = ({
                 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');
+                    let layerId = document.querySelector(
+                      '[datasetid="' +
+                        dataset.DatasetId +
+                        '"] .map-menu-layer input:checked',
+                    ).id;
                     document
                       .querySelector(
                         "[layer-id='" + layerId + "'] .active-layer-time",
@@ -928,7 +924,7 @@ class MenuWidget extends React.Component {
    */
   updateCheckProduct(productid) {
     let datasetChecks = Array.from(
-      document.querySelectorAll('[parentid=' + productid + ']'),
+      document.querySelectorAll('[parentid="' + productid + '"]'),
     );
     let productCheck = document.querySelector('#' + productid);
     let trueCheck = datasetChecks.filter((elem) => elem.checked).length;
@@ -1180,7 +1176,7 @@ class MenuWidget extends React.Component {
   updateCheckDataset(id) {
     let datasetCheck = document.querySelector('#' + id);
     let layerChecks = Array.from(
-      document.querySelectorAll('[parentid=' + id + ']'),
+      document.querySelectorAll('[parentid="' + id + '"]'),
     );
 
     let trueChecks = layerChecks.filter((elem) => elem.checked).length;
@@ -2058,6 +2054,9 @@ class MenuWidget extends React.Component {
             ReactDOM.unmountComponentAtNode(
               document.querySelector('.esri-ui-bottom-right'),
             );
+          if (document.querySelector('.drawRectanglePopup-block'))
+            document.querySelector('.drawRectanglePopup-block').style.display =
+              'block';
         } else {
           if (this.visibleLayers[layerId][1] === 'eye-slash') {
             this.layers[layerId].visible = true;
@@ -2484,7 +2483,14 @@ class MenuWidget extends React.Component {
       hotspotLayers.length === 0 &&
       document.querySelector('.hotspot-container')
     ) {
-      this.props.mapViewer.closeActiveWidget();
+      if (
+        this.props.mapViewer.activeWidget &&
+        this.props.mapViewer.activeWidget.container.current.classList.contains(
+          'hotspot-container',
+        )
+      ) {
+        this.props.mapViewer.closeActiveWidget();
+      }
       document.querySelector('.hotspot-container').style.display = 'none';
     } else if (this.props.view && hotspotLayers.length > 0) {
       document.querySelector('.hotspot-container').style.display = 'flex';
@@ -2516,14 +2522,12 @@ class MenuWidget extends React.Component {
         time.start = parseInt(activeLayer.getAttribute('time-start'));
         time.end = parseInt(activeLayer.getAttribute('time-end'));
       }
-      let isLoggedIn = document
-        .querySelector('[defcheck=' + elem.id + ']')
-        .parentElement.querySelector('.map-menu-icon-login')
-        .classList.contains('logged');
+      let isLoggedIn = document.querySelector('.map-menu-icon-login.logged');
       ReactDOM.render(
         <TimesliderWidget
           view={this.props.view}
           map={this.map}
+          mapViewer={this.props.mapViewer}
           layer={layer}
           download={this.props.download}
           time={time}

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -24,7 +24,8 @@ class TimesliderWidget extends React.Component {
       timeSelectedValuesC: [], //To compare time slider stored values with new selected values
       showDatePanel: false,
       lockDatePanel: true,
-      showCalendar: false,
+      showCalendar:
+        this.props.fromDownload || this.props.download ? true : false,
       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,
@@ -43,6 +44,13 @@ class TimesliderWidget extends React.Component {
       this.layerName = this.layer.activeLayer.id; //WMTS
     }
     this.drag = {};
+    if (
+      this.props.fromDownload &&
+      document.querySelector('.drawRectanglePopup-block')
+    ) {
+      document.querySelector('.drawRectanglePopup-block').style.display =
+        'none';
+    }
   }
 
   loader() {
@@ -244,8 +252,6 @@ class TimesliderWidget extends React.Component {
           }
           this.setState({
             lockDatePanel: false,
-            showCalendar:
-              this.props.fromDownload || this.props.download ? true : false,
           });
         }
       },
@@ -297,6 +303,7 @@ class TimesliderWidget extends React.Component {
 
           this.getCapabilities(this.layer.url, serviceType).then((xml) => {
             let times = {};
+            let periodicity;
             if (this.layer.type === 'wms') {
               times = this.parseTimeWMS(xml);
             } else if (this.layer.type === 'wmts') {
@@ -326,6 +333,8 @@ class TimesliderWidget extends React.Component {
                     unit: 'minutes',
                   },
                 };
+
+                periodicity = times[this.layerName].period;
               } else if (times[this.layerName].hasOwnProperty('array')) {
                 // Dates array
                 this.TimesliderWidget.fullTimeExtent = new TimeExtent({
@@ -350,19 +359,20 @@ class TimesliderWidget extends React.Component {
                     timeDict[time[i]] = times[this.layerName].array[i];
                   }
                 }
-              }
 
-              let periodicity = Math.floor(
-                (Date.parse(times[this.layerName].array[1]) -
-                  Date.parse(times[this.layerName].array[0])) /
-                  86400000,
-              );
-              if (periodicity === 0) {
-                periodicity =
-                  (new Date(times[this.layerName].array[1]).getHours() -
-                    new Date(times[this.layerName].array[0]).getHours()) /
-                  24;
+                periodicity = Math.floor(
+                  (Date.parse(times[this.layerName].array[1]) -
+                    Date.parse(times[this.layerName].array[0])) /
+                    86400000,
+                );
+                if (periodicity === 0) {
+                  periodicity =
+                    (new Date(times[this.layerName].array[1]).getHours() -
+                      new Date(times[this.layerName].array[0]).getHours()) /
+                    24;
+                }
               }
+
               this.setState({ periodicity: periodicity });
 
               this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
@@ -415,17 +425,17 @@ class TimesliderWidget extends React.Component {
 
   getPeriodicity() {
     let period = this.state.periodicity;
-    if (period === 1 / 24) {
+    if (period === 1 / 24 || period === 'PT1H') {
       return 'hourly';
-    } else if (period === 1) {
+    } else if (period === 1 || period === 'P1D') {
       return 'daily';
-    } else if (period === 7) {
+    } else if (period === 7 || period === 'P7D' || period === 'P1W') {
       return 'weekly';
-    } else if (period === 10) {
+    } else if (period === 10 || period === 'P10D') {
       return '10-daily';
-    } else if (period >= 28 && period <= 31) {
+    } else if ((period >= 28 && period <= 31) || period === 'P1M') {
       return 'monthly';
-    } else if (period === 365 || period === 366) {
+    } else if (period === 365 || period === 366 || period === 'P1Y') {
       return 'yearly';
     } else {
       return 'not regular';
@@ -490,6 +500,18 @@ class TimesliderWidget extends React.Component {
       dateEnd: end,
       showCalendar: false,
     });
+    if (this.props.fromDownload) {
+      this.props.time.elem.querySelector('.active-layer-time').click();
+      document.getElementById('products_label').click();
+      if (
+        this.props.mapViewer.activeWidget &&
+        !this.props.mapViewer.activeWidget.container.current.classList.contains(
+          'area-container',
+        )
+      ) {
+        document.getElementById('map_area_button').click();
+      }
+    }
   }
 
   handleInputChange(e) {
@@ -513,7 +535,7 @@ class TimesliderWidget extends React.Component {
     let inputEnd;
     let timeStart;
     let timeEnd;
-    if (this.state.showCalendar) {
+    if (!this.state.lockDatePanel && this.state.showCalendar) {
       inputStart = this.formatDate(
         this.state.inputStart
           ? this.state.inputStart
@@ -573,7 +595,7 @@ class TimesliderWidget extends React.Component {
               )}
             </div>
           )}
-          {this.state.showCalendar && (
+          {!this.state.lockDatePanel && this.state.showCalendar && (
             <div className="timeslider-calendar-container">
               <div className="timeslider-calendar-header">
                 <b>Select temporal interval to download</b>