@eeacms/volto-n2k 0.1.1

package/src/components/manage/Blocks/ExploreSpecies/View.jsx

@@ -0,0 +1,177 @@
+import React, { useState, useEffect } from 'react';
+import { Message, Container } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import Map from '@eeacms/volto-openlayers-map/Map';
+import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
+import { Controls } from '@eeacms/volto-openlayers-map/Controls';
+import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
+import { openlayers } from '@eeacms/volto-openlayers-map';
+import { getActiveSpeciesURL } from './index';
+import './style.less';
+
+const View = (props) => {
+  const [options, setOptions] = React.useState({});
+  const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSource, setTileWMSSource] = useState(null);
+  const { extent, format, proj, style, source } = openlayers;
+
+  const { results = [], payload = {} } = props.search || {};
+
+  const activePageResults = results.filter((_, index) => {
+    return (
+      index >= (payload?.activePage - 1) * payload?.row_size &&
+      index <= payload?.activePage * payload?.row_size - 1
+    );
+  });
+
+  useEffect(() => {
+    if (__SERVER__) return;
+    setVectorSource(new source.Vector());
+    setTileWMSSource(
+      new source.TileWMS({
+        extent: [
+          -3690067.3068000004,
+          3129776.6937999986,
+          3858418.0045999996,
+          1.1124223900300004e7,
+        ],
+        url:
+          'https://bio.discomap.eea.europa.eu/arcgis/services/Article17/HabitatsDirective_ART_17_WMS_version_2020_08_public/MapServer/WmsServer',
+        params: { LAYERS: '7', TILED: true },
+        serverType: 'geoserver',
+        // Countries have transparency, so do not fade tiles:
+        transition: 0,
+      }),
+    );
+    /* eslint-disable-next-line */
+  }, []);
+
+  useEffect(() => {
+    if (__SERVER__ || !vectorSource) {
+      return;
+    }
+
+    if (activePageResults.length === 0 && vectorSource) {
+      vectorSource.clear();
+      setOptions({
+        ...options,
+        extent: new extent.buffer(
+          [
+            -3690067.3068000004,
+            3129776.6937999986,
+            3858418.0045999996,
+            1.1124223900300004e7,
+          ],
+          -3690067.3068000004 * 0.01,
+        ),
+      });
+      return;
+    }
+
+    const esrijsonFormat = new format.EsriJSON();
+
+    // Get species of active page
+    fetch(
+      getActiveSpeciesURL(
+        activePageResults.map((item) => `'${item.code_2000}'`),
+      ),
+    ).then(function (response) {
+      if (response.status !== 200) return;
+
+      vectorSource.clear();
+
+      response.json().then(function (data) {
+        if (data.features && data.features.length > 0) {
+          const features = esrijsonFormat.readFeatures(data);
+          if (features.length > 0) {
+            vectorSource.addFeatures(features);
+            const vectorExtent = vectorSource.getExtent();
+            let size = extent.getSize(vectorExtent);
+            setOptions({
+              ...options,
+              extent: new extent.buffer(vectorExtent, size[0] * 0.03),
+            });
+          }
+        }
+      });
+    });
+    /* eslint-disable-next-line */
+  }, [JSON.stringify(activePageResults)]);
+
+  if (__SERVER__ || !vectorSource) return '';
+  return (
+    <div className="explore-species-wrapper full-width">
+      <div className="explore-species">
+        <Map
+          view={{
+            center: proj.fromLonLat([20, 50]),
+            showFullExtent: true,
+            zoom: 5,
+          }}
+          {...options}
+        >
+          <Layers>
+            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSource} zIndex={1} />
+            <Layer.Vector
+              source={vectorSource}
+              title="highlightLayer"
+              style={
+                new style.Style({
+                  fill: new style.Fill({
+                    color: 'rgba(255,255,255,0.4)',
+                  }),
+                  stroke: new style.Stroke({
+                    color: '#04A77D',
+                    // color: '#F8E473',
+                    width: 3,
+                  }),
+                  image: new style.Circle({
+                    radius: 5,
+                    fill: new style.Fill({ color: 'rgba(4, 167, 125,0.6)' }),
+                    // fill: new style.Fill({ color: 'rgba(248,228,115,0.6)' }),
+                    stroke: new style.Stroke({
+                      color: 'rgba(242, 180, 87, 1)',
+                      width: 2,
+                    }),
+                  }),
+                })
+              }
+              zIndex={2}
+            />
+          </Layers>
+          <Controls attribution={true} zoom={false} />
+          <Interactions
+            doubleClickZoom={true}
+            dragAndDrop={false}
+            dragPan={true}
+            keyboardPan={true}
+            keyboardZoom={true}
+            mouseWheelZoom={true}
+            pointer={false}
+            select={false}
+          />
+        </Map>
+      </div>
+      <Container className="map-info-notice">
+        <Message style={{ color: '#3B7f02' }}>
+          <p>
+            The designations employed and the presentation of material on this
+            map do not imply the expression of any opinion whatsoever on the
+            part of the European Union concerning the legal status of any
+            country, territory, city or area or of its authorities, or
+            concerning the delimitation of its frontiers or boundaries.
+          </p>
+          <p>
+            <strong>Note:</strong> When you perform a search we will highlight
+            only the results available on the active page of the results table.
+          </p>
+        </Message>
+      </Container>
+    </div>
+  );
+};
+
+export default connect((state) => ({
+  search: state.table_search || {},
+}))(View);

