npm - @eeacms/volto-cca-policy - Versions diffs - 0.1.4 → 0.1.6 - Mend

@eeacms/volto-cca-policy 0.1.4 → 0.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

package/src/components/manage/Blocks/ECDEIndicators/README.md ADDED Viewed

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CDS integration test</title>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <script type="text/javascript">
+        window.cds_toolbox = { cds_public_path: 'https://cds.climate.copernicus.eu/toolbox/' };
+    </script>
+    <script type="text/javascript" src="https://cds.climate.copernicus.eu/toolbox/toolbox-latest.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.3.min.js"
+        integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
+<body>
+    <h1>Hello world</h1>
+    <select id="app-selection">
+        <option selected value="ecde-app-growing-degree-days">ECDE growing degree days</option>
+        <option value="ecde-app-mean-temperature">ECDE Mean Temperature</option>
+    </select>
+    <div class="t-ct">
+        <div id="toolbox-app">
+            <div class="pre-app-loading">
+                <img src="/toolbox/assets/spinner.svg" alt="Loading">
+                <div>
+                    ...loading configuration...
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        (function () {
+            const ID = 'toolbox-app';
+            $(document).ready(() => {
+                window.cds_toolbox.runApp(ID, 'https://cds.climate.copernicus.eu/workflows/c3s/ecde-app-growing-degree-days/master/configuration.json', {
+                    workflowParams: {
+                        default: 'Bayern'
+                    }
+                });
+                const defaults = {
+                    'ecde-app-growing-degree-days': 'Bayern',
+                    'ecde-app-mean-temperature': 'Occitanie'
+                }
+                let selectedApp = 'ecde-app-growing-degree-days';
+                const $appSelector = $('#app-selection');
+                $appSelector.on('change', () => {
+                    const value = $appSelector.val();
+                    if (value !== selectedApp) {
+                        selectedApp = value;
+                        window.cds_toolbox[ID].app_instance.destroy();
+                        window.cds_toolbox.runApp(ID, `https://cds.climate.copernicus.eu/workflows/c3s/${selectedApp}/master/configuration.json`, {
+                            workflowParams: {
+                                default: defaults[selectedApp]
+                            }
+                        });
+                    }
+                })
+            });
+        })();
+    </script>
+</body>
+</html>

package/src/components/manage/Blocks/ECDEIndicators/index.js ADDED Viewed

@@ -0,0 +1,16 @@
+import worldSVG from '@plone/volto/icons/world.svg';
+import ECDEIndicatorsEdit from './ECDEIndicatorsEdit';
+import ECDEIndicatorsView from './ECDEIndicatorsView';
+export default function installECDEIndicatorsBlock(config) {
+  config.blocks.blocksConfig.ecdeIndicators = {
+    id: 'ecdeIndicators',
+    title: 'ECDE Indicators',
+    icon: worldSVG,
+    group: 'common',
+    edit: ECDEIndicatorsEdit,
+    view: ECDEIndicatorsView,
+  };
+  return config;
+}

package/src/components/manage/Blocks/ECDEIndicators/styles.less ADDED Viewed

@@ -0,0 +1,28 @@
+div.col-left {
+  div.regions-selector,
+  div.indicators-selector {
+    width: 100%;
+  }
+  div.indicators-selector {
+    margin-top: 1em;
+  }
+  div.ui.dropdown {
+    min-width: 10px;
+  }
+}
+div.col-right {
+  div.iframe-container {
+    width: 100%;
+    height: 100%;
+    min-height: 1000px;
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #bcbec0;
+    }
+  }
+}

package/src/components/manage/Blocks/MKHMap/Edit.jsx ADDED Viewed

@@ -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/MKHMap/FeatureDisplay.jsx ADDED Viewed

