From 3dc8edb4a845ad2cef58044e779c064a85af13af Mon Sep 17 00:00:00 2001
From: vjrj <vjrj@ourproject.org>
Date: Wed, 6 Dec 2017 19:24:42 +0100
Subject: [PATCH] CenterInMyPosition and refactor

---
 client/main.html                              |   2 +-
 .../CenterInMyPosition/CenterInMyPosition.js  |  45 ++++++++++++++++++
 .../CenterInMyPosition.scss                   |   9 ++++
 .../components/SelectionMap/SelectionMap.js   |  18 +++++--
 .../components/SelectionMap/SelectionMap.scss |  15 ++++++
 .../FireSubscription/FireSubscription.js      |   4 +-
 .../FireSubscription/SubsAutocomplete.js      |  14 +++---
 imports/ui/pages/FiresMap/FiresMap.js         |  17 +++----
 imports/ui/pages/FiresMap/FiresMap.scss       |  10 ----
 public/{favicon.png => favicon.ico}           | Bin
 10 files changed, 102 insertions(+), 32 deletions(-)
 create mode 100644 imports/ui/components/CenterInMyPosition/CenterInMyPosition.js
 create mode 100644 imports/ui/components/CenterInMyPosition/CenterInMyPosition.scss
 create mode 100644 imports/ui/components/SelectionMap/SelectionMap.scss
 rename public/{favicon.png => favicon.ico} (100%)

diff --git a/client/main.html b/client/main.html
index ff63ee9..cb98f6e 100644
--- a/client/main.html
+++ b/client/main.html
@@ -17,7 +17,7 @@
   <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daemonite-material@4.0.0-beta/css/material.min.css">
        <script src="https://cdn.jsdelivr.net/npm/daemonite-material@4.0.0-beta/js/material.min.js"></script> -->
 
-  <link rel="shortcut icon" type="image/png" href="/favicon.png?v1" sizes="16x16 32x32 64x64">
+  <link rel="shortcut icon" type="image/png" href="/favicon.ico?v2" sizes="16x16 32x32 64x64">
   <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-precomposed.png">
 </head>
 
diff --git a/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js b/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js
new file mode 100644
index 0000000..6d2725b
--- /dev/null
+++ b/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import './CenterInMyPosition.scss';
+import { Button } from 'react-bootstrap';
+import { translate } from 'react-i18next';
+
+class CenterInMyPosition extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  onClick = (event) => {
+    console.log("Click?");
+    // this.props.onClick(event);
+    // https://atmospherejs.com/mdg/geolocation
+    // only with SSL:
+    // https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/getCurrentPosition
+
+    // https://stackoverflow.com/questions/31608579/somethings-wrong-with-my-meteor-geolocation-functions
+    var userGeoLocation = new ReactiveVar(null);
+    var self = this;
+    Tracker.autorun(function (computation) {
+      userGeoLocation.set(Geolocation.latLng());
+      if (userGeoLocation.get()) {
+        //stop the tracker if we got something
+        var viewport = {
+          center: [userGeoLocation.get().lat, userGeoLocation.get().lng],
+          zoom: 11
+        }
+        self.props.onClick(viewport);
+        // self.onViewportChanged(viewport);
+        computation.stop();
+      }
+    });
+  }
+
+  render() {
+    return (
+      <Button bsStyle="default" onClick={(event) => this.onClick(event)}>
+        <i className="location"/>{this.props.t("Centrar el mapa en tu ubicación")}
+      </Button>
+    )
+  }
+}
+
+export default translate([], { wait: true }) (CenterInMyPosition);
diff --git a/imports/ui/components/CenterInMyPosition/CenterInMyPosition.scss b/imports/ui/components/CenterInMyPosition/CenterInMyPosition.scss
new file mode 100644
index 0000000..f579e99
--- /dev/null
+++ b/imports/ui/components/CenterInMyPosition/CenterInMyPosition.scss
@@ -0,0 +1,9 @@
+i.location {
+  background: url(/my_location.svg) no-repeat top left;
+  background-size: contain;
+  cursor: pointer;
+  display: inline-block;
+  height: 30px;
+  width: 35px;
+  vertical-align: middle;
+}
diff --git a/imports/ui/components/SelectionMap/SelectionMap.js b/imports/ui/components/SelectionMap/SelectionMap.js
index 3fc17e7..b8cbcd5 100644
--- a/imports/ui/components/SelectionMap/SelectionMap.js
+++ b/imports/ui/components/SelectionMap/SelectionMap.js
@@ -8,8 +8,10 @@ import geolocation from '/imports/startup/client/geolocation';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
 import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
 import Control from 'react-leaflet-control';
