Added Layers to SelectionMap. Fixes in index and more

2017-12-20 00:23:47 +01:00 · 2017-12-20 00:23:47 +01:00 · 62c0ba4f01
commit 62c0ba4f01
parent 8fbb6716fc
7 changed files with 112 additions and 80 deletions
--- a/imports/ui/pages/FireSubscription/FireSubscription.js
+++ b/imports/ui/pages/FireSubscription/FireSubscription.js
@ -2,12 +2,15 @@
 /* eslint-disable react/jsx-indent-props */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Meteor } from 'meteor/meteor';
+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 Gkeys from '/imports/startup/client/Gkeys';
 import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
+import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
 import SubsAutocomplete from './SubsAutocomplete';

 class FireSubscription extends React.Component {
@ -16,6 +19,7 @@ class FireSubscription extends React.Component {
    this.state = {
      init: false,
      center: this.props.center,
+      zoom: this.props.zoom,
      distance: this.props.distance
    };
    // console.log(this.props.location.state);
@ -61,7 +65,7 @@ class FireSubscription extends React.Component {
  render() {
    // https://developers.google.com/places/web-service/search
    // 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) {
      return <div />;
    }
@ -86,12 +90,15 @@ class FireSubscription extends React.Component {
        <Row className="align-items-center justify-content-center">
          <SelectionMap
              center={this.state.center}
+              zoom={this.state.zoom}
              distance={this.state.distance}
              fstBtn={this.props.subsBtn}
              onFstBtn={state => this.onSubs(state)}
              onSelection={state => this.onSelection(state)}
              readOnly={false}
              edit={false}
+              loadingSubs={this.props.loading}
+              currentSubs={this.props.subscriptions}
          />
        </Row>
      </div>
@ -101,11 +108,21 @@ class FireSubscription extends React.Component {

 FireSubscription.propTypes = {
  t: PropTypes.func.isRequired,
+  loading: PropTypes.bool.isRequired,
+  subscriptions: PropTypes.arrayOf(PropTypes.object).isRequired,
  center: PropTypes.arrayOf(PropTypes.number),
+  zoom: PropTypes.number,
  distance: PropTypes.number,
  focusInput: PropTypes.bool.isRequired,
  subsBtn: PropTypes.string.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));
--- a/imports/ui/pages/FiresMap/FiresMap.js
+++ b/imports/ui/pages/FiresMap/FiresMap.js
@ -2,14 +2,14 @@
 /* eslint-disable import/no-absolute-path */
 /* eslint-disable react/jsx-indent-props */
 /* eslint-disable react/jsx-indent */
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Row, Col, Checkbox } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { withTracker } from 'meteor/react-meteor-data';
 import { Trans, translate } from 'react-i18next';
-import { Map, TileLayer, LayersControl } from 'react-leaflet';
+import { Map } from 'react-leaflet';
 import _ from 'lodash';
 import 'leaflet/dist/leaflet.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 FireList from '/imports/ui/components/Maps/FireList';
 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 ActiveFiresCollection from '/imports/api/ActiveFires/ActiveFires';
 import FireAlertsCollection from '/imports/api/FireAlerts/FireAlerts';
 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 MAXZOOMREACTIVE = 6;
@ -42,8 +40,7 @@ class FiresMap extends React.Component {
    this.state = {
      viewport: this.props.viewport,
      useMarkers: false,
-      showSubsUnion: true,
-      gkey: null
+      showSubsUnion: true
    };
    const self = this;
    // viewportchange
@ -55,10 +52,6 @@ class FiresMap extends React.Component {
  }

  componentDidMount() {
-    const self = this;
-    Gkeys.load((err, key) => {
-      self.setState({ gkey: key });
-    });
    mapSize.set([this.divElement.clientHeight, this.divElement.clientWidth]);
    if (this.fireMap) {
      this.addScale();
@ -111,8 +104,8 @@ class FiresMap extends React.Component {
  }

  handleLeafletLoad(map) {
-    console.log('Map loading');
-    console.log(map);
+    // console.log('Map loading');
+    // console.log(map);
    if (map) {
      this.state.union = subsUnion(this.state.union, {
        map,
@ -125,14 +118,7 @@ class FiresMap extends React.Component {

  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}`);
-    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 (
      /* Large number of markers:
         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}
               onViewportChanged={this.onViewportChanged}
               sleep={window.location.pathname === '/'}
-               sleepTime={750}
+               sleepTime={10750}
               wakeTime={750}
               sleepNote
               hoverToWake
@ -196,34 +182,21 @@ class FiresMap extends React.Component {
           >
             {/* http://wiki.openstreetmap.org/wiki/Tile_servers */}
             {!this.props.loading &&
-             <FireList
-                 fires={this.props.activefires}
-                 scale={this.state.viewport.zoom >= MAXZOOM}
-                 useMarkers={this.state.useMarkers}
-                 nasa
-             />}
-             {!this.props.loading &&
-             <FireList
-                 fires={this.props.firealerts}
-                 scale={false}
-                 useMarkers={this.state.useMarkers}
-                 nasa={false}
-             />}
-             <LayersControl position="topright">
-               {osmlayer}
-               { 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>
+              <Fragment>
+                <FireList
+                    fires={this.props.activefires}
+                    scale={this.state.viewport.zoom >= MAXZOOM}
+                    useMarkers={this.state.useMarkers}
+                    nasa
+                />
+                <FireList
+                    fires={this.props.firealerts}
+                    scale={false}
+                    useMarkers={this.state.useMarkers}
+                    nasa={false}
+                />
+              </Fragment> }
+             <DefMapLayers />
           </Map>
         </Row>
         <Row>
@ -273,7 +246,7 @@ export default translate([], { wait: true })(withTracker(() => {
  // Warning with the performance of this log:
  // 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(UserSubsToFiresCollection.find().fetch());
+  // console.log(UserSubsToFiresCollection.find().fetch());
  return {
    loading: !subscription.ready(),
    userSubs: UserSubsToFiresCollection.find().fetch(),
--- a/imports/ui/pages/NewSubscription/NewSubscription.js
+++ b/imports/ui/pages/NewSubscription/NewSubscription.js
@ -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 { Trans, translate } from 'react-i18next';
 import SubscriptionEditor from '../../components/SubscriptionEditor/SubscriptionEditor';

-const NewSubscription = ({ history }) => (
-  <div className="NewSubscription">
-    <h4 className="page-header"><Trans>Nueva zona</Trans></h4>
-    <SubscriptionEditor history={history} />
-  </div>
-);
+class NewSubscription extends Component {
+  constructor(props) {
+    super(props);
+    const pushState = this.props.location.state;
+    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 = {
-  history: PropTypes.object.isRequired
+  history: PropTypes.object.isRequired,
+  location: PropTypes.object
 };

 export default translate([], { wait: true })(NewSubscription);
--- a/imports/ui/pages/Subscriptions/Subscriptions.js
+++ b/imports/ui/pages/Subscriptions/Subscriptions.js
@ -28,8 +28,9 @@ class Subscriptions extends Component {
    this.onSndBtn = this.onSndBtn.bind(this);
  }

-  onFstBtn(value) {
-    // ${match.url}/new
+  onFstBtn() {
+    console.log(this.state);
+    this.props.history.push(`${this.props.match.url}/new`, { center: this.state.center, zoom: this.state.zoom });
  }

  onSndBtn() {