@@ -0,0 +1,87 @@
+import React from 'react';
+import { UniversalLink } from '@plone/volto/components';
+// {
+//   "feature": {
+//     "OBJECTID": 39,
+//     "CNTR_CODE": "PL",
+//     "CNTR_NAME": "Poland",
+//     "NUTS_ID": "PL9",
+//     "NUTS_Name_Excel": "Mazovia (Mazowieckie)",
+//     "NAME_LATN": "Makroregion województwo mazowieckie",
+//     "NUTS_NAME": "Makroregion województwo mazowieckie",
+//     "LEVEL_CODE": "NUTS 1",
+//     "Comments": null,
+//     "CNTR_FLAG": "https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/4.1.4/flags/4x3/pl.svg",
+//     "BIOGEO_REG_CODE": "Continental",
+//     "BIOGEO_REG_NAME": "Continental Bio-geographical Region",
+//     "_maxOverlap": 35559453062.672485,
+//     "BIOGEO_NUTS_AREA": "100",
+//     "SHAPE_Length": 1473687.3485873593,
+//     "SHAPE_Area": 35559453062.672424
+//   }
+// }
+const NutsRegion = ({ feature }) => {
+  const fields = [
+    ['Name', 'NUTS_NAME'],
+    ['Country', 'CNTR_NAME'],
+    ['NUTS level', 'LEVEL_CODE'],
+    ['NUTS ID', 'NUTS_ID'],
+    ['Bioregion', 'BIOGEO_REG_NAME'],
+    ['Area', 'SHAPE_Area'],
+  ];
+  return <FieldsDisplay feature={feature} fields={fields} />;
+};
+const FieldsDisplay = ({ feature, fields }) => (
+  <dl className="feature-info">
+    {fields.map(([label, name]) => (
+      <div key={name}>
+        <dt>{label}</dt>
+        <dd>{feature[name]}</dd>
+      </div>
+    ))}
+  </dl>
+);
+// {
+//   "feature": {
+//     "OBJECTID": 61,
+//     "CNTR_NAME": "Lithuania",
+//     "CNTR_CODE": "LT",
+//     "LEVEL_CODE": "LAU",
+//     "GISCO_ID": "LT_27",
+//     "LAU_ID": "27",
+//     "LAU_NAME": "Panevėžio miesto savivaldybė",
+//     "LAU_Name_Excel": "Panevėžys",
+//     "Aggregated": "*",
+//     "Value0": null,
+//     "CNTR_FLAG": "https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/4.1.4/flags/4x3/lt.svg"
+//   }
+// }
+const City = ({ feature }) => {
+  const fields = [
+    ['Name', 'LAU_NAME'],
+    ['Country', 'CNTR_NAME'],
+    ['Level', 'LEVEL_CODE'],
+    ['GISCO ID', 'GISCO_ID'],
+  ];
+  return <FieldsDisplay feature={feature} fields={fields} />;
+};
+export default function FeatureDisplay({ feature }) {
+  return feature ? (
+    <div>
+      {feature.NUTS_ID ? (
+        <NutsRegion feature={feature} />
+      ) : (
+        <City feature={feature} />
+      )}
+      <UniversalLink href={`/en/mkh/${feature.NUTS_ID || feature.GISCO_ID}`}>
+        Visit
+      </UniversalLink>
+    </div>
+  ) : null;
+}

package/src/components/manage/Blocks/MKHMap/FeatureInteraction.jsx ADDED Viewed

@@ -0,0 +1,56 @@
+import React from 'react';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import { useMapContext } from '@eeacms/volto-openlayers-map/api';
+export default function FeatureInteraction({ onFeatureSelect }) {
+  const { map } = useMapContext();
+  const selected = React.useMemo(
+    () =>
+      new ol.style.Style({
+        fill: new ol.style.Fill({
+          color: '#cccccc',
+        }),
+        stroke: new ol.style.Stroke({
+          color: 'rgba(255, 0, 0, 0.7)',
+          width: 2,
+        }),
+      }),
+    [],
+  );
+  const selectStyle = React.useCallback(
+    (feature) => {
+      const color = feature.get('COLOR') || '#eeeeee';
+      selected.getFill().setColor(color);
+      return selected;
+    },
+    [selected],
+  );
+  React.useEffect(() => {
+    if (!map) return;
+    const select = new ol.interaction.Select({
+      condition: ol.condition.click,
+      style: selectStyle,
+    });
+    map.addInteraction(select);
+    select.on('select', function (e) {
+      const features = e.target.getFeatures().getArray();
+      features.forEach((feature) => {
+        onFeatureSelect(feature.values_);
+      });
+      // if (!features.length) onFeatureSelect(null);
+    });
+    map.on('pointermove', (e) => {
+      const pixel = map.getEventPixel(e.originalEvent);
+      const hit = map.hasFeatureAtPixel(pixel);
+      map.getViewport().style.cursor = hit ? 'pointer' : '';
+    });
+    return () => map.removeInteraction(select);
+  }, [map, selectStyle, onFeatureSelect]);
+  return null;
+}

package/src/components/manage/Blocks/MKHMap/InfoOverlay.jsx ADDED Viewed