package/src/components/manage/Blocks/ExploreSpecies/index.js

@@ -0,0 +1,24 @@
+import ExploreSpeciesEdit from './Edit';
+import ExploreSpeciesView from './View';
+
+import worldSVG from '@plone/volto/icons/world.svg';
+
+export function getActiveSpeciesURL(site_codes) {
+  return encodeURI(
+    `https://bio.discomap.eea.europa.eu/arcgis/rest/services/Article17/HabitatsDirective_ART_17_WMS_version_2020_08_public/MapServer/3/query?f=json&where=speciescode IN (${site_codes.join(
+      ',',
+    )})&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=OBJECTID,speciescode&outSR=102100`,
+  );
+}
+
+export default (config) => {
+  config.blocks.blocksConfig.explore_species_map = {
+    id: 'explore_species_map',
+    title: 'Explore species map',
+    icon: worldSVG,
+    group: 'natura_2000',
+    edit: ExploreSpeciesEdit,
+    view: ExploreSpeciesView,
+  };
+  return config;
+};

package/src/components/manage/Blocks/ExploreSpecies/schema.js

@@ -0,0 +1,15 @@
+export default {
+  title: 'Explore species map',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [],
+    },
+  ],
+
+  properties: {},
+
+  required: [],
+};

package/src/components/manage/Blocks/ExploreSpecies/style.less

@@ -0,0 +1,15 @@
+div#view .ui.container > .explore-species-wrapper,
+div#view .ui.container > .explore-species {
+  margin-bottom: 0;
+}
+
+.explore-species {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0;
+  background-color: #f8f8f8;
+
+  &.visible.transition {
+    display: flex !important;
+  }
+}