-import { Button } from 'react-bootstrap';
+import { Button, ButtonToolbar } from 'react-bootstrap';
 import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider';
+import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
+import './SelectionMap.scss';
 
 const positionIcon = new Leaflet.Icon({
   iconUrl: "/your-position.png",
@@ -52,6 +54,7 @@ class SelectionMap extends Component {
       marker: [ lat, lng ],
       modified: true
     });
+    this.fit();
   }
 
   fit() {
@@ -77,6 +80,10 @@ class SelectionMap extends Component {
     console.log(event);
   }
 
+  centerOnUserLocation = (event) => {
+    console.log(event);
+  }
+
   render() {
     this.state.center = !this.state.modified && this.props.lat?
                         [this.props.lat, this.props.lng]: this.state.center;
@@ -112,10 +119,13 @@ class SelectionMap extends Component {
                 fillColor="green"
                 fillOpacity={.1}
                 radius={this.state.distance * 1000} />
+
         <Control position="topright" >
-          <Button bsStyle="success" onClick={this.doSubs}>
-            {this.props.t("Subscribirme a fuegos en este rádio")}
-          </Button>
+          <ButtonToolbar>
+            <Button bsStyle="success" onClick={(event) => this.doSubs(event)}>
+              {this.props.t("Subscribirme a fuegos en este rádio")}
+            </Button>
+          </ButtonToolbar>
          </Control>
         </Map> }
       </div>
diff --git a/imports/ui/components/SelectionMap/SelectionMap.scss b/imports/ui/components/SelectionMap/SelectionMap.scss
new file mode 100644
index 0000000..6e06496
--- /dev/null
+++ b/imports/ui/components/SelectionMap/SelectionMap.scss
@@ -0,0 +1,15 @@
+.leaflet-container {
+  height: 100%;
+  min-height: 60vh;
+  width: 100%;
+  min-width: 75vw;
+  display: flex;
+  margin: 30px auto;
+}
+
+@media only screen and (max-width: 400px) {
+  .leaflet-container {
+     height: 400px;
+     width: 85vw;
+  }
+}
diff --git a/imports/ui/pages/FireSubscription/FireSubscription.js b/imports/ui/pages/FireSubscription/FireSubscription.js
index 9520995..de37730 100644
--- a/imports/ui/pages/FireSubscription/FireSubscription.js
+++ b/imports/ui/pages/FireSubscription/FireSubscription.js
@@ -44,11 +44,11 @@ class FireSubscription extends React.Component {
             <Col xs={12} sm={12} md={6} lg={6} >
               <div>
                 <h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
-                <SubsAutocomplete onChange={this.onAutocompleteChange}/>
+                <SubsAutocomplete onChange={(value) => this.onAutocompleteChange(value)}/>
               </div>
             </Col>
             <Col xs={12} sm={12} md={6} lg={6} >
-              <DistanceSlider onChange={this.onSliderChange} />
+              <DistanceSlider onChange={(value) => this.onSliderChange(value)} />
             </Col>
           </Row>
           <Row className="align-items-center justify-content-center">
diff --git a/imports/ui/pages/FireSubscription/SubsAutocomplete.js b/imports/ui/pages/FireSubscription/SubsAutocomplete.js
index cb7e837..8548f03 100644
--- a/imports/ui/pages/FireSubscription/SubsAutocomplete.js
+++ b/imports/ui/pages/FireSubscription/SubsAutocomplete.js
@@ -7,11 +7,11 @@ class SubsAutocomplete extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      adddress: '',
+      address: '',
     }
-    this.onChange = (address) => { this.setState({ address }) }
   }
 
+  onChange = (address) => { this.setState({ address }) }
 
   handleSelect = (address) => {
     const self = this;
@@ -54,22 +54,22 @@ class SubsAutocomplete extends React.Component {
       </div>)
 
     return (
-      <form onSubmit={this.handleSelectEnd}>
+      <form>
         <FormGroup>
           <ControlLabel>
             <Trans parent="span">Indícanos la posición a vigilar (por ej. tu pueblo, una calle, etc):</Trans>
           </ControlLabel>
           <PlacesAutocomplete
               styles={myStyles}
+              autocompleteItem={AutocompleteItem}
               classNames={{
                 root: 'form-group',
                 input: 'form-control',
                 autocompleteContainer: 'autocomplete-container'}}
               googleLogo={false}
               highlightFirstSuggestion={true}
-              onSelect={this.handleSelect}
-              onEnterKeyDown={this.handleSelect}
-              autocompleteItem={AutocompleteItem}
+              onSelect={(address) => this.handleSelect(address)}
+              onEnterKeyDown={(address) => this.handleSelect(address)}
               options={{
                 // location: new google.maps.LatLng(-34, 151),
                 // radius: 2000,
@@ -79,7 +79,7 @@ class SubsAutocomplete extends React.Component {
               inputProps={
                 {
                   value: this.state.address,
-                  onChange: this.onChange,
+                  onChange: (address) => this.onChange(address),
                   placeholder: this.props.t("Escribe aquí un lugar "),
                   onBlur:() => { /* console.log('Blur event!'); */ },
                   onFocus:() => { /* console.log('Focused!'); */ },
diff --git a/imports/ui/pages/FiresMap/FiresMap.js b/imports/ui/pages/FiresMap/FiresMap.js
index 18962c2..ec4a35a 100644
--- a/imports/ui/pages/FiresMap/FiresMap.js
+++ b/imports/ui/pages/FiresMap/FiresMap.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import { Row, Col, Button, Checkbox } from 'react-bootstrap';
+import { Row, Col, Checkbox } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { Trans, translate } from 'react-i18next';
@@ -8,6 +8,7 @@ import { Circle, CircleMarker, Map, Marker, Popup, TileLayer, PropTypes as MapPr
 import ActiveFiresCollection from '../../../api/ActiveFires/ActiveFires';
 import FireAlertsCollection from '../../../api/FireAlerts/FireAlerts';
 import UserSubsToFiresCollection from '../../../api/Subscriptions/Subscriptions';
+import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
 import { withTracker } from 'meteor/react-meteor-data';
 import Loading from '../../components/Loading/Loading';
 import './FiresMap.scss';
@@ -92,6 +93,9 @@ FireMark.propTypes = {
   nasa:  PropTypes.bool.isRequired,
 }
 
+// Below this use only pixels
+const MAXZOOM = 7;
+
 const MyMarkersList = ({ markers }) => {
   const items = markers.map(({ key, ...props }) => (
     <MyPopupMarker key={key} {...props} />
@@ -107,7 +111,7 @@ const FireList = ({ fires, scale, useMarkers, nasa }) => {
    *   }
    * }*/
   const items = fires.map(({ _id, ...props }) => (
-    useMarkers? <MyPopupMarker key={_id} nasa={nasa} {...props} />:
+    useMarkers && !scale? <MyPopupMarker key={_id} nasa={nasa} {...props} />:
     (!nasa && !scale)? <FirePixel key={_id} nasa={nasa} {...props} />:<FireMark key={_id} nasa={nasa} {...props} />))
   return <div style={{ display: 'none' }}>{items}</div>
 }
@@ -267,13 +271,10 @@ class FiresMap extends React.Component {
              <Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.showSubsUnion(e.target.checked)}>
                <Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)
              </Checkbox>
-             <Checkbox inline={false} onClick={e => this.useMarkers(e.target.checked)}>
+             <Checkbox disabled={this.state.viewport.zoom < MAXZOOM} inline={false} onClick={e => this.useMarkers(e.target.checked)}>
                <Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
              </Checkbox>
-             <Button bsStyle="default" onClick={() => this.centerOnUserLocation()}>
-               <i className="location"/>
-               <Trans className="location" parent="span">Centrar el mapa en tu ubicación</Trans>
-             </Button>
+             <CenterInMyPosition onClick={(event) => this.centerOnUserLocation(event)} />
            </Col>
          </Row>
          <Row>
@@ -290,7 +291,7 @@ class FiresMap extends React.Component {
              />
              <FireList
                  fires={this.props.activefires}
-                 scale={this.state.viewport.zoom > 7}
+                 scale={this.state.viewport.zoom > MAXZOOM}
                  useMarkers={this.state.useMarkers}
                  nasa={true}
              />
diff --git a/imports/ui/pages/FiresMap/FiresMap.scss b/imports/ui/pages/FiresMap/FiresMap.scss
index 09c46fb..7957e12 100644
--- a/imports/ui/pages/FiresMap/FiresMap.scss
+++ b/imports/ui/pages/FiresMap/FiresMap.scss
@@ -29,16 +29,6 @@
   }
 }
 
-i.location {
-    background: url(/my_location.svg) no-repeat top left;
-    background-size: contain;
-    cursor: pointer;
-    display: inline-block;
-    height: 30px;
-    width: 35px;
-    vertical-align: middle;
-}
-
 .mark-checkbox {
   margin-left: 5px;
 }
diff --git a/public/favicon.png b/public/favicon.ico
similarity index 100%
rename from public/favicon.png
rename to public/favicon.ico