@@ -0,0 +1,68 @@
+import React from 'react';
+import { useMapContext } from '@eeacms/volto-openlayers-map/api';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import FeatureDisplay from './FeatureDisplay';
+import { usePrevious } from '@plone/volto/helpers/Utils/usePrevious';
+export default function InfoOverlay({ selectedFeature, layerId }) {
+  const { map } = useMapContext();
+  const [tooltip, setTooltipRef] = React.useState();
+  const [showTooltip, setShowTooltip] = React.useState();
+  const prevLayerId = usePrevious(layerId);
+  React.useEffect(() => {
+    if (prevLayerId && layerId !== prevLayerId) {
+      setShowTooltip(false);
+    }
+  }, [layerId, prevLayerId]);
+  React.useEffect(() => {
+    if (!(map && tooltip)) return;
+    const overlay = new ol.Overlay({
+      element: document.getElementById('popup-overlay'),
+      positioning: 'bottom-center',
+      offset: [0, -10],
+      stopEvent: false,
+    });
+    map.addOverlay(overlay);
+    function handler(evt) {
+      const coordinate = evt.coordinate;
+      const { pixel, target } = evt;
+      const features = target.getFeaturesAtPixel(pixel);
+      if (features.length) {
+        overlay.setPosition(coordinate);
+        setShowTooltip(true);
+      } else {
+        setShowTooltip(false);
+      }
+    }
+    map.on('click', handler);
+    return () => {
+      map.un('click', handler);
+      map.removeOverlay(overlay);
+    };
+  }, [map, tooltip]); //
+  const [isClient, setIsClient] = React.useState(false);
+  React.useEffect(() => setIsClient(true), []);
+  return isClient ? (
+    <div
+      id="popup-overlay"
+      style={{
+        position: 'absolute',
+        zIndex: 1,
+        visibility: showTooltip ? 'visible' : 'hidden',
+      }}
+      ref={setTooltipRef}
+    >
+      <FeatureDisplay feature={selectedFeature} />
+    </div>
+  ) : null;
+}

package/src/components/manage/Blocks/MKHMap/View.jsx ADDED Viewed

