@eeacms/volto-arcgis-block 0.1.105 → 0.1.107

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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.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
+
+- ES Lint fix [Amanda Rodriguez - [`9499122`](https://github.com/eea/volto-arcgis-block/commit/9499122e63fe162d5d7e0308d0847bf55a237d51)]
 ### [0.1.105](https://github.com/eea/volto-arcgis-block/compare/0.1.104...0.1.105) - 22 February 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/MenuWidget.jsx

@@ -394,76 +394,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 +561,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;
   }
 
   /**
@@ -1882,10 +1960,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);

package/src/components/MapViewer/config.js

@@ -1,7 +1,7 @@
 const config = {
   Map: {
     div: 'mapDiv',
-    center: [5, 52],
+    center: [-15, 35],
     zoom: 3,
     minZoom: 3,
     maxZoom: 20,

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

@@ -1195,8 +1195,6 @@ input[type='range']::-ms-track {
 /*Draw rectangle popup*/
 
 .drawRectanglePopup-content {
-  /*margin-right: calc(100vw - 250px);
-  margin-top: -8rem;*/
   position: absolute;
   display: flex;
   width: 19rem;
@@ -1204,7 +1202,6 @@ input[type='range']::-ms-track {
   justify-content: space-between;
   padding: 0.6rem 0.8rem 0.8rem 0.8rem;
   background-color: white;
-  transform: translate(-34vw, -214%);
 }
 
 .drawRectanglePopup-content .drawRectanglePopup-icon {
@@ -1215,20 +1212,20 @@ input[type='range']::-ms-track {
   text-decoration: none;
 }
 
-/*.drawRectanglePopup-icon .svg{
-  margin-top: 0.6rem;
-}*/
-
 .drawRectanglePopup-text {
   font-family: 'Lato', sans-serif;
   font-size: 0.875rem;
 }
 
+.area-container .drawRectanglePopup-content {
+  transform: translate(-34vw, -214%);
+}
+
 .esri-component.drawRectanglePopup-block {
   margin: 0 !important;
 }
 
-.esri-component .drawRectanglePopup-content {
+.esri-component.drawRectanglePopup-block .drawRectanglePopup-content {
   top: 0;
   right: -450px;
   transform: translate(-50vw, 0);