@eeacms/volto-arcgis-block 0.1.372 → 0.1.374

package/CHANGELOG.md

@@ -4,6 +4,13 @@ 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.374](https://github.com/eea/volto-arcgis-block/compare/0.1.373...0.1.374) - 9 July 2025
+
+### [0.1.373](https://github.com/eea/volto-arcgis-block/compare/0.1.372...0.1.373) - 8 July 2025
+
+#### :hammer_and_wrench: Others
+
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`fa8e13d`](https://github.com/eea/volto-arcgis-block/commit/fa8e13da184b9a9146cb65aca7a89c05fb0261ba)]
 ### [0.1.372](https://github.com/eea/volto-arcgis-block/compare/0.1.371...0.1.372) - 26 June 2025
 
 #### :hammer_and_wrench: Others

package/Jenkinsfile

@@ -9,7 +9,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-arcgis-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,clms.land.copernicus.eu,water.europa.eu-freshwater,clmsdemo.devel6cph.eea.europa.eu,land.copernicus.eu,ask.copernicus.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,water.europa.eu-freshwater,clmsdemo.devel6cph.eea.europa.eu,land.copernicus.eu,ask.copernicus.eu"
         DEPENDENCIES = ""
         BACKEND_PROFILES = "eea.kitkat:testing"
         BACKEND_ADDONS = "clms.addon,clms.types,clms.downloadtool,clms.statstool"

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -230,6 +230,11 @@ class AreaWidget extends React.Component {
       });
       this.props.uploadFileHandler(true);
     }
+    if (id === 'coordinates') {
+      document.querySelector('.coordinateWindow').style.display = 'block';
+    } else {
+      document.querySelector('.coordinateWindow').style.display = 'none';
+    }
   }
   nuts0handler(e) {
     this.loadNutsService(e.target.value, [0]);
@@ -986,6 +991,90 @@ class AreaWidget extends React.Component {
     });
     this.nutsRadioButton(event.target.value);
   }
