-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
340 additions
and
275 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { connect } from 'react-redux'; | ||
| import { compose } from 'redux'; | ||
| import _uniqueId from 'lodash/uniqueId'; | ||
| import View from './View'; | ||
| import { settings } from '~/config'; | ||
| import './style.css'; | ||
|
|
||
| const getSchema = (props) => { | ||
| return {}; | ||
| }; | ||
|
|
||
| const Edit = (props) => { | ||
| const [state, setState] = useState({ | ||
| schema: getSchema({ ...props, providerUrl: settings.providerUrl }), | ||
| id: _uniqueId('block_'), | ||
| }); | ||
| return ( | ||
| <div> | ||
| <View {...props} id={state.id} mode="edit" /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default compose( | ||
| connect((state, props) => ({ | ||
| pathname: state.router.location.pathname, | ||
| })), | ||
| )(Edit); |
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,187 @@ | ||
| /* REACT */ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import { compose } from 'redux'; | ||
| import { connect } from 'react-redux'; | ||
| import { Tab, Dropdown, Table } from 'semantic-ui-react'; | ||
| import qs from 'query-string'; | ||
| import cx from 'classnames'; | ||
| import './style.css'; | ||
|
|
||
| const panes = [ | ||
| { | ||
| menuItem: 'General information', | ||
| render: (props) => { | ||
| return ( | ||
| <Tab.Pane> | ||
| <RenderTable | ||
| className="description-table" | ||
| celled={false} | ||
| headless={true} | ||
| headers={[ | ||
| { key: 'label', value: 'Label' }, | ||
| { key: 'value', value: 'Value' }, | ||
| ]} | ||
| rows={[ | ||
| { label: 'E-PRTR Pollutant No', value: '9' }, | ||
| { label: 'IUPAC Name', value: 'Methane' }, | ||
| { label: 'IUPAC Name', value: 'Methane' }, | ||
| ]} | ||
| /> | ||
| <h3>Description</h3> | ||
| <h3>Main Uses</h3> | ||
| <h3>Where do the releases originate?</h3> | ||
| <h3>How do the releases affect you and your environment?</h3> | ||
| </Tab.Pane> | ||
| ); | ||
| }, | ||
| }, | ||
| { | ||
| menuItem: 'Pollutant Group', | ||
| render: () => ( | ||
| <Tab.Pane> | ||
| <h3>Pollutant Group - Greenhouse Gases</h3> | ||
| <p className="bold">Group members</p> | ||
| </Tab.Pane> | ||
| ), | ||
| }, | ||
| { | ||
| menuItem: 'Pollutant thresholds', | ||
| render: () => ( | ||
| <Tab.Pane> | ||
| <h3>Pollutant Group - Greenhouse Gases</h3> | ||
| <p className="bold">Threshold for releases</p> | ||
| <RenderTable | ||
| celled={false} | ||
| headless={false} | ||
| headers={[ | ||
| { key: 'to_air', value: 'to air kg/year' }, | ||
| { key: 'to_water', value: 'to water kg/year' }, | ||
| { key: 'to_land', value: 'to land kg/year' }, | ||
| ]} | ||
| rows={[ | ||
| { to_air: '100 000', to_water: '*', to_land: '*' }, | ||
| { to_air: '100 000', to_water: '*', to_land: '*' }, | ||
| { to_air: '100 000', to_water: '*', to_land: '*' }, | ||
| ]} | ||
| /> | ||
| </Tab.Pane> | ||
| ), | ||
| }, | ||
| { | ||
| menuItem: 'Measurements and calculations methods', | ||
| render: () => ( | ||
| <Tab.Pane> | ||
| <h3>Methods and uncertainty</h3> | ||
| <RenderTable | ||
| className="description-table" | ||
| celled={false} | ||
| headless={false} | ||
| headers={[ | ||
| { key: 'to_air', value: 'to air kg/year' }, | ||
| { key: 'to_water', value: 'to water kg/year' }, | ||
| { key: 'to_land', value: 'to land kg/year' }, | ||
| ]} | ||
| rows={[ | ||
| { to_air: '100 000', to_water: '*', to_land: '*' }, | ||
| { to_air: '100 000', to_water: '*', to_land: '*' }, | ||
| { to_air: '100 000', to_water: '*', to_land: '*' }, | ||
| ]} | ||
| /> | ||
| </Tab.Pane> | ||
| ), | ||
| }, | ||
| { | ||
| menuItem: 'Synonyms or other commercial names', | ||
| render: () => <Tab.Pane>Tab 2 Content</Tab.Pane>, | ||
| }, | ||
| { | ||
| menuItem: 'Other relevant reporting requirements', | ||
| render: () => <Tab.Pane>Tab 2 Content</Tab.Pane>, | ||
| }, | ||
| ]; | ||
|
|
||
| const RenderTable = (props) => { | ||
| const { headless = false, headers = [], rows = [] } = props; | ||
| return ( | ||
| <Table | ||
| celled={props.celled} | ||
| className={cx(props.className, headless ? 'headless' : '')} | ||
| columns={headers.length} | ||
| > | ||
| {!headless && headers.length > 0 && ( | ||
| <Table.Header> | ||
| <Table.Row> | ||
| {headers.map((header, headerIndex) => ( | ||
| <Table.HeaderCell key={`${headerIndex}_header`}> | ||
| {header.value} | ||
| </Table.HeaderCell> | ||
| ))} | ||
| </Table.Row> | ||
| </Table.Header> | ||
| )} | ||
| <Table.Body> | ||
| {rows.length > 0 && | ||
| headers.length > 0 && | ||
| rows.map((row, rowIndex) => ( | ||
| <Table.Row key={`${rowIndex}_row`}> | ||
| {headers.map((header, headerIndex) => ( | ||
| <Table.Cell key={`${headerIndex}_cell`}> | ||
| {row[header.key]} | ||
| </Table.Cell> | ||
| ))} | ||
| </Table.Row> | ||
| ))} | ||
| </Table.Body> | ||
| </Table> | ||
| ); | ||
| }; | ||
|
|
||
| const View = ({ content, ...props }) => { | ||
| const [activeTab, setActiveTab] = useState(0); | ||
| const pollutionType = [ | ||
| { | ||
| key: 'airPollutionPerCapita', | ||
| value: 'airPollutionPerCapita', | ||
| text: 'Air', | ||
| labelText: 'air pollution per capita', | ||
| }, | ||
| { | ||
| key: 'waterPollutionPerCapita', | ||
| value: 'waterPollutionPerCapita', | ||
| text: 'Water', | ||
| labelText: 'water pollution per capita', | ||
| }, | ||
| ]; | ||
| return ( | ||
| <div className="pollutant-index-container"> | ||
| <div className="custom-selector big blue display-flex"> | ||
| <Dropdown | ||
| selection | ||
| onChange={(event, data) => {}} | ||
| placeholder={'Pollutant Group'} | ||
| options={pollutionType} | ||
| /> | ||
| <Dropdown | ||
| selection | ||
| onChange={(event, data) => {}} | ||
| placeholder={'Pollutant'} | ||
| options={pollutionType} | ||
| /> | ||
| </div> | ||
| <Tab | ||
| activeIndex={activeTab} | ||
| panes={panes} | ||
| onTabChange={(event, data) => { | ||
| setActiveTab(data.activeIndex); | ||
| }} | ||
| /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default compose( | ||
| connect((state, props) => ({ | ||
| query: state.router.location.search, | ||
| search: state.discodata_query.search, | ||
| })), | ||
| )(View); |
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,66 @@ | ||
| .pollutant-index-container .ui.attached.tabular.menu { | ||
| flex-wrap: wrap; | ||
| border-bottom: 0; | ||
| margin-left: -0.5rem; | ||
| } | ||
|
|
||
| .pollutant-index-container .ui.attached.tabular.menu .item { | ||
| padding: 0; | ||
| padding-top: 1rem; | ||
| padding-bottom: 0.6rem; | ||
| margin: 0 0.5rem; | ||
| } | ||
|
|
||
| .pollutant-index-container .ui.attached.tabular.menu .item:hover { | ||
|
|
||
| } | ||
|
|
||
| .pollutant-index-container .ui.attached.tabular.menu .active.item { | ||
| background-color: transparent !important; | ||
| color: #4296B3 !important; | ||
| font-weight: bold !important; | ||
| border-bottom: 2px solid #4296B3 !important; | ||
| border-radius: 0; | ||
| } | ||
|
|
||
| .pollutant-index-container .ui.attached.tabular.menu .active.item:hover { | ||
| background: transparent !important; | ||
| color: #3b849e !important; | ||
| } | ||
|
|
||
| .pollutant-index-container .ui.bottom.attached.segment.active.tab { | ||
| padding-left: 0; | ||
| padding-right: 0; | ||
| } | ||
|
|
||
| .pollutant-index-container h3 { | ||
| font-size: 1.3em; | ||
| } | ||
|
|
||
| .pollutant-index-container h3.blue { | ||
| color: #4296B3; | ||
| } | ||
|
|
||
| .pollutant-index-container .ui.table thead th { | ||
| text-transform: unset; | ||
| } | ||
|
|
||
| .pollutant-index-container .ui.table.description-table thead tr th { | ||
| background-color: unset; | ||
| } | ||
|
|
||
| .pollutant-index-container .ui.table.description-table thead tr, | ||
| .pollutant-index-container .ui.table.description-table:not(.headless) tbody tr:nth-child(even), | ||
| .pollutant-index-container .ui.table.description-table.headless tbody tr:nth-child(odd) { | ||
| background-color: #FAF8F8; | ||
| } | ||
|
|
||
| .pollutant-index-container .ui.table.description-table thead tr:hover, | ||
| .pollutant-index-container .ui.table.description-table tbody tr:hover { | ||
| background-color: #F4F4F4 !important; | ||
| } | ||
|
|
||
| .pollutant-index-container .ui.table.description-table tbody tr td:nth-child(1) { | ||
| color: #EC776A; | ||
| font-weight: bold; | ||
| } |
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.