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

Added Layers to SelectionMap. Fixes in index and more

Browse source
This commit is contained in:
vjrj 2017-12-20 00:23:47 +01:00
parent 8fbb6716fc
commit 62c0ba4f01
7 changed files with 112 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

2
imports/startup/server/IPGeocoder.js
View file

@ -28,7 +28,7 @@ export function localize() {
clientIP = this.connection.clientAddress; clientIP = this.connection.clientAddress;
} else { } else {
console.warn(`We cannot get this meteor connection IP for this connection (${this.connection})`); console.warn(`We cannot get this meteor connection IP for this connection (${this.connection})`);
clientIP = '127.0.0.1'; clientIP = '80.58.61.250';
} }
if (isPrivateIP(clientIP)) { if (isPrivateIP(clientIP)) {
clientIP = '80.58.61.250'; // Some Spain IP address clientIP = '80.58.61.250'; // Some Spain IP address

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

@ -6,13 +6,14 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Map, TileLayer, Marker, CircleMarker, Circle } from 'react-leaflet'; import { Map, Marker, CircleMarker, Circle } from 'react-leaflet';
import Leaflet from 'leaflet'; import Leaflet from 'leaflet';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
import { withTracker } from 'meteor/react-meteor-data'; import { withTracker } from 'meteor/react-meteor-data';
import update from 'immutability-helper'; import update from 'immutability-helper';
import geolocation from '/imports/startup/client/geolocation'; import geolocation from '/imports/startup/client/geolocation';
import { positionIcon } from '/imports/ui/components/Maps/Icons'; import { positionIcon } from '/imports/ui/components/Maps/Icons';
import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css'; 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';
@ -27,9 +28,10 @@ class SelectionMap extends Component {
this.state = { this.state = {
center: props.center, center: props.center,
marker: props.center, marker: props.center,
zoom: props.zoom, zoom: props.zoom || 11,
distance: props.distance, distance: props.distance,
draggable: true draggable: true,
subsFit: true
}; };
this.getMap = this.getMap.bind(this); this.getMap = this.getMap.bind(this);
@ -55,7 +57,7 @@ class SelectionMap extends Component {
marker: nextMarker, marker: nextMarker,
distance: nextProps.distance || this.state.distance distance: nextProps.distance || this.state.distance
}); });
// this.fit(); this.fit();
} }
componentDidUpdate() { componentDidUpdate() {
@ -77,6 +79,9 @@ class SelectionMap extends Component {
if (this.props.onViewportChanged) { if (this.props.onViewportChanged) {
this.props.onViewportChanged(viewport); this.props.onViewportChanged(viewport);
} }
this.state.subsFit = false;
this.state.center = viewport.center;
this.state.zoom = viewport.zoom;
} }
getMap() { getMap() {
@ -100,8 +105,8 @@ class SelectionMap extends Component {
fit() { fit() {
// console.log("fit!"); // console.log("fit!");
if (this.subsUnionElement) { if (this.props.currentSubs.length > 0 && this.state.subsFit) {
// has autofit // has autofit, do nothing
} else if (this.selectionMap && this.distanceCircle) { } else if (this.selectionMap && this.distanceCircle) {
this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds(), [70, 70]); this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds(), [70, 70]);
} }
@ -125,13 +130,17 @@ class SelectionMap extends Component {
} }
handleLeafletLoad(map) { handleLeafletLoad(map) {
if (this.props.readOnly && this.props.currentSubs && map && !this.props.loadingSubs) { if (this.props.currentSubs && map && !this.props.loadingSubs) {
this.state.union = subsUnion(this.state.union, { const subsOpts = {
map, map,
show: true, show: true,
fit: true, fit: this.state.subsFit,
subs: this.props.currentSubs subs: this.props.currentSubs
}); };
if (!this.props.readOnly) {
subsOpts.color = '#F2F2F2';
}
this.state.union = subsUnion(this.state.union, subsOpts);
} }
} }
@ -157,10 +166,7 @@ class SelectionMap extends Component {
wakeMessage={this.props.t('Pulsa para activar')} wakeMessage={this.props.t('Pulsa para activar')}
sleepOpacity={0.6} sleepOpacity={0.6}
> >
<TileLayer <DefMapLayers gray={false} />
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 && {!this.props.readOnly &&
<Marker <Marker
draggable={this.state.draggable} draggable={this.state.draggable}

13
imports/ui/components/SubscriptionEditor/SubscriptionEditor.js
View file

@ -11,6 +11,14 @@ import FireSubscription from '/imports/ui/pages/FireSubscription/FireSubscriptio
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
class SubscriptionEditor extends React.Component { class SubscriptionEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
center: props.center || [null, null],
zoom: props.zoom || null
};
}
onSubs(value) { onSubs(value) {
const { t, history } = this.props; const { t, history } = this.props;
const existingSubscription = this.props.doc && this.props.doc._id; const existingSubscription = this.props.doc && this.props.doc._id;
@ -40,7 +48,8 @@ class SubscriptionEditor extends React.Component {
const focus = typeof this.props.focusInput !== 'undefined' ? this.props.focusInput : !isEdit; const focus = typeof this.props.focusInput !== 'undefined' ? this.props.focusInput : !isEdit;
return ( return (
<FireSubscription <FireSubscription
center={[doc.location.lat, doc.location.lon]} center={this.state.center}
zoom={this.state.zoom}
distance={doc.distance} distance={doc.distance}
focusInput={focus} focusInput={focus}
subsBtn={isEdit ? t('Actualizar') : t('Subscribirme a fuegos en este rádio')} subsBtn={isEdit ? t('Actualizar') : t('Subscribirme a fuegos en este rádio')}
@ -57,6 +66,8 @@ SubscriptionEditor.propTypes = {
doc: PropTypes.object, doc: PropTypes.object,
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
history: PropTypes.object.isRequired, history: PropTypes.object.isRequired,
center: PropTypes.arrayOf(PropTypes.number),
zoom: PropTypes.number,
focusInput: PropTypes.bool focusInput: PropTypes.bool
}; };

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

@ -2,12 +2,15 @@
/* eslint-disable react/jsx-indent-props */ /* eslint-disable react/jsx-indent-props */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
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 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 SubsAutocomplete from './SubsAutocomplete'; import SubsAutocomplete from './SubsAutocomplete';
class FireSubscription extends React.Component { class FireSubscription extends React.Component {
@ -16,6 +19,7 @@ class FireSubscription extends React.Component {
this.state = { this.state = {
init: false, init: false,
center: this.props.center, center: this.props.center,
zoom: this.props.zoom,
distance: this.props.distance distance: this.props.distance
}; };
// console.log(this.props.location.state); // console.log(this.props.location.state);
@ -61,7 +65,7 @@ class FireSubscription extends React.Component {
render() { render() {
// https://developers.google.com/places/web-service/search // https://developers.google.com/places/web-service/search
// https://github.com/kenny-hibino/react-places-autocomplete/blob/master/demo/Demo.js // https://github.com/kenny-hibino/react-places-autocomplete/blob/master/demo/Demo.js
console.log(`Focus autocomplete input: ${this.props.focusInput}`); // console.log(`Focus autocomplete input: ${this.props.focusInput}`);
if (!this.state.init) { if (!this.state.init) {
return <div />; return <div />;
} }
@ -86,12 +90,15 @@ class FireSubscription extends React.Component {
<Row className="align-items-center justify-content-center"> <Row className="align-items-center justify-content-center">
<SelectionMap <SelectionMap
center={this.state.center} center={this.state.center}
zoom={this.state.zoom}
distance={this.state.distance} distance={this.state.distance}
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} readOnly={false}
edit={false} edit={false}
loadingSubs={this.props.loading}
currentSubs={this.props.subscriptions}
/> />
</Row> </Row>
</div> </div>
@ -101,11 +108,21 @@ class FireSubscription extends React.Component {
FireSubscription.propTypes = { FireSubscription.propTypes = {
t: PropTypes.func.isRequired, t: PropTypes.func.isRequired,
loading: PropTypes.bool.isRequired,
subscriptions: PropTypes.arrayOf(PropTypes.object).isRequired,
center: PropTypes.arrayOf(PropTypes.number), center: PropTypes.arrayOf(PropTypes.number),
zoom: PropTypes.number,
distance: PropTypes.number, distance: PropTypes.number,
focusInput: PropTypes.bool.isRequired, focusInput: PropTypes.bool.isRequired,
subsBtn: PropTypes.string.isRequired, subsBtn: PropTypes.string.isRequired,
onSubs: PropTypes.func.isRequired onSubs: PropTypes.func.isRequired
}; };
export default translate([], { wait: true })(FireSubscription); export default translate([], { wait: true })(withTracker(() => {
const subscription = Meteor.subscribe('mysubscriptions');
// console.log(UserSubsToFiresCollection.find().fetch());
return {
loading: !subscription.ready(),
subscriptions: UserSubsToFiresCollection.find({ owner: Meteor.userId() }).fetch()
};
})(FireSubscription));

77
imports/ui/pages/FiresMap/FiresMap.js
View file

@ -2,14 +2,14 @@
/* eslint-disable import/no-absolute-path */ /* eslint-disable import/no-absolute-path */
/* eslint-disable react/jsx-indent-props */ /* eslint-disable react/jsx-indent-props */
/* eslint-disable react/jsx-indent */ /* eslint-disable react/jsx-indent */
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Row, Col, Checkbox } from 'react-bootstrap'; import { Row, Col, Checkbox } from 'react-bootstrap';
import { Meteor } from 'meteor/meteor'; import { Meteor } from 'meteor/meteor';
import { ReactiveVar } from 'meteor/reactive-var'; import { ReactiveVar } from 'meteor/reactive-var';
import { withTracker } from 'meteor/react-meteor-data'; import { withTracker } from 'meteor/react-meteor-data';
import { Trans, translate } from 'react-i18next'; import { Trans, translate } from 'react-i18next';
import { Map, TileLayer, LayersControl } from 'react-leaflet'; import { Map } from 'react-leaflet';
import _ from 'lodash'; import _ from 'lodash';
import 'leaflet/dist/leaflet.css'; import 'leaflet/dist/leaflet.css';
import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css'; import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
@ -19,15 +19,13 @@ import geolocation from '/imports/startup/client/geolocation';
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition'; import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition';
import FireList from '/imports/ui/components/Maps/FireList'; import FireList from '/imports/ui/components/Maps/FireList';
import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion'; import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
import DefMapLayers from '/imports/ui/components/Maps/DefMapLayers';
import Loading from '/imports/ui/components/Loading/Loading'; import Loading from '/imports/ui/components/Loading/Loading';
import ActiveFiresCollection from '/imports/api/ActiveFires/ActiveFires'; import ActiveFiresCollection from '/imports/api/ActiveFires/ActiveFires';
import FireAlertsCollection from '/imports/api/FireAlerts/FireAlerts'; import FireAlertsCollection from '/imports/api/FireAlerts/FireAlerts';
import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions'; import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
import Gkeys from '/imports/startup/client/Gkeys';
import { GoogleLayer } from 'react-leaflet-google/lib/';
import './FiresMap.scss';
const { BaseLayer } = LayersControl; import './FiresMap.scss';
const MAXZOOM = 6; const MAXZOOM = 6;
const MAXZOOMREACTIVE = 6; const MAXZOOMREACTIVE = 6;
@ -42,8 +40,7 @@ class FiresMap extends React.Component {
this.state = { this.state = {
viewport: this.props.viewport, viewport: this.props.viewport,
useMarkers: false, useMarkers: false,
showSubsUnion: true, showSubsUnion: true
gkey: null
}; };
const self = this; const self = this;
// viewportchange // viewportchange
@ -55,10 +52,6 @@ class FiresMap extends React.Component {
} }
componentDidMount() { componentDidMount() {
const self = this;
Gkeys.load((err, key) => {
self.setState({ gkey: key });
});
mapSize.set([this.divElement.clientHeight, this.divElement.clientWidth]); mapSize.set([this.divElement.clientHeight, this.divElement.clientWidth]);
if (this.fireMap) { if (this.fireMap) {
this.addScale(); this.addScale();
@ -111,8 +104,8 @@ class FiresMap extends React.Component {
} }
handleLeafletLoad(map) { handleLeafletLoad(map) {
console.log('Map loading'); // console.log('Map loading');
console.log(map); // console.log(map);
if (map) { if (map) {
this.state.union = subsUnion(this.state.union, { this.state.union = subsUnion(this.state.union, {
map, map,
@ -125,14 +118,7 @@ class FiresMap extends React.Component {
render() { render() {
console.log(`Rendering ${this.props.loading ? 'loading' : 'LOADED'} map ${this.props.activefires.length} of ${this.props.activefirestotal} total. Subs users ready ${this.props.subsready}, reactive ${this.state.viewport.zoom >= MAXZOOMREACTIVE}`); console.log(`Rendering ${this.props.loading ? 'loading' : 'LOADED'} map ${this.props.activefires.length} of ${this.props.activefirestotal} total. Subs users ready ${this.props.subsready}, reactive ${this.state.viewport.zoom >= MAXZOOMREACTIVE}`);
const { t } = this.props;
const osmlayer = (
<BaseLayer checked name={t('Mapa gris de OpenStreetMap')}>
<TileLayer
attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
url="http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png"
/>
</BaseLayer>);
return ( return (
/* Large number of markers: /* Large number of markers:
https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 */ https://stackoverflow.com/questions/43015854/large-dataset-of-markers-or-dots-in-leaflet/43019740#43019740 */
@ -187,7 +173,7 @@ class FiresMap extends React.Component {
viewport={this.state.viewport} viewport={this.state.viewport}
onViewportChanged={this.onViewportChanged} onViewportChanged={this.onViewportChanged}
sleep={window.location.pathname === '/'} sleep={window.location.pathname === '/'}
sleepTime={750} sleepTime={10750}
wakeTime={750} wakeTime={750}
sleepNote sleepNote
hoverToWake hoverToWake
@ -196,34 +182,21 @@ class FiresMap extends React.Component {
> >
{/* http://wiki.openstreetmap.org/wiki/Tile_servers */} {/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
{!this.props.loading && {!this.props.loading &&
<FireList <Fragment>
fires={this.props.activefires} <FireList
scale={this.state.viewport.zoom >= MAXZOOM} fires={this.props.activefires}
useMarkers={this.state.useMarkers} scale={this.state.viewport.zoom >= MAXZOOM}
nasa useMarkers={this.state.useMarkers}
/>} nasa
{!this.props.loading && />
<FireList <FireList
fires={this.props.firealerts} fires={this.props.firealerts}
scale={false} scale={false}
useMarkers={this.state.useMarkers} useMarkers={this.state.useMarkers}
nasa={false} nasa={false}
/>} />
<LayersControl position="topright"> </Fragment> }
{osmlayer} <DefMapLayers />
{ this.state.gkey &&
<BaseLayer name={t('Mapa de carreteras de Google')}>
<GoogleLayer googlekey={this.state.gkey} maptype="ROADMAP" />
</BaseLayer>}
{ this.state.gkey &&
<BaseLayer name={t('Mapa de terreno de Google')}>
<GoogleLayer googlekey={this.state.gkey} maptype="TERRAIN" />
</BaseLayer>}
{ this.state.gkey &&
<BaseLayer name={t('Mapa de satélite de Google')}>
<GoogleLayer googlekey={this.state.gkey} maptype="SATELLITE" />
</BaseLayer>}
</LayersControl>
</Map> </Map>
</Row> </Row>
<Row> <Row>
@ -273,7 +246,7 @@ export default translate([], { wait: true })(withTracker(() => {
// Warning with the performance of this log: // Warning with the performance of this log:
// console.log(`Active fires ${ActiveFiresCollection.find().count()} of ${Counter.get('countActiveFires')}`); // console.log(`Active fires ${ActiveFiresCollection.find().count()} of ${Counter.get('countActiveFires')}`);
// console.log(`Active neighborhood fires ${FireAlertsCollection.find().fetch().length} and users subscribed ${UserSubsToFiresCollection.find().fetch().length}`); // console.log(`Active neighborhood fires ${FireAlertsCollection.find().fetch().length} and users subscribed ${UserSubsToFiresCollection.find().fetch().length}`);
console.log(UserSubsToFiresCollection.find().fetch()); // console.log(UserSubsToFiresCollection.find().fetch());
return { return {
loading: !subscription.ready(), loading: !subscription.ready(),
userSubs: UserSubsToFiresCollection.find().fetch(), userSubs: UserSubsToFiresCollection.find().fetch(),

40
imports/ui/pages/NewSubscription/NewSubscription.js
View file

@ -1,17 +1,41 @@
import React from 'react'; /* eslint-disable react/jsx-indent-props */
import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Trans, translate } from 'react-i18next'; import { Trans, translate } from 'react-i18next';
import SubscriptionEditor from '../../components/SubscriptionEditor/SubscriptionEditor'; import SubscriptionEditor from '../../components/SubscriptionEditor/SubscriptionEditor';
const NewSubscription = ({ history }) => ( class NewSubscription extends Component {
<div className="NewSubscription"> constructor(props) {
<h4 className="page-header"><Trans>Nueva zona</Trans></h4> super(props);
<SubscriptionEditor history={history} /> const pushState = this.props.location.state;
</div> this.state = {
); center: pushState ? pushState.center : [null, null],
zoom: pushState ? pushState.zoom : null
};
}
render() {
const { history } = this.props;
return (
<div className="NewSubscription">
<h4 className="page-header"><Trans>Nueva zona</Trans></h4>
<SubscriptionEditor
history={history}
center={this.state.center}
zoom={this.state.zoom}
/>
</div>
);
}
}
NewSubscription.defaultProps = {
};
NewSubscription.propTypes = { NewSubscription.propTypes = {
history: PropTypes.object.isRequired history: PropTypes.object.isRequired,
location: PropTypes.object
}; };
export default translate([], { wait: true })(NewSubscription); export default translate([], { wait: true })(NewSubscription);

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

@ -28,8 +28,9 @@ class Subscriptions extends Component {
this.onSndBtn = this.onSndBtn.bind(this); this.onSndBtn = this.onSndBtn.bind(this);
} }
onFstBtn(value) { onFstBtn() {
// ${match.url}/new console.log(this.state);
this.props.history.push(`${this.props.match.url}/new`, { center: this.state.center, zoom: this.state.zoom });
} }
onSndBtn() { onSndBtn() {