Improvement in Subs and FireMap Union

2017-12-19 20:02:14 +01:00 · 2017-12-19 20:02:14 +01:00 · 1742cd4913
commit 1742cd4913
parent 497724443f
19 changed files with 390 additions and 299 deletions
--- a/imports/ui/pages/FireSubscription/FireSubscription.js
+++ b/imports/ui/pages/FireSubscription/FireSubscription.js
@ -28,6 +28,16 @@ class FireSubscription extends React.Component {
    });
  }

+
+  shouldComponentUpdate(nextProps, nextState) {
+    if (this.state.init &&
+        nextState.center === this.state.center &&
+        nextState.distance === this.state.distance) {
+      return false;
+    }
+    return true;
+  }
+
  onAutocompleteChange(value) {
    this.setState({ center: [value.lat, value.lng] });
  }
@ -51,7 +61,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}`);
    if (!this.state.init) {
      return <div />;
    }
@ -77,9 +87,11 @@ class FireSubscription extends React.Component {
          <SelectionMap
              center={this.state.center}
              distance={this.state.distance}
-              subsBtn={this.props.subsBtn}
+              fstBtn={this.props.subsBtn}
+              onFstBtn={state => this.onSubs(state)}
              onSelection={state => this.onSelection(state)}
-              onSubs={state => this.onSubs(state)}
+              readOnly={false}
+              edit={false}
          />
        </Row>
      </div>
--- a/imports/ui/pages/FireSubscription/SubsAutocomplete.js
+++ b/imports/ui/pages/FireSubscription/SubsAutocomplete.js
@ -60,7 +60,7 @@ class SubsAutocomplete extends React.Component {
      <form>
        <FormGroup>
          <ControlLabel>
-            <Trans parent="span">Indícanos la posición a vigilar (por ej. tu pueblo, una calle, etc):</Trans>
+            <Trans parent="span">Indícanos la posición de la zona a vigilar (por ej. tu pueblo, una calle, etc):</Trans>
          </ControlLabel>
          <PlacesAutocomplete
              styles={myStyles}
@ -90,7 +90,7 @@ class SubsAutocomplete extends React.Component {
                  autoFocus: this.props.focusInput
                }}
          />
-          <HelpBlock><Trans parent="span">También puedes seleccionar el lugar en el mapa arrastrando el puntero naranja.</Trans></HelpBlock>
+          <HelpBlock><Trans parent="span">También puedes seleccionar la zona en el mapa arrastrando el puntero naranja.</Trans></HelpBlock>
        </FormGroup>
      </form>
    );
--- a/imports/ui/pages/FiresMap/FiresMap.js
+++ b/imports/ui/pages/FiresMap/FiresMap.js
@ -10,7 +10,6 @@ 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 LGeo from 'leaflet-geodesy';
 import _ from 'lodash';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
@ -19,7 +18,7 @@ import 'leaflet-sleep/Leaflet.Sleep.js';
 import geolocation from '/imports/startup/client/geolocation';
 import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition';
 import FireList from '/imports/ui/components/Maps/FireList';
-import { unify } from '/imports/ui/components/Maps/Utils';
+import subsUnion from '/imports/ui/components/Maps/SubsUnion/SubsUnion';
 import Loading from '/imports/ui/components/Loading/Loading';
 import ActiveFiresCollection from '/imports/api/ActiveFires/ActiveFires';
 import FireAlertsCollection from '/imports/api/FireAlerts/FireAlerts';
@ -61,68 +60,24 @@ class FiresMap extends React.Component {
      self.setState({ gkey: key });
    });
    mapSize.set([this.divElement.clientHeight, this.divElement.clientWidth]);
-    this.addScale();
+    if (this.fireMap) {
+      this.addScale();
+    }
  }

-  /* componentWillReceiveProps(nextProps) {
-   *   if (nextProps.loading) {
-   *     // console.log('Loading new fires');
-   *   }
-   *   // this.setState({ loading: nextProps.loading });
-   * }
-   */
-
-  /* shouldComponentUpdate(nextProps, nextState) {
-   *   if (nextProps.loading) {
-   *     return true; // false;
-   *   }
-   *   return true;
-   * }
-   */
-
  onViewportChanged(viewport) {
    this.debounceView(viewport);
  }

  onClickReset() {
-    // console.log("onclick");
-    // this.setState({ viewport: DEFAULT_VIEWPORT })
  }

  getMap() {
    return this.fireMap.leafletElement;
  }

-  setShowSubsUnion(show) {
-    this.showSubsUnion(show);
-  }
-
-  showSubsUnion(show) {
-    const map = this.getMap();
-    // http://leafletjs.com/reference-1.2.0.html#layergroup
-    const unionGroup = new L.LayerGroup();
-
-    if (this.union) {
-      map.removeLayer(this.union);
-    }
-
-    if (show) {
-      // http://leafletjs.com/reference-1.2.0.html#path
-      const copts = {
-        parts: 144
-      };
-      UserSubsToFiresCollection.find().forEach((subs) => {
-        const circle = LGeo.circle([subs.lat, subs.lon], subs.distance * 1000, copts);
-        circle.addTo(unionGroup);
-      });
-      this.union = unify(unionGroup.getLayers());
-      this.union.setStyle({
-        color: '#145A32',
-        fillColor: 'green',
-        fillOpacity: 0.1
-      });
-      this.union.addTo(map);
-    }
+  setShowSubsUnion(showSubsUnion) {
+    this.setState({ showSubsUnion });
  }

  handleViewportChange(viewport) {
@ -135,14 +90,10 @@ class FiresMap extends React.Component {
    zoom.set(viewport.zoom);
    center.set(viewport.center);
    this.setState({ viewport });
-    if (this.props.subsready && this.fireMap) {
-      this.showSubsUnion(this.state.showSubsUnion);
-    }
  }

  centerOnUserLocation(viewport) {
    this.setState({ viewport });
-    // this.handleViewportChange(viewport);
  }

  useMarkers(use) {
@ -150,22 +101,29 @@ class FiresMap extends React.Component {
  }

  addScale() {
-    if (this.fireMap) {
-      // https://www.npmjs.com/package/leaflet-graphicscale
-      const map = this.getMap();
-      const options = {
-        fill: 'fill',
-        showSubunits: true
-      };
-      L.control.graphicScale([options]).addTo(map);
+    // https://www.npmjs.com/package/leaflet-graphicscale
+    const map = this.getMap();
+    const options = {
+      fill: 'fill',
+      showSubunits: true
+    };
+    L.control.graphicScale([options]).addTo(map);
+  }
+
+  handleLeafletLoad(map) {
+    console.log('Map loading');
+    console.log(map);
+    if (map) {
+      this.state.union = subsUnion(this.state.union, {
+        map,
+        subs: this.props.userSubs,
+        show: this.state.showSubsUnion,
+        fit: false
+      });
    }
  }

  render() {
-    if (this.props.subsready && this.fireMap) {
-      // Show union of users
-      this.showSubsUnion(this.state.showSubsUnion);
-    }
    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 = (
@ -181,7 +139,7 @@ class FiresMap extends React.Component {
      <div
          ref={(divElement) => { this.divElement = divElement; }}
      >
-        {this.props.loading ?
+        {this.props.loading || !this.props.subsready ?
         <Row className="align-items-center justify-content-center">
           <Loading />
         </Row>
@ -217,9 +175,11 @@ class FiresMap extends React.Component {
         </Row>
         <Row>
           {/* https://github.com/CliffCloud/Leaflet.Sleep */}
-
           <Map
-               ref={(map) => { this.fireMap = map; }}
+               ref={(map) => {
+                   this.fireMap = map;
+                   this.handleLeafletLoad(map);
+                   }}
               animate
               minZoom={5}
               preferCanvas
@ -277,6 +237,7 @@ class FiresMap extends React.Component {
 FiresMap.propTypes = {
  loading: PropTypes.bool.isRequired,
  subsready: PropTypes.bool.isRequired,
+  userSubs: PropTypes.arrayOf(PropTypes.object).isRequired,
  activefires: PropTypes.arrayOf(PropTypes.object).isRequired,
  firealerts: PropTypes.arrayOf(PropTypes.object).isRequired,
  activefirestotal: PropTypes.number.isRequired,
@ -312,7 +273,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/FiresMap/FiresMap.scss
+++ b/imports/ui/pages/FiresMap/FiresMap.scss
@ -32,3 +32,7 @@
 .mark-checkbox {
  margin-left: 5px;
 }
+
+.leaflet-control-layers-toggle {
+  background-image: url(/images/layers.png);
+}
--- a/imports/ui/pages/NewSubscription/NewSubscription.js
+++ b/imports/ui/pages/NewSubscription/NewSubscription.js
@ -5,7 +5,7 @@ import SubscriptionEditor from '../../components/SubscriptionEditor/Subscription

 const NewSubscription = ({ history }) => (
  <div className="NewSubscription">
-    <h4 className="page-header"><Trans>Nueva suscripción</Trans></h4>
+    <h4 className="page-header"><Trans>Nueva zona</Trans></h4>
    <SubscriptionEditor history={history} />
  </div>
 );
--- a/imports/ui/pages/Subscriptions/Subscriptions.js
+++ b/imports/ui/pages/Subscriptions/Subscriptions.js
@ -2,99 +2,143 @@
 /* eslint-disable import/no-absolute-path */
 /* eslint-disable react/jsx-indent */

-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
-import { Table, Alert, Button, Row } from 'react-bootstrap';
-import { timeago, monthDayYearAtTime } from '@cleverbeagle/dates';
+import { Table, Alert, Button } from 'react-bootstrap';
+import { timeago } from '@cleverbeagle/dates';
 import { Meteor } from 'meteor/meteor';
 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 Loading from '../../components/Loading/Loading';
-
 import './Subscriptions.scss';

-const handleRemove = (subscriptionId) => {
-  if (confirm('Are you sure? This is permanent!')) {
-    Meteor.call('subscriptions.remove', subscriptionId, (error) => {
-      if (error) {
-        Bert.alert(error.reason, 'danger');
-      } else {
-        Bert.alert('Subscription deleted!', 'success');
-      }
-    });
+class Subscriptions extends Component {
+  constructor(props) {
+    super(props);
+    this.t = props.t;
+    this.state = {
+      edit: false
+    };
+    this.onViewportChanged = this.onViewportChanged.bind(this);
+    this.onFstBtn = this.onFstBtn.bind(this);
+    this.onSndBtn = this.onSndBtn.bind(this);
  }
-};

-const Subscriptions = ({
-  loading,
-  subscriptions,
-  match,
-  history
-}) => (!loading ? (
-  <div className="Subscriptions">
-    <div className="page-header clearfix">
-      <h4 className="pull-left"><Trans>Suscripciones a fuegos en áreas de mi interés</Trans></h4>
-      <Link className="btn btn-success pull-right" to={`${match.url}/new`}><Trans>Añadir suscripción</Trans></Link>
-    </div>
-    <br />
-    {subscriptions.length ?
-     <Table responsive>
-       <thead>
-         <tr>
-           <th>Location</th>
-           <th>Last Updated</th>
-           <th>Created</th>
-           <th />
-           <th />
-         </tr>
-       </thead>
-       <tbody>
-         {subscriptions.map(({
-            _id,
-            location,
-            createdAt,
-            updatedAt
-          }) => (
-            <tr key={_id}>
-              <td>{location.lat},{location.lon}</td>
-              <td>{timeago(updatedAt)}</td>
-              <td>{monthDayYearAtTime(createdAt)}</td>
-              <td>
-                <Button
-                    bsStyle="primary"
-                    onClick={() => history.push(`${match.url}/${_id}`)}
-                    block
-                >View
-                </Button>
-              </td>
-              <td>
-                <Button
-                    bsStyle="danger"
-                    onClick={() => handleRemove(_id)}
-                    block
-                >Delete
-                </Button>
-              </td>
-            </tr>
-          ))}
-       </tbody>
-     </Table> :
-     <Alert bsStyle="warning"><Trans>Todavía sin suscriptiones</Trans></Alert>
+  onFstBtn(value) {
+    // ${match.url}/new
+  }
+
+  onSndBtn() {
+    this.state.edit = true;
+  }
+
+  onViewportChanged(viewport) {
+    this.state.center = viewport.center;
+    this.state.zoom = viewport.zoom;
+  }
+
+  handleRemove(subscriptionId) {
+    if (confirm('Are you sure? This is permanent!')) {
+      Meteor.call('subscriptions.remove', subscriptionId, (error) => {
+        if (error) {
+          Bert.alert(error.reason, 'danger');
+        } else {
+          Bert.alert('Subscription deleted!', 'success');
+        }
+      });
    }
-  </div>
-) : <Loading />);
+  }
+
+  render() {
+    const {
+      loading,
+      t,
+      subscriptions,
+      match,
+      history
+    } = this.props;
+    return (!loading ? (
+      <div className="Subscriptions">
+        <div className="page-header clearfix">
+          <h4 className="pull-left"><Trans>Suscripciones a fuegos en zonas de mi interés</Trans></h4>
+          <Link className="btn btn-success pull-right" to={`${match.url}/new`}><Trans>Añadir zona</Trans></Link>
+        </div>
+        <br />
+        <SelectionMap
+            center={[null, null]}
+            zoom={11}
+            readOnly
+            edit={this.state.edit}
+            fstBtn={t('Añadir zona')}
+            onFstBtn={state => this.onFstBtn(state)}
+            sndBtn={this.props.subscriptions.length > 1 ? t('Editar') : null}
+            onSndBtn={() => this.onSndBtn()}
+            onViewportChanged={viewport => this.onViewportChanged(viewport)}
+            loadingSubs={this.props.loading}
+            currentSubs={this.props.subscriptions}
+        />
+        {subscriptions.length ?
+         <Table responsive>
+           <thead>
+             <tr>
+               <th><Trans>Lugar</Trans></th>
+               <th><Trans>Actualizado</Trans></th>
+               <th><Trans>Creado</Trans>
+               </th>
+               <th />
+               <th />
+             </tr>
+           </thead>
+           <tbody>
+             {subscriptions.map(({
+                _id,
+                location,
+                createdAt,
+                updatedAt
+              }) => (
+                <tr key={_id}>
+                  <td>{location.lat},{location.lon}</td>
+                  <td>{timeago(updatedAt)}</td>
+                  <td>{timeago(createdAt)}</td>
+                  <td>
+                    <Button
+                        bsStyle="primary"
+                        onClick={() => history.push(`${match.url}/${_id}`)}
+                        block
+                    >View
+                    </Button>
+                  </td>
+                  <td>
+                    <Button
+                        bsStyle="danger"
+                        onClick={() => this.handleRemove(_id)}
+                        block
+                    >Delete
+                    </Button>
+                  </td>
+                </tr>
+              ))}
+           </tbody>
+         </Table> :
+         <Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert>
+        }
+      </div>
+    ) : <Loading />);
+  }
+}

 Subscriptions.propTypes = {
  loading: PropTypes.bool.isRequired,
  subscriptions: PropTypes.arrayOf(PropTypes.object).isRequired,
  match: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
  history: PropTypes.object.isRequired
 };

-
 export default translate([], { wait: true })(withTracker(() => {
  const subscription = Meteor.subscribe('mysubscriptions');
  // console.log(UserSubsToFiresCollection.find().fetch());