@eeacms/volto-arcgis-block 0.1.337 → 0.1.338

package/CHANGELOG.md

@@ -4,6 +4,17 @@ 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.338](https://github.com/eea/volto-arcgis-block/compare/0.1.337...0.1.338) - 18 February 2025
+
+#### :hammer_and_wrench: Others
+
+- CLMS-282421 (feat): Ticket complete [Unai Bolivar - [`7ed8b6d`](https://github.com/eea/volto-arcgis-block/commit/7ed8b6d1a6bfe918b7e7f916ea65f51b031d34a4)]
+- CLMS-282421 (feat): WMS service upload ticket is done. [Unai Bolivar - [`ff4c428`](https://github.com/eea/volto-arcgis-block/commit/ff4c42837bebf2974c1b799df497ede8e7defae4)]
+- CLMS-282421 (feat): WMS service upload is finalized. Styles for widget are done. Working on pop up. [Unai Bolivar - [`d482874`](https://github.com/eea/volto-arcgis-block/commit/d482874f9257ecc51bbd3a76a4c419cbaa1abb5b)]
+- CLMS-282421 (feat): WMS service upload is finalized. Halfway through the finishing touches. [Unai Bolivar - [`4c0b0d1`](https://github.com/eea/volto-arcgis-block/commit/4c0b0d15b8ed9d098032d15717060f21b3cb4585)]
+- CLMS-282421 (feat): WMS service upload is finalized. Need to apply some style corrections. [Unai Bolivar - [`043f786`](https://github.com/eea/volto-arcgis-block/commit/043f786f574a4b742bfe2c87c12ba3ff1480375b)]
+- filled in new script with base structure [Unai Bolivar - [`2b68aa7`](https://github.com/eea/volto-arcgis-block/commit/2b68aa7982a97f44ee0cb4d54988d7773cd440f1)]
+- created new script [Unai Bolivar - [`eb2c984`](https://github.com/eea/volto-arcgis-block/commit/eb2c98424dc7850cd777e942f87e87182071c252)]
 ### [0.1.337](https://github.com/eea/volto-arcgis-block/compare/0.1.336...0.1.337) - 18 February 2025
 
 ### [0.1.336](https://github.com/eea/volto-arcgis-block/compare/0.1.335...0.1.336) - 11 February 2025

package/package.json

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

package/src/components/MapViewer/MapViewer.jsx

@@ -21,6 +21,7 @@ import HotspotWidget from './HotspotWidget';
 import PanWidget from './PanWidget';
 import BookmarkWidget from './BookmarkWidget';
 import LoadingSpinner from './LoadingSpinner';
+import UploadWidget from './UploadWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable';
 //import { getTaxonomy } from '@eeacms/volto-taxonomy/actions';
 
@@ -450,6 +451,17 @@ class MapViewer extends React.Component {
     );
   }
 
+  renderUploadService() {
+    if (this.view)
+      return (
+        <UploadWidget
+          mapviewer_config={this.props.mapviewer_config}
+          view={this.view}
+          map={this.map}
+          mapViewer={this}
+        />
+      );
+  }
   /**
    * This method renders the map viewer, invoking if necessary the methods
    * to render the other widgets to display
@@ -482,6 +494,7 @@ class MapViewer extends React.Component {
             {this.renderMenu()}
             {this.renderBookmark()}
             {this.renderLoadingSpinner()}
+            {this.renderUploadService()}
           </div>
         </div>
       );

package/src/components/MapViewer/UploadWidget.jsx

@@ -0,0 +1,265 @@
+import React, { createRef } from 'react';
+import { loadModules } from 'esri-loader';
+// import { FontAwesomeIcon } from '@eeacms/volto-clms-utils/components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+var WMSLayer;
+
+class UploadWidget extends React.Component {
+  /**
+   * Creator of the Upload widget class
+   * @param {*} props
+   */
+  constructor(props) {
+    super(props);
+    //We create a reference to a DOM element to be mounted
+    this.container = createRef();
+    //Initially, we set the state of the component to
+    //not be showing the basemap panel
+    this.state = {
+      showMapMenu: false,
+      showInfoPopup: false,
+      infoPopupType: '',
+      wmsServiceUrl: '',
+    };
+    this.menuClass =
+      'esri-icon-sketch-rectangle esri-widget--button esri-widget esri-interactive';
+    this.mapviewer_config = this.props.mapviewer_config;
+    this.fileInput = createRef();
+  }
+
+  loader() {
+    return loadModules(['esri/layers/WMSLayer']).then(([_WMSLayer]) => {
+      [WMSLayer] = [_WMSLayer];
+    });
+  }
+
+  /**
+   * 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.props.mapViewer.setActiveWidget();
+      this.container.current.querySelector('.right-panel').style.display =
+        'none';
+      this.container.current.querySelector(
+        '.right-panel-content',
+      ).style.overflowY = 'auto';
+      this.container.current.querySelector(
+        '.right-panel-content',
+      ).style.display = 'none';
+      this.container.current.querySelector(
+        '.right-panel-content',
+      ).style.alignItems = 'none';
+      this.container.current.querySelector('.upload-panel').style.display =
+        'none';
+      this.container.current.querySelector('.upload-panel').style.flexWrap =
+        'none';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.remove('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.remove('show-panel');
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({
+        showMapMenu: false,
+        showInfoPopup: false,
+        infoPopupType: '',
+      });
+      this.clearWidget();
+    } else {
+      this.props.mapViewer.setActiveWidget(this);
+      this.container.current.querySelector('.right-panel').style.display =
+        'flex';
+      this.container.current.querySelector(
+        '.right-panel-content',
+      ).style.overflowY = 'hidden';
+      this.container.current.querySelector(
+        '.right-panel-content',
+      ).style.display = 'flex';
+      this.container.current.querySelector(
+        '.right-panel-content',
+      ).style.alignItems = 'center';
+      this.container.current.querySelector('.upload-panel').style.display =
+        'flex';
+      this.container.current.querySelector('.upload-panel').style.flexWrap =
+        'wrap';
+      this.container.current
+        .querySelector('.esri-widget--button')
+        .classList.add('active-widget');
+      document
+        .querySelector('.esri-ui-top-right.esri-ui-corner')
+        .classList.add('show-panel');
+      // By invoking the setState, we notify the state we want to reach
+      // and ensure that the component is rendered again
+      this.setState({
+        showMapMenu: true,
+        showInfoPopup: false,
+        infoPopupType: '',
+      });
+    }
+  }
+
+  clearWidget() {
+    window.document.querySelector('.pan-container').style.display = 'none';
+    this.props.mapViewer.view.popup.close();
+    const { wmsLayer } = this.state;
+    if (wmsLayer) {
+      this.props.view.map.remove(wmsLayer);
+      // this.props.view.graphics.removeAll();
+    }
+    this.setState({
+      wmsLayer: null,
+      wmsServiceUrl: '',
+    });
+
+    document.querySelector('.esri-attribution__powered-by').style.display =
+      'none';
+  }
+
+  handleWmsServiceUrlChange = (event) => {
+    this.setState({ wmsServiceUrl: event.target.value });
+  };
+
+  handleUploadService = async () => {
+    const { wmsServiceUrl, wmsLayer } = this.state;
+    if (wmsLayer) {
+      this.props.view.map.remove(wmsLayer);
+    }
+
+    try {
+      const newWmsLayer = new WMSLayer({
+        url: wmsServiceUrl,
+      });
+
+      await newWmsLayer.load();
+      this.props.view.map.add(newWmsLayer);
+      this.setState({
+        wmsLayer: newWmsLayer,
+        showInfoPopup: false,
+        infoPopupType: '',
+        wmsServiceUrl: '',
+      });
+    } catch (error) {
+      this.setState({
+        showInfoPopup: true,
+        infoPopupType: 'uploadError',
+        wmsServiceUrl: '',
+      });
+    }
+  };
+  /**
+   * This method is executed after the render method is executed
+   */
+  async componentDidMount() {
+    await this.loader();
+    this.props.view.when(() => {
+      this.container.current !== null &&
+        this.props.view.ui.add(this.container.current, 'top-right');
+    });
+  }
+
+  /**
+   * This method renders the component
+   * @returns jsx
+   */
+  render() {
+    return (
+      <>
+        <div ref={this.container} className="upload-container">
+          <div tooltip="Add Map service" direction="left" type="widget">
+            <div
+              className={this.menuClass}
+              id="map_upload_button"
+              aria-label="WMS service upload"
+              onClick={this.openMenu.bind(this)}
+              onKeyDown={(e) => {
+                if (
+                  !e.altKey &&
+                  e.code !== 'Tab' &&
+                  !e.ctrlKey &&
+                  e.code !== 'Delete' &&
+                  !e.shiftKey &&
+                  !e.code.startsWith('F')
+                ) {
+                  this.openMenu(this);
+                }
+              }}
+              tabIndex="0"
+              role="button"
+            ></div>
+          </div>
+          <div className="right-panel">
+            <div className="right-panel-header">
+              <span>Add map service</span>
+              <span
+                className="map-menu-icon esri-icon-close"
+                onClick={this.openMenu.bind(this)}
+                onKeyDown={(e) => {
+                  if (
+                    !e.altKey &&
+                    e.code !== 'Tab' &&
+                    !e.ctrlKey &&
+                    e.code !== 'Delete' &&
+                    !e.shiftKey &&
+                    !e.code.startsWith('F')
+                  ) {
+                    this.openMenu(this);
+                  }
+                }}
+                tabIndex="0"
+                role="button"
+              ></span>
+            </div>
+            <div className="right-panel-content">
+              <div className="upload-panel">
+                <div className="ccl-form">
+                  <div className="field">
+                    <label>
+                      Map service address
+                      <input
+                        type="text"
+                        placeholder="Add map service URL (https://...)"
+                        value={this.state.wmsServiceUrl}
+                        onChange={this.handleWmsServiceUrlChange}
+                      />
+                    </label>
+                  </div>
+                  <button
+                    className="esri-button"
+                    onClick={this.handleUploadService}
+                  >
+                    Upload service
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          {this.state.showInfoPopup && (
+            <div className="map-container popup-block">
+              <div className="drawRectanglePopup-block">
+                <div className="drawRectanglePopup-content">
+                  {this.state.infoPopupType === 'uploadError' && (
+                    <>
+                      <span className="drawRectanglePopup-icon">
+                        <FontAwesomeIcon icon={['fas', 'info-circle']} />
+                      </span>
+                      <div className="drawRectanglePopup-text">
+                        Error uploading the map service.
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }
+}
+export default UploadWidget;

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

@@ -97,6 +97,10 @@
   order: 7;
 }
 
+.upload-container {
+  order: 8;
+}
+
 /* Basemap */
 .basemap-container {
   display: flex;
@@ -464,6 +468,37 @@ label.ccl-form-radio-label span.nuts-menu-icon {
   color: red;
   font-size: 15px;
 }
+/* WMS Upload */
+div.upload-container.esri-component
+  > div.right-panel
+  > div.right-panel-content {
+  display: unset !important;
+}
+
+.upload-container {
+  display: flex;
+  box-shadow: none !important;
+}
+
+.upload-container input::placeholder {
+  color: #999;
+  font-size: 0.875rem;
+}
+
+.upload-container .esri-button:hover {
+  border: none;
+  background-color: #a0b128;
+}
+
+.upload-container .esri-button {
+  border-color: #a0b128;
+  background-color: white;
+  color: #a0b128;
+}
+
+.upload-panel {
+  display: unset !important;
+}
 /* Left menu */
 .map-menu {
   position: relative;