@eeacms/volto-arcgis-block 0.1.117 → 0.1.119

package/CHANGELOG.md

@@ -4,6 +4,20 @@ 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.119](https://github.com/eea/volto-arcgis-block/compare/0.1.118...0.1.119) - 22 March 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1886 (bug):Works well on custom map [Urkorue - [`81a9d1d`](https://github.com/eea/volto-arcgis-block/commit/81a9d1d5beccbfa71b3a2b8bf19f66996aba3c16)]
+- CLMS-1886 (bug):Opacities work well with filtered layers [Urkorue - [`97ba87b`](https://github.com/eea/volto-arcgis-block/commit/97ba87bd861bc802bd5a062c5bb196cc01debd27)]
+### [0.1.118](https://github.com/eea/volto-arcgis-block/compare/0.1.117...0.1.118) - 22 March 2023
+
+#### :hammer_and_wrench: Others
+
+- CLMS-1969 [Amanda Rodriguez - [`fbab554`](https://github.com/eea/volto-arcgis-block/commit/fbab55460cb65c7c2099e09334415cf50763b209)]
+- CLMS-1967 [Amanda Rodriguez - [`ccacbb3`](https://github.com/eea/volto-arcgis-block/commit/ccacbb3e68e3e5895bd2cab23c8159ae2594e809)]
+- CLMS-1966 [Amanda Rodriguez - [`15fe77d`](https://github.com/eea/volto-arcgis-block/commit/15fe77d2fa6cb490144370165f655d3d485a036c)]
+- CLMS-1965 [Amanda Rodriguez - [`4d1a829`](https://github.com/eea/volto-arcgis-block/commit/4d1a829cf6fafc838ad2c0079282c954e5323251)]
 ### [0.1.117](https://github.com/eea/volto-arcgis-block/compare/0.1.116...0.1.117) - 21 March 2023
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -293,7 +293,7 @@ class AreaWidget extends React.Component {
     popup.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 class="drawRectanglePopup-text">Select or draw an area of interest in the map to continue</div>' +
       '</div>';
     this.props.download && this.props.view.ui.add(popup, 'top-right');
   }
@@ -447,7 +447,8 @@ class AreaWidget extends React.Component {
                         <span className="esri-icon-cursor-marquee"></span>
                       </span>
                       <div className="drawRectanglePopup-text">
-                        Select an area of interest to download a dataset
+                        Select or draw an area of interest in the map to
+                        continue
                       </div>
                     </>
                   )}
@@ -457,8 +458,8 @@ class AreaWidget extends React.Component {
                         <FontAwesomeIcon icon={['fas', 'download']} />
                       </span>
                       <div className="drawRectanglePopup-text">
-                        Click on the download icon of the "Menu of products" to
-                        download the dataset
+                        Click on the download icon on “Products and datasets” to
+                        add to cart
                       </div>
                     </>
                   )}

package/src/components/MapViewer/MenuWidget.jsx

@@ -58,6 +58,16 @@ export const AddCartItem = ({
     let data = checkCartData(cartData, area, dataset);
     addCartItem(data).then(() => {
       showMessageTimer('Added to cart', 'success', 'Success');
+      if (dataset.IsTimeSeries) {
+        let id = dataset.DatasetId;
+        let datasetElem = document.querySelector('[datasetid="' + id + '"]');
+        let datasetInput = document.querySelector(
+          '#active_' +
+            datasetElem.querySelector('.map-menu-layer input:checked').id,
+        );
+        datasetInput.removeAttribute('time-start');
+        datasetInput.removeAttribute('time-end');
+      }
     });
   };
 
@@ -91,11 +101,16 @@ export const AddCartItem = ({
     return data;
   };
 
-  const downloadCancel = (mapViewer) => {
-    mapViewer.view.popup.close();
-    mapViewer.view.graphics.removeAll();
-    props.updateArea('');
-    document.querySelector('.drawRectanglePopup-block').style.display = 'block';
+  const openCalendar = (dataset) => {
+    document.getElementById('active_label').click();
+    if (!document.querySelector('.timeslider-container')) {
+      let layerId = document.querySelector(
+        '[datasetid="' + dataset.DatasetId + '"] .map-menu-layer input:checked',
+      ).id;
+      document
+        .querySelector("[layer-id='" + layerId + "'] .active-layer-time")
+        .click();
+    }
   };
 
   const showMessageTimer = (msg, type, title) => {
@@ -170,13 +185,15 @@ export const AddCartItem = ({
           >
             Add to cart
           </button>
-          <button
-            id="map_download_cancel"
-            className="ccl-button ccl-button--default"
-            onClick={() => downloadCancel(mapViewer)}
-          >
-            Cancel
-          </button>
+          {dataset.IsTimeSeries && (
+            <button
+              id="map_download_cancel"
+              className="ccl-button ccl-button--default"
+              onClick={() => openCalendar(dataset)}
+            >
+              Open calendar
+            </button>
+          )}
         </div>
       ) : isLoggedIn ? ( // If isLoggedIn == true and user clicks download
         <Popup
@@ -1917,6 +1934,7 @@ class MenuWidget extends React.Component {
               }}
               tabIndex="0"
               role="button"
+              data-download={fromDownload ? true : false}
             >
               <Popup
                 trigger={<FontAwesomeIcon icon={this.timeLayers[elem.id]} />}
@@ -2201,10 +2219,30 @@ class MenuWidget extends React.Component {
           document
             .querySelector('#map_remove_layers')
             .classList.remove('locked');
-          if (this.props.download)
+          if (this.props.download) {
             document
               .querySelector('#download_label')
               .classList.remove('locked');
+            if (
+              document.querySelector(
+                '.active-layer[layer-id="' +
+                  elem.id +
+                  '"] .map-menu-icon.active-layer-time',
+              ).dataset.download === 'true'
+            ) {
+              document.getElementById('download_label').click();
+            }
+          } else {
+            if (
+              document.querySelector(
+                '.active-layer[layer-id="' +
+                  elem.id +
+                  '"] .map-menu-icon.active-layer-time',
+              ).dataset.download === 'true'
+            ) {
+              document.getElementById('products_label').click();
+            }
+          }
           if (
             document.contains(document.querySelector('.timeslider-container'))
           )
@@ -2312,8 +2350,16 @@ class MenuWidget extends React.Component {
     //     ).dataset.opacity = value;
     //   });
     // } else {
-    this.layers[layer].opacity = value / 100;
-    this.saveOpacity(layer, value / 100);
+    if (this.layers['lcc_filter'] && layer.includes('all_lcc')) {
+      this.layers['lcc_filter'].opacity = value / 100;
+      this.saveOpacity(this.layers['lcc_filter'], value / 100);
+    } else if (this.layers['lc_filter'] && layer.includes('all_present')) {
+      this.layers['lc_filter'].opacity = value / 100;
+      this.saveOpacity(this.layers['lc_filter'], value / 100);
+    } else {
+      this.layers[layer].opacity = value / 100;
+      this.saveOpacity(this.layer, value / 100);
+    }
     document.querySelector(
       '.active-layer[layer-id="' + layer + '"] .active-layer-opacity',
     ).dataset.opacity = value;
@@ -2381,9 +2427,24 @@ class MenuWidget extends React.Component {
     if (this.visibleLayers[elem.id][1] === 'eye') {
       this.layers[elem.id].visible = false;
       this.visibleLayers[elem.id] = ['fas', 'eye-slash'];
+      if (this.layers['lcc_filter'] && elem.id.includes('all_lcc')) {
+        this.map.remove(this.layers['lcc_filter']);
+        this.layers['lcc_filter'].visible = false;
+      } else if (this.layers['lc_filter'] && elem.id.includes('all_present')) {
+        this.map.remove(this.layers['lc_filter']);
+        this.layers['lc_filter'].visible = false;
+      }
     } else {
-      this.map.add(this.layers[elem.id]);
-      this.layers[elem.id].visible = true;
+      if (this.layers['lcc_filter'] && elem.id.includes('all_lcc')) {
+        this.map.add(this.layers['lcc_filter']);
+        this.layers['lcc_filter'].visible = true;
+      } else if (this.layers['lc_filter'] && elem.id.includes('all_present')) {
+        this.map.add(this.layers['lc_filter']);
+        this.layers['lc_filter'].visible = true;
+      } else {
+        this.map.add(this.layers[elem.id]);
+        this.layers[elem.id].visible = true;
+      }
       this.visibleLayers[elem.id] = ['fas', 'eye'];
     }
 

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -269,6 +269,13 @@ class TimesliderWidget extends React.Component {
       .querySelector('#timeslider_close')
       .addEventListener('click', () => {
         this.props.time.elem.querySelector('.active-layer-time').click();
+        if (this.props.fromDownload) {
+          if (this.props.download) {
+            document.getElementById('download_label').click();
+          } else {
+            document.getElementById('products_label').click();
+          }
+        }
       });
 
     this.props.view