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

CenterInMyPosition and refactor

Browse source
This commit is contained in:
vjrj 2017-12-06 19:24:42 +01:00
parent 93d9ca43f1
commit 3dc8edb4a8
10 changed files with 102 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/main.html
View file

@ -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>

45
imports/ui/components/CenterInMyPosition/CenterInMyPosition.js Normal file
View file

@ -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);

9
imports/ui/components/CenterInMyPosition/CenterInMyPosition.scss Normal file
View file

@ -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;
}

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

@ -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>

15
imports/ui/components/SelectionMap/SelectionMap.scss Normal file
View file

@ -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;
}
}

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

@ -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">

14
imports/ui/pages/FireSubscription/SubsAutocomplete.js
View file

@ -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!'); */ },

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

@ -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}
/>

10
imports/ui/pages/FiresMap/FiresMap.scss
View file

@ -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;
}

0
public/favicon.png → public/favicon.ico
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

Before After
Before After