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

Fix layout in SelectionMap

Browse source
This commit is contained in:
vjrj 2018-01-24 21:41:43 +01:00
parent 1e02fb6bcd
commit f76abc7c89
1 changed files with 94 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -19,7 +19,7 @@ import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js'; import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
import 'leaflet-sleep/Leaflet.Sleep.js'; import 'leaflet-sleep/Leaflet.Sleep.js';
import Control from 'react-leaflet-control'; import Control from 'react-leaflet-control';
import { Button, ButtonGroup } from 'react-bootstrap'; import { Row, Col, Button, ButtonGroup } from 'react-bootstrap';
import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion'; import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions'; import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
import './SelectionMap.scss'; import './SelectionMap.scss';
@ -161,97 +161,100 @@ class SelectionMap extends Component {
const { t, onRemove } = this.props; const { t, onRemove } = this.props;
return ( return (
this.isValidState() ? this.isValidState() ?
<div> <Row>
<Map <Col xs={12} sm={12} md={12} lg={12}>
className="selectionmap-leaflet-container" <Map
center={this.state.center} className="selectionmap-leaflet-container"
zoom={this.state.zoom} center={this.state.center}
ref={(map) => { zoom={this.state.zoom}
this.selectionMap = map; ref={(map) => {
this.handleLeafletLoad(map); this.selectionMap = map;
}} this.handleLeafletLoad(map);
sleep={window.location.pathname === '/'} }}
sleepTime={10750} sleep={window.location.pathname === '/'}
wakeTime={750} sleepTime={10750}
onViewportChanged={this.onViewportChanged} wakeTime={750}
sleepNote onViewportChanged={this.onViewportChanged}
hoverToWake={false} sleepNote
wakeMessage={t('Pulsa para activar')} hoverToWake={false}
wakeMessageTouch={t('Pulsa para activar')} wakeMessage={t('Pulsa para activar')}
sleepOpacity={0.6} wakeMessageTouch={t('Pulsa para activar')}
> sleepOpacity={0.6}
<DefMapLayers gray={false} /> >
{this.props.action === action.edit && <DefMapLayers gray={false} />
this.props.currentSubs.map((subs, index) => ( {this.props.action === action.edit &&
<Marker this.props.currentSubs.map((subs, index) => (
key={subs._id} <Marker
draggable={false} key={subs._id}
position={[subs.location.lat, subs.location.lon]} draggable={false}
icon={removeIcon} position={[subs.location.lat, subs.location.lon]}
title={t('Pulsa para borrar')} icon={removeIcon}
onClick={() => { onRemove(subs._id); }} title={t('Pulsa para borrar')}
> onClick={() => { onRemove(subs._id); }}
{index === 0 && >
<Tooltip {index === 0 &&
permanent <Tooltip
direction="right" permanent
/* Use .openTooltip(); in the future */ direction="right"
offset={[10, -10]} /* Use .openTooltip(); in the future */
offset={[10, -10]}
>
<span>{t('Pulsa aquí para borrar la zona')}</span>
</Tooltip>
}
</Marker>
))
}
{this.props.action === action.add &&
<Fragment>
<Marker
draggable={this.state.draggable}
onDragend={this.updatePosition}
position={this.state.marker}
icon={positionIcon}
title={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)}
> >
<span>{t('Pulsa aquí para borrar la zona')}</span> {this.props.sndBtn}
</Tooltip> </Button>
} }
</Marker> <Button
)) bsStyle="success"
} onClick={event => this.onFstBtn(event)}
{this.props.action === action.add && >
<Fragment> {this.props.fstBtn}
<Marker </Button>
draggable={this.state.draggable} </ButtonGroup>
onDragend={this.updatePosition} </Control>
position={this.state.marker} </Map>
icon={positionIcon} </Col>
title={t('Arrastrar para seleccionar otro punto')} </Row>
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> :
<div />); <div />);
} }
} }