generated from eea/volto-addon-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from eea/develop
Release
- Loading branch information
Showing
18 changed files
with
380 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
5 changes: 5 additions & 0 deletions
5
src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerEdit.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| import CaseStudyExplorerView from './CaseStudyExplorerView'; | ||
|
|
||
| export default function CaseStudyExplorerEdit(props) { | ||
| return <CaseStudyExplorerView {...props} mode="edit" />; | ||
| } |
109 changes: 109 additions & 0 deletions
109
src/components/manage/Blocks/CaseStudyExplorer/CaseStudyExplorerView.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import React from 'react'; | ||
| import superagent from 'superagent'; | ||
| import { addAppURL } from '@plone/volto/helpers'; | ||
| import { Grid } from 'semantic-ui-react'; // Dropdown, | ||
| import { getVocabulary } from '@plone/volto/actions'; // , searchContent | ||
| //import ECDEIndicator from './ECDEIndicator'; | ||
| import { useDispatch } from 'react-redux'; // , useSelector | ||
|
|
||
| // const cases_url = | ||
| // 'http://localhost:3000/en/mkh/case-studies-map-arcgis.json/@@download/file'; | ||
| const cases_url = '@@case-studies-map.arcgis.json'; | ||
| const IPCC = 'eea.climateadapt.aceitems_ipcc_category'; | ||
|
|
||
| function useCases(url) { | ||
| const [cases, setCases] = React.useState([]); | ||
|
|
||
| React.useEffect(() => { | ||
| superagent | ||
| .get(cases_url) | ||
| .set('accept', 'json') | ||
| .then((resp) => { | ||
| const res = JSON.parse(resp.text); | ||
| setCases(res.features); | ||
| }); | ||
| }, []); | ||
|
|
||
| return cases; | ||
| } | ||
|
|
||
| // function useFilters() { | ||
| // const [filters, setFilters] = React.useState([]); | ||
| // } | ||
|
|
||
| export default function CaseStudyExplorerView(props) { | ||
| // console.log(regions); | ||
| const cases = useCases(addAppURL(cases_url)); | ||
|
|
||
| //const filters = useFilters(); | ||
| const [filters, setFilters] = React.useState([]); | ||
| const dispatch = useDispatch(); | ||
| // const ipcc_categories = useSelector( | ||
| // (state) => state.vocabularies?.[IPCC]?.items, | ||
| // ); | ||
|
|
||
| React.useEffect(() => { | ||
| const action = getVocabulary({ | ||
| vocabNameOrURL: IPCC, | ||
| }); | ||
| dispatch(action); | ||
| }, [dispatch]); | ||
|
|
||
| React.useEffect(() => { | ||
| let _filters = { sectors: {}, impacts: {} }; | ||
|
|
||
| // console.log('acis', typeof cases, cases[0], cases); | ||
| // console.log(Object.keys(cases)); | ||
| for (var key of Object.keys(cases)) { | ||
| // console.log(key, cases[key]); | ||
| var _case = cases[key]; | ||
| let sectorKeys = _case.properties.sectors.split(','); | ||
| let sectorNames = _case.properties.sectors_str.split(','); | ||
| for (var i = 0; i < sectorNames.length; i++) { | ||
| if (!_filters.sectors.hasOwnProperty(sectorKeys[i + 1])) { | ||
| _filters.sectors[sectorKeys[i + 1]] = sectorNames[i]; | ||
| } | ||
| } | ||
| let impactKeys = _case.properties.impacts.split(','); | ||
| let impactNames = _case.properties.impacts_str.split(','); | ||
| for (i = 0; i < impactNames.length; i++) { | ||
| if (!_filters.impacts.hasOwnProperty(impactKeys[i + 1])) { | ||
| _filters.impacts[impactKeys[i + 1]] = impactNames[i]; | ||
| } | ||
| } | ||
| } | ||
| setFilters(_filters); | ||
| }, [cases]); | ||
|
|
||
| // const [activeFilters, setActiveFilters] = React.useState({}); | ||
| // | ||
| // console.log({ ipcc_categories, filters }); | ||
|
|
||
| return ( | ||
| <div> | ||
| <Grid columns="12"> | ||
| <Grid.Column mobile={12} tablet={12} computer={10} className="col-left"> | ||
| MAP HERE | ||
| </Grid.Column> | ||
| <Grid.Column mobile={12} tablet={12} computer={2} className="col-left"> | ||
| {Object.entries(filters?.sectors || {}).map( | ||
| ([value, label], index) => ( | ||
| <div key={index}> | ||
| <input | ||
| value={value} | ||
| type="checkbox" | ||
| onChange={(e) => { | ||
| // const value = | ||
| // console.log(e.target.checked); | ||
| // setActiveFilters({...activeFilters, sector: [...activeFilters | ||
| }} | ||
| /> | ||
| <span>{label}</span> | ||
| </div> | ||
| ), | ||
| )} | ||
| </Grid.Column> | ||
| </Grid> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import worldSVG from '@plone/volto/icons/world.svg'; | ||
| import CaseStudyExplorerEdit from './CaseStudyExplorerEdit'; | ||
| import CaseStudyExplorerView from './CaseStudyExplorerView'; | ||
|
|
||
| export default function installCaseStudyExplorerBlock(config) { | ||
| config.blocks.blocksConfig.caseStudyExplorer = { | ||
| id: 'caseStudyExplorer', | ||
| title: 'Case Study Explorer', | ||
| icon: worldSVG, | ||
| group: 'common', | ||
| edit: CaseStudyExplorerEdit, | ||
| view: CaseStudyExplorerView, | ||
| }; | ||
|
|
||
| return config; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,14 @@ | ||
| import { compose } from 'redux'; | ||
| import installMKHMap from './MKHMap'; | ||
| import installECDEIndicatorsBlock from './ECDEIndicators'; | ||
| import installCaseStudyExplorerBlock from './CaseStudyExplorer'; | ||
|
|
||
| export default function installBlocks(config) { | ||
| config.blocks.blocksConfig.title.restricted = false; | ||
| return compose( | ||
| installMKHMap, | ||
| installECDEIndicatorsBlock, | ||
| installCaseStudyExplorerBlock, | ||
| // | ||
| )(config); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React from 'react'; | ||
| import { | ||
| HTMLField, | ||
| // ContentMetadata, | ||
| // LinksList, | ||
| // PublishedModifiedInfo, | ||
| // ShareInfo, | ||
| } from '@eeacms/volto-cca-policy/helpers'; | ||
| import { Grid } from 'semantic-ui-react'; | ||
| // import { Fragment } from 'react'; | ||
|
|
||
| const Details = (props) => { | ||
| const showDetails = () => { | ||
| // console.log("WIP details"); | ||
| }; | ||
|
|
||
| return ( | ||
| <a href="#details"> | ||
| <button className="ui button primary" onClick={showDetails}> | ||
| Explore in detail | ||
| </button> | ||
| </a> | ||
| ); | ||
| }; | ||
|
|
||
| function C3SIndicatorView(props) { | ||
| const { content } = props; | ||
|
|
||
| return ( | ||
| <div className="c3sindicator-view"> | ||
| <div className="ui container"> | ||
| <Grid columns="12"> | ||
| <div className="row"> | ||
| <Grid.Column | ||
| mobile={12} | ||
| tablet={12} | ||
| computer={12} | ||
| className="col-full" | ||
| > | ||
| <h1>{content.title}</h1> | ||
| <a href="/knowledge/european-climate-data-explorer/"> | ||
| <button className="ui button primary">ECDE homepage</button> | ||
| </a> | ||
| <HTMLField | ||
| value={content.long_description} | ||
| className="long_description" | ||
| /> | ||
| <Details {...props} /> | ||
| </Grid.Column> | ||
| </div> | ||
| </Grid> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default C3SIndicatorView; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.