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

Gkey improved. New pages. Home improved based in startbootstrap

Browse source
This commit is contained in:
vjrj 2017-12-10 03:32:12 +01:00
parent 6497278755
commit b6b8f893e3
19 changed files with 782 additions and 269 deletions
Download patch file Download diff file Expand all files Collapse all files

15
imports/ui/components/AuthenticatedNavigation/AuthenticatedNavigation.js
View file

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';
import { Nav, NavDropdown } from 'react-bootstrap';
/* import { Nav, NavDropdown } from 'react-bootstrap'; */
import { translate, Trans } from 'react-i18next';
/*
FIXME:
@ -13,26 +13,25 @@ import { translate, Trans } from 'react-i18next';
*/
import NavItem from '../NavItem/NavItem';
import { Meteor } from 'meteor/meteor';
const AuthenticatedNavigation = ({ name, history, props }) => (
<ul className="navbar-nav ml-auto ">
<ul className="navbar-nav">
{/* <Nav pullRight> */}
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/documents">
<NavItem eventKey={3} href="/documents">Documents</NavItem>
<NavItem eventKey={5} href="/documents">Documents</NavItem>
</LinkContainer>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/profile">
<NavItem eventKey={3.1} href="/profile">{name}</NavItem>
<NavItem eventKey={5.1} href="/profile">{name}</NavItem>
</LinkContainer>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/logout">
<NavItem eventKey={3.2} onClick={() => history.push('/logout')} href="/logout"><Trans i18nKey="Cerrar sesión">Cerrar sesión</Trans></NavItem>
<NavItem eventKey={5.2} onClick={() => history.push('/logout')} href="/logout"><Trans i18nKey="Cerrar sesión">Cerrar sesión</Trans></NavItem>
</LinkContainer>
{/* </Nav> */}
{/* </Nav> */}
</ul>
);
AuthenticatedNavigation.propTypes = {
name: PropTypes.string.isRequired,
};
export default translate([], { wait: true })(withRouter(AuthenticatedNavigation));

34
imports/ui/components/DistanceSlider/DistanceSlider.js
View file

