\n {tabs.map((prop, key) => {\n var icon = {};\n if (prop.tabIcon !== undefined) {\n icon[\"icon\"] = \n
\n {tabs.map((prop, key) => {\n return (\n \n {prop.tabContent}\n
\n );\n })}\n \n \n {tabButtons} \n {tabContent} \n \n ) : (\n \n {tabButtons}\n {tabContent}\n
\n );\n }\n}\n\nNavPills.defaultProps = {\n active: 0,\n color: \"primary\"\n};\n\nNavPills.propTypes = {\n classes: PropTypes.object.isRequired,\n // index of the default active pill\n active: PropTypes.number,\n tabs: PropTypes.arrayOf(\n PropTypes.shape({\n tabButton: PropTypes.string,\n tabIcon: PropTypes.func,\n tabContent: PropTypes.node\n })\n ).isRequired,\n color: PropTypes.oneOf([\n \"primary\",\n \"warning\",\n \"danger\",\n \"success\",\n \"info\",\n \"rose\"\n ]),\n direction: PropTypes.string,\n horizontal: PropTypes.shape({\n tabsGrid: PropTypes.object,\n contentGrid: PropTypes.object\n }),\n alignCenter: PropTypes.bool\n};\n\nexport default withStyles(navPillsStyle)(NavPills);\n","import { title } from \"assets/jss/material-kit-pro-react.jsx\";\n\nconst pillsStyle = {\n section: {\n padding: \"70px 0\"\n },\n container: {\n color: \"#555\"\n },\n title: {\n ...title,\n marginTop: \"30px\",\n minHeight: \"32px\",\n textDecoration: \"none\"\n },\n itemCount: {\n fontWeight: \"bold\"\n }\n};\n\nexport default pillsStyle;\n","import React from \"react\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\n\n// @material-ui/icons\nimport Dashboard from \"@material-ui/icons/Dashboard\";\nimport Landscape from \"@material-ui/icons/Landscape\";\nimport Search from \"@material-ui/icons/Search\"\n\n// core components\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\nimport GridItem from \"components/Grid/GridItem.jsx\";\nimport NavPills from \"components/NavPills/NavPills.jsx\";\nimport pillsStyle from \"assets/jss/prehnit/views/landingPageSections/pillsStyle.jsx\";\n\nimport { withNamespaces } from \"react-i18next\";\n\nimport { API } from \"services/api\";\n\nclass SectionPills extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n clcBases: undefined,\n clcChanges: undefined,\n localComponent: undefined,\n dataLoaded: false\n };\n }\n\n filterData(data, col, id) {\n return data.filter(row => {\n return row[col] === id;\n });\n }\n\n componentDidMount() {\n API.getContentLists()\n .then(data => {\n let clcBases = this.filterData(data, 'group_code', 'clc-base');\n let clcChanges = this.filterData(data, 'group_code', 'clc-change');\n let localComponent = this.filterData(data, 'group_code', 'local-component');\n\n this.setState({\n clcBases: clcBases,\n clcChanges: clcChanges,\n localComponent: localComponent,\n dataLoaded: true\n })\n })\n\n }\n\n render() {\n const { t, classes } = this.props;\n return (\n \n
\n
\n
\n \n {this.state.dataLoaded ? \n {t(\"comp-local\")} \n {t(\"local-para1\")}
\n {t(\"local-para2\")}
\n \n {this.state.localComponent.map((el, key) => {\n return (\n {t(el.title_trans_token)} ({t(el.dsc_trans_token)} )
\n {t(\"local-para3\")}
\n {t(\"local-url\")}
\n \n )\n },\n {\n tabButton: t(\"comp-paneu\"),\n tabIcon: Landscape,\n tabContent: (\n \n {t(\"comp-paneu\")} \n {t(\"paneu-para1\")}
\n {t(\"paneu-para2\")}
\n {t(\"paneu-para3\")}
\n {t(\"paneu-url\")}
\n {t(\"paneu-para4\")}
\n {t(\"paneu-list1\")}
\n \n {this.state.clcChanges.map((el, key) => {\n return (\n {t(el.title_trans_token)}
\n {t(\"paneu-list2\")}
\n \n {this.state.clcBases.map((el, key) => {\n return (\n {t(el.title_trans_token)}
\n\n \n )\n },\n {\n tabButton: t(\"comp-hrl\"),\n tabIcon: Search,\n tabContent: (\n \n {t(\"comp-hrl\")} \n {t(\"hrl-para1\")}
\n {t(\"hrl-para2\")}
\n {t(\"hrl-para3\")}
\n {t(\"hrl-url\")}
\n \n )\n }\n ]}\n /> : null}\n \n \n
\n
\n
\n
}\n fixed\n changeColorOnScroll={{\n height: 300,\n color: \"white\"\n }}\n {...rest}\n />\n
\n \n \n \n {t(\"pagecontent:landing-title\")} \n {t(\"pagecontent:landing-desc\")} \n \n \n
\n \n
\n
\n \n {React.Children.map(children, (child, i) => {\n if (child != null) {\n return (\n \n {child}\n \n );\n } else {\n return null;\n }\n })}\n \n
\n );\n }\n}\n\nexport default withStyles(mapStyle)(TopMenu);","import React from 'react';\nimport classNames from \"classnames\";\n\n// core components\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\nimport GridItem from \"components/Grid/GridItem.jsx\";\n\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport mapStyle from \"assets/jss/prehnit/components/mapStyle.jsx\";\n\nclass BottomMenu extends React.Component {\n\n render() {\n const {classes, children} = this.props;\n return (\n \n {React.Children.map(children, (child, i) => {\n if (child != null) {\n let noRightPadding = { paddingRight: \"0px\" }; \n return (\n \n {child.props.fullWidth ?\n \n {child}\n \n : (child.props.halfWidth ?\n \n {child}\n \n :\n \n {child}\n )\n }\n \n );\n } else {\n return null;\n }\n })}\n
\n );\n }\n}\n\nexport default withStyles(mapStyle)(BottomMenu);","import React from 'react';\nimport classNames from \"classnames\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport mapStyle from \"assets/jss/prehnit/components/mapStyle.jsx\";\n\nimport { withNamespaces } from \"react-i18next\";\n\nimport Tabs from '@material-ui/core/Tabs';\nimport Tab from '@material-ui/core/Tab';\nimport Icon from \"@material-ui/core/Icon\";\n\n// core components\n// import GridContainer from \"components/Grid/GridContainer.jsx\";\n// import GridItem from \"components/Grid/GridItem.jsx\";\n\nclass SideContent extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n selectedTabIndex: 0\n }\n\n this.handleChange = this.handleChange.bind(this);\n this.handleClose = this.handleClose.bind(this);\n\n }\n\n handleChange(event, newValue) {\n this.setState({\n selectedTabIndex: newValue\n })\n }\n\n handleClose() {\n this.handleChange(null, 0);\n if (this.props.onClose) {\n this.props.onClose();\n }\n }\n\n render() {\n const { classes } = this.props;\n\n const children = React.Children.toArray(this.props.children).filter(o => o); //clear null elements\n\n let propClass = '';\n\n if (this.props.right) {\n propClass = classes.sideContentRight;\n } else if (this.props.left) {\n propClass = classes.sideContentLeft;\n }\n\n if (children.length > 0) {\n return (\n \n
\n {React.Children.map(children, (child, i) => {\n if (child != null) {\n return (\n {child.props.icon}}/>\n );\n } else {\n return null;\n }\n })}\n clear} onClick={this.handleClose}/>\n \n\n {React.Children.map(children, (child, i) => {\n if (child != null && this.state.selectedTabIndex === i) {\n return (\n
{child}
\n );\n } else {\n return null;\n }\n })}\n\n
\n {systemLayersList.map((prop, key) => {\n return (\n this.handleCloseMenu(prop)}\n className={dropdownItem}\n >\n {prop.icon ? prop.icon : \"layers\"} \n {prop.displayCode ? t(prop.displayCode) : prop.display}\n \n );\n })}\n {userLayersList && userLayersList.length > 0 ?\n this.handleCloseMenu(\"divider\")}\n className={classes.dropdownDividerItem}\n /> : null}\n {userLayersList.map((prop, key) => {\n return (\n this.handleCloseMenu(prop)}\n className={dropdownItem}\n >\n {prop.icon ? prop.icon : \"layers\"} \n {prop.displayCode ? t(prop.displayCode) : prop.display}\n \n this.handleDeleteMenuItem(prop)}>\n delete \n \n \n \n );\n })}\n\n this.handleCloseMenu(\"divider\")}\n className={classes.dropdownDividerItem}\n />\n this.handleAdd()}\n className={dropdownItem}\n >\n add \n {t(\"map:basemap-add\")}\n \n \n );\n\n return (\n \n
\n
{\n this.anchorEl = node;\n }}\n color=\"primary\"\n onClick={this.handleClick}\n className={classes.smallButton}\n >\n {buttonIcon} \n \n\n \n {({ TransitionProps, placement }) => (\n \n
\n \n \n {t(\"map:opacity\")} \n
\n \n \n {t(\"map:year\")} \n
\n \n \n \n \n \n help \n \n \n \n \n grid_on \n \n \n \n \n );\n }\n}\n\nexport default withNamespaces()(withStyles(mapStyle)(LayerConfigPanel));","\nimport i18n from 'i18next';\nimport { API } from \"services/api\";\n\nimport { Languages as LanguagesFallback } from \"config/LanguageList.jsx\";\n\nfunction checkTrans(ns) {\n\n if (!i18n.hasResourceBundle('hr', ns)) { //if resource is missing for current languages\n API.getLanguages() //we will retrieve all the languages from db (because i18n.languages might miss some)\n .then(langs => {\n if (!langs) {\n console.warn('Loading Fallback languages!');\n langs = LanguagesFallback;\n }\n langs.forEach(function(lang){ // and then we retrieve translations for all the languages\n if (!i18n.hasResourceBundle(lang.code, ns)) {\n API.getTranslations(lang.code, ns)\n .then(data => {\n if (data) {\n i18n.addResourceBundle(lang.code, ns, data);\n } else {\n console.error('Cannot load translations for language: ' + lang.code + \", group: \" + ns);\n }\n });\n }\n });\n });\n }\n}\n\nexport { checkTrans }","import React from 'react'\nimport classNames from \"classnames\";\n\nimport PropTypes from \"prop-types\";\n\nimport Button from \"components/CustomButtons/Button.jsx\";\nimport LayerConfigPanel from \"components/Map/controls/LayerConfigPanel.jsx\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport MenuItem from \"@material-ui/core/MenuItem\";\nimport MenuList from \"@material-ui/core/MenuList\";\nimport Paper from \"@material-ui/core/Paper\";\nimport Grow from \"@material-ui/core/Grow\";\nimport Divider from \"@material-ui/core/Divider\";\nimport Popper from \"@material-ui/core/Popper\";\nimport Icon from \"@material-ui/core/Icon\";\nimport ClickAwayListener from \"@material-ui/core/ClickAwayListener\";\n\nimport { withNamespaces } from \"react-i18next\";\n\nimport mapStyle from \"assets/jss/prehnit/components/mapStyle.jsx\";\n\nimport { checkTrans } from \"helpers\";\n\nclass LayerSelector extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n openLayers: false,\n openSettings: false,\n };\n\n this.handleClickLayers = this.handleClickLayers.bind(this);\n this.handleCloseLayers = this.handleCloseLayers.bind(this);\n\n this.handleClickSettings = this.handleClickSettings.bind(this);\n this.handleCloseSettings = this.handleCloseSettings.bind(this);\n\n this.handleSelect = this.handleSelect.bind(this);\n\n this.handleSetOpacity = this.handleSetOpacity.bind(this);\n this.handleSetYear = this.handleSetYear.bind(this);\n };\n\n handleClickLayers = () => {\n this.setState(state => ({\n openLayers: !state.openLayers,\n openSettings: false\n }));\n };\n\n handleClickSettings = () => {\n this.setState(state => ({\n openLayers: false,\n openSettings: !state.openSettings\n }));\n };\n\n handleCloseLayers = event => {\n if (this.anchorLayersEl.contains(event.target)) {\n return;\n }\n this.setState({ openLayers: false });\n };\n\n handleCloseSettings = event => {\n if (this.anchorSettingsEl.contains(event.target)) {\n return;\n }\n this.setState({ openSettings: false });\n };\n\n handleSelect(param) {\n this.setState({\n openLayers: false,\n });\n\n if (param && param.dataCodeGroup) {\n checkTrans(param.dataCodeGroup);\n }\n\n if (this.props && this.props.onSelect) { //callback\n this.props.onSelect(param);\n }\n };\n\n handleSetOpacity(value) {\n if (this.props && this.props.onSetOpacity) { //callback\n this.props.onSetOpacity(value / 100);\n }\n };\n\n handleSetYear(value) {\n if (this.props && this.props.onSetYear && this.props.layer) {\n let ind = this.props.layer.years.indexOf(value)\n if (this.props.layer.layerNames && ind <= this.props.layer.layerNames.length - 1) {\n let layerName = this.props.layer.layerNames[ind];\n\n this.props.onSetYear(layerName); //callback\n }\n }\n };\n\n getYear(value) {\n if (this.props && this.props.layer && this.props.layer.layerNames) {\n let ind = this.props.layer.layerNames.indexOf(value);\n return this.props.layer.years[ind];\n } else {\n return null;\n }\n }\n\n render() {\n const { openLayers, openSettings, selectedLayer } = this.state;\n\n const {\n t,\n classes,\n buttonText,\n buttonIcon,\n settingsIcon,\n layersList,\n buttonProps,\n dropup,\n // dropdownHeader,\n caret,\n hoverColor,\n dropPlacement,\n noLiPadding,\n innerDropDown,\n navDropdown\n } = this.props;\n\n const caretClasses = classNames({\n [classes.caret]: true,\n [classes.caretDropup]: dropup && !openLayers,\n [classes.caretActive]: openLayers && !dropup\n });\n\n const dropdownItem = classNames({\n [classes.dropdownItem]: true,\n [classes[hoverColor + \"Hover\"]]: true,\n [classes.noLiPadding]: noLiPadding\n });\n\n const layersMenu = (\n \n {this.props.layer ?\n this.handleSelect(null)}\n className={dropdownItem}\n >\n block \n {t(\"map:clear-selection\")}\n : null\n }\n {this.props.layer ?\n \n {t(prop.displayCode)}\n \n );\n }\n if (prop.divider) {\n return (\n this.handleSelect(prop)}\n className={dropdownItem}\n >\n {prop.icon} \n {prop.text}\n \n );\n\n }\n\n return (\n this.handleSelect(prop)}\n className={dropdownItem}\n title={t(prop.displayCode)}\n >\n {prop.icon ? prop.icon : \"layers\"} \n {t(prop.displayCode)}\n \n );\n })}\n \n );\n\n const settingsPanel = (\n \n
\n
{\n this.anchorLayersEl = node;\n }}\n {...buttonProps}\n onClick={this.handleClickLayers}\n className={classNames(classes.firstButton, classes.mainButton)}\n disabled={this.props.disabled}\n >\n {buttonIcon !== undefined ? (\n \n {this.props.layer ? t(this.props.layer.displayCode) : this.props.title}\n
\n {caret ? {\n this.anchorSettingsEl = node;\n }}\n {...buttonProps}\n className={classNames(classes.lastButton, classes.settingsButton)}\n onClick={this.handleClickSettings}\n disabled={this.props.layer ? false : true}\n >\n \n {settingsIcon} \n \n\n \n
\n {({ TransitionProps, placement }) => (\n \n {this.state.selectedLayer ?\n this.handleCloseMenu( null )}\n className={dropdownItem}\n >\n block \n {t(\"map:clear-selection\")}\n : null\n }\n {this.state.selectedLayer ?\n this.handleCloseMenu(\"divider\")}\n className={classes.dropdownDividerItem}\n />\n : null\n }\n {this.borders.map((prop, key) => {\n if (prop.header) {\n return (\n \n {t(prop.displayCode)}\n \n );\n }\n if (prop.divider) {\n return (\n this.handleCloseMenu(\"divider\")}\n className={classes.dropdownDividerItem}\n />\n );\n }\n\n return (\n this.handleCloseMenu(prop)}\n className={dropdownItem}\n >\n border_outer \n {prop.displayCode ? t(prop.displayCode) : prop.display}\n \n );\n })}\n \n );\n\n return (\n \n
\n
{\n this.anchorEl = node;\n }}\n {...buttonProps}\n onClick={this.handleClick}\n >\n {buttonIcon !== undefined ? (\n \n {/* {this.props.title} {this.state.selectedLayer ? ('(' + t(this.state.selectedLayer.displayCode) + ')') : null} */}\n {this.state.selectedLayer ? t(this.state.selectedLayer.displayCode) : this.props.title }\n
\n {caret ? \n
\n {({ TransitionProps, placement }) => (\n \n
\n
\n
\n \n {t(\"map:scale\")} ~ 1 : {this.state.open ?\n {this.getMapScale(projUnits, viewResolution, zoom)} \n\n }\n
\n \n
\n
\n {t(\"map:position\")}: \n { Math.round(this.chooseCoordsX()) }, { Math.round(this.chooseCoordsY()) }\n
\n );\n }\n}\n\nexport default withNamespaces()(withStyles(mapStyle)(ShowCoords));","import React from 'react'\n\nimport { withNamespaces } from \"react-i18next\";\n\nclass LayerInfo extends React.Component {\n render() {\n const { t, layer } = this.props;\n\n return (\n { layer.descCode ? t(layer.descCode) : layer.desc}
\n );\n }\n}\n\nexport default withNamespaces()(LayerInfo);","import \"isomorphic-fetch\"\n\nexport const geoserverService = {\n WMS: {\n getCapabilities,\n getFeatureInfo,\n getLegendGraphic\n },\n WFS: {\n getFeatures\n }\n}\n\nfunction getFeatureInfo(query_layers, point) {\n let headers = [];\n headers['Content-Type'] = 'text/plain';\n headers['Accept'] = 'application/json'\n\n const requestOptions = {\n method: 'GET',\n headers: headers\n }\n\n let layers = query_layers.join(',');\n let bbox = [point[0] - 50 ,point[1] - 50, point[0] + 50, point[1] + 50].join(',');\n\n const url = process.env.REACT_APP_GeoServer_Url\n + \"?service=wms\"\n + \"&version=1.1.1\"\n + \"&request=GetFeatureInfo\"\n\n + \"&layers=\" + layers\n + \"&styles=\"\n + \"&srs=EPSG:3765\"\n + \"&bbox=\" + bbox\n + \"&width=101\"\n + \"&height=101\"\n + \"&query_layers=\" + layers\n + \"&info_format=application/json\"\n + \"&feature_count=50\"\n + \"&x=50\"\n + \"&y=50\"\n ;\n\n return fetch(url, requestOptions)\n .then( response => {\n return response.text().then( text => {\n const data = text && JSON.parse(text)\n if (!response.ok) {\n const error = (data && data.message) || response.statusText;\n return Promise.reject(error);\n }\n\n return data;\n })\n\n })\n .catch( function(error) {\n\n });\n}\n\n\nfunction getLegendGraphic(query_layer) {\n let headers = [];\n headers['Content-Type'] = 'text/plain';\n headers['Accept'] = 'application/json';\n\n const requestOptions = {\n method: 'GET',\n headers: headers\n }\n\n const url = process.env.REACT_APP_GeoServer_Url\n + \"?service=wms\"\n + \"&version=1.1.1\"\n + \"&request=GetLegendGraphic\"\n\n + \"&layer=\" + query_layer\n + \"&width=20\"\n + \"&height=20\"\n + \"&format=application/json\"\n // + \"&format=image/png\"\n ;\n\n // console.log(url);\n\n // return fetch(url, requestOptions)\n // .then(response=>{return response.blob()})\n // .catch( function(error) {\n // });\n\n return fetch(url, requestOptions)\n .then( response => {\n return response.text().then( text => {\n const data = text\n if (!response.ok) {\n const error = (data && data.message) || response.statusText;\n return Promise.reject(error);\n }\n\n return data;\n })\n\n })\n .catch( function(error) {\n\n });\n\n}\n\nfunction getCapabilities() {\n let headers = [];\n headers['Content-Type'] = 'text/plain';\n headers['Accept'] = 'text/xml';\n\n const requestOptions = {\n method: 'GET',\n headers: headers\n }\n\n const url = process.env.REACT_APP_GeoServer_Url\n + \"?service=wms\"\n + \"&version=1.3.0\"\n + \"&request=GetCapabilities\"\n ;\n\n return fetch(url, requestOptions)\n .then( response => {\n return response.text().then( text => {\n const data = text\n if (!response.ok) {\n const error = (data && data.message) || response.statusText;\n return Promise.reject(error);\n }\n\n return data;\n })\n\n })\n .catch( function(error) {\n\n });\n}\n\nfunction getFeatures(query_layer) {\n let headers = [];\n headers['Content-Type'] = 'text/plain';\n headers['Accept'] = 'application/json';\n\n const requestOptions = {\n method: 'GET',\n headers: headers\n }\n\n const url = process.env.REACT_APP_GeoServer_WFS_Url\n + \"?service=wfs\"\n + \"&version=1.0.0\"\n + \"&request=GetFeature\"\n + \"&typeName=\" + query_layer\n + \"&maxFeatures=999\"\n + \"&outputFormat=application/json\"\n ;\n\n return fetch(url, requestOptions)\n .then( response => {\n return response.text().then( text => {\n const data = text\n if (!response.ok) {\n const error = (data && data.message) || response.statusText;\n return Promise.reject(error);\n }\n\n return data;\n })\n\n })\n .catch( function(error) {\n\n });\n\n}","import React from 'react'\n\nimport Typography from \"@material-ui/core/Typography\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport mapStyle from \"assets/jss/prehnit/components/mapStyle.jsx\";\n\nimport { withNamespaces } from \"react-i18next\";\n\nimport { geoserverService } from \"services/geoserver\";\n\nclass LayerLegend extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n layerName: this.props.layer.layerName,\n rules : [],\n legend:
,\n image: undefined\n }\n\n this.parseRules = this.parseRules.bind(this);\n }\n\n legendEntry(color, text, kod, showCode) {\n const { classes } = this.props;\n return (\n \n
\n
{text}{showCode === \"1\" ? ({kod}) : null} \n
\n {entries}\n
\n );\n\n }\n\n render() {\n\n if (this.state.layerName !== this.props.layer.layerName || this.state.rules.length === 0) {\n geoserverService.WMS.getLegendGraphic(this.props.layer.layerName)\n .then (data => {\n data = JSON.parse(data);\n\n if (data && data.Legend && Array.isArray(data.Legend) && data.Legend.length > 0 ) {\n let rules = data.Legend[0].rules;\n this.setState({\n rules: rules,\n layerName: this.props.layer.layerName\n });\n }\n\n });\n\n }\n\n let legend = this.parseRules(this.state.rules);\n return (\n \n {legend}\n
\n );\n }\n}\n\nexport default withNamespaces()(withStyles(mapStyle)(LayerLegend));","import OlSourceOSM from \"ol/source/OSM\";\nimport OlLayerTile from \"ol/layer/Tile\" ;\n\nconst BaseLayerListFallback = [\n {\n id: \"101\",\n display: \"OSM (default)\",\n layer: new OlLayerTile({\n source: new OlSourceOSM(),\n role: \"base\"\n })\n }\n];\n\nexport default BaseLayerListFallback;\n","import React, { Component } from \"react\";\nimport numbro from 'numbro';\n\n// OpenLayers\nimport OlMap from \"ol/Map\";\nimport OlView from \"ol/View\";\nimport OlCollection from \"ol/Collection\";\nimport OlFormatJSON from \"ol/format/GeoJSON\";\n\nimport OlStyle from 'ol/style/Style';\nimport OlStroke from 'ol/style/Stroke';\nimport OlFill from 'ol/style/Fill';\nimport OlRegularShape from 'ol/style/RegularShape';\n\nimport OlSourceTileWMS from \"ol/source/TileWMS\";\nimport OlSourceVector from \"ol/source/Vector\";\nimport OlSourceOSM from \"ol/source/OSM\";\nimport OlSourceRaster from \"ol/source/Raster\";\nimport OlSourceStamen from \"ol/source/Stamen\";\n\nimport OlLayerTile from \"ol/layer/Tile\";\nimport OlLayerVector from \"ol/layer/Vector\";\nimport OlLayerImage from \"ol/layer/Image\";\n\nimport { Zoom, Attribution, FullScreen, ScaleLine } from 'ol/control.js';\n\nimport { defaults as OlInteractionDefaults } from 'ol/interaction';\n\nimport proj4 from 'proj4';\nimport { register as OlRegister } from 'ol/proj/proj4'\nimport { get as OlGetProjection } from 'ol/proj'\n\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\nimport GridItem from \"components/Grid/GridItem.jsx\";\n\n// import RotateNorthControl from './controls/RotateNorthControl.jsx';\nimport TopMenu from './TopMenu.jsx';\nimport BottomMenu from \"./BottomMenu.jsx\";\nimport SideContent from \"./SideContent.jsx\";\n\nimport { withNamespaces } from \"react-i18next\";\n\n// @material-ui/core components\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Icon from \"@material-ui/core/Icon\";\nimport IconButton from '@material-ui/core/IconButton';\nimport withStyles from \"@material-ui/core/styles/withStyles\";\n\nimport mapStyle from \"assets/jss/prehnit/components/mapStyle.jsx\";\n\nimport BaseLayerSwitcher from './controls/BaseLayerSwitcher';\nimport LayerSelector from \"./controls/LayerSelector\";\nimport BorderSelector from './controls/BorderSelector';\nimport SwipeTool from \"./controls/SwipeTool.jsx\";\nimport SwipeBar from \"./controls/SwipeBar.jsx\";\nimport MapScale from \"./controls/MapScale.jsx\";\nimport OverlaySwitcher from \"./controls/OverlaySwitcher.jsx\";\nimport ShowCoords from \"./controls/ShowCoords.jsx\";\nimport LayerInfo from \"./controls/LayerInfo.jsx\";\nimport LayerLegend from \"./controls/LayerLegend.jsx\";\n\nimport BaseLayerListFallback from \"config/BaseLayerList.jsx\";\n\nimport { geoserverService } from \"services/geoserver\";\nimport { API } from \"services/api\";\n\nimport { checkTrans } from 'helpers';\n\nconst url = process.env.REACT_APP_GeoServer_Url;\n\nclass PublicMap extends Component {\n constructor(props) {\n super(props);\n\n const { i18n, t, classes } = props;\n\n this.padding = 30;\n\n this.classes = classes;\n this.t = t;\n\n // state\n this.state = {\n map: undefined,\n viewResolution: 611.5,\n viewCenter: [456200, 5022012],\n projUnits: \"m\",\n zoom: 8,\n lng: i18n.language,\n overlays: [],\n selectedOverlayFeature: undefined,\n layers: [],\n baseLayers: this.getBaseLayers(),\n selectedBaseLayer: BaseLayerListFallback[0],\n selectedBorderLayer: undefined,\n selectedPrimaryLayer: undefined,\n primaryLayerOpacity: 1,\n primaryLayerName: undefined,\n selectedSecondaryLayer: undefined,\n secondaryLayerOpacity: 1,\n secondaryLayerName: undefined,\n height: 0,\n width: 0,\n swipetoolperc: 50,\n feature: undefined,\n\n pointerLeft: 0,\n pointerTop: 0,\n\n showPrimaryLayerInfo: false,\n showPrimaryLayerLegend: false,\n\n showFeatureInfo: false\n };\n\n this.userBaseLayers = [];\n this.systemBaseLayers = [];\n this.getBaseLayers = this.getBaseLayers.bind(this);\n this.setBaseLayer = this.setBaseLayer.bind(this);\n this.addUserBaseLayer = this.addUserBaseLayer.bind(this);\n this.removeUserBaseLayer = this.removeUserBaseLayer.bind(this);\n this.getDefaultBaseLayer = this.getDefaultBaseLayer.bind(this);\n this.handleAddUserFeatures = this.handleAddUserFeatures.bind(this);\n this.handleRemoveUserFeatures = this.handleRemoveUserFeatures.bind(this);\n this.handleSelectUserFeature = this.handleSelectUserFeature.bind(this);\n this.setBorder = this.setBorder.bind(this);\n this.setPrimaryLayer = this.setPrimaryLayer.bind(this);\n this.setPrimaryLayerOpacity = this.setPrimaryLayerOpacity.bind(this);\n this.setPrimaryLayerVersion = this.setPrimaryLayerVersion.bind(this);\n this.setSecondaryLayer = this.setSecondaryLayer.bind(this);\n this.setSecondaryLayerOpacity = this.setSecondaryLayerOpacity.bind(this);\n this.setSecondaryLayerVersion = this.setSecondaryLayerVersion.bind(this);\n this.setMapScale = this.setMapScale.bind(this);\n this.handleSetSwipePosition = this.handleSetSwipePosition.bind(this);\n this.handleViewChange = this.handleViewChange.bind(this);\n this.togglePrimaryLayerInfo = this.togglePrimaryLayerInfo.bind(this);\n this.togglePrimaryLayerLegend = this.togglePrimaryLayerLegend.bind(this);\n this.toggleSecondaryLayerInfo = this.toggleSecondaryLayerInfo.bind(this);\n this.toggleSecondaryLayerLegend = this.toggleSecondaryLayerLegend.bind(this);\n this.handlePointerMove = this.handlePointerMove.bind(this);\n this.handleCloseFeatureInfo = this.handleCloseFeatureInfo.bind(this);\n this.closePrimarySideBar = this.closePrimarySideBar.bind(this);\n this.closeSecondarySideBar = this.closeSecondarySideBar.bind(this);\n\n //define proj\n proj4.defs(\"EPSG:3765\", \"+proj=tmerc +lat_0=0 +lon_0=16.5 +k=0.9999 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs\");\n OlRegister(proj4);\n this.htrs96 = OlGetProjection('EPSG:3765')\n }\n\n /* *** Base Layers *** */\n\n genBaseLayer(source, showgray) {\n if (showgray) {\n return new OlLayerImage({\n source: this.genGrayRaster(source),\n role: \"base\"\n });\n } else {\n return new OlLayerTile({\n source: source,\n role: \"base\"\n });\n }\n }\n\n genGrayRaster(source) {\n return new OlSourceRaster({\n sources: [source],\n operation: function (pixels) {\n var pixel = pixels[0];\n\n var red = pixel[0];\n var green = pixel[1];\n var blue = pixel[2];\n\n var v = (0.2126729 * red + 0.7151522 * green + 0.0721750 * blue);\n if (v === 0.0) {\n v = 255.0;\n }\n\n pixel[0] = pixel[1] = pixel[2] = v;\n pixel[3] = 255;\n\n return pixel;\n }\n })\n }\n\n geoServerLayer(url, layerName, opacity, role) {\n if (opacity === undefined || opacity === null) {\n opacity = 1;\n }\n return new OlLayerTile({\n opacity: opacity,\n source: new OlSourceTileWMS({\n params: {\n 'LAYERS': layerName,\n 'FORMAT': 'image/png'\n },\n url: url\n }),\n role: role\n })\n }\n\n loadBaseLayers() {\n this.systemBaseLayers = [];\n API.getBaseLayers()\n .then(data => {\n if (data && data.length > 0) {\n data.forEach(function (layer) {\n let d = {}\n d.id = layer.id;\n d.display = layer.title;\n d.displayCode = layer.title_trans_token;\n\n let source = undefined;\n switch (layer.type_title) {\n case 'TileWMS':\n source = new OlSourceTileWMS({\n url: layer.url,\n params: { 'LAYERS': layer.layer },\n projection: layer.projection\n })\n break;\n case 'OSM':\n source = new OlSourceOSM();\n break;\n case 'Stamen':\n source = new OlSourceStamen({\n layer: layer.layer\n })\n break;\n default:\n break;\n }\n\n d.layer = this.genBaseLayer(source, layer.showgray);\n\n this.systemBaseLayers.push(d);\n\n }.bind(this));\n this.setState({\n baseLayers: this.systemBaseLayers,\n selectedBaseLayer: this.systemBaseLayers[0]\n })\n }\n });\n }\n\n getBaseLayers() {\n let layers = [];\n layers.concat(this.systemBaseLayers);\n layers.concat(this.userBaseLayers);\n\n return layers;\n };\n\n setBaseLayer(baseLayer) {\n this.setState({\n selectedBaseLayer: baseLayer\n });\n };\n\n addUserBaseLayer(baseLayer) {\n // console.log('Map: addUserBaseLayer', baseLayer);\n this.userBaseLayers.push(baseLayer);\n this.setState({\n baseLayers: this.getBaseLayers()\n });\n };\n\n removeUserBaseLayer(baseLayer) {\n //console.log('Map: removeUserBaseLayer', baseLayer, this.userBaseLayers);\n this.userBaseLayers = this.userBaseLayers.filter(x => x.id !== baseLayer.id);\n };\n\n getDefaultBaseLayer() {\n if (this.systemBaseLayers && this.systemBaseLayers.length > 0) {\n return this.systemBaseLayers[0]\n }\n }\n\n /* **** Layers *** */\n\n loadLayers() {\n let layers = [];\n API.getLayers()\n .then(data => {\n if (data && data.length > 0) {\n\n let first = true;\n let currentGroup = -1;\n\n let defaultPrimaryLayerVersion = undefined;\n let defaultPrimaryLayerIsSet = false;\n let defaultSecondaryLayerVersion = undefined;\n let defaultSecondaryLayerIsSet = false;\n\n let type_data = data.reduce(function (result, current) {\n result[current['type_id']] = result[current['type_id']] || [];\n result[current['type_id']].push(current);\n return result;\n }, []);\n\n type_data.forEach(function (type) {\n\n type.forEach(function(layer) {\n if (layer.layer_defaultprimary === 1) {\n defaultPrimaryLayerVersion = layer.gs_layer;\n }\n if (layer.layer_defaultsecondary === 1) {\n defaultSecondaryLayerVersion = layer.gs_layer;\n }\n });\n\n if (type.length > 0) {\n\n if (type[0].group_id !== currentGroup) {\n if (first) {\n first = false;\n } else {\n layers.push({ divider: true });\n }\n layers.push({ header: true, displayCode: type[0].group_title_trans_token });\n currentGroup = type[0].group_id;\n }\n\n let d = {}\n let last = type.length - 1;\n\n d.displayCode = type[0].type_title_trans_token;\n d.showCode = type[0].type_showcode;\n d.years = type.map(x => { return x.layer_title; });\n d.layerNames = type.map(x => { return x.gs_layer; });\n d.layerName = type[last].gs_layer;\n d.layer = this.geoServerLayer(url, type[last].gs_layer, 0.8);\n d.desc = type[last].layer_desc;\n d.descCode = type[last].layer_desc_trans_token;\n d.dataCodeGroup = type[0].data_trans_token_group;\n\n layers.push(d);\n\n if (defaultPrimaryLayerVersion && !defaultPrimaryLayerIsSet) {\n this.setPrimaryLayer( d, defaultPrimaryLayerVersion);\n defaultPrimaryLayerIsSet = true;\n }\n\n if (defaultSecondaryLayerVersion && !defaultSecondaryLayerIsSet) {\n this.setSecondaryLayer( d, defaultSecondaryLayerVersion);\n defaultSecondaryLayerIsSet = true;\n }\n }\n }.bind(this));\n\n this.setState({\n layers: layers,\n })\n }\n });\n }\n\n /* *** Overlays - User Features *** */\n\n handleRemoveUserFeatures(param) {\n // console.log('Map: handleRemoveUserFeatures', param);\n let features = this.state.userFeaturesLayer.getSource().getFeatures();\n let newFeatures = features.filter(x => x.get('filename') != param.name);\n\n let olFeatureCollection = new OlCollection(newFeatures);\n\n this.state.userFeaturesLayer.setSource(\n new OlSourceVector({\n features: olFeatureCollection,\n featureProjection: this.htrs96\n })\n );\n\n this.setState(state => {\n let overlays = state.overlays.filter(x => x.name != param.name);\n state.userFeaturesLayer.setSource(\n new OlSourceVector({\n features: olFeatureCollection,\n featureProjection: this.htrs96\n })\n );\n return {\n overlays: overlays,\n userFeaturesLayer: state.userFeaturesLayer\n }\n });\n };\n\n handleAddUserFeatures(olNewFeatures, name) {\n // console.log('Map: handleAddUserFeatures', olNewFeatures, name);\n if (!olNewFeatures) {\n return;\n }\n\n olNewFeatures.forEach(function (f) {\n f.set('filename', name);\n });\n\n let olFeatureCollection = this.state.userFeaturesLayer.getSource().getFeaturesCollection()\n if (olFeatureCollection) {\n olFeatureCollection = olFeatureCollection.extend(olNewFeatures);\n } else {\n olFeatureCollection = new OlCollection(olNewFeatures);\n }\n\n var tmpVectorSource = new OlSourceVector({\n features: olNewFeatures,\n featureProjection: this.htrs96\n })\n\n this.map.getView().fit(tmpVectorSource.getExtent(), this.map.getSize());\n\n this.setState(state => {\n state.overlays.push({ name: name })\n state.userFeaturesLayer.setSource(\n new OlSourceVector({\n features: olFeatureCollection,\n featureProjection: this.htrs96\n })\n );\n return {\n overlays: state.overlays,\n userFeaturesLayer: state.userFeaturesLayer\n }\n });\n };\n\n handleSelectUserFeature(overlay) {\n // console.log('Map: handleSelectUserFeature', overlay);\n\n let olFeatures = this.state.userFeaturesLayer.getSource().getFeatures().filter(f => f.get('filename') == overlay.name);\n\n if (olFeatures.length > 0) {\n var tmpVectorSource = new OlSourceVector({\n features: olFeatures,\n featureProjection: this.htrs96\n })\n\n this.map.getView().fit(tmpVectorSource.getExtent(), this.map.getSize());\n }\n }\n\n /* *** Borders *** */\n\n setBorder(borderLayer) {\n this.setState({\n selectedBorderLayer: borderLayer\n });\n }\n\n /* *** Primary Layer *** */\n\n setPrimaryLayer(layer, layerName) {\n // console.log('Map: Primary layer ', layer);\n if (layer && layer.dataCodeGroup) {\n checkTrans(layer.dataCodeGroup);\n }\n\n this._setSelectedFeature(null, null);\n\n if (!layerName) {\n if (layer && layer.layerNames && layer.layerNames.length > 0) {\n let last = layer.layerNames.length - 1;\n layerName = layer.layerNames[last];\n }\n }\n\n this.setState({\n selectedPrimaryLayer: layer,\n primaryLayerName: layerName,\n });\n }\n\n setPrimaryLayerOpacity(value) {\n this.setState({\n primaryLayerOpacity: value\n });\n }\n\n setPrimaryLayerVersion(value) {\n this.setState({\n primaryLayerName: value\n });\n }\n\n /* *** Secondary Layer *** */\n setSecondaryLayer(layer, layerName) {\n if (layer && layer.dataCodeGroup) {\n checkTrans(layer.dataCodeGroup);\n }\n\n this._setSelectedFeature(null, null);\n\n if (!layerName) {\n if (layer && layer.layerNames && layer.layerNames.length > 0) {\n let last = layer.layerNames.length - 1;\n layerName = layer.layerNames[last];\n }\n }\n\n this.setState({\n selectedSecondaryLayer: layer,\n secondaryLayerName: layerName,\n feature: null\n });\n }\n\n setSecondaryLayerOpacity(value) {\n this.setState({\n secondaryLayerOpacity: value\n });\n }\n\n setSecondaryLayerVersion(value) {\n this.setState({\n secondaryLayerName: value\n });\n }\n\n togglePrimaryLayerInfo() {\n this.setState(state => ({ showPrimaryLayerInfo: !state.showPrimaryLayerInfo }));\n }\n\n togglePrimaryLayerLegend() {\n this.setState(state => ({ showPrimaryLayerLegend: !state.showPrimaryLayerLegend }));\n }\n\n closePrimarySideBar() {\n this.setState({\n showPrimaryLayerInfo: false,\n showPrimaryLayerLegend: false\n });\n }\n\n toggleSecondaryLayerInfo() {\n this.setState(state => ({ showSecondaryLayerInfo: !state.showSecondaryLayerInfo }));\n }\n\n toggleSecondaryLayerLegend() {\n this.setState(state => ({ showSecondaryLayerLegend: !state.showSecondaryLayerLegend }));\n }\n\n closeSecondarySideBar() {\n this.setState({\n showSecondaryLayerInfo: false,\n showSecondaryLayerLegend: false\n });\n }\n\n findLayer(layers, role) {\n let layer = null;\n let index = null;\n layers.forEach((el, ind, arr) => {\n if (el.get('role') === role) {\n index = ind;\n }\n });\n if (index) {\n layer = layers.item(index);\n }\n return layer;\n }\n\n refreshLayers(chBase, chPrim, chPrimOp, chSecond, chSecondOp, chBorder) {\n var layers = this.map.getLayers();\n if (chBase) {\n let baseLayer = this.state.selectedBaseLayer.layer\n layers.setAt(0, baseLayer);\n }\n\n if (chPrim) {\n let currentPrimary = this.findLayer(layers, \"primary\");\n\n if (this.state.selectedPrimaryLayer) {\n layers.insertAt(1, this.geoServerLayer(url, this.state.primaryLayerName, this.state.primaryLayerOpacity, \"primary\"));\n }\n\n if (currentPrimary) {\n layers.remove(currentPrimary);\n }\n }\n else if (chPrimOp) {\n let currentPrimary = this.findLayer(layers, \"primary\");\n currentPrimary.setOpacity(this.state.primaryLayerOpacity);\n }\n\n if (chSecond) {\n let currentSecondaryLayer = this.findLayer(layers, \"secondary\");\n if (currentSecondaryLayer) {\n layers.remove(currentSecondaryLayer);\n }\n\n if (this.state.selectedSecondaryLayer) {\n this.secondaryLayer = this.geoServerLayer(url, this.state.secondaryLayerName, this.state.secondaryLayerOpacity, \"secondary\");\n layers.insertAt(2, this.secondaryLayer);\n\n this.secondaryLayer.on('precompose', function (event) {\n var ctx = event.context;\n // slider handle width is 30px, handle left offset from window is 15px\n var leftOffset = (30 + 15) / 2;\n var width = ((ctx.canvas.width - (2 * this.padding)) * this.state.swipetoolperc / 100) + leftOffset;\n\n ctx.save();\n ctx.beginPath();\n ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);\n ctx.clip();\n }.bind(this));\n\n this.secondaryLayer.on('postcompose', function (event) {\n var ctx = event.context;\n ctx.restore();\n });\n }\n } else if (chSecondOp) {\n let currentSecondaryLayer = this.findLayer(layers, \"secondary\");\n currentSecondaryLayer.setOpacity(this.state.secondaryLayerOpacity);\n }\n\n if (chBorder) {\n let currentBorderLayer = this.findLayer(layers, \"border\");\n if (currentBorderLayer) {\n layers.remove(currentBorderLayer);\n }\n if (this.state.selectedBorderLayer) {\n layers.push(this.state.selectedBorderLayer.layer);\n }\n }\n }\n\n refreshControls() {\n this.map.removeControl(this.controlZoom);\n this.controlZoom = new Zoom({ zoomInTipLabel: this.t(\"map:zoom-in\"), zoomOutTipLabel: this.t(\"map:zoom-out\") });\n this.map.addControl(this.controlZoom);\n\n this.map.removeControl(this.controlAttribution);\n this.controlAttribution = new Attribution({ collapsible: false, tipLabel: this.t(\"map:attributions\") });\n this.map.addControl(this.controlAttribution);\n\n // this.map.removeControl(this.controlRotate);\n // this.controlRotate = new Rotate({tipLabel: this.t(\"map:rotate-reset\")});\n // this.map.addControl(this.controlRotate);\n\n this.map.removeControl(this.controlScaleLine);\n this.map.addControl(this.controlScaleLine);\n\n // this.map.removeControl(this.controlFullScreen);\n // this.controlFullScreen = new FullScreen({tipLabel: this.t(\"map:full-screen\")});\n // this.map.addControl(this.controlFullScreen);\n\n }\n\n componentDidMount() {\n //console.log(\"componentDidMount\");\n\n const t = this.t;\n\n this.controlZoom = new Zoom({ zoomInTipLabel: t(\"map:zoom-in\"), zoomOutTipLabel: t(\"map:zoom-out\") });\n this.controlAttribution = new Attribution({ collapsible: false, tipLabel: t(\"map:attributions\") });\n //this.controlRotate = new Rotate({tipLabel: t(\"map:rotate-reset\")});\n this.controlFullScreen = new FullScreen({ tipLabel: t(\"map:full-screen\") });\n this.controlScaleLine = new ScaleLine({});\n\n this.selectStyle = new OlStyle({\n stroke: new OlStroke({\n color: 'rgba(255,0,255,1)',\n width: 1\n }),\n fill: new OlFill({\n color: 'rgba(255,0,255,0.5)'\n })\n });\n\n this.userStyle = new OlStyle({\n stroke: new OlStroke({ color: 'rgba(254,0,0,1)', width: 2 }),\n fill: new OlFill({ color: 'rgba(254,0,0,0.1)' }),\n image: new OlRegularShape({\n fill: new OlFill({ color: 'rgba(254,0,0,0.9)' }),\n stroke: new OlStroke({ color: 'black', width: 2 }),\n points: 4,\n radius: 10,\n angle: Math.PI / 4\n })\n });\n\n let userFeaturesLayer = new OlLayerVector({\n source: new OlSourceVector({\n features: [],\n featureProjection: this.htrs96\n }),\n role: \"user\",\n style: this.userStyle\n });\n\n let selectedFeaturesLayer = new OlLayerVector({\n source: new OlSourceVector({\n features: [],\n featureProjection: this.htrs96\n }),\n role: \"selected\",\n style: this.selectStyle\n })\n\n this.view = new OlView({\n center: this.state.viewCenter,\n zoom: this.state.zoom,\n // extent: [1389685, 5200000, 2346662, 5973349],\n extent: [168615, 4687861, 847060, 5238175],\n projection: this.htrs96,\n minZoom: 8,\n maxZoom: 18\n });\n\n // create map object with layer\n this.map = new OlMap({\n interactions: OlInteractionDefaults({\n doubleClickZoom: false,\n altShiftDragRotate: false,\n pinchRotate: false\n }),\n // target: this.refs.mapContainer,\n controls: [this.controlZoom, this.controlAttribution],\n target: null,\n layers: [this.state.selectedBaseLayer.layer, selectedFeaturesLayer, userFeaturesLayer],\n view: this.view\n });\n\n this.map.setTarget(this.refs.mapContainer);\n\n this.map.on('click', this.handleMapClick.bind(this));\n\n this.map.on('pointermove', this.handlePointerMove);\n\n this.view.on('change', this.handleViewChange);\n\n this.view.on('change:resolution', function (e) {\n this.setState({\n zoom: e.target.getZoom(),\n viewResolution: e.target.getResolution(),\n projUnits: e.target.getProjection().getUnits()\n })\n }.bind(this));\n\n this.view.on('change:center', function (e) {\n this.setState({\n viewCenter: e.target.getCenter()\n })\n }.bind(this))\n\n window.addEventListener('resize', this.updateContainerSize.bind(this));\n\n //save map and layer references to local state\n this.setState({\n map: this.map,\n userFeaturesLayer: userFeaturesLayer,\n selectedFeaturesLayer: selectedFeaturesLayer,\n height: this.refs.mapContainer.clientHeight,\n width: this.refs.mapContainer.clientWidth\n })\n\n this.loadBaseLayers();\n this.loadLayers();\n }\n\n handlePointerMove(event) {\n this._setMouseCoords(event.coordinate);\n }\n\n _setMouseCoords(coordinates) {\n this.setState({\n mouseCoords: coordinates\n });\n }\n\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.updateContainerSize.bind(this))\n }\n\n componentDidUpdate(prevProps, prevState) {\n const { i18n } = this.props;\n // console.log(\"componentDidUpdate\", prevState, this.state);\n\n if (prevState.lng !== i18n.language) {\n this.setState({\n lng: i18n.language\n })\n this.refreshControls();\n }\n\n let chBase = this.isLayerObjectChanged(prevState.selectedBaseLayer, this.state.selectedBaseLayer);\n let chPrim = this.isLayerObjectChanged(prevState.selectedPrimaryLayer, this.state.selectedPrimaryLayer) || prevState.primaryLayerName !== this.state.primaryLayerName;\n let chPrimOp = prevState.primaryLayerOpacity !== this.state.primaryLayerOpacity;\n let chSecond = this.isLayerObjectChanged(prevState.selectedSecondaryLayer, this.state.selectedSecondaryLayer) || prevState.secondaryLayerName !== this.state.secondaryLayerName;\n let chSecondOp = prevState.secondaryLayerOpacity !== this.state.secondaryLayerOpacity;\n let chBorder = this.isLayerObjectChanged(prevState.selectedBorderLayer, this.state.selectedBorderLayer);\n\n let ch = chBase || chPrim || chPrimOp || chSecond || chSecondOp || chBorder;\n\n if (ch) {\n this.refreshLayers(chBase, chPrim, chPrimOp, chSecond, chSecondOp, chBorder);\n }\n }\n\n updateContainerSize() {\n if (this.refs.mapContainer) {\n this.setState({\n height: this.refs.mapContainer.clientHeight,\n width: this.refs.mapContainer.clientWidth\n });\n }\n }\n\n isLayerObjectChanged(a, b) {\n if (a === undefined && b === undefined) {\n return false;\n } else if (a && b && a.id === b.id && a.layerName === b.layerName) {\n return false;\n } else {\n return true;\n }\n }\n\n getQueryLayers() {\n let layers = [];\n if (this.state.selectedPrimaryLayer) {\n layers.push(this.state.selectedPrimaryLayer.layerName);\n }\n if (this.state.selectedSecondaryLayer) {\n layers.push(this.state.selectedSecondaryLayer.layerName);\n }\n\n return layers;\n }\n\n handleMapClick(event) {\n\n this._setMouseCoords(event.coordinate);\n\n // derive map coordinate (references map from Wrapper Component state) - EPSG:3857\n var clickedCoordinate = this.state.map.getCoordinateFromPixel(event.pixel);\n\n let queryLayers = this.getQueryLayers();\n let queryLayer = undefined;\n let queryLayerName = undefined;\n\n let pixel_x = event.pixel[0];\n let swipe_x = parseInt(this.state.swipetoolperc) / 100 * this.state.width;\n //console.log(pixel_x, swipe_x);\n\n if (pixel_x <= swipe_x) {\n queryLayer = this.state.selectedPrimaryLayer ? this.state.selectedPrimaryLayer : null;\n queryLayerName = this.state.selectedPrimaryLayer ? this.state.primaryLayerName : null;\n } else {\n if (this.state.selectedSecondaryLayer) {\n queryLayer = this.state.selectedSecondaryLayer;\n queryLayerName = this.state.secondaryLayerName;\n } else {\n queryLayer = this.state.selectedPrimaryLayer;\n queryLayerName = this.state.primaryLayerName;\n }\n }\n\n //console.log(queryLayer);\n\n if (queryLayers.length > 0) {\n this._setSelectedFeature(null);\n if (queryLayer && queryLayerName) {\n geoserverService.WMS.getFeatureInfo([queryLayerName], clickedCoordinate)\n .then(data => {\n if (data && data.features && data.features.length > 0) {\n let last = data.features.length - 1;\n\n let olFeatures = (new OlFormatJSON()).readFeatures(data);\n let olFeat = olFeatures[last];\n\n this._setSelectedFeature(olFeat, event.pixel, queryLayer);\n } else {\n this._setSelectedFeature(null);\n }\n\n this.refreshLayers();\n });\n }\n\n\n }\n }\n\n handleViewChange(event) {\n this._setSelectedFeature(null);\n }\n\n _setSelectedFeature(olFeat, clickPixelLocation, queryLayer) {\n if (olFeat) {\n let ns = queryLayer.dataCodeGroup;\n let showCode = queryLayer.showCode === \"1\";\n olFeat.setStyle(this.selectStyle);\n this.state.selectedFeaturesLayer.setSource(\n new OlSourceVector({\n features: [olFeat],\n featureProjection: this.htrs96\n })\n );\n\n let try_kod = olFeat.get(\"kod\") || olFeat.get(\"kod_u\") || olFeat.get(\"PALETTE_INDEX\");\n let try_pov = olFeat.get('pov_ha_3') || olFeat.get('pov_ha') || olFeat.get('pov_1_ha');\n let try_ch = olFeat.get(\"kod_iz\");\n\n let pov = null;\n if (try_pov) {\n pov = try_pov;\n }\n\n let dispCode = ns + \":\" + try_kod;\n\n this.setState(() => {\n return {\n feature: olFeat,\n feature_code: try_kod,\n feature_showCode: showCode,\n feature_dispCode: dispCode,\n feature_change: try_ch,\n feature_area: pov,\n pointerLeft: clickPixelLocation[0],\n pointerTop: clickPixelLocation[1],\n showFeatureInfo: true\n }\n });\n\n } else {\n\n this.state.selectedFeaturesLayer.setSource(\n new OlSourceVector({\n features: [],\n featureProjection: this.htrs96\n })\n );\n\n this.setState({\n feature: null,\n showFeatureInfo: false\n });\n\n }\n }\n\n handleSetSwipePosition(value) {\n // console.log('Set swipe position ', value);\n this.setState({\n swipetoolperc: value\n });\n if (this.map) {\n this.map.render();\n }\n }\n\n setMapScale(res) {\n // console.log('Map Set Map Scale', res)\n if (res) {\n this.map.getView().setResolution(res);\n }\n }\n\n handleCloseFeatureInfo() {\n this._setSelectedFeature(null);\n }\n\n render() {\n const { t, classes } = this.props;\n\n return (\n \n
\n \n \n {this.state.showPrimaryLayerInfo && this.state.selectedPrimaryLayer ?\n \n \n \n \n \n \n \n {this.state.showSecondaryLayerInfo && this.state.selectedSecondaryLayer ?\n \n \n \n \n \n \n\n\n\n\n {this.state.selectedSecondaryLayer ?\n
: null\n }\n\n {this.state.feature && this.state.showFeatureInfo ?\n
\n : null}\n\n
\n
\n
\n
\n
\n
} className={classes.footer}/>\n
{props.icon} ;\n break;\n default:\n icon = \n
{icon}
\n
\n
{title} \n
{description}
\n
\n
\n
\n
\n
\n \n {t(\"pagecontent:info-heading1\")} \n {t(\"pagecontent:info-content1\")} \n \n \n
\n {this.state.links.map((link, id) => {\n return (\n \n \n {link.dsc_trans_token ? t(link.dsc_trans_token) : link.desc}
\n \n {t(\"find-more\")}...\n \n \n }\n iconColor={link.icon_color ? link.icon_color : \"info\"}\n />\n \n );\n })}\n\n \n
\n
\n\n
\n
\n {/* Feature 2 START */}\n
\n
\n \n {t(\"pagecontent:info-heading2\")} \n {t(\"pagecontent:info-content2\")} \n \n \n
\n {this.state.links.map((link, id) => {\n return (\n \n \n {link.dsc_trans_token ? t(link.dsc_trans_token) : link.desc}
\n \n {t(\"find-more\")}...\n \n \n }\n iconColor={link.icon_color ? link.icon_color : \"info\"}\n />\n \n );\n })}\n\n \n
\n
\n\n
\n
}\n fixed\n color=\"transparent\"\n changeColorOnScroll={{\n height: 300,\n color: \"white\"\n }}\n />\n
\n \n \n \n {t(\"pagecontent:info-title\")} \n {t(\"pagecontent:info-subtitle\")} \n \n \n
\n \n
\n
\n
\n {children}\n
\n );\n}\n\nCard.propTypes = {\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n plain: PropTypes.bool,\n profile: PropTypes.bool,\n blog: PropTypes.bool,\n raised: PropTypes.bool,\n background: PropTypes.bool,\n pricing: PropTypes.bool,\n testimonial: PropTypes.bool,\n color: PropTypes.oneOf([\n \"primary\",\n \"info\",\n \"success\",\n \"warning\",\n \"danger\",\n \"rose\"\n ]),\n product: PropTypes.bool\n};\n\nexport default withStyles(cardStyle)(Card);\n","const cardBodyStyle = {\n cardBody: {\n padding: \"0.9375rem 1.875rem\",\n flex: \"1 1 auto\",\n WebkitBoxFlex: \"1\"\n },\n cardBodyBackground: {\n position: \"relative\",\n zIndex: \"2\",\n minHeight: \"280px\",\n paddingTop: \"40px\",\n paddingBottom: \"40px\",\n maxWidth: \"440px\",\n margin: \"0 auto\"\n },\n cardBodyPlain: {\n paddingLeft: \"5px\",\n paddingRight: \"5px\"\n },\n cardBodyFormHorizontal: {\n paddingLeft: \"15px\",\n paddingRight: \"15px\",\n \"& form\": {\n margin: \"0\"\n }\n },\n cardPricing: {\n padding: \"15px!important\",\n margin: \"0px!important\"\n },\n cardSignup: {\n padding: \"0px 30px 0px 30px\"\n },\n cardBodyColor: {\n borderRadius: \"6px\",\n \"&\": {\n \"h1, h2, h3\": {\n \"& small\": {\n color: \"rgba(255, 255, 255, 0.8)\"\n }\n }\n }\n }\n};\n\nexport default cardBodyStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\n// @material-ui/icons\n\n// core components\nimport cardBodyStyle from \"assets/jss/material-kit-pro-react/components/cardBodyStyle.jsx\";\n\nfunction CardBody({ ...props }) {\n const {\n classes,\n className,\n children,\n background,\n plain,\n formHorizontal,\n pricing,\n signup,\n color,\n ...rest\n } = props;\n const cardBodyClasses = classNames({\n [classes.cardBody]: true,\n [classes.cardBodyBackground]: background,\n [classes.cardBodyPlain]: plain,\n [classes.cardBodyFormHorizontal]: formHorizontal,\n [classes.cardPricing]: pricing,\n [classes.cardSignup]: signup,\n [classes.cardBodyColor]: color,\n [className]: className !== undefined\n });\n return (\n \n {children}\n
\n );\n}\n\nCardBody.propTypes = {\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n background: PropTypes.bool,\n plain: PropTypes.bool,\n formHorizontal: PropTypes.bool,\n pricing: PropTypes.bool,\n signup: PropTypes.bool,\n color: PropTypes.bool\n};\n\nexport default withStyles(cardBodyStyle)(CardBody);\n","import {\n warningCardHeader,\n successCardHeader,\n dangerCardHeader,\n infoCardHeader,\n primaryCardHeader,\n roseCardHeader\n} from \"assets/jss/material-kit-pro-react.jsx\";\nconst cardHeaderStyle = {\n cardHeader: {\n borderRadius: \"3px\",\n padding: \"1rem 15px\",\n marginLeft: \"15px\",\n marginRight: \"15px\",\n marginTop: \"-30px\",\n border: \"0\",\n marginBottom: \"0\"\n },\n cardHeaderPlain: {\n marginLeft: \"0px\",\n marginRight: \"0px\",\n \"&$cardHeaderImage\": {\n margin: \"0 !important\"\n }\n },\n cardHeaderImage: {\n position: \"relative\",\n padding: \"0\",\n zIndex: \"1\",\n marginLeft: \"15px\",\n marginRight: \"15px\",\n marginTop: \"-30px\",\n borderRadius: \"6px\",\n \"& img\": {\n width: \"100%\",\n borderRadius: \"6px\",\n pointerEvents: \"none\",\n boxShadow:\n \"0 5px 15px -8px rgba(0, 0, 0, 0.24), 0 8px 10px -5px rgba(0, 0, 0, 0.2)\"\n },\n \"& a\": {\n display: \"block\"\n }\n },\n noShadow: {\n \"& img\": {\n boxShadow: \"none !important\"\n }\n },\n cardHeaderContact: {\n margin: \"0 15px\",\n marginTop: \"-20px\"\n },\n cardHeaderSignup: {\n marginLeft: \"20px\",\n marginRight: \"20px\",\n marginTop: \"-40px\",\n padding: \"20px 0\",\n width: \"100%\",\n marginBottom: \"15px\"\n },\n warningCardHeader,\n successCardHeader,\n dangerCardHeader,\n infoCardHeader,\n primaryCardHeader,\n roseCardHeader\n};\n\nexport default cardHeaderStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\n// @material-ui/icons\n\n// core components\nimport cardHeaderStyle from \"assets/jss/material-kit-pro-react/components/cardHeaderStyle.jsx\";\n\nfunction CardHeader({ ...props }) {\n const {\n classes,\n className,\n children,\n color,\n plain,\n image,\n contact,\n signup,\n noShadow,\n ...rest\n } = props;\n const cardHeaderClasses = classNames({\n [classes.cardHeader]: true,\n [classes[color + \"CardHeader\"]]: color,\n [classes.cardHeaderPlain]: plain,\n [classes.cardHeaderImage]: image,\n [classes.cardHeaderContact]: contact,\n [classes.cardHeaderSignup]: signup,\n [classes.noShadow]: noShadow,\n [className]: className !== undefined\n });\n return (\n \n {children}\n
\n );\n}\n\nCardHeader.propTypes = {\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n color: PropTypes.oneOf([\n \"warning\",\n \"success\",\n \"danger\",\n \"info\",\n \"primary\",\n \"rose\"\n ]),\n plain: PropTypes.bool,\n image: PropTypes.bool,\n contact: PropTypes.bool,\n signup: PropTypes.bool,\n noShadow: PropTypes.bool\n};\n\nexport default withStyles(cardHeaderStyle)(CardHeader);\n","import {\n warningCardHeader,\n successCardHeader,\n dangerCardHeader,\n infoCardHeader,\n primaryCardHeader,\n roseCardHeader\n} from \"assets/jss/material-kit-pro-react.jsx\";\nconst cardIconStyle = {\n cardIcon: {\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\n borderRadius: \"3px\",\n backgroundColor: \"#999\",\n padding: \"15px\",\n marginTop: \"-20px\",\n marginRight: \"15px\",\n float: \"left\"\n }\n },\n warningCardHeader,\n successCardHeader,\n dangerCardHeader,\n infoCardHeader,\n primaryCardHeader,\n roseCardHeader\n};\n\nexport default cardIconStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\n// @material-ui/icons\n\n// core components\nimport cardIconStyle from \"assets/jss/material-kit-pro-react/components/cardIconStyle.jsx\";\n\nfunction CardIcon({ ...props }) {\n const { classes, className, children, color, ...rest } = props;\n const cardIconClasses = classNames({\n [classes.cardIcon]: true,\n [classes[color + \"CardHeader\"]]: color,\n [className]: className !== undefined\n });\n return (\n \n {children}\n
\n );\n}\n\nCardIcon.propTypes = {\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n color: PropTypes.oneOf([\n \"warning\",\n \"success\",\n \"danger\",\n \"info\",\n \"primary\",\n \"rose\"\n ])\n};\n\nexport default withStyles(cardIconStyle)(CardIcon);\n","const cardFooterStyle = {\n cardFooter: {\n display: \"flex\",\n alignItems: \"center\",\n backgroundColor: \"transparent\",\n padding: \"0.9375rem 1.875rem\",\n paddingTop: \"0\"\n },\n cardFooterProfile: {\n marginTop: \"-15px\"\n },\n cardFooterPlain: {\n paddingLeft: \"5px\",\n paddingRight: \"5px\",\n backgroundColor: \"transparent\"\n },\n cardFooterPricing: {\n zIndex: \"2\"\n },\n cardFooterTestimonial: {\n display: \"block\"\n }\n};\n\nexport default cardFooterStyle;\n","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n// nodejs library to set properties for components\nimport PropTypes from \"prop-types\";\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\n// @material-ui/icons\n\n// core components\nimport cardFooterStyle from \"assets/jss/material-kit-pro-react/components/cardFooterStyle.jsx\";\n\nfunction CardFooter({ ...props }) {\n const {\n classes,\n className,\n children,\n plain,\n profile,\n pricing,\n testimonial,\n ...rest\n } = props;\n const cardFooterClasses = classNames({\n [classes.cardFooter]: true,\n [classes.cardFooterPlain]: plain,\n [classes.cardFooterProfile]: profile || testimonial,\n [classes.cardFooterPricing]: pricing,\n [classes.cardFooterTestimonial]: testimonial,\n [className]: className !== undefined\n });\n return (\n \n {children}\n
\n );\n}\n\nCardFooter.propTypes = {\n classes: PropTypes.object.isRequired,\n className: PropTypes.string,\n plain: PropTypes.bool,\n profile: PropTypes.bool,\n pricing: PropTypes.bool,\n testimonial: PropTypes.bool\n};\n\nexport default withStyles(cardFooterStyle)(CardFooter);\n","export default {\n \"1\": \"#E6004D\"\n , \"2\": \"#FFFFA8\"\n , \"3\": \"#80FF00\"\n , \"4\": \"#A6A6FF\"\n , \"5\": \"#00CCF2\"\n , \"111\": \"#E6004D\"\n , \"112\": \"#FF0000\"\n , \"121\": \"#CC4DF2\"\n , \"122\": \"#CC0000\"\n , \"123\": \"#E6CCCC\"\n , \"124\": \"#E6CCE6\"\n , \"131\": \"#A000CC\"\n , \"132\": \"#A600CC\"\n , \"133\": \"#FF4DFF\"\n , \"141\": \"#FFA6FF\"\n , \"142\": \"#FFE6FF\"\n , \"211\": \"#FFFFA8\"\n , \"212\": \"#FFFF00\"\n , \"221\": \"#E68000\"\n , \"222\": \"#F2A64D\"\n , \"223\": \"#E6A600\"\n , \"231\": \"#E6E64D\"\n , \"241\": \"#FFE6A6\"\n , \"242\": \"#FFE64D\"\n , \"243\": \"#E6CCA6\"\n , \"311\": \"#80FF00\"\n , \"312\": \"#00A600\"\n , \"313\": \"#4DFF00\"\n , \"321\": \"#CCF24D\"\n , \"322\": \"#A6FF80\"\n , \"323\": \"#A6E64D\"\n , \"324\": \"#A6F200\"\n , \"331\": \"#E6E6E6\"\n , \"332\": \"#CCCCCC\"\n , \"333\": \"#CCFFCC\"\n , \"334\": \"#000000\"\n , \"411\": \"#A6A6FF\"\n , \"421\": \"#CCCCFF\"\n , \"422\": \"#E6E6FF\"\n , \"423\": \"#A6A6E6\"\n , \"511\": \"#00CCF2\"\n , \"512\": \"#80F2E6\"\n , \"521\": \"#00FFA6\"\n , \"523\": \"#E6F2FF\"\n};","import React from 'react'\n\n// plugin that creates slider\nimport nouislider from \"nouislider\";\nimport wNumb from \"wnumb\";\n\nclass CLCChartZoom extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n textValue: null,\n percent: null\n };\n }\n\n componentDidMount() {\n this.slider = this.refs.slider;\n\n nouislider.create(this.slider, {\n start: 0,\n connect: [false, true],\n step: 10,\n range: { min: 0, max: 100 },\n orientation: 'vertical',\n tooltips: false,\n format: wNumb({\n decimals: 0\n }),\n cssPrefix: \"noUiChart-\"\n });\n\n this.slider.noUiSlider.on('update', function () {\n if (this.props.onSet) {\n this.props.onSet(this.slider.noUiSlider.get());\n }\n }.bind(this))\n\n var handle = this.slider.querySelectorAll('.noUiChart-handle');\n for (var i = 0; i < handle.length; i++) {\n handle[i].classList.add(\"noUiChart-\" + this.props.color);\n }\n\n if (this.props.val) {\n this.slider.noUiSlider.set(this.props.val);\n }\n\n if (this.props.onMount) {\n this.props.onMount(this.slider.noUiSlider);\n }\n\n }\n\n onSlide = (render, handle, value, un, percent) => {\n this.setState({\n textValue: value[0].toFixed(2),\n percent: percent[0].toFixed(2)\n });\n };\n\n render() {\n return (\n
\n );\n }\n}\n\nexport default CLCChartZoom","import React from 'react';\nimport classNames from \"classnames\";\nimport numbro from 'numbro';\n\n// plugin that creates slider\nimport nouislider from \"nouislider\";\n\n// react plugin for creating charts\nimport ChartistGraph from \"react-chartist\";\nimport Chartist from 'chartist';\nimport tooltip from 'chartist-plugin-tooltips';\n\n// @material-ui/core components\nimport Icon from \"@material-ui/core/Icon\";\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport IconButton from '@material-ui/core/IconButton';\nimport Button from \"@material-ui/core/Button\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\n\n\n// @material-ui/icons\nimport BarChartIcon from '@material-ui/icons/BarChart';\nimport ShortTextIcon from '@material-ui/icons/ShortText';\nimport Sync from '@material-ui/icons/Sync';\nimport SyncDisabled from '@material-ui/icons/SyncDisabled';\n\n// Core components\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\nimport GridItem from \"components/Grid/GridItem.jsx\";\nimport Card from \"components/Card/Card.jsx\";\nimport CardBody from \"components/Card/CardBody.jsx\";\nimport CardHeader from \"components/Card/CardHeader.jsx\";\nimport CardIcon from \"components/Card/CardIcon.jsx\";\nimport CardFooter from \"components/Card/CardFooter.jsx\";\n\nimport dashGeneralPageStyle from \"assets/jss/prehnit/views/dashGeneralPageStyle.jsx\";\n\nimport { withNamespaces } from \"react-i18next\";\nimport { Context } from \"Context.jsx\";\n\nimport CLCColors from \"assets/data/clc_colors.js\";\nimport { Typography } from '@material-ui/core';\n\nimport CLCChartZoom from \"components/CLCDataCards/CLCChartZoom\";\n\n// HTML Label plugin\nChartist.plugins = Chartist.plugins || {};\nChartist.plugins.ctHtmlLabels = function (options) {\n return function (chart) {\n chart.on('draw', function (context) {\n if (context.type === 'label') {\n // Best to combine with something like sanitize-html\n context.element.empty()._node.innerHTML = context.text;\n }\n });\n }\n}\n\n\nclass CLCDistChartCard extends React.Component {\n _isMounted = false;\n\n constructor(props) {\n super(props);\n\n this.state = {\n chart_width: \"\",\n high_ha: 10000\n }\n\n this.maxY_ha = undefined;\n this.minY_ha = undefined;\n\n this.handleSort = this.handleSort.bind(this);\n this.handleZoom = this.handleZoom.bind(this);\n this.handleSync = this.handleSync.bind(this);\n this.handleZoomMount = this.handleZoomMount.bind(this);\n }\n\n componentDidMount() {\n this._isMounted = true;\n window.addEventListener('resize', this.updateChartSize.bind(this));\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.updateChartSize.bind(this))\n this._isMounted = false;\n }\n\n updateChartSize() {\n let el = document.getElementById(this.props.id);\n if (el && this._isMounted) {\n this.setState({\n chart_width: el.offsetWidth\n });\n }\n }\n\n chartListener() {\n return {\n draw: function (data) {\n if (data.type === \"label\") {\n }\n if (data.type === \"bar\") {\n let meta = data.series[data.index].meta\n let parts = meta.split(';');\n let clc_code = parts[0];\n let clc_color = CLCColors[clc_code];\n data.element.attr({\n style: 'stroke: ' + clc_color + '; stroke-width:10px;'\n });\n }\n if (data.type === \"grid\") {\n data.element.attr({\n style: 'stroke: rgba(0,0,0,.2); stroke-width:1px; stroke-dasharray: 2px;'\n })\n }\n }\n }\n }\n\n\n chartOptions(width, unit) {\n const { t, data } = this.props;\n\n let axisYhigh = this.calcAxisYHigh(this.props.zoom);\n\n if (!width) {\n let el = document.getElementById(this.props.id);\n if (el) {\n width = el.offsetWidth;\n }\n }\n\n return {\n axisX: {\n showGrid: false,\n labelInterpolationFnc: function (value, index, funcData) {\n return ''\n + value\n + '
'\n + ' '\n }\n },\n axisY: {\n offset: 100,\n low: 0,\n high: axisYhigh ? unit.transform(axisYhigh) : undefined,\n labelInterpolationFnc: function (value, index, data) {\n let suffix = \"\";\n if (index === data.length - 1 && axisYhigh) {\n suffix = \" +\"\n }\n let num = numbro(value).format({ mantissa: 2 });\n if (value > 10) {\n num = numbro(value).format({ mantissa: 0 });\n }\n\n return '' + num + suffix + ' ';\n }.bind(this)\n },\n height: \"200px\",\n width: width,\n plugins: [\n Chartist.plugins.tooltip({\n metaIsHTML: false,\n tooltipFnc: function (meta, value) {\n if (meta) {\n let parts = meta.split(';')\n let code = parts[0];\n let unit = parts[1];\n return t(\"map:code\") + \": \" + code + \"{res}
);\n }\n\n handleSort() {\n if (this.props.onSetSort) {\n this.props.onSetSort(!this.props.sort);\n }\n }\n\n handleSync() {\n if (this.props.onSetSync) {\n this.props.onSetSync();\n }\n }\n\n calcAxisYHigh(val) {\n let min = this.minY_ha || 1;\n let max = this.maxY_ha || 1;\n\n let exp = Math.log10(max);\n let step = exp / 9;\n\n let step_values = [12, 8, 7, 6, 5, 4, 3, 2, 1];\n step_values = step_values.map(x => Math.round(2 * min + (max / Math.exp(x * step))));\n\n let values = new Array();\n values.push(2 * min);\n values = values.concat(step_values);\n values.push(undefined);\n // console.log(values);\n\n let ord = (val / 10);\n\n return values[ord];\n }\n\n handleZoom(val) {\n if (this.props.onSetZoom) {\n this.props.onSetZoom(val);\n }\n }\n\n handleZoomMount(slider) {\n this.slider = slider;\n }\n\n _getTitle(data) {\n if (this.props.title && this.props.alwaysDefaultTitle) {\n return this.props.title;\n }\n if (data && data.length > 0) {\n let d = data[0];\n if (d.title_trans_token) {\n return this.props.t(d.title_trans_token);\n } else if (d.title) {\n return d.title;\n }\n } else {\n return null;\n }\n }\n\n render() {\n const { t, classes } = this.props;\n\n if (this.slider && this.props.zoom && this.slider.get() !== this.props.zoom) {\n this.slider.set(this.props.zoom);\n }\n return (\n \n {ctx =>\n \n \n \n signal_cellular_alt \n \n \n {this._getTitle(this.props.data) || t(\"map:class-distribution\")}\n - {this.props.subtitle || t(\"map:level-3\")} \n \n {t('common:order')}: {this.props.sortType ? t('common:order-maxmin') : t('common:order-code')}\n \n \n \n \n \n \n \n \n \n {this.props.sortType ? \n \n \n \n \n {this.props.showSync ?\n \n \n \n {this.props.sync ? \n \n \n : null}\n \n \n \n \n
\n \n \n \n \n \n {this.footerData(ctx.unit)}\n \n \n \n }\n \n );\n }\n}\n\nexport default withNamespaces()(withStyles(dashGeneralPageStyle)(CLCDistChartCard));\n","import React from 'react';\nimport classNames from \"classnames\";\nimport numbro from 'numbro';\n\n// react plugin for creating charts\nimport ChartistGraph from \"react-chartist\";\nimport Chartist from 'chartist';\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport Icon from \"@material-ui/core/Icon\";\nimport Button from \"@material-ui/core/Button\";\nimport Tooltip from \"@material-ui/core/Tooltip\";\n\nimport Sync from '@material-ui/icons/Sync';\nimport SyncDisabled from '@material-ui/icons/SyncDisabled';\n\n// Core components\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\nimport GridItem from \"components/Grid/GridItem.jsx\";\nimport Card from \"components/Card/Card.jsx\";\nimport CardBody from \"components/Card/CardBody.jsx\";\nimport CardHeader from \"components/Card/CardHeader.jsx\";\nimport CardIcon from \"components/Card/CardIcon.jsx\";\nimport CardFooter from \"components/Card/CardFooter.jsx\";\n\nimport dashGeneralPageStyle from \"assets/jss/prehnit/views/dashGeneralPageStyle.jsx\";\n\nimport { withNamespaces } from \"react-i18next\";\nimport { Context } from \"Context.jsx\";\n\nimport CLCColors from \"assets/data/clc_colors.js\";\nimport CLCChartZoom from \"components/CLCDataCards/CLCChartZoom\";\n\nChartist.plugins.ctHtmlLabels = function (options) {\n return function (chart) {\n chart.on('draw', function (context) {\n if (context.type === 'label') {\n // Best to combine with something like sanitize-html\n context.element.empty()._node.innerHTML = context.text;\n }\n });\n }\n}\n\nclass CLCTrendsChartCard extends React.Component {\n\n _isMounted = false;\n\n constructor(props) {\n super(props);\n\n this.state = {\n chart_width: \"\",\n high_ha: undefined\n }\n\n this.tooltipFnc = this.tooltipFnc.bind(this);\n this.handleZoom = this.handleZoom.bind(this);\n this.handleSync = this.handleSync.bind(this);\n this.handleZoomMount = this.handleZoomMount.bind(this);\n }\n\n componentDidMount() {\n this._isMounted = true;\n window.addEventListener('resize', this.updateChartSize.bind(this));\n }\n\n componentWillUnmount() {\n window.removeEventListener('resize', this.updateChartSize.bind(this))\n this._isMounted = false;\n }\n\n updateChartSize() {\n let el = document.getElementById(this.props.id);\n if (el && this._isMounted) {\n this.setState({\n chart_width: el.offsetWidth\n });\n }\n }\n\n calcAxisYHigh(val) {\n let min = this.minY || 1;\n let max = this.maxY || 1;\n\n let exp = Math.log10(max);\n let step = exp / 9;\n\n let step_values = [12, 8, 7, 6, 5, 4, 3, 2, 1];\n step_values = step_values.map(x => Math.round(5 * min + (max / Math.exp(x * step))));\n\n let values = new Array();\n values.push(5 * min);\n values = values.concat(step_values);\n values.push(undefined);\n\n let ord = (val / 10);\n\n return values[ord];\n }\n\n handleZoom(val) {\n if (this.props.onSetZoom) {\n this.props.onSetZoom(val);\n }\n }\n\n handleZoomMount(slider) {\n this.slider = slider;\n }\n\n handleSync() {\n if (this.props.onSetSync) {\n this.props.onSetSync();\n }\n }\n\n tooltipFnc(meta, value) {\n const { t } = this.props;\n if (meta) {\n let parts = meta.split(';')\n let code = parts[0];\n let unit = parts[1];\n return t(\"map:code\") + \": \" + code + \"' + value + ' ';\n }\n },\n axisY: {\n showGrid: true,\n offset: 100,\n low: 0,\n high: axisYhigh ? unit.transform(axisYhigh) : undefined,\n labelInterpolationFnc: function (value, index, data) {\n let suffix = \"\";\n if (index === data.length - 1 && axisYhigh) {\n suffix = \" +\"\n }\n if (value > 1) {\n return '' + numbro(value).format({ mantissa: 0 }) + suffix + ' ';\n }\n else {\n return '' + numbro(value).format({ mantissa: 2 }) + suffix + ' ';\n }\n }.bind(this)\n\n },\n\n showPoint: true,\n height: this.props.height,\n width: width,\n plugins: [\n Chartist.plugins.tooltip({\n metaIsHTML: false,\n tooltipFnc: this.tooltipFnc\n }),\n Chartist.plugins.ctHtmlLabels()\n ]\n }\n }\n\n onlyUnique(value, index, self) {\n return self.indexOf(value) === index;\n }\n\n chartData(unit) {\n\n let data = this.props.trendsData;\n\n this.minY = undefined;\n this.maxY = 0;\n\n let labels = data.map(x => x.y).filter(this.onlyUnique);\n let labels_length = labels.length;\n\n let type_data = data.reduce(function (result, current) {\n result[current[this.props.idCol]] = result[current[this.props.idCol]] || [];\n result[current[this.props.idCol]].push(current);\n return result;\n }.bind(this), []);\n type_data = type_data.filter(function (el) {\n return el != undefined;\n });\n\n let series = [];\n let values = [];\n\n for (let i = 0; i < type_data.length; i++) {\n let el = type_data[i];\n\n let s = new Array(labels_length).fill(null);\n\n for (let j = 0; j < el.length; j++) {\n let ind = labels.indexOf(el[j].y);\n let val_ha = el[j][this.props.areaCol];\n let val = unit.transform(el[j][this.props.areaCol]);\n values.push(parseFloat(val_ha));\n s[ind] = { meta: el[j][this.props.idCol] + \";\" + unit.short, value: val }\n }\n series.push(s);\n }\n\n this.minY = Math.min(...values);\n this.maxY = Math.max(...values);\n\n // for (let i = 0; i < data.length; i++) {\n // let el = data[i];\n\n // let s = [];\n // for (let j = 0; j < labels.length; j++) {\n // let label = labels[j];\n // let col = this.props.areaCol + '_' + label;\n\n // if (el[col] >= 0) {\n // s.push({meta: el[this.props.idCol], value: unit.transform(el[col])});\n // }\n // }\n // series.push(s);\n // }\n\n return {\n labels: labels,\n series: series\n };\n }\n\n footerData(unit) {\n return
\n }\n\n _getTitle(data) {\n if (this.props.title) {\n return this.props.title;\n }\n else if (data && data.length > 0) {\n let d = data[0];\n if (d.title_trans_token) {\n return d.title_trans_token;\n } else if (d.title) {\n return d.title;\n }\n } else {\n return null;\n }\n }\n\n addStringsWithPx(aPx, bPx) {\n let a = parseInt(aPx.replace(\"px\", \"\"));\n let b = parseInt(bPx.replace(\"px\", \"\"));\n\n return (a + b).toString() + \"px\";\n }\n\n render() {\n const { t, classes } = this.props;\n\n if (this.slider && this.props.zoom && this.slider.get() !== this.props.zoom) {\n this.slider.set(this.props.zoom);\n }\n\n return (\n \n {ctx =>\n \n \n \n timeline \n \n \n {t(this._getTitle(this.props.allData)) || t(\"map:trends\")}\n - {this.props.subtitle || t(\"map:level-3\")} \n \n \n \n \n \n \n \n \n \n {this.props.showSync ?\n \n \n \n {this.props.sync ? \n \n \n : null}\n\n \n \n \n
\n \n \n \n \n \n {this.footerData(ctx.unit)}\n \n \n \n }\n \n );\n }\n}\n\nexport default withNamespaces()(withStyles(dashGeneralPageStyle)(CLCTrendsChartCard));\n","// ##############################\n// // // Table styles\n// #############################\n\nimport {\n warningColor,\n primaryColor,\n dangerColor,\n successColor,\n infoColor,\n roseColor,\n grayColor,\n defaultFont\n} from \"assets/jss/material-kit-pro-react.jsx\";\n\nconst tableStyle = theme => ({\n warning: {\n color: warningColor\n },\n primary: {\n color: primaryColor\n },\n danger: {\n color: dangerColor\n },\n success: {\n color: successColor\n },\n info: {\n color: infoColor\n },\n rose: {\n color: roseColor\n },\n gray: {\n color: grayColor\n },\n right: {\n textAlign: \"right\"\n },\n table: {\n marginBottom: \"0\",\n width: \"100%\",\n maxWidth: \"100%\",\n backgroundColor: \"transparent\",\n borderSpacing: \"0\",\n borderCollapse: \"collapse\",\n overflow: \"auto\",\n \"& > tbody > tr, & > thead > tr\": {\n height: \"auto\"\n }\n },\n tableShoppingHead: {\n fontSize: \"0.75em !important\",\n textTransform: \"uppercase !important\"\n },\n tableCell: {\n ...defaultFont,\n lineHeight: \"1.5em\",\n padding: \"12px 8px!important\",\n verticalAlign: \"middle\",\n fontSize: \"0.875rem\",\n borderBottom: \"none\",\n borderTop: \"1px solid #ddd\",\n position: \"relative\",\n color: \"#3C4858\"\n },\n tableHeadCell: {\n fontSize: \"1.063rem\",\n borderBottomWidth: \"1px\",\n fontWeight: \"300\",\n color: \"#555\",\n borderTopWidth: \"0 !important\"\n },\n tableCellTotal: {\n fontWeight: \"500\",\n fontSize: \"1.0625rem\",\n paddingTop: \"20px\",\n textAlign: \"right\"\n },\n tableCellAmount: {\n fontSize: \"26px\",\n fontWeight: \"300\",\n marginTop: \"5px\",\n textAlign: \"right\"\n },\n tableResponsive: {\n minHeight: \"0.1%\",\n overflowX: \"auto\"\n },\n tableStripedRow: {\n backgroundColor: \"#f9f9f9\"\n },\n tableRowHover: {\n \"&:hover\": {\n backgroundColor: \"#f5f5f5\"\n }\n },\n warningRow: {\n backgroundColor: \"#fcf8e3\",\n \"&:hover\": {\n backgroundColor: \"#faf2cc\"\n }\n },\n dangerRow: {\n backgroundColor: \"#f2dede\",\n \"&:hover\": {\n backgroundColor: \"#ebcccc\"\n }\n },\n successRow: {\n backgroundColor: \"#dff0d8\",\n \"&:hover\": {\n backgroundColor: \"#d0e9c6\"\n }\n },\n infoRow: {\n backgroundColor: \"#d9edf7\",\n \"&:hover\": {\n backgroundColor: \"#c4e3f3\"\n }\n }\n});\n\nexport default tableStyle;\n","import React from \"react\";\nimport cx from \"classnames\";\nimport PropTypes from \"prop-types\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport Table from \"@material-ui/core/Table\";\nimport TableBody from \"@material-ui/core/TableBody\";\nimport TableCell from \"@material-ui/core/TableCell\";\nimport TableHead from \"@material-ui/core/TableHead\";\nimport TableRow from \"@material-ui/core/TableRow\";\n\nimport style from \"assets/jss/material-kit-pro-react/components/tableStyle.jsx\";\n\nfunction CustomTable({ ...props }) {\n const {\n classes,\n tableHead,\n tableData,\n tableHeaderColor,\n hover,\n colorsColls,\n coloredColls,\n customCellClasses,\n customClassesForCells,\n striped,\n tableShopping,\n customHeadCellClasses,\n customHeadClassesForCells\n } = props;\n return (\n \n
\n {tableHead !== undefined ? (\n \n \n {tableHead.map((prop, key) => {\n const tableCellClasses =\n classes.tableHeadCell +\n \" \" +\n classes.tableCell +\n \" \" +\n cx({\n [customHeadCellClasses[\n customHeadClassesForCells.indexOf(key)\n ]]:\n customHeadClassesForCells.indexOf(key) !== -1,\n [classes.tableShoppingHead]: tableShopping\n });\n return (\n \n {prop}\n \n );\n })}\n \n \n ) : null}\n \n {tableData.map((prop, key) => {\n var rowColor = \"\";\n var rowColored = false;\n if (prop.color !== undefined) {\n rowColor = prop.color;\n rowColored = true;\n prop = prop.data;\n }\n const tableRowClasses = cx({\n [classes.tableRowHover]: hover,\n [classes[rowColor + \"Row\"]]: rowColored,\n [classes.tableStripedRow]: striped && key % 2 === 0\n });\n if (prop.total) {\n return (\n \n \n Total\n \n \n {prop.amount}\n \n {tableHead.length - (prop.colspan - 0 + 2) > 0 ? (\n \n );\n }\n if (prop.purchase) {\n return (\n \n \n Total\n \n \n {prop.amount}\n \n \n {prop.col.text}\n \n \n );\n }\n return (\n \n {prop.map((prop, key) => {\n const tableCellClasses =\n classes.tableCell +\n \" \" +\n cx({\n [classes[colorsColls[coloredColls.indexOf(key)]]]:\n coloredColls.indexOf(key) !== -1,\n [customCellClasses[customClassesForCells.indexOf(key)]]:\n customClassesForCells.indexOf(key) !== -1\n });\n return (\n \n {prop}\n \n );\n })}\n \n );\n })}\n \n
\n
{res}
);\n }\n\n tblHeaders(unit) {\n const { t } = this.props;\n\n if (this.props.single) {\n return [t(\"map:class-code\")\n , t(\"map:class-name\")\n , {t(\"map:area\")}{\" (\" + unit.short + \")\"}
\n ]\n } else {\n return [t(\"map:class-code\")\n , t(\"map:class-name\")\n , {t(\"map:area\")}{\" (\" + unit.short + \")\"}
\n , t(\"map:class-code\")\n , t(\"map:class-name\")\n , {t(\"map:area\")}{\" (\" + unit.short + \")\"}
\n ]\n }\n }\n\n getStats(stats, region) {\n const { t } = this.props;\n\n let data = stats.filter(x => x.region_code == region);\n if (data && data.length > 0) {\n let d = data[0];\n let title = d.region_title;\n let token = d.region_title_trans_token;\n if (token && token.length > 0) {\n title = t(token);\n }\n let area = d.region_area_ha\n let count = d.code_3_count;\n\n return (\n
{title} \n
\n \n {ctx => t(\"map:area\") + \": \" + numbro(ctx.unit.transform(area) * 100).divide(100).format() + \" \" + ctx.unit.short}\n \n
\n
\n
{t(\"map:number-of-classes\")}: {count}
\n
\n {ctx =>\n \n \n \n grid_on \n \n \n {this.props.title}\n - {this.props.subtitle} \n \n \n \n {this.props.single ? null\n : \n \n {this.props.filterId_1 ? this.getStats(this.props.statsData, this.props.filterId_1) : null}\n \n \n {this.props.filterId_2 ? this.getStats(this.props.statsData, this.props.filterId_2) : null}\n \n \n }\n\n \n \n \n \n }\n \n );\n }\n}\n\nexport default withNamespaces()(withStyles(dashGeneralPageStyle)(CLCTableCard));\n","import React from 'react'\nimport numbro from 'numbro';\nimport classNames from \"classnames\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\nimport Icon from \"@material-ui/core/Icon\";\nimport Button from \"@material-ui/core/Button\";\n\n// Core components\nimport Card from \"components/Card/Card.jsx\";\nimport CardBody from \"components/Card/CardBody.jsx\";\nimport CardHeader from \"components/Card/CardHeader.jsx\";\nimport CardIcon from \"components/Card/CardIcon.jsx\";\nimport CardFooter from \"components/Card/CardFooter.jsx\";\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\nimport GridItem from \"components/Grid/GridItem.jsx\";\n\nimport dashGeneralPageStyle from \"assets/jss/prehnit/views/dashGeneralPageStyle.jsx\";\n\nimport { withNamespaces } from \"react-i18next\";\n\nimport { Context } from \"Context.jsx\";\n\n//import { API } from \"services/api\";\nimport i18n from \"i18next\";\n\nimport * as ExcelJs from 'exceljs/dist/exceljs.js';\nimport createReport from 'docx-templates';\n//import JSZip from 'jszip';\nimport JSZipUtils from 'jszip-utils';\nimport saveAs from 'file-saver';\n\nfunction sortTrendsData(a, b) {\n if (a.y !== b.y) {\n return b.y - a.y\n } else {\n if (a.id !== b.id) {\n return a.id - b.id\n } else {\n return a.k3 - b.k3;\n }\n }\n}\n\nclass CLCExportCard extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.handleExcel = this.handleExcel.bind(this);\n this.handleWord = this.handleWord.bind(this);\n this.genFileName = this.genFileName.bind(this);\n this.genTableData = this.genTableData.bind(this);\n this.saveDataToFile = this.saveDataToFile.bind(this);\n this.getTitle = this.getTitle.bind(this);\n }\n\n genReportName(reportType, lng) {\n return \"/templates/report_template_\" + reportType + \"_\" + lng + \".docx\";\n }\n\n genFileName(unit, ext) {\n return \"clccro_\" + this.props.categoryCode\n + (this.props.regionOne ? \"_\" + this.props.regionOne : \"\")\n + (this.props.regionTwo ? \"_\" + this.props.regionTwo : \"\")\n + \"_\" + unit\n + \"_\" + i18n.language + \".\" + ext;\n }\n\n genTableData(unit) {\n const { t } = this.props;\n\n let data1 = this.props.allData;\n let data2 = this.props.allData\n\n if (!this.props.single) {\n data1 = this.props.allData.filter(x => x['id'] == this.props.regionOne);\n data2 = this.props.allData.filter(x => x['id'] == this.props.regionTwo);\n }\n\n\n let elements = [];\n let elementsHash = {};\n\n for (let i = 0; i < data1.length; i++) {\n let code = data1[i].kod_3;\n if (!elementsHash[code]) {\n elements.push(data1[i]);\n elementsHash[code] = true;\n }\n }\n\n if (!this.props.single) {\n for (let i = 0; i < data2.length; i++) {\n let code = data2[i].kod_3;\n if (!elementsHash[code]) {\n elements.push(data2[i]);\n elementsHash[code] = true;\n }\n }\n }\n\n let sorted_elements = elements.sort(this.props.sortFunc);\n\n let tableData = [];\n\n for (let i = 0; i < sorted_elements.length; i++) {\n let row = {};\n let code = sorted_elements[i].kod_3;\n row['code'] = code;\n row['title'] = t(\"clc:\" + code)\n\n // let val1 = this.filterData(data1, 'kod_3', code)\n let val1 = data1.filter(x => x['kod_3'] == code);\n if (val1.length > 0) {\n row['area_a'] = numbro(unit.transform(val1[0]['pov_3_ha'] * 100)).divide(100).format()\n } else {\n row['area_a'] = '--';\n }\n\n if (!this.props.single) {\n // let val2 = this.filterData(data2, 'kod_3', code)\n let val2 = data2.filter(x => x['kod_3'] == code);\n if (val2.length > 0) {\n row['area_b'] = numbro(unit.transform(val2[0]['pov_3_ha'] * 100)).divide(100).format();\n } else {\n row['area_b'] = \"--\";\n }\n }\n\n tableData.push(row);\n }\n\n return tableData;\n }\n\n genMapImage(mapId) {\n let el = document.getElementById(mapId);\n if (el) {\n let width = el.offsetWidth;\n let height = el.offsetHeight;\n let ratio = width / height;\n\n let canvases = el.getElementsByTagName('canvas');\n let canvas = canvases[0];\n\n let png = canvas.toDataURL(\"image/png\");\n return png;\n } else {\n console.warn('Cannot find map with id: ', mapId);\n return null;\n }\n }\n\n genChartImage(chartId, callback) {\n let el = document.getElementById(chartId);\n let width = el.offsetWidth;\n let height = el.offsetHeight;\n let ratio = width / height;\n let svgs = el.getElementsByTagName('svg')\n let svg = svgs[0];\n\n var svgString = new XMLSerializer().serializeToString(svg);\n\n var svg64 = btoa(svgString);\n var b64Start = 'data:image/svg+xml;base64,';\n var image64 = b64Start + svg64;\n\n let img = new Image();\n\n img.setAttribute('crossOrigin', 'anonymous');\n img.width = el.offsetWidth;\n img.height = el.offsetHeight;\n\n img.onload = function () {\n let canvas = document.createElement('canvas');\n canvas.width = el.offsetWidth;\n canvas.height = el.offsetHeight;\n let ctx = canvas.getContext(\"2d\");\n\n ctx.drawImage(img, 0, 0);\n\n let png = canvas.toDataURL(\"image/png\")\n\n callback(png, ratio)\n };\n\n img.onerror = function () {\n console.warn(\"Error loading image:\", chartId);\n }\n\n img.src = image64;\n\n return;\n }\n\n getTitle(data, id) {\n const { t } = this.props;\n\n let filteredData = data.filter(x => x.id == id);\n if (filteredData && filteredData.length > 0) {\n const el = filteredData[0];\n if (el.title_trans_token) {\n return t(el.title_trans_token);\n } else {\n return el.title || null;\n }\n } else {\n return null;\n }\n }\n\n handleExcel(unit) {\n const { t } = this.props;\n var workbook = new ExcelJs.Workbook();\n\n var worksheet = workbook.addWorksheet('Data', { views: [{ xSplit: 1, ySplit: 1 }] });\n\n let columns = [\n { header: t(\"export:col-year\"), key: 'year', width: 10, style: { alignment: { horizontal: 'center' } } },\n { header: t(\"export:col-clc1-code\"), key: 'clc1Code', width: 10, style: { alignment: { horizontal: 'center' } } },\n { header: t(\"export:col-clc1-title\"), key: 'clc1Title', width: 32 },\n { header: t(\"export:col-clc1-area\") + ' / ' + unit.short, key: 'clc1Area', width: 17, style: { numFmt: '0.00' } },\n { header: t(\"export:col-clc3-code\"), key: 'clc3Code', width: 10, style: { alignment: { horizontal: 'center' } } },\n { header: t(\"export:col-clc3-title\"), key: 'clc3Title', width: 50 },\n { header: t(\"export:col-clc3-area\") + ' / ' + unit.short, key: 'clc3Area', width: 17, style: { numFmt: '0.00' } }\n ];\n\n if (!this.props.single) {\n columns.push(\n { header: t(\"export:col-region-title\"), key: 'regionTitle', width: 32 }\n );\n }\n\n worksheet.columns = columns;\n\n let titles = [];\n let data = [];\n if (this.props.hasFilter) {\n titles = this.props.allData.filter(x => x['id'] == this.props.regionOne || x['id'] == this.props.regionTwo).map(function (x) {\n return { id: x.id, title: x.title_trans_token.length > 0 ? t(x.title_trans_token) : x.title }\n });\n\n data = this.props.trendsData.filter(x => x['id'] == this.props.regionOne || x['id'] == this.props.regionTwo).sort(sortTrendsData)\n } else {\n titles = this.props.allData.map(function (x) {\n return { id: x.id, title: x.title_trans_token.length > 0 ? t(x.title_trans_token) : x.title }\n });\n data = this.props.trendsData.sort(sortTrendsData)\n }\n\n data.forEach(function (row) {\n\n let regionTitle = \"\";\n let regionTitles = titles.filter(function (x) { return x.id === row.id })\n if (regionTitles && regionTitles.length > 0) {\n regionTitle = regionTitles[0].title;\n }\n\n let excelRow = {\n year: row.y,\n clc1Code: row.k1,\n clc1Title: t(\"clc:\" + row.k1),\n clc1Area: numbro.unformat(numbro(unit.transform(row.p1 * 100)).divide(100).format()),\n clc3Code: row.k3,\n clc3Title: t(\"clc:\" + row.k3),\n clc3Area: numbro.unformat(numbro(unit.transform(row.p3 * 100)).divide(100).format())\n }\n\n if (!this.props.single) {\n excelRow['regionTitle'] = regionTitle;\n }\n worksheet.addRow(excelRow);\n\n }.bind(this));\n\n let filename = this.genFileName(unit.short, 'xlsx');\n\n workbook.xlsx.writeBuffer().then(function (data) {\n var blob = new Blob([data], { type: \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\" });\n saveAs(blob, filename);\n });\n }\n\n loadWordTemplate(url, callback) {\n JSZipUtils.getBinaryContent(url, callback)\n }\n\n readFileIntoArrayBuffer = fd =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onerror = reject;\n reader.onload = () => {\n resolve(reader.result);\n };\n reader.readAsArrayBuffer(fd);\n });\n\n saveDataToFile(data, fileName, mimeType) {\n const blob = new Blob([data], { type: mimeType });\n const url = window.URL.createObjectURL(blob);\n this.downloadURL(url, fileName, mimeType);\n setTimeout(() => {\n window.URL.revokeObjectURL(url);\n }, 1000);\n };\n\n downloadURL(data, fileName) {\n const a = document.createElement('a');\n a.href = data;\n a.download = fileName;\n document.body.appendChild(a);\n a.style = 'display: none';\n a.click();\n a.remove();\n };\n\n fillReport(content, unit, imagesData) {\n const { t } = this.props;\n let tblData = this.genTableData(unit);\n\n let regionOneData = this.props.allData.filter(x => x.id == this.props.regionOne);\n let regionTwoData = this.props.allData.filter(x => x.id == this.props.regionTwo);\n\n let regionOneStats = undefined;\n let regionTwoStats = undefined;\n if (this.props.statsData) {\n regionOneStats = this.props.statsData.filter(x => x.region_code == this.props.regionOne)[0];\n regionTwoStats = this.props.statsData.filter(x => x.region_code == this.props.regionTwo)[0];\n }\n\n\n const report = createReport({\n template: content,\n data: {\n all: tblData,\n unit: unit.short,\n area: 1,\n clc3_count: tblData.length,\n date: (new Date()).toLocaleDateString(i18n.language),\n region_type: t('export:' + this.props.categoryCode),\n primary: {\n title: this.getTitle(this.props.allData, this.props.regionOne),\n code: this.props.regionOne || \"\",\n area: regionOneStats ? numbro(unit.transform(regionOneStats.region_area_ha * 100)).divide(100).format() : '',\n rel_area: regionOneStats ? regionOneStats.region_perc : '',\n clc3_count: regionOneData.length\n },\n secondary: {\n title: this.getTitle(this.props.allData, this.props.regionTwo),\n code: this.props.regionTwo || \"\",\n area: regionTwoStats ? numbro(unit.transform(regionTwoStats.region_area_ha * 100)).divide(100).format() : '',\n rel_area: regionTwoStats ? regionTwoStats.region_perc : '',\n clc3_count: regionTwoData.length\n }\n },\n additionalJsContext: {\n chart: function (id, width) {\n let chartData = imagesData.filter(x => x.id == id)[0];\n let chartImage = chartData.image;\n let chartRatio = chartData.ratio;\n\n let height = width / chartRatio;\n const dataUrl = chartImage;\n const data = dataUrl.slice('data:image/png;base64,'.length);\n return { width: width, height: height, data, extension: '.png' }\n },\n map: function (id, width) {\n const dataUrl = this.genMapImage(id);\n const data = dataUrl.slice('data:image/png;base64,'.length);\n return { width: width, height: width, data, extension: '.png' }\n }.bind(this)\n }\n })\n report.then(data => {\n let filename = this.genFileName(unit.short, 'docx');\n\n this.saveDataToFile(\n data,\n filename,\n 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'\n );\n\n })\n\n }\n\n handleWord(unit) {\n let templateName = this.genReportName(this.props.reportType, i18n.language);\n\n this.loadWordTemplate(templateName, function (error, content) {\n if (error) {\n console.warn(error);\n throw error;\n }\n\n let chartIds = this.props.chartIds;\n let data = [];\n\n chartIds.forEach(id => this.genChartImage(id, function (png, ratio) {\n let d = {\n id: id,\n image: png,\n ratio: ratio\n };\n data.push(d);\n if (chartIds.length == data.length) {\n this.fillReport(content, unit, data);\n }\n }.bind(this)));\n }.bind(this));\n }\n\n render() {\n const { t, classes } = this.props;\n return (\n \n \n \n save_alt \n \n \n {this.props.title}\n {this.props.subtitle ? - {this.props.subtitle} : null}\n \n \n \n \n \n \n \n {t('common:document')} \n \n description \n
\n {t('common:word')} \n {t('common:word-desc')}
\n \n {ctx =>\n this.handleWord(ctx.unit)}>\n {t('common:download')}\n \n }\n \n \n \n \n \n \n \n {t('common:data')} \n \n grid_on \n
\n {t('common:excel')} \n {t('common:excel-desc')}
\n \n {ctx =>\n this.handleExcel(ctx.unit)} >\n {t('common:download')}\n \n }\n \n \n \n \n \n \n \n \n \n\n );\n }\n}\n\nexport default withNamespaces()(withStyles(dashGeneralPageStyle)(CLCExportCard));\n","export {\n sortAreas,\n sortClasses,\n filterData\n};\n\nfunction sortAreas(a, b) {\n return b.pov_3_ha - a.pov_3_ha;\n}\n\nfunction sortClasses(a, b) {\n return a.kod_3 - b.kod_3;\n}\n\nfunction filterData(data, col, id) {\n return data.filter( row => {\n return row[col] == id ; // must be loose equal ('==')\n });\n}\n","import React from 'react'\nimport numbro from 'numbro';\n\n//OpenLayers\nimport OlMap from \"ol/Map\";\nimport OlView from \"ol/View\";\nimport OlFormatGeoJSON from 'ol/format/GeoJSON';\nimport OlSourceVector from \"ol/source/Vector\";\nimport OlLayerVector from \"ol/layer/Vector\";\n\nimport OlSourceTileWMS from \"ol/source/TileWMS\";\nimport OlLayerTile from \"ol/layer/Tile\";\n\nimport OlStyle from 'ol/style/Style';\nimport OlStroke from 'ol/style/Stroke';\nimport OlFill from 'ol/style/Fill';\n\nimport OlSelect from 'ol/interaction/Select';\nimport OlDragPan from 'ol/interaction/DragPan';\nimport OlKeyboardPan from 'ol/interaction/KeyboardPan';\nimport { pointerMove as OlPointerMove } from 'ol/events/condition';\n\nimport { defaults as OlInteractionDefaults } from 'ol/interaction';\nimport { defaults as OlControlDefaults } from 'ol/control';\n\nimport { register as OlRegister } from 'ol/proj/proj4'\nimport { get as OlGetProjection } from 'ol/proj'\n\nimport proj4 from 'proj4';\n\nimport { Context } from \"Context.jsx\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\n\nimport mapStyle from \"assets/jss/prehnit/components/mapStyle.jsx\";\n\nimport { withNamespaces } from \"react-i18next\";\n\nimport { geoserverService } from \"services/geoserver\";\n\nconst url = process.env.REACT_APP_GeoServer_WFS_Url;\n\n\nclass MapSimple extends React.Component {\n _isMounted = false;\n\n constructor(props) {\n super(props);\n\n this.state = {\n map: undefined,\n viewCenter: [500000, 4900000],\n zoom: this.props.initialZoom,\n height: 0,\n width: 0,\n\n pointerLeft: 0,\n pointerTop: 0,\n\n regionId: undefined,\n regionTitle: undefined,\n regionArea: undefined,\n regionCoveragePerc: undefined,\n regionDesc: undefined,\n\n regionOne: this.props.regionOne,\n regionTwo: this.props.regionTwo,\n\n features: undefined\n }\n\n this.highlightedFeatures = [];\n this.selectStylePrimary = new OlStyle({\n stroke: new OlStroke({\n color: 'rgba(67,134,0,1)',\n width: 1\n }),\n fill: new OlFill({\n color: 'rgba(127,193,66,1)'\n })\n });\n this.selectStyleSecondary = new OlStyle({\n stroke: new OlStroke({\n color: 'rgba(251,140,0,1)',\n width: 1\n }),\n fill: new OlFill({\n color: 'rgba(255,167,38,1)'\n })\n });\n\n this._clearToolTip = this._clearToolTip.bind(this);\n\n this.handleClick = this.handleClick.bind(this);\n this.handleHover = this.handleHover.bind(this);\n this.handlePointerMove = this.handlePointerMove.bind(this);\n this.handleLeave = this.handleLeave.bind(this);\n this.toggleMapPan = this.toggleMapPan.bind(this);\n\n proj4.defs(\"EPSG:3765\", \"+proj=tmerc +lat_0=0 +lon_0=16.5 +k=0.9999 +x_0=500000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs\");\n OlRegister(proj4);\n this.htrs96 = OlGetProjection('EPSG:3765')\n\n geoserverService.WFS.getFeatures(this.props.dataLayer)\n .then(data => {\n if (data) {\n data = JSON.parse(data);\n } else {\n console.warn('MapSimple: No data received');\n }\n\n this.features = (new OlFormatGeoJSON()).readFeatures(data, { featureProjection: this.htrs96 })\n\n this.features.forEach(function (f) {\n let id = f.get('id', this.props.data);\n let filtered_data = this.props.data.filter(x => x.region_code == id);\n if (filtered_data && filtered_data.length > 0) {\n let d = filtered_data[0];\n f.set('region_area_ha', d.region_area_ha);\n f.set('region_perc', d.region_perc);\n f.set('region_title', d.region_title);\n f.set('region_title_trans_token', d.region_title_trans_token);\n f.set('code_3_count', d.code_3_count);\n }\n\n if (id == this.props.regionOne) {\n f.setStyle(this.selectStylePrimary);\n } else if (id == this.props.regionTwo) {\n f.setStyle(this.selectStyleSecondary)\n }\n }.bind(this));\n\n this.regionsLayer = new OlLayerVector({\n source: new OlSourceVector({\n features: this.features\n }),\n updateWhileAnimating: true\n });\n this.map.addLayer(this.regionsLayer);\n\n if (this._isMounted) {\n this.setState({\n features: this.features\n })\n }\n })\n }\n\n _clearToolTip() {\n if (this._isMounted) {\n this.setState({\n regionId: null,\n regionTitle: null,\n regionArea: null,\n regionCoveragePerc: null,\n regionDesc: null\n });\n }\n }\n\n handlePointerMove(event) {\n this.positionToolTip(event.pixel);\n }\n\n positionToolTip(interact_location) {\n if (this._isMounted) {\n this.setState({\n pointerLeft: interact_location[0] - 75,\n pointerTop: interact_location[1] + 120\n });\n }\n }\n\n handleHover(event) {\n const { t } = this.props;\n var selected = event.selected;\n\n if (selected.length > 0) {\n let feat = selected[0];\n\n let title = feat.get('region_title');\n let token = feat.get('region_title_trans_token');\n if (token && token.length > 0) {\n title = t(token);\n }\n let perc = feat.get('region_perc');\n let percDisp = numbro(perc * 100).divide(100).format() + \"%\";\n\n let pov = feat.get('region_area_ha');\n if (this._isMounted) {\n this.setState({\n regionId: feat.get('id'),\n regionTitle: title,\n regionArea: pov,\n regionCoveragePerc: percDisp,\n regionDesc: feat.get('code_3_count')\n });\n }\n } else {\n this._clearToolTip();\n }\n }\n\n handleClick(evt) {\n let featureCount = 0;\n\n let newRegionOne = this.props.regionOne;\n let newRegionTwo = this.props.regionTwo;\n\n this.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {\n featureCount += 1;\n if (featureCount > 1) { //we process only the first feature\n return;\n }\n let id = feature.get('id');\n if (!this.props.regionOne) { //set first selected layer\n feature.setStyle(this.selectStylePrimary);\n newRegionOne = id;\n }\n else if (!this.props.regionTwo && this.props.regionOne != id) { //set second selected layer\n feature.setStyle(this.selectStyleSecondary);\n newRegionTwo = id;\n }\n else if (this.props.regionOne == id) { //deselect first\n feature.setStyle(null);\n let id_ch = this.props.regionTwo;\n if (id_ch) {\n this.regionsLayer.getSource().getFeatures().forEach(function (feat) {\n let id = feat.get('id');\n if (id == id_ch) {\n feat.setStyle(this.selectStylePrimary);\n }\n }.bind(this));\n }\n newRegionOne = newRegionTwo;\n newRegionTwo = null;\n\n } else if (this.props.regionTwo == id) { //deselect second\n feature.setStyle(null);\n newRegionTwo = null;\n } else { //new feature is selected\n feature.setStyle(this.selectStyleSecondary)\n let id_del = this.props.regionOne;\n let id_ch = this.props.regionTwo;\n this.regionsLayer.getSource().getFeatures().forEach(function (feat) {\n let id = feat.get('id');\n if (id == id_del) {\n feat.setStyle(null);\n } else if (id == id_ch) {\n feat.setStyle(this.selectStylePrimary);\n }\n }.bind(this));\n newRegionOne = newRegionTwo;\n newRegionTwo = id;\n }\n\n }.bind(this));\n\n if (featureCount > 0 && this.props.onSelect) {\n this.props.onSelect(newRegionOne, newRegionTwo);\n }\n\n }\n\n handleLeave(event) {\n this._clearToolTip();\n }\n\n toggleMapPan(allowPan) {\n let interactions = this.map.getInteractions();\n\n interactions.getArray().forEach(function (interaction) {\n if (interaction instanceof OlDragPan\n || interaction instanceof OlKeyboardPan) {\n interaction.setActive(allowPan);\n }\n });\n\n }\n\n\n componentDidMount() {\n this._isMounted = true;\n // console.log('MapSimple: componentDidMount');\n\n this.view = new OlView({\n center: this.state.viewCenter,\n zoom: this.state.zoom,\n extent: [270000, 4710000, 720000, 5140000],\n minZoom: this.props.minZoom,\n maxZoom: this.props.maxZoom,\n projection: 'EPSG:3765'\n });\n\n if (this.props.allowPan) {\n this.view.on('change:resolution', function (e) {\n let currentZoom = this.view.getZoom();\n\n //console.log(this.props.minZoom, currentZoom);\n\n if (Number.isInteger(currentZoom)) {\n let allowPan = currentZoom !== this.props.minZoom;\n\n this.toggleMapPan(allowPan);\n\n if (currentZoom === this.props.minZoom) {\n let extent = this.regionsLayer.getSource().getExtent();\n this.view.fit(extent);\n }\n }\n\n }.bind(this));\n }\n\n this.hover = new OlSelect({\n condition: OlPointerMove\n });\n this.hover.on('select', this.handleHover);\n\n // create map object\n this.map = new OlMap({\n interactions: OlInteractionDefaults({\n doubleClickZoom: false,\n dragAndDrop: false,\n dragPan: this.props.allowPan,\n keyboardPan: this.props.allowPan,\n keyboardZoom: true,\n mouseWheelZoom: true,\n pointer: true,\n select: this.select,\n altShiftDragRotate: false,\n pinchRotate: false\n }),\n controls: OlControlDefaults({\n attribution: false,\n zoom: false,\n }),\n target: null,\n view: this.view\n });\n\n this.map.addInteraction(this.hover);\n\n this.map.on('pointermove', this.handlePointerMove);\n\n this.map.on(\"click\", this.handleClick);\n\n //console.log('MapSimple: setTarget refs mapContainer', this.refs.mapContainer);\n this.map.setTarget(this.refs.mapContainer);\n\n this.toggleMapPan(false); //initial\n\n // Background Layer\n if (this.props.backgroundLayer) {\n this.map.addLayer(new OlLayerTile({\n source: new OlSourceTileWMS({\n params: {\n 'LAYERS': this.props.backgroundLayer,\n 'FORMAT': 'image/png'\n },\n url: url,\n crossOrigin: 'anonymous'\n }),\n style: new OlStyle({\n stroke: new OlStroke({\n color: '#C0C0C0',\n width: 1\n }),\n fill: new OlFill({\n color: 'rgba(0,0,0,1)'\n })\n })\n }));\n }\n\n //save map and layer references to local state\n if (this.refs.mapContainer) {\n if (this._isMounted) {\n this.setState({\n map: this.map,\n height: this.refs.mapContainer.clientHeight,\n width: this.refs.mapContainer.clientWidth\n })\n }\n } else {\n if (this._isMounted) {\n this.setState({\n map: this.map\n });\n }\n }\n\n }\n\n componentWillUnmount() {\n this._isMounted = false;\n }\n\n render() {\n const { t, classes } = this.props;\n\n if (this.features) {\n this.features.forEach(function (f) {\n let id = f.get('id', this.props.data);\n\n if (id == this.props.regionOne) {\n f.setStyle(this.selectStylePrimary);\n } else if (id == this.props.regionTwo) {\n f.setStyle(this.selectStyleSecondary)\n } else {\n f.setStyle(null);\n }\n }.bind(this));\n }\n\n\n\n // console.log('MapSimple: render');\n\n return (\n \n
\n\n {this.state.regionId ?\n
\n : null}\n\n
\n
\n \n \n \n \n \n play_arrow \n \n {this.props.mapTitle} \n \n \n {this.state.statsData ?\n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n {this.state.statsData && this.state.allData ?\n \n \n \n \n
\n );\n }\n}\n\nexport default withNamespaces()(withStyles(dashGeneralPageStyle)(CLCDashCompareTwo));","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\n\n// core components\nimport Header from \"components/Header/Header.jsx\";\nimport HeaderLinks from \"components/Header/HeaderLinks.jsx\";\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\nimport GridItem from \"components/Grid/GridItem.jsx\";\nimport Footer from \"components/Footer/Footer.jsx\";\nimport Parallax from \"components/Parallax/Parallax.jsx\";\n\nimport dashGeneralPageStyle from \"assets/jss/prehnit/views/dashGeneralPageStyle.jsx\";\n\nimport { withNamespaces } from \"react-i18next\";\n\nimport CLCDashCompareTwo from \"components/CLCDashboards/CLCDashCompareTwo.jsx\";\n\nimport { checkTrans } from \"helpers\";\n\nclass DashProtectedPage extends React.Component {\n\n componentDidMount() {\n checkTrans('export');\n checkTrans('protected-regions');\n }\n\n render() {\n const { t, classes, match } = this.props;\n return (\n \n
}\n fixed\n color=\"white\"\n />\n
\n \n \n \n \n {t(\"pagecontent:dash-protected-title\")}\n \n \n \n
\n \n
\n
\n
\n \n \n \n \n \n folder \n \n {t(\"pagecontent:dash-country-total-area\")} \n \n \n \n {ctx =>\n \n {numbro(ctx.unit.transform(this.state.totalArea)).format()} {ctx.unit.short} \n \n }\n \n \n \n \n \n \n bar_chart \n \n {t(\"pagecontent:dash-country-number-of-classes\")} \n \n \n \n {this.state.codeCount}\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n
\n );\n }\n}\n\nexport default withNamespaces()(withStyles(dashGeneralPageStyle)(CLCDashSingle));","import React from \"react\";\n// nodejs library that concatenates classes\nimport classNames from \"classnames\";\n\n// @material-ui/core components\nimport withStyles from \"@material-ui/core/styles/withStyles\";\n\n// core components\nimport Header from \"components/Header/Header.jsx\";\nimport HeaderLinks from \"components/Header/HeaderLinks.jsx\";\nimport GridContainer from \"components/Grid/GridContainer.jsx\";\nimport GridItem from \"components/Grid/GridItem.jsx\";\nimport Footer from \"components/Footer/Footer.jsx\";\nimport Parallax from \"components/Parallax/Parallax.jsx\";\n\nimport dashGeneralPageStyle from \"assets/jss/prehnit/views/dashGeneralPageStyle.jsx\";\n\nimport { withNamespaces } from \"react-i18next\";\n\nimport CLCDashSingle from \"components/CLCDashboards/CLCDashSingle.jsx\";\n\nimport { checkTrans } from \"helpers\";\n\nclass DashCountryPage extends React.Component {\n\n componentDidMount() {\n checkTrans('clc');\n checkTrans('export');\n }\n\n render() {\n const { t, classes } = this.props;\n return (\n \n
}\n fixed\n color=\"white\"\n />\n
\n \n \n \n \n {t(\"pagecontent:dash-country-title\")}\n \n \n \n
\n \n
\n
\n
\n
}\n fixed\n color=\"white\"\n />\n
\n \n \n \n \n {t(\"pagecontent:dash-county-title\")}\n \n \n \n
\n \n
\n
\n
\n
}\n fixed\n color=\"white\"\n />\n
\n \n \n \n \n {t(\"pagecontent:dash-municipality-title\")}\n \n \n \n
\n \n
\n
\n
\n
}\n fixed\n color=\"white\"\n />\n
\n \n \n \n \n {t(\"pagecontent:dash-biogeo-title\")}\n \n \n \n
\n \n
\n
\n
\n
}\n fixed\n color=\"transparent\"\n changeColorOnScroll={{\n height: 300,\n color: \"white\"\n }}\n />\n
\n \n \n \n {t(\"pagecontent:terms-title\")} \n {t(\"pagecontent:terms-subtitle\")} \n \n \n
\n \n
\n
\n
\n \n {t(\"pagecontent:terms-title\")} \n {t(\"pagecontent:terms-para-01\")}
\n {t(\"pagecontent:terms-para-02\")}
\n {t(\"pagecontent:terms-para-03\")}
\n {t(\"pagecontent:terms-para-04\")}
\n {t(\"pagecontent:terms-para-05\")}
\n {t(\"pagecontent:terms-para-06\")}
\n {t(\"pagecontent:terms-para-07\")}
\n {t(\"pagecontent:terms-para-08\")}
\n {t(\"pagecontent:terms-para-09\")}
\n\n {t(\"pagecontent:terms-heading-1\")} \n {t(\"pagecontent:terms-para-11\")}
\n {t(\"pagecontent:terms-para-12\")}
\n {t(\"pagecontent:terms-para-13\")}
\n \n {t(\"pagecontent:terms-list-11\")}
{t(\"pagecontent:terms-list-12\")}
{t(\"pagecontent:terms-list-13\")}
{t(\"pagecontent:terms-list-14\")}
\n\n {t(\"pagecontent:terms-heading-2\")} \n {t(\"pagecontent:terms-para-21\")}
\n {t(\"pagecontent:terms-para-22\")}
\n {t(\"pagecontent:terms-para-23\")}
\n\n \n \n\n\n
\n
\n
\n
\n \n \n \n {indexRoutes.map((prop, key) => {\n return \n \n \n \n );\n }\n}\n\nexport default App;","import i18n from \"i18next\";\nimport {reactI18nextModule} from \"react-i18next\";\nimport lngDetector from 'i18next-browser-languagedetector';\n// import Backend from 'i18next-xhr-backend';\n\nimport { Languages as LanguagesFallback } from \"config/LanguageList.jsx\";\n\nimport numbro from 'numbro';\nimport moment from 'moment';\nimport 'moment/locale/hr';\n\nimport { API } from \"services/api\";\n\n\nlet trans_groups = ['pagecontent', 'menu', 'common', 'map', 'layers',\n//,'links', 'biogeo' , 'ua', 'natura2000', 'rzlclu', 'rzgle', 'uastl', 'imp', 'impch', 'impclch', 'dlt', 'tcd', 'grass', 'waw', 'wawpi'\n];\n\nAPI.getLanguages()\n.then(langs => {\n if (!langs) {\n console.warn('Loading Fallback languages!');\n langs = LanguagesFallback;\n }\n langs.forEach(function(lang){\n trans_groups.forEach(function(group){\n API.getTranslations(lang.code, group)\n .then(data => {\n if (data) {\n i18n.addResourceBundle(lang.code, group, data);\n } else {\n console.error('Cannot load translations for language: ' + lang.code + \", group: \" + group);\n }\n });\n\n });\n\n });\n});\n\ni18n\n .use(lngDetector)\n .use(reactI18nextModule)\n .init({\n ns: trans_groups,\n defaultNS: 'common',\n // backend: {\n // loadPath: 'http://localhost:5000/api/v1//mw/api/v1/trans/{{lng}}/{{ns}}'\n // },\n detection: {\n order: ['querystring'],\n lookupQuerystring: 'lng'\n },\n fallbackLng: 'hr',\n keySeparator: false, // we do not use keys in form messages.welcome\n interpolation: {\n escapeValue: false // react already safes from xss\n },\n useCookie: false\n });\n\ni18n.on('languageChanged', function(lng) {\n moment.locale(lng);\n numbro.setLanguage(lng);\n });\n\nexport default i18n;","import numbro from 'numbro';\n\nnumbro.registerLanguage({\n languageTag: \"hr-HR\",\n delimiters: {\n thousands: \" \",\n decimal: \",\"\n },\n abbreviations: {\n thousand: \" 000\",\n million: \" 000 000\",\n billion: \" mlrd.\",\n trillion: \" bil.\"\n },\n ordinal: function() {\n return \".\"\n },\n currency: {\n symbol: \"Kn\",\n position: \"postfix\",\n code: \"HRK\"\n },\n currencyFormat: {\n thousandSeparated: true,\n totalLength: 4,\n spaceSeparated: true,\n average: true\n },\n formats: {\n fourDigits: {\n totalLength: 4,\n spaceSeparated: true,\n average: true\n },\n fullWithTwoDecimals: {\n output: \"currency\",\n mantissa: 2,\n spaceSeparated: true,\n thousandSeparated: true\n },\n fullWithTwoDecimalsNoCurrency: {\n mantissa: 2,\n thousandSeparated: true\n },\n fullWithNoDecimals: {\n output: \"currency\",\n spaceSeparated: true,\n thousandSeparated: true,\n mantissa: 0\n }\n }\n});\n\nnumbro.setDefaults({\n thousandSeparated: true,\n mantissa: 2\n});\n\n// numbro.setLanguage(i18n.language);","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \"./App\";\n\nimport \"./i18n\";\n\nimport \"./numbro\";\n\nimport \"assets/scss/material-kit-pro-react.css?v=1.2.0\";\n\nimport \"./polyfills\";\n\nReactDOM.render(\n {layersList.map((prop, key) => {\n return (\n this.handleCloseMenu(prop)}\n className={dropdownItem}\n >\n {prop.icon ? prop.icon : \"layers\"} \n {prop.name}\n \n this.handleDeleteMenuItem(prop)}>\n delete \n \n \n \n );\n })}\n {layersList && layersList.length > 0 ?\n this.handleCloseMenu(\"divider\")}\n className={classes.dropdownDividerItem}\n /> : null}\n\n this.handleAdd()}\n className={dropdownItem}\n >\n add \n {t(\"map:overlay-add\")}\n \n\n\n \n );\n\n return (\n \n
\n
{\n this.anchorEl = node;\n }}\n color=\"primary\"\n onClick={this.handleClick}\n className={classes.smallButton}\n >\n {buttonIcon} \n \n\n\n \n {({ TransitionProps, placement }) => (\n \n\n
\n {t(\"map:upload-title\")} \n \n {t(\"map:upload-desc\")} \n \n \n {t('map:upload-browse')}\n \n \n\n \n \n \n {t(\"common:cancel\")}\n \n \n {t(\"common:ok\")}\n \n \n \n\n
\n {children}\n \n );\n}\n\nRegularButton.propTypes = {\n classes: PropTypes.object.isRequired,\n color: PropTypes.oneOf([\n \"primary\",\n \"secondary\",\n \"info\",\n \"success\",\n \"warning\",\n \"danger\",\n \"rose\",\n \"white\",\n \"twitter\",\n \"facebook\",\n \"google\",\n \"linkedin\",\n \"pinterest\",\n \"youtube\",\n \"tumblr\",\n \"github\",\n \"behance\",\n \"dribbble\",\n \"reddit\",\n \"instagram\",\n \"transparent\"\n ]),\n size: PropTypes.oneOf([\"sm\", \"lg\"]),\n simple: PropTypes.bool,\n round: PropTypes.bool,\n fullWidth: PropTypes.bool,\n disabled: PropTypes.bool,\n block: PropTypes.bool,\n link: PropTypes.bool,\n justIcon: PropTypes.bool,\n fileButton: PropTypes.bool\n};\n\nexport default withStyles(buttonStyle)(RegularButton);\n","module.exports = __webpack_public_path__ + \"static/media/antoine-similon-1165697-unsplash-cr.54dbeefb.jpg\";","module.exports = __webpack_public_path__ + \"static/media/sergii-gulenok-61955-unsplash-sm.4cf30bd6.jpg\";"],"sourceRoot":""}