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

5
imports/ui/pages/FireSubscription/FireSubscription.js
View file

@ -7,7 +7,7 @@ import { withTracker } from 'meteor/react-meteor-data';
import { Row, Col } from 'react-bootstrap'; import { Row, Col } from 'react-bootstrap';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider'; import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap'; import SelectionMap, { action } from '/imports/ui/components/SelectionMap/SelectionMap';
import Gkeys from '/imports/startup/client/Gkeys'; import Gkeys from '/imports/startup/client/Gkeys';
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js'; import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions'; import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
@ -95,8 +95,7 @@ class FireSubscription extends React.Component {
fstBtn={this.props.subsBtn} fstBtn={this.props.subsBtn}
onFstBtn={state => this.onSubs(state)} onFstBtn={state => this.onSubs(state)}
onSelection={state => this.onSelection(state)} onSelection={state => this.onSelection(state)}
readOnly={false} action={action.add}
edit={false}
loadingSubs={this.props.loading} loadingSubs={this.props.loading}
currentSubs={this.props.subscriptions} currentSubs={this.props.subscriptions}
/> />

12
imports/ui/pages/Subscriptions/Subscriptions.js
View file

@ -12,7 +12,7 @@ import { withTracker } from 'meteor/react-meteor-data';
import { Trans, translate } from 'react-i18next'; import { Trans, translate } from 'react-i18next';
import { Bert } from 'meteor/themeteorchef:bert'; import { Bert } from 'meteor/themeteorchef:bert';
import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions'; import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
import SelectionMap from '/imports/ui/components/SelectionMap/SelectionMap'; import SelectionMap, { action } from '/imports/ui/components/SelectionMap/SelectionMap';
import Loading from '../../components/Loading/Loading'; import Loading from '../../components/Loading/Loading';
import './Subscriptions.scss'; import './Subscriptions.scss';
@ -21,7 +21,7 @@ class Subscriptions extends Component {
super(props); super(props);
this.t = props.t; this.t = props.t;
this.state = { this.state = {
edit: false action: action.view
}; };
this.onViewportChanged = this.onViewportChanged.bind(this); this.onViewportChanged = this.onViewportChanged.bind(this);
this.onFstBtn = this.onFstBtn.bind(this); this.onFstBtn = this.onFstBtn.bind(this);
@ -29,12 +29,12 @@ class Subscriptions extends Component {
} }
onFstBtn() { onFstBtn() {
console.log(this.state); // console.log(this.state);
this.props.history.push(`${this.props.match.url}/new`, { center: this.state.center, zoom: this.state.zoom }); this.props.history.push(`${this.props.match.url}/new`, { center: this.state.center, zoom: this.state.zoom });
} }
onSndBtn() { onSndBtn() {
this.state.edit = true; this.setState({ action: action.edit });
} }
onViewportChanged(viewport) { onViewportChanged(viewport) {
@ -66,14 +66,12 @@ class Subscriptions extends Component {
<div className="Subscriptions"> <div className="Subscriptions">
<div className="page-header clearfix"> <div className="page-header clearfix">
<h4 className="pull-left"><Trans>Suscripciones a fuegos en zonas de mi interés</Trans></h4> <h4 className="pull-left"><Trans>Suscripciones a fuegos en zonas de mi interés</Trans></h4>
<Link className="btn btn-success pull-right" to={`${match.url}/new`}><Trans>Añadir zona</Trans></Link>
</div> </div>
<br /> <br />
<SelectionMap <SelectionMap
center={[null, null]} center={[null, null]}
zoom={11} zoom={11}
readOnly action={this.state.action}
edit={this.state.edit}
fstBtn={t('Añadir zona')} fstBtn={t('Añadir zona')}
onFstBtn={state => this.onFstBtn(state)} onFstBtn={state => this.onFstBtn(state)}
sndBtn={this.props.subscriptions.length > 1 ? t('Editar') : null} sndBtn={this.props.subscriptions.length > 1 ? t('Editar') : null}