@@ -0,0 +1,117 @@
+import React from 'react';
+import { Form, Radio } from 'semantic-ui-react';
+import {
+  Controls,
+  Interactions,
+  Layer,
+  Map,
+  Layers,
+} from '@eeacms/volto-openlayers-map/api';
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import * as layers from './layers';
+import FeatureInteraction from './FeatureInteraction';
+import InfoOverlay from './InfoOverlay';
+import './styles.less';
+function SourceSelector(props) {
+  const { id, choices, selected, onChange } = props;
+  return (
+    <Form>
+      <Form.Field>
+        <Radio
+          key="all"
+          label="All"
+          name={id}
+          value="all"
+          checked={selected.length === choices.length}
+          onChange={() => onChange(choices)}
+        />
+        {choices.map((name) => (
+          <Radio
+            key={name}
+            label={name}
+            name={id}
+            value={name}
+            checked={selected.length === 1 && selected.indexOf(name) > -1}
+            onChange={() => onChange([name])}
+          />
+        ))}
+      </Form.Field>
+    </Form>
+  );
+}
+export default function View(props) {
+  const [tileWMSSources, setTileWMSSources] = React.useState([]);
+  const [selectedFeature, onFeatureSelect] = React.useState();
+  React.useEffect(() => {
+    setTileWMSSources([
+      new ol.source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMBlossomComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
+  }, []); // ol.source.TileWMS, ol.source.Vector
+  const [sources, setSources] = React.useState([Object.keys(layers)[2]]);
+  if (__SERVER__) return '';
+  return (
+    <div className="explore-sites-wrapper">
+      <SourceSelector
+        id="layer-selector"
+        choices={Object.keys(layers)}
+        selected={sources}
+        onChange={setSources}
+      />
+      <div id="explore-sites">
+        <Map
+          view={{
+            center: ol.proj.fromLonLat([20, 50]),
+            showFullExtent: true,
+            zoom: 5,
+          }}
+          pixelRatio={1}
+          controls={ol.control.defaults({ attribution: false })}
+        >
+          <Layers>
+            <InfoOverlay
+              selectedFeature={selectedFeature}
+              layerId={sources?.[0]}
+            />
+            <Controls attribution={false} zoom={false} />
+            <Interactions
+              doubleClickZoom={true}
+              dragAndDrop={false}
+              dragPan={true}
+              keyboardPan={true}
+              keyboardZoom={true}
+              mouseWheelZoom={true}
+              pointer={true}
+              select={false}
+            />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+            {sources.map((name, index) => (
+              <Layer.Vector
+                key={name}
+                title={name}
+                zIndex={index}
+                {...layers[name]}
+              />
+            ))}
+            <FeatureInteraction onFeatureSelect={onFeatureSelect} />
+          </Layers>
+        </Map>
+      </div>
+    </div>
+  );
+}

package/src/components/manage/Blocks/MKHMap/index.js ADDED Viewed

@@ -0,0 +1,16 @@
+import MapBlockEdit from './Edit';
+import MapBlockView from './View';
+import worldSVG from '@plone/volto/icons/world.svg';
+export default (config) => {
+  config.blocks.blocksConfig.mkh_map = {
+    id: 'mkh_map',
+    title: 'MKH Viewer map',
+    icon: worldSVG,
+    group: 'common',
+    edit: MapBlockEdit,
+    view: MapBlockView,
+  };
+  return config;
+};

package/src/components/manage/Blocks/MKHMap/layers.js ADDED Viewed

@@ -0,0 +1,107 @@
+import { openlayers as ol } from '@eeacms/volto-openlayers-map';
+import mapSVG from './map.svg';
+const serviceUrl =
+  'https://nest.discomap.eea.europa.eu/arcgis/rest/services/CLIMA/Regions_cities/MapServer/';
+// console.log('ol', ol);
+function r() {
+  return Math.floor(Math.random() * 256);
+}
+const fillColors = {
+  '0': [125, 125, 125, 1],
+  'NUTS 0': [0, 0, 0, 1],
+  'NUTS 1': [255, 0, 0, 1],
+  'NUTS 2': [0, 255, 0, 1],
+  'NUTS 3': [0, 0, 255, 1],
+};
+const makeLayer = (layerId) => {
+  // return null;
+  const fillStyle = new ol.style.Style({
+    fill: new ol.style.Fill(),
+    stroke: new ol.style.Stroke({
+      color: [0, 0, 0, 1],
+      width: 0.5,
+    }),
+  });
+  const pinStyle = new ol.style.Style({
+    image: new ol.style.Icon({
+      src: mapSVG,
+      color: '#BADA55',
+      crossOrigin: 'anonymous',
+    }),
+  });
+  const vectorSource = new ol.source.Vector({
+    format: new ol.format.EsriJSON(),
+    url: function (extent, resolution, projection) {
+      // ArcGIS Server only wants the numeric portion of the projection ID.
+      const srid = projection
+        .getCode()
+        .split(/:(?=\d+$)/)
+        .pop();
+      const url =
+        serviceUrl +
+        layerId +
+        '/query/?f=json&' +
+        'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
+        encodeURIComponent(
+          '{"xmin":' +
+            extent[0] +
+            ',"ymin":' +
+            extent[1] +
+            ',"xmax":' +
+            extent[2] +
+            ',"ymax":' +
+            extent[3] +
+            ',"spatialReference":{"wkid":' +
+            srid +
+            '}}',
+        ) +
+        '&geometryType=esriGeometryEnvelope&inSR=' +
+        srid +
+        '&outFields=*' +
+        '&outSR=' +
+        srid;
+      return url;
+    },
+    strategy: ol.loadingstrategy.tile(
+      ol.tilegrid.createXYZ({
+        tileSize: 512,
+      }),
+    ),
+    attributions: 'European Environment Agency',
+  });
+  return {
+    source: vectorSource,
+    style: function (feature) {
+      const nuts_id = feature.get('NUTS_ID');
+      const level_code = feature.get('LEVEL_CODE');
+      // const nuts_name = feature.get('NUTS_NAME');
+      // const country_code = feature.get('CNTR_CODE');
+      // const shape = feature.get('SHAPE');
+      // console.log({ country_code, nuts_id, nuts_name, level_code, feature });
+      // const classify = feature.get('LU_2014');
+      const color = fillColors[level_code] || [r(), r(), r(), 1];
+      fillStyle.getFill().setColor(color);
+      return nuts_id ? fillStyle : pinStyle;
+    },
+    opacity: 0.7,
+  };
+};
+export const countries = __CLIENT__ && makeLayer('0');
+export const cities = __CLIENT__ && makeLayer('1');
+export const regions = __CLIENT__ && makeLayer('2');

package/src/components/manage/Blocks/MKHMap/map.svg ADDED Viewed

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
+  <path d="M18,32 C11.3333333,23.6818983 8,17.6818983 8,14 C8,8.4771525 12.4771525,4 18,4 C23.5228475,4 28,8.4771525 28,14 C28,17.6818983 24.6666667,23.6818983 18,32 Z M26,14 C26,9.581722 22.418278,6 18,6 C13.581722,6 10,9.581722 10,14 C10,16.8065316 12.6565091,21.827053 18,28.7642044 C23.3434909,21.827053 26,16.8065316 26,14 Z M18,11 C19.656,11 21,12.344 21,14 C21,15.656 19.656,17 18,17 C16.344,17 15,15.656 15,14 C15,12.344 16.344,11 18,11 Z"/>
+</svg>

package/src/components/manage/Blocks/MKHMap/schema.js ADDED Viewed

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

package/src/components/manage/Blocks/MKHMap/styles.less ADDED Viewed

@@ -0,0 +1,41 @@
+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;
+  }
+}
+.explore-sites-wrapper {
+  .field .ui {
+    margin-right: 2em;
+  }
+}
+#popup-overlay {
+  width: 40ch;
+  padding: 0 1em 1em 1em;
+  background-color: white;
+}
+.feature-info {
+  font-size: small;
+  div {
+    display: flex;
+    column-gap: 1em;
+    dt {
+      width: 10ch;
+      font-weight: bold;
+    }
+  }
+}