package/src/components/manage/Blocks/HabitatClassification/View.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { UniversalLink } from '@plone/volto/components';
+import './style.less';
+
+const View = (props) => {
+  const provider_data = props.provider_data || {};
+  const { habitat_code = [], level = [], scientific_name = [] } = provider_data;
+  const rows = habitat_code?.length || 0;
+
+  return (
+    <div className="habitat-classification">
+      {props.mode === 'edit' ? <p>Habitat classification</p> : ''}
+      {Array(Math.max(0, rows))
+        .fill()
+        .map((_, row) => (
+          <p
+            key={`classification-${scientific_name[row]}`}
+            className={`level-${level[row]}`}
+            style={{ marginLeft: `${level[row] - 1}rem` }}
+          >
+            <UniversalLink href="#">
+              {habitat_code[row]}. {scientific_name[row]}
+            </UniversalLink>
+          </p>
+        ))}
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/HabitatClassification/index.js

@@ -0,0 +1,17 @@
+import HabitatClassification from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      habitat_classification: {
+        view: HabitatClassification,
+        getSchema: getSchema,
+        title: 'Habitat classification',
+      },
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/HabitatClassification/schema.js

@@ -0,0 +1,19 @@
+const getSchema = (props) => {
+  return {
+    title: 'Habitat classification',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;

package/src/components/manage/Blocks/HabitatClassification/style.less

@@ -0,0 +1,3 @@
+// .habitat-classification {
+
+// }

package/src/components/manage/Blocks/HabitatDistribution/View.jsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import { Message, Container } from 'semantic-ui-react';
+import Map from '@eeacms/volto-openlayers-map/Map';
+import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
+import { Controls } from '@eeacms/volto-openlayers-map/Controls';
+import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
+import { openlayers } from '@eeacms/volto-openlayers-map';
+import { getHabitatDistributionURL } from './index';
+import './style.less';
+
+const View = (props) => {
+  const [options, setOptions] = React.useState({});
+  const [vectorSource, setVectorSource] = useState(null);
+  const { extent, format, proj, style, source } = openlayers;
+  const provider_data = props.provider_data || {};
+  const { code_2000 = [] } = provider_data;
+
+  useEffect(() => {
+    if (__SERVER__) return;
+    setVectorSource(new source.Vector());
+    /* eslint-disable-next-line */
+  }, []);
+
+  useEffect(() => {
+    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    const esrijsonFormat = new format.EsriJSON();
+    // Get habitat location on sites
+    fetch(getHabitatDistributionURL(code_2000[0])).then(function (response) {
+      if (response.status !== 200) return;
+      response.json().then(function (data) {
+        if (data.features && data.features.length > 0) {
+          const features = esrijsonFormat.readFeatures(data);
+          if (features.length > 0) {
+            vectorSource.addFeatures(features);
+            const vectorExtent = vectorSource.getExtent();
+            let size = extent.getSize(vectorExtent);
+            setOptions({
+              ...options,
+              extent: new extent.buffer(vectorExtent, size[0] * 0.1),
+            });
+          }
+        }
+      });
+    });
+    /* eslint-disable-next-line */
+  }, [code_2000?.[0]]);
+
+  if (__SERVER__ || !vectorSource) return '';
+  return (
+    <div className="habitat-distribution-wrapper">
+      <div className="habitat-distribution">
+        <Map
+          view={{
+            center: proj.fromLonLat([20, 50]),
+            showFullExtent: true,
+            zoom: 5,
+          }}
+          {...options}
+        >
+          <Layers>
+            <Layer.Tile zIndex={0} />
+            <Layer.Vector
+              source={vectorSource}
+              style={
+                new style.Style({
+                  fill: new style.Fill({
+                    color: 'rgba(255,255,255,0.4)',
+                  }),
+                  stroke: new style.Stroke({
+                    color: '#04A77D',
+                    width: 3,
+                  }),
+                })
+              }
+              zIndex={1}
+            />
+          </Layers>
+          <Controls attribution={true} />
+          <Interactions pointer={false} select={false} />
+        </Map>
+      </div>
+      <Container className="map-info-notice">
+        <Message>
+          <p>
+            The designations employed and the presentation of material on this
+            map do not imply the expression of any opinion whatsoever on the
+            part of the European Union concerning the legal status of any
+            country, territory, city or area or of its authorities, or
+            concerning the delimitation of its frontiers or boundaries.
+          </p>
+        </Message>
+      </Container>
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/HabitatDistribution/index.js

@@ -0,0 +1,23 @@
+import HabitatDistributionView from './View';
+import getSchema from './schema';
+
+export function getHabitatDistributionURL(code_2000) {
+  return encodeURI(
+    `https://bio.discomap.eea.europa.eu/arcgis/rest/services/Article17/HabitatsDirective_ART_17_WMS_version_2020_08_public/MapServer/1/query?f=json&where=habitatcode LIKE '%${code_2000.toUpperCase()}%'&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=habitatcode,OBJECTID&outSR=102100`,
+  );
+}
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      habitat_distribution: {
+        view: HabitatDistributionView,
+        getSchema: getSchema,
+        title: 'Habitat distribution map',
+      },
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/HabitatDistribution/schema.js

@@ -0,0 +1,19 @@
+const getSchema = (props) => {
+  return {
+    title: 'Habitat distribution map',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;

package/src/components/manage/Blocks/HabitatDistribution/style.less

@@ -0,0 +1,5 @@
+.habitat-distribution {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0;
+}

package/src/components/manage/Blocks/HabitatProtectedSites/View.jsx

@@ -0,0 +1,97 @@
+import React, { useState, useEffect } from 'react';
+import { Message, Container } from 'semantic-ui-react';
+import Map from '@eeacms/volto-openlayers-map/Map';
+import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
+import { Controls } from '@eeacms/volto-openlayers-map/Controls';
+import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
+import { openlayers } from '@eeacms/volto-openlayers-map';
+import { getHabitatProtectedSitesURL } from './index';
+import './style.less';
+
+const View = (props) => {
+  const [options, setOptions] = React.useState({});
+  const [vectorSource, setVectorSource] = useState(null);
+  const { extent, format, proj, style, source } = openlayers;
+  const provider_data = props.provider_data || {};
+  const { code_2000 = [] } = provider_data;
+
+  useEffect(() => {
+    if (__SERVER__) return;
+    setVectorSource(new source.Vector());
+    /* eslint-disable-next-line */
+  }, []);
+
+  useEffect(() => {
+    if (__SERVER__ || !vectorSource || !code_2000[0]) return;
+    const esrijsonFormat = new format.EsriJSON();
+    // Get habitat protected sites
+    fetch(getHabitatProtectedSitesURL(code_2000[0])).then(function (response) {
+      if (response.status !== 200) return;
+      response.json().then(function (data) {
+        if (data.features && data.features.length > 0) {
+          const features = esrijsonFormat.readFeatures(data);
+          if (features.length > 0) {
+            vectorSource.addFeatures(features);
+            const vectorExtent = vectorSource.getExtent();
+            let size = extent.getSize(vectorExtent);
+            setOptions({
+              ...options,
+              extent: new extent.buffer(vectorExtent, size[0] * 0.1),
+            });
+          }
+        }
+      });
+    });
+    /* eslint-disable-next-line */
+  }, [code_2000?.[0]]);
+
+  if (__SERVER__ || !vectorSource) return '';
+  return (
+    <div className="habitat-protectes-sites-wrapper">
+      <div className="habitat-protectes-sites">
+        <Map
+          view={{
+            center: proj.fromLonLat([20, 50]),
+            showFullExtent: true,
+            zoom: 5,
+          }}
+          {...options}
+        >
+          <Layers>
+            <Layer.Tile zIndex={0} />
+            <Layer.VectorImage
+              source={vectorSource}
+              style={
+                new style.Style({
+                  fill: new style.Fill({
+                    color: 'rgba(255,255,255,0.4)',
+                  }),
+                  stroke: new style.Stroke({
+                    color: '#04A77D',
+                    width: 3,
+                  }),
+                })
+              }
+              zIndex={1}
+            />
+          </Layers>
+          <Controls attribution={true} />
+          <Interactions pointer={false} select={false} />
+        </Map>
+      </div>
+      <Container className="map-info-notice">
+        <Message>
+          <p>
+            The designations employed and the presentation of material on this
+            map do not imply the expression of any opinion whatsoever on the
+            part of the European Union concerning the legal status of any
+            country, territory, city or area or of its authorities, or
+            concerning the delimitation of its frontiers or boundaries.
+          </p>
+        </Message>
+      </Container>
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/HabitatProtectedSites/index.js

@@ -0,0 +1,23 @@
+import HabitatProtectedSitesView from './View';
+import getSchema from './schema';
+
+export function getHabitatProtectedSitesURL(code_2000) {
+  return encodeURI(
+    `https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/EUNIS_Website_Dyna_WM/MapServer/1/query?f=json&where=HABITATCODE LIKE '%${code_2000.toUpperCase()}%'&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=SPECIESCODE,SITECODE,HABITATCODE,OBJECTID&outSR=102100`,
+  );
+}
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      habitat_protected_sites: {
+        view: HabitatProtectedSitesView,
+        getSchema: getSchema,
+        title: 'Habitat protectes sites map',
+      },
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/HabitatProtectedSites/schema.js

@@ -0,0 +1,19 @@
+const getSchema = (props) => {
+  return {
+    title: 'Habitat protectes sites map',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;

package/src/components/manage/Blocks/HabitatProtectedSites/style.less

@@ -0,0 +1,5 @@
+.habitat-protectes-sites {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 0;
+}

package/src/components/manage/Blocks/HabitatsBanner/View.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import './style.less';
+
+const View = (props) => {
+  const provider_data = props.provider_data || {};
+  const {
+    code_2000 = [],
+    // habitat_description = [],
+    habitat_prioriy = [],
+    habitat_type = [],
+    // number_countries = [],
+    // number_sites = [],
+    scientific_name = [],
+  } = provider_data;
+
+  if (!code_2000[0]) return '';
+  return (
+    <div className="habitat-banner-details full-width">
+      <Container>
+        <div className="habitat-details">
+          <div className="habitat-metadata">
+            <h2 className="name">{scientific_name[0]}</h2>
+            <p className="info">
+              {habitat_type[0]} {code_2000[0]}
+            </p>
+            {habitat_prioriy[0] ? (
+              <p className="info">Priority habitat {habitat_prioriy[0]}</p>
+            ) : (
+              ''
+            )}
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/HabitatsBanner/index.js

@@ -0,0 +1,17 @@
+import HabitatsBannerView from './View';
+import getSchema from './schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.custom_connected_block = {
+    ...config.blocks.blocksConfig.custom_connected_block,
+    blocks: {
+      ...config.blocks.blocksConfig.custom_connected_block.blocks,
+      habitats_banner: {
+        view: HabitatsBannerView,
+        getSchema: getSchema,
+        title: 'Habitat banner',
+      },
+    },
+  };
+  return config;
+};

package/src/components/manage/Blocks/HabitatsBanner/schema.js

@@ -0,0 +1,19 @@
+const getSchema = (props) => {
+  return {
+    title: 'Habitats banner',
+
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [],
+      },
+    ],
+
+    properties: {},
+
+    required: [],
+  };
+};
+
+export default getSchema;