@eeacms/volto-arcgis-block 0.1.106 → 0.1.108

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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
+
+- SPRINT-42 FIX: Display timeslider and calendar is user logs in after selecting a layer's timeslider function [ujbolivar - [`b554678`](https://github.com/eea/volto-arcgis-block/commit/b554678ed043043f50d4010424eacb709e91e80c)]
 ### [0.1.106](https://github.com/eea/volto-arcgis-block/compare/0.1.105...0.1.106) - 23 February 2023
 
 #### :hammer_and_wrench: Others

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.106",
+  "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",
@@ -394,76 +390,136 @@ class MenuWidget extends React.Component {
     this.setState({ noServiceModal: true });
   };
 
+  getCookie(name) {
+    var dc = document.cookie;
+    var prefix = name + '=';
+    var begin = dc.indexOf('; ' + prefix);
+    if (begin === -1) {
+      begin = dc.indexOf(prefix);
+      if (begin !== 0) return null;
+    } else {
+      begin += 2;
+      var end = document.cookie.indexOf(';', begin);
+      if (end === -1) {
+        end = dc.length;
+      }
+    }
+    return decodeURI(dc.substring(begin + prefix.length, end));
+  }
+
   /**
    * Method that will be invoked when the
    * button is clicked. It controls the open
    * and close actions of the component
    */
   openMenu() {
-    if (this.state.showMapMenu) {
-      this.container.current.querySelector('#tabcontainer').style.display =
-        'none';
-      this.container.current.querySelector('#paneles').style.display = 'none';
-      this.container.current
-        .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-close', 'esri-icon-drag-horizontal');
-      if (document.contains(document.querySelector('.timeslider-container'))) {
-        document.querySelector('.timeslider-container').style.display = 'none';
+    setTimeout(() => {
+      if (this.state.showMapMenu) {
+        this.container.current.querySelector('#tabcontainer').style.display =
+          'none';
+        this.container.current.querySelector('#paneles').style.display = 'none';
+        this.container.current
+          .querySelector('.esri-widget--button')
+          .classList.replace('esri-icon-close', 'esri-icon-drag-horizontal');
+        if (
+          document.contains(document.querySelector('.timeslider-container'))
+        ) {
+          document.querySelector('.timeslider-container').style.display =
+            'none';
+        }
+        if (
+          document.querySelector('.opacity-panel').style.display === 'block'
+        ) {
+          this.closeOpacity();
+        }
+
+        // By invoking the setState, we notify the state we want to reach
+        // and ensure that the component is rendered again
+        this.setState({ showMapMenu: false });
+      } else {
+        this.container.current.querySelector('#tabcontainer').style.display =
+          'block';
+        this.container.current.querySelector('#paneles').style.display =
+          'block';
+        this.container.current
+          .querySelector('.esri-widget--button')
+          .classList.replace('esri-icon-drag-horizontal', 'esri-icon-close');
+        if (document.contains(document.querySelector('.timeslider-container')))
+          document.querySelector('.timeslider-container').style.display =
+            'block';
+
+        // By invoking the setState, we notify the state we want to reach
+        // and ensure that the component is rendered again
+        this.setState({ showMapMenu: true });
       }
-      if (document.querySelector('.opacity-panel').style.display === 'block') {
-        this.closeOpacity();
+      if (this.loadFirst) {
+        this.checkUrl();
+        this.loadFirst = false;
+        this.zoomTooltips();
       }
 
-      // By invoking the setState, we notify the state we want to reach
-      // and ensure that the component is rendered again
-      this.setState({ showMapMenu: false });
-    } else {
-      this.container.current.querySelector('#tabcontainer').style.display =
-        'block';
-      this.container.current.querySelector('#paneles').style.display = 'block';
-      this.container.current
-        .querySelector('.esri-widget--button')
-        .classList.replace('esri-icon-drag-horizontal', 'esri-icon-close');
-      if (document.contains(document.querySelector('.timeslider-container')))
-        document.querySelector('.timeslider-container').style.display = 'block';
-
-      // By invoking the setState, we notify the state we want to reach
-      // and ensure that the component is rendered again
-      this.setState({ showMapMenu: true });
-    }
-    if (this.loadFirst) {
-      this.checkUrl();
-      this.loadFirst = false;
-      this.zoomTooltips();
-    }
+      let authToken = this.getAuthToken();
+      let timeSliderTag = this.getTimeSliderTag();
+      let checkedLayers = JSON.parse(sessionStorage.getItem('checkedLayers'));
 
-    // CLMS-1389
-    // "Active on map" section and the time slider opened by default if download and timeseries == true
-    if (this.layers)
-      if (this.props.download && this.layers) {
-        let layerid = Object.keys(this.layers)[0];
+      // "Active on map" section and the time slider opened by default if user is logged in and timeSliderTag is true
 
-        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,
-            bubbles: true,
-            cancelable: false,
-          });
-          let el = document.getElementById('active_label');
-          el.dispatchEvent(event);
-
-          //open time slider
-          let layerElem = document.getElementById(layerid);
-          this.showTimeSlider(layerElem, true);
+      if (checkedLayers) {
+        if (authToken && timeSliderTag) {
+          for (let i = 0; i < checkedLayers.length; i++) {
+            let layerid = checkedLayers[i];
+            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,
+                bubbles: true,
+                cancelable: false,
+              });
+              let el = document.getElementById('active_label');
+              el.dispatchEvent(event);
+
+              //open time slider
+              let layerElem = document.getElementById(layerid);
+              this.showTimeSlider(layerElem, true);
+              break;
+            }
+          }
         }
       }
+      // CLMS-1389
+      // "Active on map" section and the time slider opened by default if download and timeseries == true
+
+      if (this.layers)
+        if (this.props.download && this.layers) {
+          let layerid = Object.keys(this.layers)[0];
+          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,
+              bubbles: true,
+              cancelable: false,
+            });
+            let el = document.getElementById('active_label');
+            el.dispatchEvent(event);
+
+            //open time slider
+            let layerElem = document.getElementById(layerid);
+            this.showTimeSlider(layerElem, true);
+          }
+        }
+    }, 1000);
   }
 
   /**
@@ -501,8 +557,26 @@ class MenuWidget extends React.Component {
 
   setSliderTag(val) {
     if (!sessionStorage.key('timeSliderTag'))
-      sessionStorage.setItem('timeSliderTag', 'false');
-    sessionStorage.setItem('timeSliderTag', val);
+      sessionStorage.setItem('timeSliderTag', 'true');
+    else sessionStorage.setItem('timeSliderTag', val);
+  }
+
+  getAuthToken() {
+    let tokenResult = null;
+    if (this.getCookie('auth_token')) {
+      tokenResult = true;
+    } else {
+      tokenResult = false;
+    }
+    return tokenResult;
+  }
+
+  getTimeSliderTag() {
+    let tagResult = true;
+    if (!sessionStorage.key('timeSliderTag')) {
+      tagResult = false;
+    }
+    return tagResult;
   }
 
   /**
@@ -850,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;
@@ -1102,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;
@@ -1882,10 +1956,10 @@ class MenuWidget extends React.Component {
   showTimeSlider(elem, fromDownload) {
     if (
       sessionStorage.key('timeSliderTag') &&
-      sessionStorage.getItem('timeSliderTag') === 'false'
+      sessionStorage.getItem('timeSliderTag') === 'true'
     )
-      this.setSliderTag(true);
-    else this.setSliderTag(false);
+      this.setSliderTag(false);
+    else this.setSliderTag(true);
     let activeLayers = document.querySelectorAll('.active-layer');
     let group = this.getGroup(elem);
     let groupLayers = this.getGroupLayers(group);
@@ -1980,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;
@@ -2406,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';
@@ -2438,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>