comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added action to SelectionMap

Browse source
This commit is contained in:
vjrj 2017-12-20 00:40:20 +01:00
parent 62c0ba4f01
commit 05966afd65
3 changed files with 63 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

106
imports/ui/components/SelectionMap/SelectionMap.js
View file

@ -4,7 +4,7 @@
/* eslint-disable import/no-absolute-path */
/* eslint-disable import/no-absolute-path */
import React, { Component } from 'react';
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { Map, Marker, CircleMarker, Circle } from 'react-leaflet';
import Leaflet from 'leaflet';
@ -22,6 +22,12 @@ import { Button, ButtonGroup } from 'react-bootstrap';
import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
import './SelectionMap.scss';
export const action = {
view: 0,
add: 1,
edit: 2
};
class SelectionMap extends Component {
constructor(props) {
super(props);
@ -137,7 +143,7 @@ class SelectionMap extends Component {
fit: this.state.subsFit,
subs: this.props.currentSubs
};
if (!this.props.readOnly) {
if (this.props.action === action.add) {
subsOpts.color = '#F2F2F2';
}
this.state.union = subsUnion(this.state.union, subsOpts);
@ -166,52 +172,53 @@ class SelectionMap extends Component {
wakeMessage={this.props.t('Pulsa para activar')}
sleepOpacity={0.6}
>
<DefMapLayers gray={false} />
{!this.props.readOnly &&
<Marker
draggable={this.state.draggable}
onDragend={this.updatePosition}
position={this.state.marker}
icon={positionIcon}
title={this.props.t('Arrastrar para seleccionar otro punto')}
ref={(ref) => { this.marker = ref; }}
/> }
{!this.props.readOnly &&
<CircleMarker
center={this.state.marker}
color="red"
stroke={false}
fillOpacity="1"
fill
radius={3}
/> }
{!this.props.readOnly &&
<Circle
center={this.state.marker}
ref={(ref) => { this.distanceCircle = ref; }}
color="#145A32"
fillColor="green"
fillOpacity={0.1}
radius={this.state.distance * 1000}
/> }
<Control position="topright" >
<ButtonGroup>
{ this.props.sndBtn && this.props.onSndBtn &&
<Button
bsStyle="warning"
onClick={event => this.onSndBtn(event)}
>
{this.props.sndBtn}
</Button>
}
<Button
bsStyle="success"
onClick={event => this.onFstBtn(event)}
>
{this.props.fstBtn}
</Button>
</ButtonGroup>
</Control>
<DefMapLayers gray={false} />
{this.props.action === action.add &&
<Fragment>
<Marker
draggable={this.state.draggable}
onDragend={this.updatePosition}
position={this.state.marker}
icon={positionIcon}
title={this.props.t('Arrastrar para seleccionar otro punto')}
ref={(ref) => { this.marker = ref; }}
/>
<CircleMarker
center={this.state.marker}
color="red"
stroke={false}
fillOpacity="1"
fill
radius={3}
/>
<Circle
center={this.state.marker}
ref={(ref) => { this.distanceCircle = ref; }}
color="#145A32"
fillColor="green"
fillOpacity={0.1}
radius={this.state.distance * 1000}
/>
</Fragment>
}
<Control position="topright" >
<ButtonGroup>
{ this.props.sndBtn && this.props.onSndBtn &&
<Button
bsStyle="warning"
onClick={event => this.onSndBtn(event)}
>
{this.props.sndBtn}
</Button>
}
<Button
bsStyle="success"
onClick={event => this.onFstBtn(event)}
>
{this.props.fstBtn}
</Button>
</ButtonGroup>
</Control>
</Map>
</div>
}
@ -235,8 +242,7 @@ SelectionMap.propTypes = {
onFstBtn: PropTypes.func.isRequired,
sndBtn: PropTypes.string,
onSndBtn: PropTypes.func,
readOnly: PropTypes.bool.isRequired,
edit: PropTypes.bool.isRequired,
action: PropTypes.number.isRequired,
loadingSubs: PropTypes.bool,
currentSubs: PropTypes.arrayOf(PropTypes.shape({
location: PropTypes.shape({ latitude: PropTypes.number, longitude: PropTypes.number }).isRequired,