@ -1,11 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Trans, translate } from 'react-i18next';
import Slider, { Range } from 'rc-slider';
import Tooltip from 'rc-tooltip';
// We can just import Slider or Range to reduce bundle size
// import Slider from 'rc-slider/lib/Slider';
// import Range from 'rc-slider/lib/Range';
import Slider from 'rc-slider';
import 'rc-slider/assets/index.css';
// https://www.npmjs.com/package/rc-slider
@ -15,13 +12,7 @@ const Handle = Slider.Handle;
const handle = (props) => {
const { value, dragging, index, ...restProps } = props;
return (
<Tooltip
prefixCls="rc-slider-tooltip"
overlay={value}
visible={dragging}
placement="top"
key={index}
>
<Tooltip prefixCls="rc-slider-tooltip" overlay={value} visible={dragging} placement="top" key={index} >
<Handle value={value} {...restProps} />
</Tooltip>
);
@ -35,26 +26,27 @@ class DistanceSlider extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 10,
value: 10
};
this.onSliderChange = this.onSliderChange.bind(this);
this.onAfterChange = this.onAfterChange.bind(this);
}
onSliderChange = (value) => {
onSliderChange(value) {
// console.log(value);
this.setState({
value,
value
});
this.props.onChange(value);
}
onAfterChange = (value) => {
onAfterChange(value) {
// console.log(`After change: ${value}`); //eslint-disable-line
this.props.onChange(value);
}
render() {
return (
<div style={wrapperStyle}>
<p><Trans parent="span">¿A que distancia a la redonda quieres recibir notificaciones?</Trans></p>
<Slider min={5}
@ -89,8 +81,16 @@ class DistanceSlider extends React.Component {
step={5}
handle={handle} />
</div>
)
);
}
}
DistanceSlider.defaultProps = {
onChange: null
};
DistanceSlider.propTypes = {
onChange: PropTypes.func
};
export default translate([], { wait: true })(DistanceSlider);

19
imports/ui/components/Navigation/Navigation.js
View file

@ -2,9 +2,11 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { LinkContainer } from 'react-router-bootstrap';
import { translate } from 'react-i18next';
import PublicNavigation from '../PublicNavigation/PublicNavigation';
import AuthenticatedNavigation from '../AuthenticatedNavigation/AuthenticatedNavigation';
import { translate } from 'react-i18next';
import NavItem from '../NavItem/NavItem';
import './Navigation.scss';
@ -27,6 +29,17 @@ const Navigation = props => (
</button>
{/* <Navbar.Collapse> */}
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav ml-auto ">
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
<NavItem eventKey={1.1} href="/sandbox">Sandbox</NavItem>
</LinkContainer>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/subscriptions">
<NavItem eventKey={1.2} href="/subscriptions">Mis alertas</NavItem>
</LinkContainer>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
<NavItem eventKey={2} href="/fires">{props.t('activeFires')}</NavItem>
</LinkContainer>
</ul>
{!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}
{/* </Navbar.Collapse> */}
</div>
@ -35,13 +48,11 @@ const Navigation = props => (
);
Navigation.defaultProps = {
name: '',
name: ''
};
Navigation.propTypes = {
authenticated: PropTypes.bool.isRequired
};
// export default Navigation;
export default translate([], { wait: true })(Navigation);

25
imports/ui/components/PublicNavigation/PublicNavigation.js
View file

@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { LinkContainer } from 'react-router-bootstrap';
import { Nav } from 'react-bootstrap';
/* import { Nav } from 'react-bootstrap'; */
import { translate } from 'react-i18next';
/*
FIXME:
@ -11,23 +12,21 @@ import { translate } from 'react-i18next';
*/
import NavItem from '../NavItem/NavItem';
const PublicNavigation = (props) => (
<ul className="navbar-nav ml-auto ">
{/* <Nav pullRight> */}
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/sandbox">
<NavItem href="/sandbox">Sandbox</NavItem>
</LinkContainer>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/fires">
<NavItem href="/fires">{props.t('activeFires')}</NavItem>
</LinkContainer>
const PublicNavigation = props => (
<ul className="navbar-nav">
{/* <Nav pullRight> */}
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/signup">
<NavItem eventKey={1} href="/signup">{props.t('Registrarse')}</NavItem>
<NavItem eventKey={3} href="/signup">{props.t('Registrarse')}</NavItem>
</LinkContainer>
<LinkContainer className="nav-item" anchorClassName="nav-link" to="/login">
<NavItem eventKey={2} href="/login">{props.t('Iniciar sesión')}</NavItem>
<NavItem eventKey={4} href="/login">{props.t('Iniciar sesión')}</NavItem>
</LinkContainer>
{/* </Nav> */}
{/* </Nav> */}
</ul>
);
PublicNavigation.propTypes = {
t: PropTypes.func.isRequired
};
export default translate([], { wait: true })(PublicNavigation);

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

@ -1,26 +1,23 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Map, TileLayer, Marker, Popup, CircleMarker, Circle} from 'react-leaflet';
import { Map, TileLayer, Marker, CircleMarker, Circle } from 'react-leaflet';
import Leaflet from 'leaflet';
import { withTracker } from 'meteor/react-meteor-data';
import { translate, Trans } from 'react-i18next';
import { translate } from 'react-i18next';
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, 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",
iconUrl: '/your-position.png',
/* shadowUrl: require('../public/marker-shadow.png'), */
iconSize: [50, 77], // size of the icon
iconSize: [50, 77], // size of the icon
/* shadowSize: [50, 64], // size of the shadow */
iconAnchor: [25, 82] // point of the icon which will correspond to marker's location
iconAnchor: [25, 82] // point of the icon which will correspond to marker's location
/* shadowAnchor: [4, 62], // the same for the shadow
* popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor*/
* popupAnchor: [-3, -76]// point from which the popup should open relative to the iconAnchor */
});
class SelectionMap extends Component {
@ -33,25 +30,35 @@ class SelectionMap extends Component {
draggable: true,
modified: false
};
// console.log(this.state);
this.getMap = this.getMap.bind(this);
this.toggleDraggable = this.toggleDraggable.bind(this);
this.updatePosition = this.updatePosition.bind(this);
this.fit = this.fit.bind(this);
this.addScale = this.addScale.bind(this);
this.doSubs = this.doSubs.bind(this);
}
componentDidUpdate = () => {
componentDidMount() {
this.addScale();
}
componentDidUpdate() {
this.fit();
}
getMap = () => {
return this.refs.selectionMap.leafletElement;
getMap() {
return this.selectionMap.leafletElement;
}
toggleDraggable = () => {
toggleDraggable() {
this.setState({ draggable: !this.state.draggable });
}
updatePosition = () => {
const { lat, lng } = this.refs.marker.leafletElement.getLatLng();
updatePosition() {
const { lat, lng } = this.marker.leafletElement.getLatLng();
this.setState({
marker: [ lat, lng ],
marker: [lat, lng],
modified: true
});
this.fit();
@ -59,14 +66,10 @@ class SelectionMap extends Component {
fit() {
// console.log("fit!");
this.getMap().fitBounds(this.refs.distanceCircle.leafletElement.getBounds(), [70, 70]);
this.getMap().fitBounds(this.distanceCircle.leafletElement.getBounds(), [70, 70]);
}
componentDidMount() {
this.addScale();
}
addScale = () => {
addScale() {
// https://www.npmjs.com/package/leaflet-graphicscale
const map = this.getMap();
var options = {
@ -76,12 +79,11 @@ class SelectionMap extends Component {
var graphicScale = L.control.graphicScale([options]).addTo(map);
}
doSubs = (event) => {
console.log(event);
}
centerOnUserLocation = (event) => {
console.log(event);
doSubs() { // event param not used
this.props.history.push(
'/login',
{ subscription: { center: this.state.center, distance: this.state.distance } }
);
}
render() {
@ -94,7 +96,8 @@ class SelectionMap extends Component {
return (
<div>
{ this.state && this.state.center &&
<Map center={this.state.center} zoom={this.state.zoom} ref="selectionMap">
<Map center={this.state.center} zoom={this.state.zoom}
ref={(map) => { this.selectionMap = map; }}>
<TileLayer
attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
@ -105,7 +108,7 @@ class SelectionMap extends Component {
position={this.state.marker}
icon={positionIcon}
title={this.props.t("Arrastrar para seleccionar otro punto")}
ref="marker">
ref={(ref) => { this.marker = ref; }}>
</Marker>
<CircleMarker
center={this.state.marker} color="red"
@ -114,12 +117,11 @@ class SelectionMap extends Component {
fill={true}
radius={3} />
<Circle center={this.state.marker}
ref="distanceCircle"
ref={(ref) => { this.distanceCircle = ref; }}
color="#145A32"
fillColor="green"
fillOpacity={.1}
radius={this.state.distance * 1000} />
<Control position="topright" >
<ButtonToolbar>
<Button bsStyle="success" onClick={(event) => this.doSubs(event)}>
@ -134,6 +136,7 @@ class SelectionMap extends Component {
}
SelectionMap.propTypes = {
history: PropTypes.object.isRequired,
lat: PropTypes.number,
lng: PropTypes.number,
distance: PropTypes.number