Commit 3874ae82 authored by Alexander Prendetskiy's avatar Alexander Prendetskiy Committed by Matija Obreza

Map of accession localities

- SSR does not need to render the map
Signed-off-by: Matija Obreza's avatarMatija Obreza <matija.obreza@croptrust.org>
parent 9b05bf4f
import * as React from 'react';
import {connect} from 'react-redux';
import {withStyles} from '@material-ui/core/styles';
import {bindActionCreators} from 'redux';
import { parse } from 'query-string';
import { applyFilters, updateRoute } from 'actions/accessions';
import PageLayout from 'ui/layout/PageLayout';
import ContentHeader from '../../common/heading/ContentHeader';
import FilteredPage from '../../../model/FilteredPage';
import Accession from '../../../model/Accession';
import Button from '@material-ui/core/Button';
import Tabs, {Tab} from 'ui/common/Tabs';
import PrettyFilters from '../../common/filter/PrettyFilters';
let Map;
let TileLayer;
import {API_ROOT} from 'constants/apiURLS';
interface IMapPageProps extends React.ClassAttributes<any> {
paged: FilteredPage<Accession>;
currentTab: string;
classes: any;
filterCode: string;
applyFilters: any;
updateRoute: any;
}
const styles = (theme) => ({
leafletContainer: {
width: '100%',
minHeight: '500px',
height: 'calc(100vh - 186px)',
},
});
class BrowsePage extends React.Component<IMapPageProps, any> {
protected static needs = [
({ search, params: { filterCode } }) => {
const qs = parse(search || '');
const page = { direction: qs.d, properties: null };
if (qs.s) {
page.properties = [ ...qs.s ];
}
return applyFilters(filterCode || '', page);
},
];
constructor(props, context) {
super(props, context);
if (typeof window !== 'undefined') {
Map = require('react-leaflet').Map;
TileLayer = require('react-leaflet').TileLayer;
}
}
public componentWillMount() {
const { paged, filterCode, updateRoute, applyFilters } = this.props;
// console.log(`Filter code for map ${filterCode} ?== ${paged && paged.filterCode}`, filterCode, paged ? paged.filterCode : 'No paged');
if (paged && paged.filterCode !== filterCode) {
// console.log(`paged.filterCode !== filterCode. updatingRoute`);
updateRoute(paged, '/a/map');
} else if (!paged) {
applyFilters(filterCode || '');
}
}
/// Wrap applyFilters dispatch and fills the current sort selection
protected myApplyFilters = (filters: any) => {
const { paged, applyFilters } = this.props;
if (paged) {
applyFilters(filters, { page: 0, direction: paged.sort[0].direction, properties: [ paged.sort[0].property ] });
} else {
applyFilters(filters, { page: 0 });
}
}
public render() {
const position = [30, 0];
const { paged, currentTab, classes, filterCode } = this.props;
// const color = 'f00ba0';
const layerUrl = `${API_ROOT}/acn/tile/{z}/{x}/{y}?f=${filterCode ? filterCode : ''}`; // `&color=${color}`;
return (
<PageLayout>
<ContentHeader title="Accession map" subTitle="Explore accession localities"/>
<Tabs
tab={ currentTab }
actions={
<span>
<Button> Download KML </Button>
</span>
}
>
<Tab name="data" to={ `/a/` }>Accessions</Tab>
<Tab name="overview" to={ `/a/overview/` }>Overview</Tab>
<Tab name="map" to={ `/a/map/` }>Map</Tab>
</Tabs>
<PrettyFilters
prefix="accessions"
filterObj={ paged && paged.filter || {} }
onSubmit={ this.myApplyFilters }
/>
<div className={ classes.leafletContainer }>
{ typeof window !== 'undefined' &&
<Map
center={ position }
zoom={ 3 } minZoom={ 2 } maxZoom={ 14 }>
<TileLayer
opacity={ 0.50 }
attribution={ '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }
url={ 'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png' }
/>
<TileLayer
updateInterval={ 1000 }
updateWhenZooming={ false }
attribution="&amp;copy Accession localities from <a href=&quot;/&quot;>Genesys PGR</a>"
url={ layerUrl }
/>
</Map>
}
</div>
</PageLayout>
);
}
}
const mapStateToProps = (state, ownProps) => ({
paged: state.accessions.paged || undefined,
filterCode: ownProps.match.params.filterCode || '',
currentTab: ownProps.match.params.tab || 'map', // current tab, or ownProps.location.pathname
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
applyFilters,
updateRoute,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(BrowsePage));
......@@ -18,6 +18,7 @@ import ReviewStep from 'ui/pages/dashboard/subsets/subset-stepper/steps/review';
// Accession
import AccessionBrowsePage from 'ui/pages/accessions/BrowsePage';
import MapBrowsePage from 'ui/pages/accessions/MapPage';
import AccessionDisplayPage from 'ui/pages/accessions/DisplayPage';
import AccessionOverviewPage from 'ui/pages/accessions/OverviewPage';
......@@ -129,6 +130,11 @@ const routes = [
component: AccessionOverviewPage,
exact: true,
},
{
path: '/a/map/:filterCode(v.+)?',
component: MapBrowsePage,
exact: true,
},
{
path: '/a/:uuid([a-z\\-0-9]+)',
component: AccessionDisplayPage,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment