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

Improvement in Subs and FireMap Union

Browse source
This commit is contained in:
vjrj 2017-12-19 20:02:14 +01:00
parent 497724443f
commit 1742cd4913
19 changed files with 390 additions and 299 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
/* global setTimeout */
/* eslint-disable react/jsx-indent-props */
/* eslint-disable react/jsx-indent */
/* eslint-disable import/no-absolute-path */
/* eslint-disable import/no-absolute-path */
@ -7,7 +8,7 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Map, TileLayer, Marker, CircleMarker, Circle } from 'react-leaflet';
import Leaflet from 'leaflet';
import { Trans, translate } from 'react-i18next';
import { translate } from 'react-i18next';
import { withTracker } from 'meteor/react-meteor-data';
import update from 'immutability-helper';
import geolocation from '/imports/startup/client/geolocation';
@ -16,9 +17,8 @@ import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
import 'leaflet-sleep/Leaflet.Sleep.js';
import Control from 'react-leaflet-control';
import { Button, ButtonToolbar } from 'react-bootstrap';
import { Sidebar, Tab } from 'react-leaflet-sidebarv2';
import '/imports/ui/stylesheets/leaflet-sidebar.min.css';
import { Button, ButtonGroup } from 'react-bootstrap';
import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
import './SelectionMap.scss';
class SelectionMap extends Component {
@ -27,11 +27,9 @@ class SelectionMap extends Component {
this.state = {
center: props.center,
marker: props.center,
zoom: 11,
zoom: props.zoom,
distance: props.distance,
draggable: true,
sidebarCollapsed: true,
sidebarSelected: 'home'
draggable: true
};
this.getMap = this.getMap.bind(this);
@ -39,7 +37,8 @@ class SelectionMap extends Component {
this.updatePosition = this.updatePosition.bind(this);
this.fit = this.fit.bind(this);
this.addScale = this.addScale.bind(this);
this.onSubs = this.onSubs.bind(this);
this.onFstBtn = this.onFstBtn.bind(this);
this.onViewportChanged = this.onViewportChanged.bind(this);
}
componentDidMount() {
@ -56,20 +55,30 @@ class SelectionMap extends Component {
marker: nextMarker,
distance: nextProps.distance || this.state.distance
});
this.fit();
// this.fit();
}
componentDidUpdate() {
this.fit();
// this.fit();
}
onSubs() {
this.props.onSubs({
onFstBtn() {
this.props.onFstBtn({
location: { lat: this.state.center[0], lon: this.state.center[1] },
distance: this.state.distance
});
}
onSndBtn() {
this.props.onSndBtn();
}
onViewportChanged(viewport) {
if (this.props.onViewportChanged) {
this.props.onViewportChanged(viewport);
}
}
getMap() {
return this.selectionMap.leafletElement;
}
@ -83,101 +92,66 @@ class SelectionMap extends Component {
// console.log(`New marker lat ${lat} and lng ${lng}`);
const currentDistance = this.state.distance;
this.setState(update(this.state, { $merge: { marker: [lat, lng] } }));
this.props.onSelection({ lat, lng, currentDistance });
if (this.props.onSelection) {
this.props.onSelection({ lat, lng, currentDistance });
}
this.fit();
// this.addScale();
}
fit() {
// console.log("fit!");
if (this.selectionMap && this.distanceCircle) {
if (this.subsUnionElement) {
// has autofit
} else if (this.selectionMap && this.distanceCircle) {
this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds(), [70, 70]);
}
}
addScale() {
// https://www.npmjs.com/package/leaflet-graphicscale
const map = this.getMap();
const options = {
fill: 'fill',
showSubunits: true
};
// var graphicScale =
Leaflet.control.graphicScale([options]).addTo(map);
if (this.selectionMap) {
// https://www.npmjs.com/package/leaflet-graphicscale
const map = this.getMap();
const options = {
fill: 'fill',
showSubunits: true
};
// var graphicScale =
Leaflet.control.graphicScale([options]).addTo(map);
}
}
isValidState() {
return this.state.center && this.state.center[0] && this.state.distance;
return this.state.center && this.state.center[0];
}
onSidebarClose() {
this.setState({ sidebarCollapsed: true });
}
onSidebarOpen(id) {
this.setState({
sidebarCollapsed: false,
sidebarSelected: id
});
}
aTab(oid, name) {
return (
<Tab id={`sidetab-${oid}`} header={name} icon="fa fa-map-marker">
<div className="btn-group-vertical sidebar-tab-btn-group">
<Button
bsStyle="default"
><i className="fa fa-pencil-square-o" />
<Trans>Editar</Trans>
</Button>
<Button
bsStyle="default"
><i className="icons icon-target" />
<Trans>Centrar aquí</Trans>
</Button>
<Button
bsStyle="default"
>
<Trans>Desahabilitar</Trans>
</Button>
<Button
bsStyle="danger"
><i className="fa fa-times" />
<Trans>Borrar</Trans>
</Button>
</div>
</Tab>
);
handleLeafletLoad(map) {
if (this.props.readOnly && this.props.currentSubs && map && !this.props.loadingSubs) {
this.state.union = subsUnion(this.state.union, {
map,
show: true,
fit: true,
subs: this.props.currentSubs
});
}
}
render() {
// console.log('render map called');
return (
<div>
{ this.isValidState() &&
<div className="leaflet-container">
<Sidebar
id="sidebar"
collapsed={this.state.sidebarCollapsed}
selected={this.state.sidebarSelected}
closeIcon="fa fa-chevron-left"
onOpen={this.onSidebarOpen.bind(this)}
onClose={this.onSidebarClose.bind(this)}
>
<Tab id="home" header="Suscripciones" icon="fa fa-bars">
<p>Pulsa en alguna de tus suscripciones para editarlas, etc.</p>
</Tab>
{this.aTab('someid2', 'Some fire')}
{this.aTab('someid3', 'Some another fire')}
</Sidebar>
<Map
className="sidebar-map"
/* className="sidebar-map" */
center={this.state.center}
zoom={this.state.zoom}
ref={(map) => { this.selectionMap = map; }}
ref={(map) => {
this.selectionMap = map;
this.handleLeafletLoad(map);
}}
sleep={window.location.pathname === '/'}
sleepTime={10750}
wakeTime={750}
onViewportChanged={this.onViewportChanged}
sleepNote
hoverToWake
wakeMessage={this.props.t('Pulsa para activar')}
@ -187,6 +161,7 @@ class SelectionMap extends Component {
attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
{!this.props.readOnly &&
<Marker
draggable={this.state.draggable}
onDragend={this.updatePosition}
@ -194,7 +169,8 @@ class SelectionMap extends Component {
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"
@ -202,7 +178,8 @@ class SelectionMap extends Component {
fillOpacity="1"
fill
radius={3}
/>
/> }
{!this.props.readOnly &&
<Circle
center={this.state.marker}
ref={(ref) => { this.distanceCircle = ref; }}
@ -210,16 +187,24 @@ class SelectionMap extends Component {
fillColor="green"
fillOpacity={0.1}
radius={this.state.distance * 1000}
/>
/> }
<Control position="topright" >
<ButtonToolbar>
<Button
bsStyle="success"
onClick={event => this.onSubs(event)}
>
{this.props.subsBtn}
</Button>
</ButtonToolbar>
<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>
@ -229,13 +214,28 @@ class SelectionMap extends Component {
}
}
SelectionMap.defaultProps = {
zoom: 11
};
SelectionMap.propTypes = {
t: PropTypes.func.isRequired,
center: PropTypes.arrayOf(PropTypes.number),
zoom: PropTypes.number,
distance: PropTypes.number,
onSelection: PropTypes.func.isRequired,
subsBtn: PropTypes.string.isRequired,
onSubs: PropTypes.func.isRequired
onSelection: PropTypes.func,
onViewportChanged: PropTypes.func,
fstBtn: PropTypes.string.isRequired,
onFstBtn: PropTypes.func.isRequired,
sndBtn: PropTypes.string,
onSndBtn: PropTypes.func,
readOnly: PropTypes.bool.isRequired,
edit: PropTypes.bool.isRequired,
loadingSubs: PropTypes.bool,
currentSubs: PropTypes.arrayOf(PropTypes.shape({
location: PropTypes.shape({ latitude: PropTypes.number, longitude: PropTypes.number }).isRequired,
distance: PropTypes.number.isRequired
}))
};
export default translate([], { wait: true })(withTracker(props => ({