From 04bd3c0ddc921777491d17a5f7c527d21f74dec1 Mon Sep 17 00:00:00 2001 From: razvanMiu Date: Tue, 31 Aug 2021 14:15:52 +0300 Subject: [PATCH] Use db_version; New Industry map; Industry table with connector --- .../DiscodataOpenlayersMapBlock/View.jsx | 8 +- .../manage/Blocks/FiltersBlock/View.jsx | 51 +- .../manage/Blocks/IndustryDataTable/View.jsx | 344 ++++++- .../manage/Blocks/IndustryDataTable/schema.js | 9 +- .../manage/Blocks/IndustryMap/Edit.jsx | 32 + .../manage/Blocks/IndustryMap/View.jsx | 869 ++++++++++++++++++ .../manage/Blocks/IndustryMap/index.js | 138 +++ .../manage/Blocks/IndustryMap/schema.js | 17 + .../manage/Blocks/IndustryMap/style.css | 419 +++++++++ .../manage/Blocks/PollutantIndex/View.jsx | 6 +- .../manage/Blocks/SidebarBlock/Edit.jsx | 57 -- .../manage/Blocks/SidebarBlock/View.jsx | 392 -------- .../manage/Blocks/SidebarBlock/style.css | 57 -- .../manage/Blocks/SiteLocationMap/View.jsx | 3 +- src/config.js | 16 +- .../volto/components/theme/Search/Search.jsx | 5 +- src/customizations/volto/middleware/api.js | 1 - src/helpers/api.jsx | 157 ---- theme/site/globals/site.overrides | 13 +- 19 files changed, 1854 insertions(+), 740 deletions(-) create mode 100644 src/components/manage/Blocks/IndustryMap/Edit.jsx create mode 100644 src/components/manage/Blocks/IndustryMap/View.jsx create mode 100644 src/components/manage/Blocks/IndustryMap/index.js create mode 100644 src/components/manage/Blocks/IndustryMap/schema.js create mode 100644 src/components/manage/Blocks/IndustryMap/style.css delete mode 100644 src/components/manage/Blocks/SidebarBlock/Edit.jsx delete mode 100644 src/components/manage/Blocks/SidebarBlock/View.jsx delete mode 100644 src/components/manage/Blocks/SidebarBlock/style.css diff --git a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx index dd5d65f..0a13ecb 100644 --- a/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx +++ b/src/components/manage/Blocks/DiscodataOpenlayersMapBlock/View.jsx @@ -62,7 +62,6 @@ let Map, Stroke, Style, TileLayer, - VectorLayer, VectorImage, transformExtent, Group, @@ -168,7 +167,6 @@ const OpenlayersMapView = (props) => { Stroke = require('ol/style/Stroke.js').default; Style = require('ol/style/Style.js').default; TileLayer = require('ol/layer/Tile.js').default; - VectorLayer = require('ol/layer/Vector.js').default; VectorImage = require('ol/layer/VectorImage.js').default; transformExtent = require('ol/proj').transformExtent; Group = require('ol/layer/Group.js').default; @@ -784,7 +782,7 @@ const OpenlayersMapView = (props) => { features.push(feature); }); } - if (features.length) { + if (features?.length) { let hdms = toStringHDMS( toLonLat(features[0].getGeometry().flatCoordinates), ); @@ -936,7 +934,7 @@ const OpenlayersMapView = (props) => { let features = esrijsonFormat.readFeatures(response, { featureProjection: projection, }); - if (features.length > 0) { + if (features?.length > 0) { sitesSource.addFeatures(features); } } @@ -1020,7 +1018,7 @@ const OpenlayersMapView = (props) => { let features = esrijsonFormat.readFeatures(response, { featureProjection: projection, }); - if (features.length > 0) { + if (features?.length > 0) { regionsSource.addFeatures(features); } } diff --git a/src/components/manage/Blocks/FiltersBlock/View.jsx b/src/components/manage/Blocks/FiltersBlock/View.jsx index 7efb0ef..e8ecfc8 100644 --- a/src/components/manage/Blocks/FiltersBlock/View.jsx +++ b/src/components/manage/Blocks/FiltersBlock/View.jsx @@ -56,6 +56,8 @@ const View = ({ content, ...props }) => { factsDataOrder: ['Country_quick_facts', 'EU_quick_facts'], firstLoad: false, }); + const db_version = + process.env.RAZZLE_DB_VERSION || config.settings.db_version || 'latest'; const [filtersMetaReady, setFiltersMetaReady] = useState(false); const [loadingData, setLoadingData] = useState(false); const [sitesResults, setSitesResults] = useState([]); @@ -149,26 +151,26 @@ const View = ({ content, ...props }) => { sqls: [ // INDUSTRIES QUERY `SELECT DISTINCT EEAActivity - FROM [IED].[latest].[EPRTR_sectors] + FROM [IED].[${db_version}].[EPRTR_sectors] ORDER BY EEAActivity`, // COUNTRIES QUERY `SELECT DISTINCT siteCountry, siteCountryName - FROM [IED].[latest].[Browse2_MapPOPUP] + FROM [IED].[${db_version}].[Browse2_MapPOPUP] ORDER BY siteCountryName`, // POLLUTANT GROUPS QUERY `SELECT DISTINCT pollutantgroup - FROM [IED].[latest].[Browse2_MapPOPUP] + FROM [IED].[${db_version}].[Browse2_MapPOPUP] WHERE NOT(pollutantgroup='') ORDER BY pollutantgroup`, // REPORTING YEARS QUERY - `SELECT DISTINCT reportingYear FROM [IED].[latest].[ReportData] ORDER BY reportingYear`, + `SELECT DISTINCT reportingYear FROM [IED].[${db_version}].[ReportData] ORDER BY reportingYear`, // PLANT TYPE - `SELECT code, Label FROM [IED].[latest].[PlantTypeValue] ORDER BY Label`, + `SELECT code, Label FROM [IED].[${db_version}].[PlantTypeValue] ORDER BY Label`, // BAT CONCLUSSIONS QUERY - `SELECT DISTINCT id, Label, AcceptedDate FROM [IED].[latest].[BATConclusionValue] ORDER BY Label`, + `SELECT DISTINCT id, Label, AcceptedDate FROM [IED].[${db_version}].[BATConclusionValue] ORDER BY Label`, // PERMIT YEAR `SELECT DISTINCT permitYear - FROM [IED].[latest].[PermitDetails] + FROM [IED].[${db_version}].[PermitDetails] GROUP BY permitYear`, ], meta: [ @@ -291,7 +293,7 @@ const View = ({ content, ...props }) => { siteCountryFilters && siteCountryFilters.length > 0 && `SELECT DISTINCT NUTS_ID, NUTS_NAME - FROM [IED].[latest].[refNuts_NoGeo] + FROM [IED].[${db_version}].[refNuts_NoGeo] WHERE CNTR_CODE IN (${siteCountryFilters.map((country) => { return "'" + country + "'"; })}) AND LEVL_CODE = 1 @@ -302,7 +304,7 @@ const View = ({ content, ...props }) => { siteCountryFilters.length > 0 && regionFilters.length && `SELECT DISTINCT NUTS_ID, NUTS_NAME - FROM [IED].[latest].[refNuts_NoGeo] + FROM [IED].[${db_version}].[refNuts_NoGeo] WHERE CNTR_CODE IN (${siteCountryFilters.map((country) => { return "'" + country + "'"; })}) AND (${regionFilters @@ -315,7 +317,7 @@ const View = ({ content, ...props }) => { siteCountryFilters && siteCountryFilters.length > 0 && `SELECT DISTINCT thematicIdIdentifier, nameText - FROM [IED].[latest].[refRBD_NoGeo] + FROM [IED].[${db_version}].[refRBD_NoGeo] WHERE countryCode IN (${siteCountryFilters.map((country) => { return "'" + country + "'"; })}) @@ -324,7 +326,7 @@ const View = ({ content, ...props }) => { pollutantGroupFilter && pollutantGroupFilter.length > 0 && `SELECT DISTINCT pollutant - FROM [IED].[latest].[PollutantDict] + FROM [IED].[${db_version}].[PollutantDict] WHERE AirPollutantGroup ${pollutantGroupFilter .map((group, index) => { return ( @@ -833,7 +835,7 @@ const View = ({ content, ...props }) => { let promises = []; const sqls = [ { - query: `SELECT DISTINCT siteName FROM [IED].[latest].[SiteMap] WHERE [siteName] COLLATE Latin1_General_CI_AI LIKE '%${data.value}%' ORDER BY [siteName]`, + query: `SELECT DISTINCT siteName FROM [IED].[${db_version}].[SiteMap] WHERE [siteName] COLLATE Latin1_General_CI_AI LIKE '%${data.value}%' ORDER BY [siteName]`, reqKey: 'results', searchKey: 'siteName', updateState: setSitesResults, @@ -1193,7 +1195,7 @@ const View = ({ content, ...props }) => { '@type': 'discodata_sql_builder', sql: { value: - '{"fieldsets":[{"id":"sql_metadata","title":"SQL","fields":["filters_eprtr_countries"]}],"properties":{"filters_eprtr_countries":{"title":"filters EPRTR Countries","isCollection":true,"hasPagination":false,"urlQuery":true,"sql":"SELECT (STUFF((\\n SELECT CONCAT(\',\', countryCode)\\n FROM [IED].[latest].[SiteMap]\\n GROUP BY countryCode\\n FOR XML PATH(\'\')\\n ), 1, 1, \'\')\\n) AS countries"}}}', + '{"fieldsets":[{"id":"sql_metadata","title":"SQL","fields":["filters_eprtr_countries"]}],"properties":{"filters_eprtr_countries":{"title":"filters EPRTR Countries","isCollection":true,"hasPagination":false,"urlQuery":true,"sql":"SELECT (STUFF((\\n SELECT CONCAT(\',\', countryCode)\\n FROM [IED].[db_version].[SiteMap]\\n GROUP BY countryCode\\n FOR XML PATH(\'\')\\n ), 1, 1, \'\')\\n) AS countries"}}}', }, }} /> @@ -1372,18 +1374,17 @@ const View = ({ content, ...props }) => { - -
- -
+ + {mapSidebarExists ? (function () { diff --git a/src/components/manage/Blocks/IndustryDataTable/View.jsx b/src/components/manage/Blocks/IndustryDataTable/View.jsx index 9fb79b4..cef781a 100644 --- a/src/components/manage/Blocks/IndustryDataTable/View.jsx +++ b/src/components/manage/Blocks/IndustryDataTable/View.jsx @@ -1,12 +1,61 @@ import React from 'react'; -import { Icon } from '@plone/volto/components'; -import { Table, Menu, Loader } from 'semantic-ui-react'; +import { connect } from 'react-redux'; +import { compose } from 'redux'; +import { Icon, UniversalLink } from '@plone/volto/components'; +import { Table, Menu, Loader, Dimmer } from 'semantic-ui-react'; +import cx from 'classnames'; import RenderComponent from '@eeacms/volto-datablocks/components/manage/Blocks/SimpleDataTable/components'; +import { ConnectorContext } from '@eeacms/volto-datablocks/hocs'; +import { setQueryParam } from '@eeacms/volto-datablocks/actions'; import leftSVG from '@plone/volto/icons/left-key.svg'; import rightSVG from '@plone/volto/icons/right-key.svg'; +import upSVG from '@plone/volto/icons/up-key.svg'; +import downSVG from '@plone/volto/icons/down-key.svg'; -const IndustryTableView = (props) => { +const isNotEmpty = (item) => { + if (!item) return false; + if (Array.isArray(item) && item.filter((i) => i).length === 0) return false; + if (item === undefined || item === null) return false; + if (typeof item === 'object' && Object.keys(item).length === 0) return false; + return true; +}; + +const getQuery = (query) => { + const obj = { + ...(isNotEmpty(query.pollutant) + ? { 'pollutants[like]': query.pollutant } + : {}), + ...(isNotEmpty(query.pollutantGroup) + ? { 'air_groups[like]': query.pollutantGroup } + : {}), + ...(isNotEmpty(query.permitYear) + ? { 'permit_years[like]': query.permitYear } + : {}), + ...(isNotEmpty(query.permitType) + ? { 'permit_types[like]': query.permitType } + : {}), + ...(isNotEmpty(query.batConclusion) + ? { 'bat_conclusions[like]': query.batConclusion } + : {}), + ...(isNotEmpty(query.reportingYear) + ? { 'Site_reporting_year[in]:list': query.reportingYear } + : {}), + ...(isNotEmpty(query.nuts_latest) + ? { 'nuts_regions[like]': query.nuts_latest } + : {}), + ...(isNotEmpty(query.siteCountry) + ? { 'countryCode[in]:list': query.siteCountry } + : {}), + ...(isNotEmpty(query.siteTerm) ? { siteName: query.siteTerm } : {}), + }; + + return obj; +}; + +const View = (props) => { + const context = React.useContext(ConnectorContext); + const [openedRow, setOpenedRow] = React.useState(null); const { data = {}, getAlignmentOfColumn, @@ -19,12 +68,34 @@ const IndustryTableView = (props) => { selectedColumns, show_header, tableData, + discodata_query = {}, updatePagination = () => {}, } = props; + React.useEffect(() => { + const extent = discodata_query?.extent || [ + -10686671.0000035, + -2430148.00000588, + 6199975.99999531, + 10421410.9999871, + ]; + + context.setState({ + ...context.state, + extraQuery: { + ...getQuery(discodata_query || {}), + 'shape_wm.STX[gte]:float': extent[0], + 'shape_wm.STX[lte]:float': extent[2], + 'shape_wm.STY[gte]:float': extent[1], + 'shape_wm.STY[lte]:float': extent[3], + }, + }); + /* eslint-disable-next-line */ + }, [JSON.stringify(discodata_query)]) + return ( -
- {row_size ? ( +
+ {row_size && tableData ? ( { {Array(Math.max(0, row_size)) .fill() - .map((_, i) => ( - - {selectedColumns.map((colDef, j) => ( - { + const countFactypeEprtr = + tableData?.['count_factype_EPRTR']?.[i]; + const countFactypeNonEprtr = + tableData?.['count_factype_NONEPRTR']?.[i]; + const countInstypeIed = tableData?.['count_instype_IED']?.[i]; + const countInstypeNonIed = + tableData?.['count_instype_NONIED']?.[i]; + const countPlantypeLcp = + tableData?.['count_plantType_LCP']?.[i]; + const countPlantypeCoWi = + tableData?.['count_plantType_coWI']?.[i]; + const countPlantypeWi = tableData?.['count_plantType_WI']?.[i]; + return ( + + + {selectedColumns.map((colDef, j) => ( + + + + ))} + + + + + {/* ==== TABLE HIDDEN ROW ==== */} + - - - ))} - - ))} + +
+
+
+ Regulation +
+ {countFactypeEprtr ? ( +

+ {`${countFactypeEprtr} ${ + countFactypeEprtr === 1 + ? 'EPRTR Facility' + : 'EPRTR Facilities' + }`} +

+ ) : ( + '' + )} + + {countFactypeNonEprtr ? ( +

+ {`${countFactypeNonEprtr} ${ + countFactypeNonEprtr === 1 + ? 'NON-EPRTR Facility' + : 'NON-EPRTR Facilities' + }`} +

+ ) : ( + '' + )} + + {countInstypeIed ? ( +

+ {`${countInstypeIed} ${ + countInstypeIed === 1 + ? 'IED Installation' + : 'IED Installations' + }`} +

+ ) : ( + '' + )} + + {countInstypeNonIed ? ( +

+ {`${countInstypeNonIed} ${ + countInstypeNonIed === 1 + ? 'NON-IED Installation' + : 'NON-IED Installations' + }`} +

+ ) : ( + '' + )} + + {countPlantypeLcp ? ( +

+ {`${countPlantypeLcp} ${ + countPlantypeLcp === 1 + ? 'Large combustion plant' + : 'Large combustion plants' + }`} +

+ ) : ( + '' + )} + + {countPlantypeCoWi ? ( +

+ {`${countPlantypeCoWi} ${ + countPlantypeCoWi === 1 + ? 'Co-waste incinerator' + : 'Large combustion plants' + }`} +

+ ) : ( + '' + )} + + {countPlantypeWi ? ( +

+ {`${countPlantypeWi} ${ + countPlantypeWi === 1 + ? 'Co-waste incinerator' + : 'Co-waste incinerator' + }`} +

+ ) : ( + '' + )} +
+
+
+ + Pollutant emissions + +
+

+ {tableData?.['pollutants']?.[i] || + 'Not reported'} +

+
+
+
+ + Regulatory Informations + +
+

+ Operating since:{' '} + {tableData?.['dateOfLatestOpStart']?.[i] || + 'not reported'} +

+

+ Last operating permit issued:{' '} + {tableData?.['dateOfLatestPermit']?.[i] || + 'not reported'} +

+

+ Number of inspections:{' '} + {tableData?.['numInspections']?.[i] || + 'not reported'} +

+
+
+
+
+
+
+
+ + Site details + +
+
+
+
+
+ + + + ); + })} {has_pagination ? ( @@ -101,9 +356,7 @@ const IndustryTableView = (props) => { icon disabled={ props.isPending || - row_size < pagination.itemsPerPage || - pagination.activePage * pagination.itemsPerPage >= - pagination.maxItems + pagination.activePage === pagination.lastPage } onClick={() => { if (row_size === pagination.itemsPerPage) { @@ -121,11 +374,50 @@ const IndustryTableView = (props) => { ) : null}
+ ) : tableData ? ( + // TODO: find a better solution to keep headers + + {show_header ? ( + + + {data?.columns?.map((header) => ( + + {header.title} + + ))} + + + ) : null} + + + +

{placeholder}

+ + + +
) : ( -

{placeholder}

+ + European Environment Agency + )}
); }; -export default IndustryTableView; +export default compose( + connect( + (state) => ({ + discodata_query: state.discodata_query?.search, + }), + { setQueryParam }, + ), +)(View); diff --git a/src/components/manage/Blocks/IndustryDataTable/schema.js b/src/components/manage/Blocks/IndustryDataTable/schema.js index 18970d3..ae67982 100644 --- a/src/components/manage/Blocks/IndustryDataTable/schema.js +++ b/src/components/manage/Blocks/IndustryDataTable/schema.js @@ -4,9 +4,14 @@ export default () => ({ { id: 'default', title: 'Default', - fields: [], + fields: ['link'], }, ], - properties: {}, + properties: { + link: { + title: 'Site details path', + widget: 'object_by_path', + }, + }, required: [], }); diff --git a/src/components/manage/Blocks/IndustryMap/Edit.jsx b/src/components/manage/Blocks/IndustryMap/Edit.jsx new file mode 100644 index 0000000..7b237c5 --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/Edit.jsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { SidebarPortal } from '@plone/volto/components'; +import InlineForm from '@plone/volto/components/manage/Form/InlineForm'; +import SiteLocationMapView from './View'; +import schema from './schema'; +import { connectBlockToProviderData } from '@eeacms/volto-datablocks/hocs'; + +const Edit = (props) => { + const { data = {}, block = null, selected = false, onChangeBlock } = props; + + return ( + <> + + + + { + onChangeBlock(block, { + ...data, + [id]: value, + }); + }} + formData={data} + /> + + + ); +}; + +export default connectBlockToProviderData(Edit); diff --git a/src/components/manage/Blocks/IndustryMap/View.jsx b/src/components/manage/Blocks/IndustryMap/View.jsx new file mode 100644 index 0000000..c79209f --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/View.jsx @@ -0,0 +1,869 @@ +import React, { useState, useRef } from 'react'; +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import jsonp from 'jsonp'; +import qs from 'querystring'; +import { Grid, Header } from 'semantic-ui-react'; +import { toast } from 'react-toastify'; +import config from '@plone/volto/registry'; +import { Icon, Toast, UniversalLink } from '@plone/volto/components'; +import { Map } from '@eeacms/volto-openlayers-map/Map'; +import { Interactions } from '@eeacms/volto-openlayers-map/Interactions'; +import { Overlays } from '@eeacms/volto-openlayers-map/Overlays'; +import { Controls, Control } from '@eeacms/volto-openlayers-map/Controls'; +import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers'; +import { openlayers } from '@eeacms/volto-openlayers-map'; +import { setQueryParam } from '@eeacms/volto-datablocks/actions'; +import PrivacyProtection from '~/components/manage/Blocks/DiscodataOpenlayersMapBlock/PrivacyProtection'; +import { getEncodedQueryString } from '~/utils'; +import { + getSitesUrl, + getLayerBase, + getWhereStatement, + getRegionsWhereStatement, +} from './index'; + +import clearSVG from '@plone/volto/icons/clear.svg'; +import navigationSVG from '@plone/volto/icons/navigation.svg'; +import mapPlaceholder from '~/components/manage/Blocks/DiscodataOpenlayersMapBlock/map_placeholder.png'; + +import './style.css'; + +let _REQS = 0; +const zoomSwitch = 6; + +const View = (props) => { + const map = useRef(); + const popup = useRef(); + const popupDetails = useRef(); + const sitesLayer = useRef(); + const regionsLayer = useRef(); + const whereStatement = useRef(); + const prevWhereStatement = useRef(); + const regionsWhereStatement = useRef(); + const discodataQuery = useRef(); + const [popupData, setPopupData] = useState(); + const [popupDetailsData, setPopupDetailsData] = useState(); + const [mapRendered, setMapRendered] = useState(false); + const [firstFit, setFirstFit] = useState(true); + const [loading, setLoading] = useState(false); + const { + coordinate, + format, + loadingstrategy, + proj, + source, + style, + tilegrid, + } = openlayers; + const { discodata_query } = props; + + const dataprotection = { + enabled: true, + privacy_statement: + 'This map is hosted by a third party [Environmental Systems Research Institute, INC: "ESRI"]. By showing th external content you accept the terms and conditions of www.esri.com. This includes their cookie policies, which e have no control over.', + privacy_cookie_key: 'site-location-map', + placeholder_image: mapPlaceholder, + type: props.data.privacy?.value || 'big', + }; + + const db_version = + process.env.RAZZLE_DB_VERSION || config.settings.db_version || 'latest'; + + React.useEffect(() => { + if (mapRendered && firstFit) { + centerToUserLocation(); + setTimeout(() => { + setFirstFit(false); + }, 1000); + } + /* eslint-disable-next-line */ + }, [mapRendered]); + + React.useEffect(() => { + // let extent = openlayers.extent.createEmpty(); + if (!sitesLayer.current) return; + async function updateMap() { + let positionUpdating = false; + const where = getWhereStatement(discodata_query); + const regionWhere = getRegionsWhereStatement(discodata_query); + const countriesLocations = []; + const countries = discodata_query.siteCountryNames.filter( + (country) => + discodata_query.siteCountry && + discodata_query.siteCountry?.indexOf(country.siteCountry) !== -1, + ); + prevWhereStatement.current = whereStatement.current; + whereStatement.current = where; + regionsWhereStatement.current = regionWhere; + discodataQuery.current = { ...discodata_query }; + if (!discodata_query.locationTerm) { + clearSource(); + } + if ( + discodata_query.locationTerm?.text && + discodata_query.locationTerm?.magicKey + ) { + const response = await fetch( + encodeURI( + 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?SingleLine=' + + discodata_query.locationTerm.text + + '&f=json&outSR={"wkid":102100,"latestWkid":3857}&outFields=Match_addr,Addr_type,StAddr,City&magicKey=' + + discodata_query.locationTerm.magicKey + + '&maxLocations=6', + ), + ); + const data = await response.json(); + if (data.candidates?.length > 0) { + map.current + .getView() + .fit( + [ + data.candidates[0].extent.xmin, + data.candidates[0].extent.ymin, + data.candidates[0].extent.xmax, + data.candidates[0].extent.ymax, + ], + { + maxZoom: 16, + duration: 1000, + }, + ); + } + } else if ( + !discodata_query.siteTerm && + !discodata_query.locationTerm && + countries.length && + discodata_query.advancedFiltering + ) { + const extent = openlayers.extent.createEmpty(); + for (let country = 0; country < countries.length; country++) { + const response = await fetch( + encodeURI( + 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/findAddressCandidates?SingleLine=' + + countries[country].siteCountryName + + '&forStorage=false&f=pjson&' + + '&maxLocations=1', + ), + ); + countriesLocations.push(await response.json()); + } + countriesLocations.forEach((data) => { + openlayers.extent.extend( + extent, + proj.transformExtent( + [ + data.candidates[0].extent.xmin, + data.candidates[0].extent.ymin, + data.candidates[0].extent.xmax, + data.candidates[0].extent.ymax, + ], + 'EPSG:4326', + 'EPSG:3857', + ), + ); + }); + if (!openlayers.extent.isEmpty(extent)) { + positionUpdating = true; + map.current.getView().fit(extent, { + maxZoom: 16, + duration: 1000, + }); + } + } + if (where) { + let response = await fetch( + `${config.settings.providerUrl}?${getEncodedQueryString(`SELECT + MIN(shape_wm.STX) AS MIN_X, + MIN(shape_wm.STY) AS MIN_Y, + MAX(shape_wm.STX) AS MAX_X, + MAX(shape_wm.STY) AS MAX_Y + FROM [IED].[${db_version}].[SiteMap] + ${where ? 'WHERE ' + where : ''}`)}`, + ); + response = await response.json(); + const extent = response?.results?.[0] || {}; + if ( + extent.MIN_X === null || + extent.MIN_Y === null || + extent.MAX_X === null || + extent.MAX_Y === null + ) { + toast.warn( + , + ); + } else if (discodata_query.siteTerm && !positionUpdating) { + map.current + .getView() + .fit([extent.MIN_X, extent.MIN_Y, extent.MAX_X, extent.MAX_Y], { + maxZoom: 16, + duration: 1000, + }); + } + } + } + + if (!firstFit) { + updateMap(); + } + /* eslint-disable-next-line */ + }, [discodata_query.filtersCounter]); + + const centerToUserLocation = (ignoreExtent = false) => { + if (__SERVER__ || !map.current || !navigator?.geolocation) return; + const extent = props.discodata_query.mapExtent; + if (!extent || ignoreExtent) { + navigator.geolocation.getCurrentPosition( + (position) => { + return centerToPosition(position, 12); + }, + // Errors + () => {}, + ); + } else { + map.current.getView().fit([extent[0], extent[1], extent[2], extent[3]], { + maxZoom: 16, + duration: 1000, + }); + } + }; + + const centerToPosition = (position, zoom) => { + if (__SERVER__ || !map.current) return; + return map.current.getView().animate({ + center: proj.fromLonLat([ + position.coords.longitude, + position.coords.latitude, + ]), + duration: 1000, + zoom, + }); + }; + + function getFeatureInRange(map, point, range = 3) { + let x = 0; + let y = 0; + let dx = 0; + let dy = -1; + for (let i = 0; i <= range * range; i++) { + const features = + map.getFeaturesAtPixel([point[0] + x, point[1] + y]) || null; + if (features?.length) { + return features; + } + if (x === y || (x < 0 && x === -y) || (x > 0 && x === 1 - y)) { + let temp = dx; + dx = -dy; + dy = temp; + } + x += dx; + y += dy; + } + return null; + } + + const onPointermove = (e) => { + if (e.dragging || !popup.current) { + return; + } + let features = []; + const pixel = e.map.getEventPixel(e.originalEvent); + e.map.forEachFeatureAtPixel(pixel, function (feature) { + features.push(feature); + }); + if (features?.length) { + let hdms = coordinate.toStringHDMS( + proj.toLonLat(features[0].getGeometry().flatCoordinates), + ); + const featuresProperties = features[0].getProperties(); + if ( + JSON.stringify(popupData?.properties) !== + JSON.stringify(featuresProperties) + ) { + setPopupData({ + properties: { ...featuresProperties }, + hdms, + flatCoordinates: features[0].getGeometry().flatCoordinates, + }); + } + e.map.getTarget().style.cursor = 'pointer'; + popup.current.setPosition(e.coordinate); + } else { + e.map.getTarget().style.cursor = ''; + popup.current.setPosition(undefined); + setPopupData(null); + } + }; + + const onFeatureClick = (e) => { + if ( + e.map.getView().getZoom() < zoomSwitch || + !popup.current || + !popupDetails.current + ) + return; + const pixel = e.map.getEventPixel(e.originalEvent); + let features = getFeatureInRange(e.map, pixel, 9); + if (features?.length) { + let hdms = coordinate.toStringHDMS( + proj.toLonLat(features[0].getGeometry().flatCoordinates), + ); + const featuresProperties = features[0].getProperties(); + if ( + JSON.stringify(popupDetailsData?.properties) !== + JSON.stringify(featuresProperties) + ) { + setPopupDetailsData({ + properties: { ...featuresProperties }, + hdms, + flatCoordinates: features[0].getGeometry().flatCoordinates, + }); + } + e.map.getTarget().style.cursor = ''; + popup.current.setPosition(undefined); + popupDetails.current.setPosition(e.coordinate); + } else { + setPopupDetailsData(undefined); + } + }; + + const onMoveend = (e) => { + const extent = e.map.getView().calculateExtent(e.map.getSize()); + props.setQueryParam({ + queryParam: { + extent, + mapExtent: extent, + }, + }); + }; + + const clearSource = () => { + if (!sitesLayer.current) return; + const sitesSource = sitesLayer.current.getSource(); + const regionsSource = regionsLayer.current.getSource(); + sitesSource.clear(); + regionsSource.clear(); + sitesSource.loadedExtentsRtree_.clear(); + regionsSource.loadedExtentsRtree_.clear(); + }; + + if (__SERVER__) return ''; + + const smallCircle = new style.Style({ + image: new style.Circle({ + radius: 3, + fill: new style.Fill({ color: '#000' }), + stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }), + zIndex: 0, + }), + }); + + const bigCircle = new style.Style({ + image: new style.Circle({ + radius: 6, + fill: new style.Fill({ color: '#000' }), + stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }), + zIndex: 0, + }), + }); + + const smallGreenCircle = new style.Style({ + image: new style.Circle({ + radius: 3, + fill: new style.Fill({ color: '#00FF00' }), + stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }), + zIndex: 0, + }), + }); + + const bigGreenCircle = new style.Style({ + image: new style.Circle({ + radius: 6, + fill: new style.Fill({ color: '#00FF00' }), + stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }), + zIndex: 0, + }), + }); + + const regionCircle = new style.Style({ + image: new style.Circle({ + radius: 6, + fill: new style.Fill({ color: '#4296B2' }), + stroke: new style.Stroke({ color: '#6A6A6A', width: 1 }), + zIndex: 0, + }), + }); + + return ( +
+
+ + { + if (!element || map.current) return; + const newMap = element.state.map; + if (newMap) { + map.current = newMap; + setMapRendered(true); + } + }} + view={{ + center: proj.fromLonLat([20, 50]), + showFullExtent: true, + maxZoom: 16, + minZoom: 2, + zoom: 2, + }} + renderer="webgl" + onPointermove={onPointermove} + onClick={onFeatureClick} + onMoveend={onMoveend} + > + + + { + if (!element || regionsLayer.current) return; + if (element.layer) { + regionsLayer.current = element.layer; + } + }} + source={ + new source.Vector({ + loader: function (extent, _, projection) { + const esrijsonFormat = new format.EsriJSON(); + let url = `https://air.discomap.eea.europa.eu/arcgis/rest/services/Air/IED_Clusters_WM/FeatureServer/0/query/?f=json&returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=${encodeURIComponent( + '{"xmin":' + + extent[0] + + ',"ymin":' + + extent[1] + + ',"xmax":' + + extent[2] + + ',"ymax":' + + extent[3] + + ',"spatialReference":{"wkid":102100}}', + )}&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*&outSR=102100`; + jsonp( + url, + { + param: + (regionsWhereStatement.current + ? qs.stringify({ + where: regionsWhereStatement.current, + }) + : '') + '&callback', + }, + (error, response) => { + if (!error) { + let features = esrijsonFormat.readFeatures( + response, + { + featureProjection: projection, + }, + ); + if (features?.length > 0) { + this.addFeatures(features); + } + } + }, + ); + }, + strategy: loadingstrategy.tile( + tilegrid.createXYZ({ + tileSize: 256, + }), + ), + }) + } + style={() => { + if (!map.current) return; + const zoom = map.current.getView()?.getZoom(); + if (zoom >= zoomSwitch || discodataQuery.current?.siteTerm) + return; + return regionCircle; + }} + title="1.Regions" + zIndex={1} + /> + { + if (!element || sitesLayer.current) return; + if (element.layer) { + sitesLayer.current = element.layer; + } + }} + className="ol-layer-sites" + source={ + new source.Vector({ + loader: function (extent, resolution, projection) { + _REQS++; + const esrijsonFormat = new format.EsriJSON(); + this.resolution = resolution; + let url = getSitesUrl(extent); + jsonp( + url, + { + param: + (whereStatement.current + ? qs.stringify({ + where: whereStatement.current, + }) + : '') + '&callback', + }, + (error, response) => { + if (!error) { + let features = esrijsonFormat.readFeatures( + response, + { + featureProjection: projection, + }, + ); + if (features?.length > 0) { + this.addFeatures(features); + } + } + if (!--_REQS) { + setLoading(false); + } + }, + ); + if (!loading) { + setLoading(true); + } + }, + strategy: function (extent, resolution) { + const tileGrid = tilegrid.createXYZ({ + tileSize: 256, + }); + let z = tileGrid.getZForResolution(resolution); + let tileRange = tileGrid.getTileRangeForExtentAndZ( + extent, + z, + ); + /** @type {Array} */ + let extents = []; + /** @type {import("./tilecoord.js").TileCoord} */ + let tileCoord = [z, 0, 0]; + for ( + tileCoord[1] = tileRange.minX; + tileCoord[1] <= tileRange.maxX; + ++tileCoord[1] + ) { + for ( + tileCoord[2] = tileRange.minY; + tileCoord[2] <= tileRange.maxY; + ++tileCoord[2] + ) { + extents.push(tileGrid.getTileCoordExtent(tileCoord)); + } + } + if (this.resolution && this.resolution !== resolution) { + extents.forEach((newExtent) => { + this.loadedExtentsRtree_.forEach((loadedExtent) => { + const bigExtent = loadedExtent.extent; + if ( + openlayers.extent.containsExtent( + bigExtent, + newExtent, + ) && + bigExtent[0] !== newExtent[0] && + bigExtent[1] !== newExtent[1] && + bigExtent[2] !== newExtent[2] && + bigExtent[3] !== newExtent[3] + ) { + this.loadedExtentsRtree_.remove(loadedExtent); + } + }); + }); + } + return extents; + }, + }) + } + style={(feature) => { + if (!map.current) return; + const zoom = map.current.getView()?.getZoom(); + const properties = feature.getProperties(); + if (zoom < zoomSwitch && !discodataQuery.current?.siteTerm) + return; + if ( + discodataQuery.current?.siteTerm && + properties?.siteName === discodataQuery.current?.siteTerm + ) { + return zoom >= 8 ? bigGreenCircle : smallGreenCircle; + } + return zoom >= 8 ? bigCircle : smallCircle; + }} + title="2.Sites" + zIndex={1} + /> + + + + + + + + +
+ + { + if (!element || popup.current) return; + if (element.overlay) { + popup.current = element.overlay; + } + }} + className="ol-overlay-container ol-popup" + positioning="center-center" + stopEvent={true} + > + + + { + if (!props || popupDetails.current) return; + if (props.overlay) { + popupDetails.current = props.overlay; + } + }} + className="ol-overlay-container ol-popup-details" + positioning="center-center" + stopEvent={true} + > + + + {loading ? ( +
+ + + +
+ ) : ( + '' + )} + + +
+
+ ); +}; + +export default compose( + connect( + (state) => ({ + query: qs.parse(state.router.location.search.replace('?', '')), + discodata_query: state.discodata_query.search, + }), + { + setQueryParam, + }, + ), +)(View); diff --git a/src/components/manage/Blocks/IndustryMap/index.js b/src/components/manage/Blocks/IndustryMap/index.js new file mode 100644 index 0000000..e318741 --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/index.js @@ -0,0 +1,138 @@ +import sliderSVG from '@plone/volto/icons/slider.svg'; +import IndustryMapEdit from './Edit'; +import IndustryMapView from './View'; + +const filters = [ + { + queryKey: 'batConclusionCode', + featureKey: 'batConclusionCode', + op: 'like', + }, + { queryKey: 'EEAActivity', featureKey: 'eea_activities', op: 'like' }, + { queryKey: 'nuts_latest', featureKey: 'nuts_regions', op: 'like' }, + { queryKey: 'permitType', featureKey: 'permit_types', op: 'like' }, + { queryKey: 'permitYear', featureKey: 'permitYears', op: 'like' }, + { queryKey: 'plantTypes', featureKey: 'plantTypes', op: 'like' }, + { queryKey: 'pollutant', featureKey: 'pollutants', op: 'like' }, + { queryKey: 'pollutantGroup', featureKey: 'air_groups', op: 'like' }, + { queryKey: 'reportingYear', featureKey: 'Site_reporting_year', op: 'eq' }, + { queryKey: 'riverBasin', featureKey: 'rbds', op: 'like' }, + { queryKey: 'siteCountry', featureKey: 'countryCode', op: 'like' }, + { queryKey: 'siteTerm', featureKey: 'siteName', op: 'like' }, +]; + +export const getSitesUrl = (extent) => { + return `https://air.discomap.eea.europa.eu/arcgis/rest/services/Air/IED_SiteMap/FeatureServer/0/query/?f=json&returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=${encodeURIComponent( + '{"xmin":' + + extent[0] + + ',"ymin":' + + extent[1] + + ',"xmax":' + + extent[2] + + ',"ymax":' + + extent[3] + + ',"spatialReference":{"wkid":102100}}', + )}&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*&outSR=102100`; +}; + +export const getLayerBase = () => + 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}'; + +export const filterFeature = (feature, query = {}) => { + let ok = true; + const properties = feature.getProperties(); + + for (let filter = 0; filter < filters.length; filter++) { + const { queryKey, featureKey, op } = filters[filter]; + if (!ok) { + break; + } + if (Array.isArray(query[queryKey])) { + for (let item = 0; item < query[queryKey].length; item++) { + const value = query[queryKey][item]; + if ( + value && + ((op === 'like' && !properties[featureKey]?.includes(value)) || + (op === 'eq' && properties[featureKey] !== value)) + ) { + ok = false; + break; + } + } + } else if (query[queryKey]) { + const value = query[queryKey]; + if ( + (op === 'like' && !properties[featureKey]?.includes(value)) || + (op === 'eq' && properties[featureKey] !== value) + ) { + ok = false; + break; + } + } + } + + return ok; +}; + +export const getWhereStatement = (query = {}) => { + let where = []; + for (let filter = 0; filter < filters.length; filter++) { + const { queryKey, featureKey, op } = filters[filter]; + if (Array.isArray(query[queryKey])) { + where[filter] = []; + for (let item = 0; item < query[queryKey].length; item++) { + const value = query[queryKey][item]; + if (op === 'like' && value) { + where[filter].push(`${featureKey} LIKE '%${value}%'`); + } else if (op === 'eq' && value) { + where[filter].push(`${featureKey} = ${value}`); + } + } + } else if (query[queryKey]) { + where[filter] = []; + const value = query[queryKey]; + if (op === 'like' && value) { + where[filter].push(`${featureKey} LIKE '%${value}%'`); + } else if (op === 'eq' && value) { + where[filter].push(`${featureKey} = ${value}`); + } + } + } + + return where + .filter((w) => w.length) + .map((w) => `(${w.join(' OR ')})`) + .join(' AND '); +}; + +export const getRegionsWhereStatement = (query = {}) => { + let where = []; + if (Array.isArray(query.siteCountry)) { + for (let item = 0; item < query.siteCountry.length; item++) { + const value = query.siteCountry[item]; + if (value) { + where.push(`CNTR_CODE LIKE '%${value}%'`); + } + } + } + return where.join(' AND '); +}; + +export default (config) => { + config.blocks.blocksConfig.industry_map = { + id: 'industry_map', + title: 'Industry map', + icon: sliderSVG, + group: 'eprtr_blocks', + edit: IndustryMapEdit, + view: IndustryMapView, + restricted: false, + mostUsed: false, + sidebarTab: 1, + security: { + addPermission: [], + view: [], + }, + }; + return config; +}; diff --git a/src/components/manage/Blocks/IndustryMap/schema.js b/src/components/manage/Blocks/IndustryMap/schema.js new file mode 100644 index 0000000..1d9c79a --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/schema.js @@ -0,0 +1,17 @@ +const schema = { + title: 'Industry map', + + fieldsets: [ + { + id: 'default', + title: 'Default', + fields: [], + }, + ], + + properties: {}, + + required: [], +}; + +export default schema; diff --git a/src/components/manage/Blocks/IndustryMap/style.css b/src/components/manage/Blocks/IndustryMap/style.css new file mode 100644 index 0000000..ba41b23 --- /dev/null +++ b/src/components/manage/Blocks/IndustryMap/style.css @@ -0,0 +1,419 @@ +.industry-map { + height: 800px; +} + +.ol-map { + width: 100%; + height: 100%; +} + +#map-sidebar { + height: 100%; +} + +.loader { + position: absolute; + width: 32px; + height: 32px; + font-weight: bold; + font-size: 30px; + z-index: 1; + bottom: 1rem; + right: 1rem; +} + +.circular-loader { + width: 100%; + height: 100%; + -webkit-animation: rotate 2s linear infinite; + animation: rotate 2s linear infinite; + -webkit-transform-origin: center center; + -ms-transform-origin: center center; + transform-origin: center center; +} + +.loader-path { + stroke-dasharray: 150, 200; + stroke-dashoffset: -10; + -webkit-animation: dash 1.5s ease-in-out infinite, + color 6s ease-in-out infinite; + animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite; + stroke-linecap: round; +} + +@-webkit-keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes rotate { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +@-webkit-keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124; + } +} +@keyframes dash { + 0% { + stroke-dasharray: 1, 200; + stroke-dashoffset: 0; + } + 50% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -35; + } + 100% { + stroke-dasharray: 89, 200; + stroke-dashoffset: -124; + } +} +@-webkit-keyframes color { + 0% { + stroke: #7c9ac0; + } + 40% { + stroke: #7c9ac0; + } + 66% { + stroke: #7c9ac0; + } + 80%, + 90% { + stroke: #7c9ac0; + } +} +@keyframes color { + 0% { + stroke: #7c9ac0; + } + 40% { + stroke: #7c9ac0; + } + 66% { + stroke: #7c9ac0; + } + 80%, + 90% { + stroke: #7c9ac0; + } +} + +#map-loader.ui.active { + position: absolute !important; + top: 0 !important; + right: unset !important; + bottom: unset !important; + left: 0 !important; + width: 100% !important; + height: 100% !important; + pointer-events: auto !important; + transform: none !important; +} + +#popup.popup { + position: absolute; + bottom: 10px; + min-width: 280px; + max-width: 280px; + background-color: white; + transform: translateX(-50%); +} + +#popup-details { + min-width: 420px; + background-color: white; +} + +.ol-popup-details { + position: absolute !important; + top: 50% !important; + right: unset !important; + bottom: unset !important; + left: 50% !important; + pointer-events: auto !important; + transform: translate(-50%, -50%) !important; +} +/* +.ol-overlay-container { + display: block !important; +} */ + +.ol-overlay-container #popup.popup, +.ol-overlay-container #popup-details.popup { + border: 1px solid #cccccc; + border-radius: 0.3rem; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); +} + +.ol-overlay-container #popup-details.popup { + border: 2px solid #417283; +} + +.ol-overlay-container #popup.popup:after, +.ol-overlay-container #popup.popup:before { + position: absolute; + top: 100%; + width: 0; + height: 0; + border: solid transparent; + content: ' '; + pointer-events: none; +} + +.ol-overlay-container #popup.popup:after { + left: 50%; + border-width: 10px; + border-top-color: white; + transform: translateX(-50%); +} + +.ol-overlay-container #popup.popup:before { + left: 50%; + border-width: 11px; + border-top-color: #cccccc; + margin-left: -11px; +} + +#popup-details:after, +#popup-details:before { + display: none; +} + +#popup-details .popover-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 2rem; +} + +#popup-details .popover-actions { + border-bottom: none; + background-color: transparent; +} + +#popup-details .popover-body { + padding: 1rem 2rem; +} + +#popup-details .popover-actions button.solid { + padding: 1rem 2rem; +} + +#popup-details .popover-header .ui.header, +#popup-details .popover-body .ui.header, +#dynamic-filter .ui.header { + margin-bottom: 0; + color: #59a3bc; + font-weight: bold; +} + +#popup-details .popover-body a { + text-decoration: underline; +} + +#popup-details .popover-body .description { + overflow: auto; + max-height: 100px; + word-break: break-word; +} + +#popup-details .popover-body .row { + margin-bottom: 1rem; +} + +#popup-details .popover-body .row:last-child { + margin-bottom: 0; +} + +#popup-details .popover-header .icon { + cursor: pointer; + fill: #e16d5d !important; +} + +#popup-details .popover-header .icon:hover { + fill: #c96052 !important; +} + +.ol-dynamic-filter { + position: absolute !important; + top: 0 !important; + left: 6rem !important; + height: 100% !important; + pointer-events: auto !important; + transform: none !important; + display: block !important; +} + +.popover-header { + padding: 0.5rem 0.75rem; + border-bottom: 1px solid #ebebeb; + margin-bottom: 0; + background-color: #f7f7f7; + border-top-left-radius: calc(0.3rem - 1px); + border-top-right-radius: calc(0.3rem - 1px); + font-size: 1rem; +} + +.popover-actions { + padding: 1rem 2rem; + border-top: 1px solid #ebebeb; + background-color: #f7f7f7; + border-bottom-left-radius: calc(0.3rem - 1px); + border-bottom-right-radius: calc(0.3rem - 1px); + text-align: center; +} + +.popover-body { + padding: 0.5rem 0.75rem; +} + +.popover-body code { + color: #e83e8c; + font-size: 87.5%; + word-wrap: break-word; +} + +.ol-dynamic-filter #dynamic-filter { + position: relative; + display: block; + min-width: 300px; + max-width: 300px; + height: 100%; + padding: 0; + background-color: #fff; +} + +.ol-dynamic-filter #dynamic-filter .dynamic-filter-header, +.ol-dynamic-filter #dynamic-filter .dynamic-filter-body, +.ol-dynamic-filter #dynamic-filter .dynamic-filter-actions { + padding-right: 2rem; + padding-bottom: 1rem; + padding-left: 2rem; +} + +.ol-dynamic-filter #dynamic-filter .dynamic-filter-header { + padding-top: 3rem; +} + +.ol-dynamic-filter #dynamic-filter .dynamic-filter-body, +.ol-dynamic-filter #dynamic-filter .dynamic-filter-actions { + padding-top: 1rem; +} + +.ol-overlaycontainer-stopevent #extra-control-buttons { + position: absolute; + top: 0.5em; + right: 0.5em; + padding: 2px; +} + +.ol-overlaycontainer-stopevent #extra-control-buttons .ol-control { + position: relative; + padding: 0; + margin: 1px; +} + +.ol-rotate { + display: none; +} + +@media only screen and (max-width: 600px) { + .ol-dynamic-filter { + left: 0 !important; + } + + .ol-dynamic-filter #dynamic-filter { + overflow: hidden; + width: 0; + min-width: unset; + max-width: unset; + transition: width 0.5s ease-in-out; + } + + .ol-dynamic-filter #dynamic-filter.show { + width: 100%; + } + + .ol-overlaycontainer-stopevent #dynamic-filter-toggle { + display: block; + } + + .ol-dynamic-filter #dynamic-filter .dynamic-filter-header, + .ol-dynamic-filter #dynamic-filter .dynamic-filter-body, + .ol-dynamic-filter #dynamic-filter .dynamic-filter-actions { + padding-right: 4rem; + padding-left: 4rem; + } +} + +@media only screen and (max-width: 460px) { + #popup-details { + min-width: 220px; + } +} + +p.mb-1, +p.mb-1:first-child { + margin-bottom: 1rem; +} + +.privacy-protection { + padding: 0; + background: transparent; +} + +.privacy-protection .overlay { + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.35); +} + +.privacy-protection .background { + opacity: 0.8; +} + +.privacy-protection .wrapped { + position: absolute; + top: 50%; + left: 50%; + width: 400px; + background: #ffffff; + border-radius: 10px; + transform: translate(-50%, -50%); +} + +.privacy-protection .wrapped .ui.message { + background: #ffffff; + border-radius: 10px; +} + +.privacy-protection .wrapped p.discreet { + padding: 1.5em 1.5em; +} + +.privacy-protection .privacy-button { + display: flex; + flex-flow: row; + align-items: center; + justify-content: center; +} + +.ol-location { + right: 0.5rem !important; + left: unset !important; +} \ No newline at end of file diff --git a/src/components/manage/Blocks/PollutantIndex/View.jsx b/src/components/manage/Blocks/PollutantIndex/View.jsx index 78e4423..0c492b9 100644 --- a/src/components/manage/Blocks/PollutantIndex/View.jsx +++ b/src/components/manage/Blocks/PollutantIndex/View.jsx @@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from 'react'; import { compose } from 'redux'; import { connect } from 'react-redux'; import { Tab, Dropdown, Table } from 'semantic-ui-react'; +import config from '@plone/volto/registry'; import { DiscodataSqlBuilderView } from '@eeacms/volto-datablocks/components'; import { setQueryParam, @@ -204,6 +205,8 @@ const RenderTable = (props) => { }; const View = (props) => { + const db_version = + process.env.RAZZLE_DB_VERSION || config.settings.db_version || 'latest'; const [activeTab, setActiveTab] = useState(0); const [currentPollutant, setCurrentPollutant] = useState(undefined); const [currentPollutantGroup, setCurrentPollutantGroup] = useState(undefined); @@ -318,8 +321,7 @@ const View = (props) => { data={{ '@type': 'discodata_sql_builder', sql: { - value: - '{"fieldsets":[{"id":"sql_metadata","title":"SQL","fields":["index_pollutant_groups","index_pollutants","index_pollutant_iso","index_pollutant_other_provisions","index_pollutant_phrases"]}],"properties":{"index_pollutant_groups":{"title":"Index pollutant groups","isCollection":true,"hasPagination":false,"urlQuery":false,"sql":"SELECT pollutant_group_id as pollutantId , * \\nFROM [IED].[latest].[Glo_PollutantsGroupsDetails]\\nORDER BY name"},"index_pollutants":{"title":"Index pollutants","isCollection":true,"hasPagination":false,"urlQuery":false,"sql":"SELECT POL.code,\\nPOL.name,\\nPOL.startYear,\\nPOL.endYear,\\nPOL.parentId,\\nPOL.cas,\\nPOL.eperPollutantId,\\nPOL.codeEPER,\\nPOL_DET.*\\nFROM [IED].[latest].[Glo_Pollutants] as POL\\nLEFT JOIN [IED].[latest].[Glo_PollutantsDetails] AS POL_DET\\nON POL.pollutantId = POL_DET.pollutantId\\nORDER BY name","packageName":"index_pollutant_group_id"},"index_pollutant_iso":{"title":"Index pollutants iso","hasPagination":true,"urlQuery":false,"sql":"SELECT *\\nFROM [IED].[latest].[Glo_PollutantsIsoProvision]","packageName":"index_pollutant_id"},"index_pollutant_other_provisions":{"title":"index_pollutant_other_provisions","hasPagination":true,"urlQuery":false,"sql":"SELECT *\\nFROM [IED].[latest].[Glo_PollutantsOtherProvisions]","packageName":"index_pollutant_id"},"index_pollutant_phrases":{"title":"index_pollutant_phrases","hasPagination":true,"urlQuery":false,"sql":"SELECT *\\nFROM [IED].[latest].[Glo_PollutantsPrase]","packageName":"index_pollutant_id"}},"required":[]}', + value: `{"fieldsets":[{"id":"sql_metadata","title":"SQL","fields":["index_pollutant_groups","index_pollutants","index_pollutant_iso","index_pollutant_other_provisions","index_pollutant_phrases"]}],"properties":{"index_pollutant_groups":{"title":"Index pollutant groups","isCollection":true,"hasPagination":false,"urlQuery":false,"sql":"SELECT pollutant_group_id as pollutantId , * \\nFROM [IED].[${db_version}].[Glo_PollutantsGroupsDetails]\\nORDER BY name"},"index_pollutants":{"title":"Index pollutants","isCollection":true,"hasPagination":false,"urlQuery":false,"sql":"SELECT POL.code,\\nPOL.name,\\nPOL.startYear,\\nPOL.endYear,\\nPOL.parentId,\\nPOL.cas,\\nPOL.eperPollutantId,\\nPOL.codeEPER,\\nPOL_DET.*\\nFROM [IED].[${db_version}].[Glo_Pollutants] as POL\\nLEFT JOIN [IED].[${db_version}].[Glo_PollutantsDetails] AS POL_DET\\nON POL.pollutantId = POL_DET.pollutantId\\nORDER BY name","packageName":"index_pollutant_group_id"},"index_pollutant_iso":{"title":"Index pollutants iso","hasPagination":true,"urlQuery":false,"sql":"SELECT *\\nFROM [IED].[${db_version}].[Glo_PollutantsIsoProvision]","packageName":"index_pollutant_id"},"index_pollutant_other_provisions":{"title":"index_pollutant_other_provisions","hasPagination":true,"urlQuery":false,"sql":"SELECT *\\nFROM [IED].[${db_version}].[Glo_PollutantsOtherProvisions]","packageName":"index_pollutant_id"},"index_pollutant_phrases":{"title":"index_pollutant_phrases","hasPagination":true,"urlQuery":false,"sql":"SELECT *\\nFROM [IED].[${db_version}].[Glo_PollutantsPrase]","packageName":"index_pollutant_id"}},"required":[]}`, }, where: { value: diff --git a/src/components/manage/Blocks/SidebarBlock/Edit.jsx b/src/components/manage/Blocks/SidebarBlock/Edit.jsx deleted file mode 100644 index a2cfcec..0000000 --- a/src/components/manage/Blocks/SidebarBlock/Edit.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { useState, useEffect } from 'react'; -import { connect } from 'react-redux'; -import { compose } from 'redux'; -import _uniqueId from 'lodash/uniqueId'; -import RenderFields from '@eeacms/volto-datablocks/Utils/RenderFields'; -import View from './View'; -import config from '@plone/volto/registry'; - -const getSchema = (props) => { - return { - parent: { - title: 'Parent page', - widget: 'object_by_path', - }, - className: { - title: 'Classname', - type: 'text', - }, - preset: { - type: 'array', - title: 'Preset navigation', - choices: [ - ['facilities', 'Facilities'], - ['installations', 'Installations'], - ['lcps', 'Lcps'], - ], - }, - }; -}; - -const Edit = (props) => { - const [state, setState] = useState({ - schema: getSchema({ ...props, providerUrl: config.settings.providerUrl }), - id: _uniqueId('block_'), - }); - useEffect(() => { - setState({ - ...state, - schema: getSchema({ - ...props, - }), - }); - /* eslint-disable-next-line */ - }, [state.item, props.data.components]); - return ( -
- - -
- ); -}; - -export default compose( - connect((state, props) => ({ - pathname: state.router.location.pathname, - })), -)(Edit); diff --git a/src/components/manage/Blocks/SidebarBlock/View.jsx b/src/components/manage/Blocks/SidebarBlock/View.jsx deleted file mode 100644 index 86573b7..0000000 --- a/src/components/manage/Blocks/SidebarBlock/View.jsx +++ /dev/null @@ -1,392 +0,0 @@ -/* REACT */ -import React, { useEffect, useState } from 'react'; -import { useHistory } from 'react-router-dom'; -import { compose } from 'redux'; -import { connect } from 'react-redux'; -/* SEMANTIC UI */ -import { Menu } from 'semantic-ui-react'; -/* HELPERS */ -import { getNavigationByParent, getBasePath } from '~/helpers'; - -import { - setQueryParam, - deleteQueryParam, -} from '@eeacms/volto-datablocks/actions'; - -import { getFacilities, getInstallations, getLcps } from '~/helpers/api'; - -import './style.css'; - -const flattenArray = (array, prevItem = {}, depth = 0, maxDepth) => { - let flattenedArray = []; - if (!array) return flattenedArray; - array.forEach((item) => { - if (item.items?.length > 0) { - flattenedArray.push({ ...item, parent: prevItem.url || null, depth }); - flattenedArray = [ - ...flattenedArray, - ...(typeof maxDepth === 'number' && depth < maxDepth - ? flattenArray(item.items, item, depth + 1, maxDepth) - : typeof maxDepth !== 'number' && !maxDepth - ? flattenArray(item.items, item, depth + 1, maxDepth) - : []), - ]; - } else { - flattenedArray.push({ ...item, parent: prevItem.url || null, depth }); - } - }); - return flattenedArray; -}; - -const hasAscendentActive = (tabs, tab, pathname) => { - if (!tab.parent || pathname === tab.url) return -1; - const parentTab = tabs.filter((parentTab) => parentTab.url === tab.parent)[0]; - if (parentTab && pathname === parentTab.url) { - return 1; - } else if (parentTab.parent) { - return hasAscendentActive(tabs, parentTab, pathname); - } - return 0; -}; - -const hasDescendentActive = (tab, pathname) => { - let ok = false; - if (pathname === tab.url) return true; - if (tab.items) { - tab.items.forEach((item) => { - if (hasDescendentActive(item, pathname) && !ok) { - ok = true; - } - }); - } - return ok; -}; - -const makeNewNavigation = ( - items, - preset, - collection, - search, - history, - dispatch, - flags, -) => { - if (['lcps'].includes(preset) && !collection.length) { - return []; - } - if (preset === 'lcps') { - return items?.map((item) => ({ - ...item, - onClick: (pathname, query) => { - dispatch( - deleteQueryParam({ - queryParam: [ - 'facilityInspireId', - 'installationInspireId', - 'lcpInspireId', - ], - }), - ); - history.push(`${item.url}${query}`); - }, - items: collection.length - ? collection?.map((facility) => ({ - title: facility.facilityInspireId, - url: facility.facilityInspireId, - presetItem: true, - onClick: (pathname, query) => { - if (facility.facilityInspireId !== search.facilityInspireId) { - dispatch( - setQueryParam({ - queryParam: { - facilityInspireId: facility.facilityInspireId, - installationInspireId: - facility.installations[0].installationInspireId, - lcpInspireId: facility.installations[0].lcps[0], - }, - }), - ); - } - if (pathname !== item.items[0].url) { - history.push(`${item.items[0].url}${query}`); - } - }, - active: (pathname) => { - return ( - search.facilityInspireId === facility.facilityInspireId && - pathname === item.items?.[0]?.url - ); - }, - items: [ - ...(facility.installations?.map((installation) => ({ - title: installation.installationInspireId, - url: installation.installationInspireId, - presetItem: true, - onClick: (pathname, query) => { - if ( - installation.installationInspireId !== - search.installationInspireId || - facility.facilityInspireId !== search.facilityInspireId - ) { - dispatch( - setQueryParam({ - queryParam: { - facilityInspireId: facility.facilityInspireId, - installationInspireId: - installation.installationInspireId, - lcpInspireId: installation.lcps[0], - }, - }), - ); - } - if (pathname !== item.items?.[0]?.url) { - history.push(`${item.items[0].url}${query}`); - } - }, - active: (pathname) => { - return ( - search.installationInspireId === - installation.installationInspireId && - pathname === item.items?.[0]?.url - ); - }, - items: [ - ...(installation.lcps?.map((lcp) => ({ - title: lcp, - url: lcp, - presetItem: true, - onClick: (pathname, query) => { - if ( - lcp !== search.lcpInspireId || - installation.installationInspireId !== - search.installationInspireId || - facility.facilityInspireId !== search.facilityInspireId - ) { - dispatch( - setQueryParam({ - queryParam: { - facilityInspireId: facility.facilityInspireId, - installationInspireId: - installation.installationInspireId, - lcpInspireId: lcp, - }, - }), - ); - } - if (pathname !== item.items?.[0]?.url) { - history.push(`${item.items[0].url}${query}`); - } - }, - active: (pathname) => { - return ( - search.lcpInspireId === lcp && - pathname === item.items?.[0]?.url - ); - }, - items: [ - // ...(item.items || []).map((child) => ({ - // ...child, - // redirect: (pathname) => { - // // if ( - // // search.facilityInspireId !== facility.facilityInspireId && - // // pathname === child.url - // // ) { - // // history.push(item.url); - // // } - // }, - // active: (pathname) => { - // return ( - // search.facilityInspireId === - // facility.facilityInspireId && - // search.installationInspireId === - // installation.installationInspireId && - // search.lcpInspireId === lcp && - // pathname.includes(child.url) - // ); - // }, - // onClick: (pathname) => { - // if ( - // lcp !== search.lcpInspireId || - // installation.installationInspireId !== - // search.installationInspireId || - // facility.facilityInspireId !== - // search.facilityInspireId - // ) { - // dispatch( - // setQueryParam({ - // queryParam: { - // facilityInspireId: facility.facilityInspireId, - // installationInspireId: - // installation.installationInspireId, - // lcpInspireId: lcp, - // }, - // }), - // ); - // } - // if (pathname !== child.url) { - // history.push(child.url); - // } - // }, - // })), - ], - })) || []), - ], - })) || []), - ], - })) - : [], - })); - } -}; - -const View = ({ content, ...props }) => { - const customPresets = { - facilities: { - get: getFacilities, - key: 'facilities', - }, - installations: { - get: getInstallations, - key: 'installations', - }, - lcps: { - get: getLcps, - key: 'lcps', - }, - }; - const history = useHistory(); - const { data } = props; - const [collection, setCollection] = useState([]); - const pathname = props.pathname; - const preset = customPresets[data.preset?.value] || {}; - const parent = data.parent?.value; - let navigation = []; - - const updateCollcetion = () => { - const newCollection = - props.discodata_resources.data[preset?.key]?.[ - props.search.siteInspireId - ] || []; - if (JSON.stringify(newCollection) !== JSON.stringify(collection)) { - setCollection(newCollection); - } - }; - - useEffect(() => { - updateCollcetion(); - /* eslint-disable-next-line */ - }, []); - - useEffect(() => { - if (preset.get && preset.key) { - const key = `${preset.key}-${props.search.siteInspireId}`; - if ( - props.search.siteInspireId && - !props.discodata_resources.data[preset.key]?.[ - props.search.siteInspireId - ] && - !props.discodata_resources.pendingRequests[key] - ) { - preset.get(props.dispatch, props.search.siteInspireId); - } - } - /* eslint-disable-next-line */ - }, [preset]); - - useEffect(() => { - updateCollcetion(); - /* eslint-disable-next-line */ - }, [ - props.discodata_resources.data[preset?.key]?.[props.search.siteInspireId], - ]); - - if (props.navigation?.items?.length && parent) { - if (preset.key && collection.length) { - navigation = flattenArray( - makeNewNavigation( - props.navigation.items, - preset.key, - collection, - props.search, - history, - props.dispatch, - props.flags, - ), - ); - } else if (preset.key) { - navigation = flattenArray(props.navigation.items, {}, 0, 0); - } else { - navigation = flattenArray(props.navigation.items); - } - } - - useEffect(() => { - for (let i = 0; i < navigation.length; i++) { - if (navigation[i].redirect) { - navigation[i].redirect(pathname); - break; - } - } - /* eslint-disable-next-line */ - }, [navigation]); - - return navigation.length ? ( -
- - {navigation.map((item, index) => { - const url = !item.presetItem ? getBasePath(item.url) : ''; - const name = item.title; - // const active = pathname.includes(item.url); - const active = pathname === item.url; - const hasDescendents = hasDescendentActive(item, pathname); - const hasAscendents = - hasAscendentActive(navigation, item, pathname) === 1; - const isHidden = false; - // !active && item.depth > 0 - // ? !hasAscendents && !hasDescendents - // : false; - return ( - { - item.onClick - ? item.onClick(pathname, props.query) - : history.push(`${url}${props.query}`); - }} - /> - ); - })} - -
- ) : props.mode === 'edit' ? ( -

- There are no pages inside of selected page. Make sure you add pages or - delete the block -

- ) : ( - '' - ); -}; - -export default compose( - connect((state, props) => ({ - query: state.router.location.search, - content: - state.prefetch?.[state.router.location.pathname] || state.content.data, - pathname: state.router.location.pathname, - flags: state.flags, - search: state.discodata_query.search, - discodata_resources: state.discodata_resources, - navigation: getNavigationByParent( - state.navigation.items, - props.data?.parent?.value, - ), - })), -)(View); diff --git a/src/components/manage/Blocks/SidebarBlock/style.css b/src/components/manage/Blocks/SidebarBlock/style.css deleted file mode 100644 index be16197..0000000 --- a/src/components/manage/Blocks/SidebarBlock/style.css +++ /dev/null @@ -1,57 +0,0 @@ -.sidebar-block .ui.menu { - flex-flow: column; - border-bottom: none; - background: transparent; -} - -.sidebar-block .ui.menu .item { - background: transparent; -} - -.sidebar-block .ui.menu .item, -.sidebar-block .ui.menu .item.active { - padding-bottom: 1rem; - border: none; - background-color: transparent; - color: #333333 !important; - cursor: pointer; - text-align: left; -} - -.sidebar-block .ui.menu .item.hidden { - display: none; -} - -.sidebar-block .ui.menu .item.show { - display: block; -} - -.sidebar-block .ui.menu .item.depth__1 { - margin-left: 1em; -} - -.sidebar-block .ui.menu .item.depth__2 { - margin-left: 2em; -} - -.sidebar-block .ui.menu .item.depth__3 { - margin-left: 3em; -} - -.sidebar-block .ui.menu .item.depth__4 { - margin-left: 4em; -} - -.sidebar-block .ui.menu .item.depth__5 { - margin-left: 5em; -} - -.sidebar-block .ui.menu .item.active { - background-color: transparent !important; - color: #ed776a !important; -} - -.sidebar-block .ui.menu .item.active.depth__3 { - color: #333333; - /* font-weight: bold;; */ -} diff --git a/src/components/manage/Blocks/SiteLocationMap/View.jsx b/src/components/manage/Blocks/SiteLocationMap/View.jsx index 7a095ae..7d0d8c4 100644 --- a/src/components/manage/Blocks/SiteLocationMap/View.jsx +++ b/src/components/manage/Blocks/SiteLocationMap/View.jsx @@ -30,7 +30,7 @@ const View = (props) => { type: props.data.privacy?.value || 'big', }; - React.useState(() => { + React.useEffect(() => { if (__SERVER__) return; const vs = vectorSource || new source.Vector(); if (!vectorSource) { @@ -53,6 +53,7 @@ const View = (props) => { } }); }); + /* eslint-disable-next-line */ }, [siteInspireId]); if (__SERVER__ || !vectorSource) return ''; diff --git a/src/config.js b/src/config.js index 7ebf5d2..ced7612 100644 --- a/src/config.js +++ b/src/config.js @@ -42,9 +42,6 @@ import DiscodataOpenlayersMapBlockView from '~/components/manage/Blocks/Discodat import NavigationBlockEdit from '~/components/manage/Blocks/NavigationBlock/Edit'; import NavigationBlockView from '~/components/manage/Blocks/NavigationBlock/View'; -import SidebarBlockEdit from '~/components/manage/Blocks/SidebarBlock/Edit'; -import SidebarBlockView from '~/components/manage/Blocks/SidebarBlock/View'; - import QueryParamTextEdit from '~/components/manage/Blocks/QueryParamText/Edit'; import QueryParamTextView from '~/components/manage/Blocks/QueryParamText/View'; @@ -104,6 +101,8 @@ import installRegulatoryBATConclusions from '~/components/manage/Blocks/SiteBloc import installExploreEprtr from '~/components/manage/Blocks/ExploreEprtr'; import installList from '~/components/manage/Blocks/List'; import installSelect from '~/components/manage/Blocks/Select'; +import installIndustryDataTable from '~/components/manage/Blocks/IndustryDataTable'; +import installIndustryMap from '~/components/manage/Blocks/IndustryMap'; import { installTableau, installExpendableList, @@ -215,15 +214,6 @@ export default function applyConfig(config) { icon: linkSVG, }; - config.blocks.blocksConfig.sidebar_block = { - id: 'sidebar_block', - title: 'Sidebar Block', - group: 'eprtr_blocks', - view: SidebarBlockView, - edit: SidebarBlockEdit, - icon: linkSVG, - }; - config.blocks.blocksConfig.eprtr_filters_block = { id: 'eprtr_filters_block', title: 'Eprtr filters block', @@ -396,6 +386,8 @@ export default function applyConfig(config) { installExploreEprtr, installList, installSelect, + installIndustryDataTable, + installIndustryMap, installTableau, installExpendableList, installFolderListing, diff --git a/src/customizations/volto/components/theme/Search/Search.jsx b/src/customizations/volto/components/theme/Search/Search.jsx index e786053..5e2db49 100644 --- a/src/customizations/volto/components/theme/Search/Search.jsx +++ b/src/customizations/volto/components/theme/Search/Search.jsx @@ -243,6 +243,8 @@ class Search extends Component { render() { const pollutants = this.props.discodata_resources.data.index_pollutants || []; + const db_version = + process.env.RAZZLE_DB_VERSION || config.settings.db_version || 'latest'; return ( @@ -250,8 +252,7 @@ class Search extends Component { data={{ '@type': 'discodata_sql_builder', sql: { - value: - '{"fieldsets":[{"id":"sql_metadata","title":"SQL","fields":["index_pollutants"]}],"properties":{"index_pollutants":{"title":"Index pollutants","isCollection":true,"hasPagination":false,"urlQuery":false,"sql":"SELECT POL.code,\\nPOL.name,\\nPOL.startYear,\\nPOL.endYear,\\nPOL.parentId,\\nPOL.cas,\\nPOL.eperPollutantId,\\nPOL.codeEPER,\\nPOL_DET.*\\nFROM [IED].[latest].[Glo_Pollutants] as POL\\nLEFT JOIN [IED].[latest].[Glo_PollutantsDetails] AS POL_DET\\nON POL.pollutantId = POL_DET.pollutantId\\nORDER BY name","packageName":"index_pollutant_group_id"}},"required":[]}', + value: `{"fieldsets":[{"id":"sql_metadata","title":"SQL","fields":["index_pollutants"]}],"properties":{"index_pollutants":{"title":"Index pollutants","isCollection":true,"hasPagination":false,"urlQuery":false,"sql":"SELECT POL.code,\\nPOL.name,\\nPOL.startYear,\\nPOL.endYear,\\nPOL.parentId,\\nPOL.cas,\\nPOL.eperPollutantId,\\nPOL.codeEPER,\\nPOL_DET.*\\nFROM [IED].[${db_version}].[Glo_Pollutants] as POL\\nLEFT JOIN [IED].[${db_version}].[Glo_PollutantsDetails] AS POL_DET\\nON POL.pollutantId = POL_DET.pollutantId\\nORDER BY name","packageName":"index_pollutant_group_id"}},"required":[]}`, }, where: { value: diff --git a/src/customizations/volto/middleware/api.js b/src/customizations/volto/middleware/api.js index 3d2d7ae..1fffdc9 100644 --- a/src/customizations/volto/middleware/api.js +++ b/src/customizations/volto/middleware/api.js @@ -41,7 +41,6 @@ export function addExpandersToPath(path, type) { query.expand = expand; } const stringifiedQuery = qs.stringify(query, { - arrayFormat: 'comma', encode: true, }); if (!stringifiedQuery) { diff --git a/src/helpers/api.jsx b/src/helpers/api.jsx index a916c76..e68146a 100644 --- a/src/helpers/api.jsx +++ b/src/helpers/api.jsx @@ -1,8 +1,4 @@ import config from '@plone/volto/registry'; -import { - setDiscodataResource, - setDiscodataResourcePending, -} from '@eeacms/volto-datablocks/actions'; import axios from 'axios'; export const parseResponse = (response) => { @@ -12,156 +8,3 @@ export const parseResponse = (response) => { return {}; } }; - -export const getFacilities = (dispatch, siteInspireId) => { - const sql = encodeURI(`SELECT DISTINCT facilityInspireId - FROM [IED].[latest].[Browse6Header] as R - WHERE R.[siteInspireId] COLLATE Latin1_General_CI_AI LIKE '${siteInspireId}' - GROUP BY R.[facilityInspireId]`); - const url = `${config.settings.providerUrl}?query=${sql}`; - return new Promise((resolve, reject) => { - dispatch( - setDiscodataResourcePending({ key: `facilities-${siteInspireId}` }), - ); - axios - .get(url) - .then((response) => { - const parsedResponse = parseResponse(response)?.results || []; - dispatch( - setDiscodataResource({ - collection: parseResponse(response).results, - resourceKey: 'facilities', - key: siteInspireId, - }), - ); - resolve(parsedResponse); - }) - .catch((error) => { - reject(error); - }); - }); -}; - -export const getInstallations = (dispatch, siteInspireId) => { - const sql = encodeURI(`SELECT DISTINCT - facilityInspireId, - string_agg(concat(installationInspireId, ''), ',') as installations - FROM [IED].[latest].[Browse8Header] as Results - WHERE siteInspireId COLLATE Latin1_General_CI_AI LIKE '${siteInspireId}' - GROUP BY facilityInspireId`); - const url = `${config.settings.providerUrl}?query=${sql}`; - return new Promise((resolve, reject) => { - dispatch( - setDiscodataResourcePending({ key: `installations-${siteInspireId}` }), - ); - axios - .get(url) - .then((response) => { - const parsedResponse = parseResponse(response)?.results || []; - dispatch( - setDiscodataResource({ - collection: parsedResponse.map((item) => ({ - ...item, - installations: [...new Set(item.installations.split(','))], - })), - resourceKey: 'installations', - key: siteInspireId, - }), - ); - resolve(parsedResponse); - }) - .catch((error) => { - reject(error); - }); - }); -}; - -export const getLcps = (dispatch, siteInspireId) => { - const sql = encodeURI(`SELECT DISTINCT - facilityInspireId, - installationInspireId, - string_agg(concat(lcpInspireId, ''), ',') as lcps - FROM [IED].[latest].[Browse10_Header] as Results - WHERE siteInspireId COLLATE Latin1_General_CI_AI LIKE '${siteInspireId}' - GROUP BY facilityInspireId, installationInspireId`); - const url = `${config.settings.providerUrl}?query=${sql}`; - return new Promise((resolve, reject) => { - dispatch(setDiscodataResourcePending({ key: `lcps-${siteInspireId}` })); - axios - .get(url) - .then((response) => { - const parsedResponse = parseResponse(response)?.results || []; - const collection = []; - parsedResponse.forEach((item) => { - const facilityIndex = collection - .map((facility) => facility.facilityInspireId) - .indexOf(item.facilityInspireId); - if (facilityIndex > -1) { - const installationIndex = collection[facilityIndex].installations - .map((installation) => installation.installationInspireId) - .indexOf(item.installationInspireId); - if (installationIndex > -1) { - collection[facilityIndex].installations[installationIndex] = { - ...collection[facilityIndex].installations[installationIndex], - lcps: [ - ...collection[facilityIndex].installations[installationIndex] - .lcps, - [...new Set(item.lcps.split(','))], - ], - }; - } - // else { - // collection[facilityIndex].installations[installationIndex] = { - // ...collection[facilityIndex].installations[installationIndex], - // lcps: [ - // ...collection[facilityIndex].installations[installationIndex] - // .lcps, - // [...new Set(item.lcps.split(','))], - // ], - // }; - // } - } else { - collection.push({ - facilityInspireId: item.facilityInspireId, - installations: [ - { - installationInspireId: item.installationInspireId, - lcps: [...new Set(item.lcps.split(','))], - }, - ], - }); - } - }); - dispatch( - setDiscodataResource({ - collection: [...collection], - resourceKey: 'lcps', - key: siteInspireId, - }), - ); - resolve(parsedResponse); - }) - .catch((error) => { - reject(error); - }); - }); -}; - -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008390396346.INSTALLATION -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008390731864.INSTALLATION -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008390733363.INSTALLATION -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008390925898.INSTALLATION -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008390928080.INSTALLATION -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391004097.INSTALLATION AT.CAED/9008390405734.PART -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391004097.INSTALLATION AT.CAED/9008390405741.PART -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391004134.INSTALLATION -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391004196.INSTALLATION -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391004837.INSTALLATION -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391020134.INSTALLATION -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391257066.INSTALLATION AT.CAED/9008390393697.PART -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391257066.INSTALLATION AT.CAED/9008390393703.PART -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391257066.INSTALLATION AT.CAED/9008390394236.PART -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391257066.INSTALLATION AT.CAED/9008390396933.PART -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391257066.INSTALLATION AT.CAED/9008390511381.PART -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391257066.INSTALLATION AT.CAED/9008390925799.PART -// AT.CAED/9008390099636.SITE AT.CAED/9008390731697.FACILITY AT.CAED/9008391257080.INSTALLATION diff --git a/theme/site/globals/site.overrides b/theme/site/globals/site.overrides index 0e573b9..aba7522 100644 --- a/theme/site/globals/site.overrides +++ b/theme/site/globals/site.overrides @@ -663,7 +663,12 @@ ul, ol { } // BROWSE TABLE -.browse-table { +.simple-data-table { + padding: 0; +} + +.browse-table, +.industry-table { overflow-x: auto; .ui.grid { margin-top: 0 !important; @@ -683,6 +688,12 @@ ul, ol { color: #000; font-weight: bold; text-transform: none; + + &::after { + display: none; + border-bottom: none; + padding: 0; + } } } }