diff --git a/imports/ui/components/SelectionMap/SelectionMap.js b/imports/ui/components/SelectionMap/SelectionMap.js index 9b6c22a..3616aaa 100644 --- a/imports/ui/components/SelectionMap/SelectionMap.js +++ b/imports/ui/components/SelectionMap/SelectionMap.js @@ -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} > - - {!this.props.readOnly && - { this.marker = ref; }} - /> } - {!this.props.readOnly && - } - {!this.props.readOnly && - { this.distanceCircle = ref; }} - color="#145A32" - fillColor="green" - fillOpacity={0.1} - radius={this.state.distance * 1000} - /> } - - - { this.props.sndBtn && this.props.onSndBtn && - this.onSndBtn(event)} - > - {this.props.sndBtn} - - } - this.onFstBtn(event)} - > - {this.props.fstBtn} - - - + + {this.props.action === action.add && + + { this.marker = ref; }} + /> + + { this.distanceCircle = ref; }} + color="#145A32" + fillColor="green" + fillOpacity={0.1} + radius={this.state.distance * 1000} + /> + + } + + + { this.props.sndBtn && this.props.onSndBtn && + this.onSndBtn(event)} + > + {this.props.sndBtn} + + } + this.onFstBtn(event)} + > + {this.props.fstBtn} + + + } @@ -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, diff --git a/imports/ui/pages/FireSubscription/FireSubscription.js b/imports/ui/pages/FireSubscription/FireSubscription.js index 1b06121..050be09 100644 --- a/imports/ui/pages/FireSubscription/FireSubscription.js +++ b/imports/ui/pages/FireSubscription/FireSubscription.js @@ -7,7 +7,7 @@ import { withTracker } from 'meteor/react-meteor-data'; import { Row, Col } from 'react-bootstrap'; import { translate } from 'react-i18next'; 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 CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js'; import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions'; @@ -95,8 +95,7 @@ class FireSubscription extends React.Component { fstBtn={this.props.subsBtn} onFstBtn={state => this.onSubs(state)} onSelection={state => this.onSelection(state)} - readOnly={false} - edit={false} + action={action.add} loadingSubs={this.props.loading} currentSubs={this.props.subscriptions} /> diff --git a/imports/ui/pages/Subscriptions/Subscriptions.js b/imports/ui/pages/Subscriptions/Subscriptions.js index 7a1953e..38288d8 100644 --- a/imports/ui/pages/Subscriptions/Subscriptions.js +++ b/imports/ui/pages/Subscriptions/Subscriptions.js @@ -12,7 +12,7 @@ import { withTracker } from 'meteor/react-meteor-data'; import { Trans, translate } from 'react-i18next'; import { Bert } from 'meteor/themeteorchef:bert'; 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 './Subscriptions.scss'; @@ -21,7 +21,7 @@ class Subscriptions extends Component { super(props); this.t = props.t; this.state = { - edit: false + action: action.view }; this.onViewportChanged = this.onViewportChanged.bind(this); this.onFstBtn = this.onFstBtn.bind(this); @@ -29,12 +29,12 @@ class Subscriptions extends Component { } 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 }); } onSndBtn() { - this.state.edit = true; + this.setState({ action: action.edit }); } onViewportChanged(viewport) { @@ -66,14 +66,12 @@ class Subscriptions extends Component { Suscripciones a fuegos en zonas de mi interés - Añadir zona this.onFstBtn(state)} sndBtn={this.props.subscriptions.length > 1 ? t('Editar') : null}