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/components/AuthenticatedNavigation/AuthenticatedNavigation.js
+++ b/imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js
@ -16,12 +16,12 @@ import NavItem from '../NavItem/NavItem';
 const AuthenticatedNavigation = ({ name, history, props }) => (
  <ul className="navbar-nav">
    {/* <Nav pullRight> */}
-    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents">
-      <NavItem eventKey={5} href="/documents">Documents</NavItem>
-    </LinkContainer>
-    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents">
-      <NavItem eventKey={5.01} href="/subscriptions">Subscriptions</NavItem>
-    </LinkContainer>
+    {/* <LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents">
+    <NavItem eventKey={5} href="/documents">Documents</NavItem>
+    </LinkContainer> */}
+    {/* <LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
+    <NavItem eventKey={5} href="/subscriptions"><Trans>Mis alertas</Trans></NavItem>
+    </LinkContainer> */}
    <LinkContainer className="nav-item" anchorClassName="nav-link" to="/profile">
      <NavItem eventKey={5.1} href="/profile">{name}</NavItem>
    </LinkContainer>
@ -34,7 +34,6 @@ const AuthenticatedNavigation = ({ name, history, props }) => (

 AuthenticatedNavigation.propTypes = {
  name: PropTypes.string.isRequired
-
 };

 export default translate([], { wait: true })(withRouter(AuthenticatedNavigation));
--- a/imports/ui/components/Maps/SubsUnion/SubsUnion.js
+++ b/imports/ui/components/Maps/SubsUnion/SubsUnion.js
@ -0,0 +1,78 @@
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable import/no-absolute-path */
+/* eslint-disable import/no-absolute-path */
+/* global L */
+
+import { Map } from 'react-leaflet';
+import LGeo from 'leaflet-geodesy';
+import tunion from '@turf/union';
+import { check, Match } from 'meteor/check';
+
+// https://stackoverflow.com/questions/35394577/leaflet-js-union-merge-circles
+
+function unify(polyList) {
+  let unionTemp;
+  for (let i = 0; i < polyList.length; i += 1) {
+    if (i === 0) {
+      unionTemp = polyList[i].toGeoJSON();
+    } else {
+      unionTemp = tunion(unionTemp, polyList[i].toGeoJSON());
+    }
+  }
+  return unionTemp;
+}
+
+const subsUnion = (union, options) => {
+  // check(union, Match.Optional(Object));
+  check(options, {
+    map: Map,
+    show: Boolean,
+    subs: [Object],
+    color: Match.Optional(String),
+    fillcolor: Match.Optional(String),
+    opacity: Match.Optional(Number),
+    fit: Boolean
+  });
+
+  const color = options.color || '#145A32';
+  const fillColor = options.fillColor || 'green';
+  const opacity = options.options || 0.1;
+
+  if (options.subs.length > 0) {
+    const lmap = options.map.leafletElement;
+    // http://leafletjs.com/reference-1.2.0.html#layergroup
+    // FeatureGroup has getBounds
+    const unionGroup = new L.FeatureGroup();
+
+    if (union) {
+      lmap.removeLayer(union);
+    }
+    union = null;
+
+    if (options.show) {
+      // http://leafletjs.com/reference-1.2.0.html#path
+      const copts = {
+        parts: 144
+      };
+      options.subs.forEach((sub) => {
+        const circle = LGeo.circle([sub.location.lat, sub.location.lon], sub.distance * 1000, copts);
+        circle.addTo(unionGroup);
+      });
+      const unionJson = unify(unionGroup.getLayers());
+      union = L.geoJson(unionJson);
+      union.setStyle({
+        color,
+        fillColor,
+        fillOpacity: opacity
+      });
+      union.addTo(lmap);
+      if (options.fit) {
+        options.map.leafletElement.fitBounds(unionGroup.getBounds());
+      }
+      return union;
+    }
+  }
+  return union;
+};
+
+export default subsUnion;
--- a/imports/ui/components/Maps/Utils.js
+++ b/imports/ui/components/Maps/Utils.js
@ -1,15 +0,0 @@
-/* global L */
-// https://stackoverflow.com/questions/35394577/leaflet-js-union-merge-circles
-import union from '@turf/union';
-
-export function unify(polyList) {
-  let unionTemp;
-  for (let i = 0; i < polyList.length; i += 1) {
-    if (i === 0) {
-      unionTemp = polyList[i].toGeoJSON();
-    } else {
-      unionTemp = union(unionTemp, polyList[i].toGeoJSON());
-    }
-  }
-  return L.geoJson(unionTemp);
-}
--- a/imports/ui/components/Navigation/Navigation.js
+++ b/imports/ui/components/Navigation/Navigation.js
@ -35,7 +35,7 @@ const Navigation = props => (
          </LinkContainer> */}
          <LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
            <NavItem eventKey={1.2} href="/subscriptions">
-              {props.authenticated ? <Trans>Mis alertas</Trans> : <Trans>Participar</Trans>}
+              {props.authenticated ? <Trans>Mis zonas</Trans> : <Trans>Participar</Trans>}
            </NavItem>
          </LinkContainer>
          <LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
--- a/imports/ui/components/SelectionMap/SelectionMap.js
+++ b/imports/ui/components/SelectionMap/SelectionMap.js
@ -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 => ({
--- a/imports/ui/components/SubscriptionEditor/SubscriptionEditor.js
+++ b/imports/ui/components/SubscriptionEditor/SubscriptionEditor.js
@ -26,9 +26,10 @@ class SubscriptionEditor extends React.Component {
      if (error) {
        Bert.alert(error.reason, 'danger');
      } else {
-        const confirmation = existingSubscription ? t('Suscripción actualizada') : t('Suscripción añadida');
+        const confirmation = existingSubscription ? t('Zona actualizada') : t('Zona añadida');
        Bert.alert(confirmation, 'success');
-        history.push(`/subscriptions/${subscriptionId}`);
+        // history.push(`/subscriptions/${subscriptionId}`);
+        history.push('/subscriptions');
      }
    });
  }
@ -36,11 +37,12 @@ class SubscriptionEditor extends React.Component {
  render() {
    const { doc, t } = this.props;
    const isEdit = doc && doc._id;
+    const focus = typeof this.props.focusInput !== 'undefined' ? this.props.focusInput : !isEdit;
    return (
      <FireSubscription
          center={[doc.location.lat, doc.location.lon]}
          distance={doc.distance}
-          focusInput={this.props.focusInput ? this.props.focusInput : !isEdit}
+          focusInput={focus}
          subsBtn={isEdit ? t('Actualizar') : t('Subscribirme a fuegos en este rádio')}
          onSubs={state => this.onSubs(state)}
      />