@eeacms/volto-n2k 0.1.1

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

@@ -0,0 +1,80 @@
+.exploded-pies-chart {
+  div.tooltip {
+    position: absolute;
+    z-index: 999;
+    max-width: 200px;
+    padding: 1em 2em;
+    border: 0px;
+    background: #629fca;
+    border-radius: 8px;
+    border-radius: 1px solid #ccc;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+    color: #fff;
+    font: 12px sans-serif;
+    opacity: 0;
+    pointer-events: none;
+    text-align: center;
+    transform: translate(-50%, -120%);
+
+    &:before {
+      position: absolute;
+      top: 99%;
+      left: 50%;
+      width: 0;
+      height: 0;
+      border: solid transparent;
+      border-width: 6px;
+      border-top-color: #629fca;
+      margin-left: -6px;
+      content: ' ';
+      pointer-events: none;
+    }
+  }
+
+  div.text {
+    position: relative;
+    top: 50%;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    text-align: right;
+    transform: translateY(-50%);
+
+    > * {
+      overflow: hidden;
+      width: 100%;
+      color: #013c60;
+      font-family: 'OpenSans', arial;
+      font-size: 12px;
+      font-weight: 600;
+      text-overflow: ellipsis;
+
+      white-space: nowrap;
+    }
+
+    .value {
+      position: absolute;
+      top: calc(50% - 26px);
+      right: 0;
+      margin-bottom: 0;
+      font-size: 32px;
+      transform: translateY(-50%);
+    }
+
+    .label {
+      position: absolute;
+      top: calc(50% + 22px);
+      right: 0;
+      transform: translateY(-50%);
+    }
+
+    .line {
+      position: absolute;
+      top: 50%;
+      width: 100%;
+      height: 3px;
+      background-color: #013c60;
+      transform: translateY(-50%);
+    }
+  }
+}

package/src/components/manage/Blocks/ExploreHabitats/Edit.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import schema from './schema';
+import View from './View';
+
+const Edit = (props) => {
+  return (
+    <>
+      <View {...props} mode="edit" />
+
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

package/src/components/manage/Blocks/ExploreHabitats/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 { getActiveHabitatsURL } 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: [
+          -3959514.742799999,
+          3193117.280200001,
+          3804815.2795,
+          1.1124223900300004e7,
+        ],
+        url:
+          'https://bio.discomap.eea.europa.eu/arcgis/services/Article17/HabitatsDirective_ART_17_WMS_version_2020_08_public/MapServer/WmsServer?',
+        params: { LAYERS: '9', 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(
+          [
+            -3959514.742799999,
+            3193117.280200001,
+            3804815.2795,
+            1.1124223900300004e7,
+          ],
+          -3959514.742799999 * 0.01,
+        ),
+      });
+      return;
+    }
+
+    const esrijsonFormat = new format.EsriJSON();
+
+    // Get habitats of active page
+    fetch(
+      getActiveHabitatsURL(
+        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-habitats-wrapper full-width">
+      <div className="explore-habitats">
+        <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/ExploreHabitats/index.js

@@ -0,0 +1,24 @@
+import ExploreHabitatsEdit from './Edit';
+import ExploreHabitatsView from './View';
+
+import worldSVG from '@plone/volto/icons/world.svg';
+
+export function getActiveHabitatsURL(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 IN (${code_2000.join(
+      ',',
+    )})&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=OBJECTID,habitatcode&outSR=102100`,
+  );
+}
+
+export default (config) => {
+  config.blocks.blocksConfig.explore_habitats_map = {
+    id: 'explore_habitats_map',
+    title: 'Explore habitats map',
+    icon: worldSVG,
+    group: 'natura_2000',
+    edit: ExploreHabitatsEdit,
+    view: ExploreHabitatsView,
+  };
+  return config;
+};

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

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

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

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

package/src/components/manage/Blocks/ExploreSites/Edit.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import schema from './schema';
+import View from './View';
+
+const Edit = (props) => {
+  return (
+    <>
+      <View {...props} mode="edit" />
+
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

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

@@ -0,0 +1,175 @@
+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 { getActiveSitesURL } 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: [
+          -3603195.606899999,
+          3197087.8112000003,
+          3796164.5945000015,
+          1.1077138825000003e7,
+        ],
+        url:
+          'https://bio.discomap.eea.europa.eu/arcgis/services/ProtectedSites/Natura2000Sites/MapServer/WMSServer',
+        params: { LAYERS: '2', 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(
+          [
+            -3603195.606899999,
+            3197087.8112000003,
+            3796164.5945000015,
+            1.1077138825000003e7,
+          ],
+          -3603195.606899999 * 0.01,
+        ),
+      });
+      return;
+    }
+
+    const esrijsonFormat = new format.EsriJSON();
+
+    // Get sites of active page
+    fetch(
+      getActiveSitesURL(activePageResults.map((item) => `'${item.site_code}'`)),
+    ).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-sites-wrapper full-width">
+      <div className="explore-sites">
+        <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/ExploreSites/index.js

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import schema from './schema';
+import View from './View';
+
+const Edit = (props) => {
+  return (
+    <>
+      <View {...props} mode="edit" />
+
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;