+  addCoordinates() {
+    this.clearWidget();
+    let pointNorth = !isNaN(document.getElementById('menu-north').value)
+      ? Number(document.getElementById('menu-north').value)
+      : 0;
+    let pointSouth = !isNaN(document.getElementById('menu-south').value)
+      ? Number(document.getElementById('menu-south').value)
+      : 0;
+    let pointEast = !isNaN(document.getElementById('menu-east').value)
+      ? Number(document.getElementById('menu-east').value)
+      : 0;
+    let pointWest = !isNaN(document.getElementById('menu-west').value)
+      ? Number(document.getElementById('menu-west').value)
+      : 0;
+    let pointNE = [pointNorth, pointEast];
+    let pointSW = [pointSouth, pointWest];
+    var fillSymbol = {
+      type: 'simple-fill',
+      color: [255, 255, 255, 0.5],
+      outline: {
+        color: [0, 0, 0],
+        width: 1,
+      },
+    };
+    let extentGraphic = new Graphic({
+      geometry: new Extent({
+        xmin: Math.min(pointNE[1], pointSW[1]),
+        xmax: Math.max(pointNE[1], pointSW[1]),
+        ymin: Math.min(pointNE[0], pointSW[0]),
+        ymax: Math.max(pointNE[0], pointSW[0]),
+        spatialReference: { wkid: 4326 },
+      }),
+      symbol: fillSymbol,
+    });
+    let outSpatialReference = new SpatialReference({
+      wkid: 102100,
+    });
+    let graphicProjection = projection.project(
+      extentGraphic.geometry,
+      outSpatialReference,
+    );
+    if (extentGraphic && this.checkExtent(graphicProjection)) {
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'fullDataset',
+      });
+      this.props.uploadFileHandler(true);
+    } else {
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'download',
+      });
+      this.props.uploadFileHandler(true);
+    }
+    this.props.updateArea({
+      origin: {
+        x: extentGraphic.geometry.xmin,
+        y: extentGraphic.geometry.ymin,
+      },
+      end: { x: extentGraphic.geometry.xmax, y: extentGraphic.geometry.ymax },
+    });
+    this.props.view.graphics.add(extentGraphic);
+  }
+  openCoordinates(event) {
+    this.clearWidget();
+    this.nutsRadioButton(event.target.value);
+  }
+  closeCoordinates() {
+    if (
+      document.querySelector('.coordinateContainer').style.display === 'none'
+    ) {
+      document.querySelector('.coordinateContainer').style.display = 'block';
+      document.querySelector('.coordinateWindow').style.height = '13rem';
+      document
+        .querySelector('.closeCoordinates')
+        .classList.replace('esri-icon-up-arrow', 'esri-icon-close');
+    } else {
+      document.querySelector('.coordinateContainer').style.display = 'none';
+      document.querySelector('.coordinateWindow').style.height = '2rem';
+      document
+        .querySelector('.closeCoordinates')
+        .classList.replace('esri-icon-close', 'esri-icon-up-arrow');
+    }
+  }
   clearWidget() {
     window.document.querySelector('.pan-container').style.display = 'none';
     this.props.mapViewer.view.popup.close();
@@ -1272,7 +1361,7 @@ class AreaWidget extends React.Component {
                   </fieldset>
                 </div>
                 <div className="area-header">
-                  Area selection options for custom download:
+                  Area selection for custom download:
                 </div>
                 <div className="area-header2">
                   <div className="area-dot">·</div>
@@ -1436,6 +1525,27 @@ class AreaWidget extends React.Component {
                         </label>
                       </div>
                     </div>
+                    <div className="ccl-form-group">
+                      <div className="rectangle-block">
+                        <div className="area-dot">·</div>
+                        <input
+                          type="radio"
+                          id="download_area_select_coordinates"
+                          name="downloadAreaSelect"
+                          value="coordinates"
+                          className="ccl-radio ccl-required ccl-form-check-input area-radio"
+                          onClick={this.openCoordinates.bind(this)}
+                        ></input>
+                        <label
+                          className="ccl-form-radio-label"
+                          htmlFor="download_area_select_coordinates"
+                        >
+                          <span className="coordinates-header">
+                            Add coordinates
+                          </span>
+                        </label>
+                      </div>
+                    </div>
                   </fieldset>
                 </div>
                 <div className="area-header2">
@@ -1461,9 +1571,7 @@ class AreaWidget extends React.Component {
                   >
                     <div className="field">
                       <label className="file-upload">
-                        <span>
-                          File formats supported: shp(zip), geojson, CSV
-                        </span>
+                        <span>Valid formats: shp, geojson, CSV</span>
                         <input
                           type="file"
                           name="file"
@@ -1629,6 +1737,85 @@ class AreaWidget extends React.Component {
             </div>
           )}
         </div>
+        <div className="coordinateWindow">
+          <div className="coordinateHeader">
+            Add new coordinates
+            <div
+              className="esri-icon-close esri-interactive closeCoordinates"
+              onClick={this.closeCoordinates.bind(this)}
+              onKeyDown={this.closeCoordinates.bind(this)}
+              tabIndex="0"
+              role="button"
+            ></div>
+          </div>
+          <div className="coordinateContainer">
+            <div className="coordinateSubContainer">
+              <div className="coordinateSubContainerTitle">NE</div>
+              <div>
+                Lat:
+                <input
+                  type="text"
+                  id="menu-north"
+                  maxLength="9"
+                  placeholder="00.000000"
+                  className="coordinateInput"
+                />
+              </div>
+              <div>
+                Lon:
+                <input
+                  type="text"
+                  id="menu-east"
+                  maxLength="9"
+                  placeholder="00.000000"
+                  className="coordinateInput"
+                />
+              </div>
+            </div>
+            <div className="coordinateSubContainer">
+              <div className="coordinateSubContainerTitle">SW</div>
+              <div>
+                Lat:
+                <input
+                  type="text"
+                  id="menu-south"
+                  maxLength="9"
+                  placeholder="00.000000"
+                  className="coordinateInput"
+                />
+              </div>
+              <div>
+                Lon:
+                <input
+                  type="text"
+                  id="menu-west"
+                  maxLength="9"
+                  placeholder="00.000000"
+                  className="coordinateInput"
+                />
+              </div>
+            </div>
+            <button
+              aria-label="Search"
+              className="button menu-search-button-coordinatess"
+              onClick={() => this.addCoordinates()}
+              onKeyDown={(e) => {
+                if (
+                  !e.altKey &&
+                  e.code !== 'Tab' &&
+                  !e.ctrlKey &&
+                  e.code !== 'Delete' &&
+                  !e.shiftKey &&
+                  !e.code.startsWith('F')
+                ) {
+                  this.addCoordinates();
+                }
+              }}
+            >
+              Add this area to the map
+            </button>
+          </div>
+        </div>
       </>
     );
   }

package/src/components/MapViewer/MenuWidget.jsx

@@ -49,7 +49,7 @@ export const AddCartItem = ({
     let check = document.querySelector('.area-panel input:checked')?.value;
     let fileUpload = sessionStorage.getItem('fileUploadLayer') ? true : false;
     let area = {};
-    if (check === 'area' || fileUpload) {
+    if (check === 'area' || fileUpload || check === 'coordinates') {
       let graphics = mapViewer.view.graphics;
       if (graphics.length === 0) {
         area = '';
@@ -100,7 +100,7 @@ export const AddCartItem = ({
     let isMapServer = dataset?.ViewService?.toLowerCase().endsWith('/mapserver')
       ? true
       : false;
-    if (check === 'area' || fileUpload) {
+    if (check === 'area' || fileUpload || check === 'coordinates') {
       areaExtent = new Extent({
         xmin: Math.min(areaData?.end?.x, areaData?.origin?.x),
         xmax: Math.max(areaData?.end?.x, areaData?.origin?.x),

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

@@ -468,6 +468,75 @@ label.ccl-form-radio-label span.nuts-menu-icon {
   color: red;
   font-size: 15px;
 }
+
+.coordinateWindow {
+  position: absolute;
+  right: 23rem;
+  bottom: 2rem;
+  display: none;
+  width: 23rem;
+  height: 13rem;
+  background-color: white;
+}
+
+.coordinateHeader {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem;
+  background-color: #a0b128;
+  color: white;
+}
+
+.closeCoordinates {
+  width: 1.4rem;
+  height: 1.4rem;
+  padding: 0.2rem;
+  margin-right: 0.2rem;
+}
+
+.closeCoordinates:hover {
+  background-color: #7c8921;
+}
+
+.coordinateContainer {
+  display: block;
+  padding-right: 1rem;
+  padding-left: 1rem;
+  margin-top: 1rem;
+}
+
+.coordinateSubContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 2rem;
+  margin-right: 0.5rem;
+  margin-left: 0.3rem;
+}
+
+.coordinateSubContainerTitle {
+  width: 1rem;
+}
+
+.menu-search-button-coordinatess {
+  padding: 0.2rem;
+  padding-right: 0.7rem;
+  padding-left: 0.7rem;
+  border: none;
+  margin-top: 1.5rem;
+  margin-left: 8.5rem;
+  background-color: #a0b128;
+  color: white;
+}
+
+.coordinateInput {
+  width: 6rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: #a0b128 !important;
+  margin-left: 0.5rem;
+}
+
 /* WMS Upload */
 div.upload-container.esri-component
   > div.right-panel