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

Many improvements in SelectionMap

Browse source
This commit is contained in:
vjrj 2017-12-21 10:57:00 +01:00
parent 7a672bca87
commit e3eddd6b85
13 changed files with 173 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,6 @@
/* eslint-disable react/jsx-indent-props */
import React from 'react';
import PropTypes from 'prop-types';
import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import { Row, Col } from 'react-bootstrap';
import { translate } from 'react-i18next';
@ -10,7 +9,6 @@ import DistanceSlider from '/imports/ui/components/DistanceSlider/DistanceSlider
import SelectionMap, { action } from '/imports/ui/components/SelectionMap/SelectionMap';
import Gkeys from '/imports/startup/client/Gkeys';
import CenterInMyPosition from '/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js';
import UserSubsToFiresCollection from '/imports/api/Subscriptions/Subscriptions';
import SubsAutocomplete from './SubsAutocomplete';
class FireSubscription extends React.Component {
@ -96,8 +94,6 @@ class FireSubscription extends React.Component {
onFstBtn={state => this.onSubs(state)}
onSelection={state => this.onSelection(state)}
action={action.add}
loadingSubs={this.props.loading}
currentSubs={this.props.subscriptions}
/>
</Row>
</div>
@ -106,9 +102,6 @@ class FireSubscription extends React.Component {
}
FireSubscription.propTypes = {
t: PropTypes.func.isRequired,
loading: PropTypes.bool.isRequired,
subscriptions: PropTypes.arrayOf(PropTypes.object).isRequired,
center: PropTypes.arrayOf(PropTypes.number),
zoom: PropTypes.number,
distance: PropTypes.number,
@ -117,11 +110,4 @@ FireSubscription.propTypes = {
onSubs: PropTypes.func.isRequired
};
export default translate([], { wait: true })(withTracker(() => {
const subscription = Meteor.subscribe('mysubscriptions');
// console.log(UserSubsToFiresCollection.find().fetch());
return {
loading: !subscription.ready(),
subscriptions: UserSubsToFiresCollection.find({ owner: Meteor.userId() }).fetch()
};
})(FireSubscription));
export default translate([], { wait: true })(FireSubscription);

5
imports/ui/pages/Index/Index.js
View file

@ -219,7 +219,10 @@ class Index extends Component {
<Section className="">
<div className="container">
<h4 className="page-header"><Trans parent="span">Suscríbete a alertas de fuegos</Trans></h4>
<SubscriptionEditor history={this.props.history} focusInput={false} />
<SubscriptionEditor
focusInput={false}
history={this.props.history}
/>
</div>
<div className="overlay" />
</Section>

2
imports/ui/pages/Login/Login.js
View file

@ -16,7 +16,7 @@ class Login extends React.Component {
super(props);
this.t = props.t;
this.handleSubmit = this.handleSubmit.bind(this);
console.log(this.props.location.state);
// console.log(this.props.location.state);
}
componentDidMount() {

56
imports/ui/pages/Signup/Signup.js
View file

@ -17,8 +17,10 @@ import { T9n } from 'meteor-accounts-t9n';
class Signup extends React.Component {
constructor(props) {
super(props);
this.t = this.props.t;
this.t = props.t;
this.handleSubmit = this.handleSubmit.bind(this);
// console.log(props.location.state);
this.state = props.location.state;
}
componentDidMount() {
@ -27,37 +29,37 @@ class Signup extends React.Component {
validate(component.form, {
rules: {
firstName: {
required: true,
required: true
},
lastName: {
required: true,
required: true
},
emailAddress: {
required: true,
email: true,
email: true
},
password: {
required: true,
minlength: 6,
},
minlength: 6
}
},
messages: {
firstName: {
required: this.t("¿Cuál es tu nombre?"),
required: this.t('¿Cuál es tu nombre?')
},
lastName: {
required: this.t("¿Cuál es tu apellido?"),
required: this.t('¿Cuál es tu apellido?')
},
emailAddress: {
required: this.t("Necesitamos una contraseña aquí."),
email: this.t("¿Es correcto este correo?"),
required: this.t('Necesitamos una contraseña aquí.'),
email: this.t('¿Es correcto este correo?')
},
password: {
required: this.t("Necesitamos una contraseña aquí."),
minlength: this.t("Usa al menos seis caracteres."),
},
required: this.t('Necesitamos una contraseña aquí.'),
minlength: this.t('Usa al menos seis caracteres.')
}
},
submitHandler() { component.handleSubmit(); },
submitHandler() { component.handleSubmit(); }
});
}
@ -70,16 +72,16 @@ class Signup extends React.Component {
profile: {
name: {
first: this.firstName.value,
last: this.lastName.value,
},
},
last: this.lastName.value
}
}
}, (error) => {
if (error) {
Bert.alert(T9n.get(`error.accounts.${error.reason}`), 'danger');
} else {
Meteor.call('users.sendVerificationEmail');
Bert.alert('Welcome!', 'success');
history.push('/documents');
history.push('/subscriptions');
}
});
}
@ -88,7 +90,7 @@ class Signup extends React.Component {
return (<div className="Signup">
<Row className="align-items-center justify-content-center">
<Col xs={12} sm={6} md={5} lg={4}>
<h4 className="page-header">{this.t("Registrarse")}</h4>
<h4 className="page-header">{this.t('Registrarse')}</h4>
<Row>
{/* <Col xs={12}>
<button
@ -102,7 +104,7 @@ class Signup extends React.Component {
services={['telegram', 'google']}
emailMessage={{
offset: 97,
text: this.t('o regístrate con un correo'),
text: this.t('o regístrate con un correo')
}}
/>
</Col>
@ -111,7 +113,7 @@ class Signup extends React.Component {
<Row>
<Col xs={6}>
<FormGroup>
<ControlLabel>{this.t("Nombre")}</ControlLabel>
<ControlLabel>{this.t('Nombre')}</ControlLabel>
<input
type="text"
name="firstName"
@ -122,7 +124,7 @@ class Signup extends React.Component {
</Col>
<Col xs={6}>
<FormGroup>
<ControlLabel>{this.t("Apellidos")}</ControlLabel>
<ControlLabel>{this.t('Apellidos')}</ControlLabel>
<input
type="text"
name="lastName"
@ -133,7 +135,7 @@ class Signup extends React.Component {
</Col>
</Row>
<FormGroup>
<ControlLabel>{this.t("Correo electrónico")}</ControlLabel>
<ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
<input
type="email"
name="emailAddress"
@ -142,18 +144,18 @@ class Signup extends React.Component {
/>
</FormGroup>
<FormGroup>
<ControlLabel>{this.t("Contraseña")}</ControlLabel>
<ControlLabel>{this.t('Contraseña')}</ControlLabel>
<input
type="password"
name="password"
ref={password => (this.password = password)}
className="form-control"
/>
<InputHint>{this.t("Usa al menos seis caracteres.")}</InputHint>
<InputHint>{this.t('Usa al menos seis caracteres.')}</InputHint>
</FormGroup>
<Button type="submit" bsStyle="success">{this.t("Registrarse")}</Button>
<Button type="submit" bsStyle="success">{this.t('Registrarse')}</Button>
<AccountPageFooter>
<p>{this.t("¿Ya tienes un cuenta?")} <Link to="/login">{this.t("Iniciar sesión")}</Link>.</p>
<p>{this.t('¿Ya tienes un cuenta?')} <Link to={{ pathname: '/login', state: this.state }} >{this.t('Iniciar sesión')}</Link>.</p>
</AccountPageFooter>
</form>
</Col>

24
imports/ui/pages/Subscriptions/Subscriptions.js
View file

@ -29,7 +29,11 @@ class Subscriptions extends Component {
onFstBtn() {
// console.log(this.state);
this.props.history.push(`${this.props.match.url}/new`, { center: this.state.center, zoom: this.state.zoom });
if (this.state.action === action.view) {
this.props.history.push(`${this.props.match.url}/new`, { center: this.state.center, zoom: this.state.zoom });
} else if (this.state.action === action.edit) {
this.setState({ action: action.view });
}
}
onSndBtn() {
@ -42,15 +46,19 @@ class Subscriptions extends Component {
}
handleRemove(subscriptionId) {
const { t } = this.props;
const { t, subscriptions } = this.props;
confirm(t('Dejarás de recibir notificaciones de fuegos en esa área ¿Estás seguro/a? '), { okBtn: t('Sí'), cancelBtn: t('No') }).then(
() => {
// `proceed` callback
const num = subscriptions.length;
Meteor.call('subscriptions.remove', subscriptionId, (error) => {
if (error) {
Bert.alert(error.reason, 'danger');
} else {
Bert.alert('Subscription deleted!', 'success');
if (num === 1) { // it was 1, now deleted
this.setState({ action: action.view });
}
}
});
},
@ -66,23 +74,25 @@ class Subscriptions extends Component {
t,
subscriptions
} = this.props;
const firstBtnTitle = ['Añadir zona', '', 'Terminar']; // view, add, edit
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>
<h4 className="pull-left"><Trans>Suscripciones a alertas de fuegos en zonas de mi interés</Trans></h4>
</div>
<br />
{ subscriptions.length === 0 &&
<Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert>
{ subscriptions.length === 0 ?
<Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert> :
<Alert bsStyle="success"><Trans>En verde, áreas de las que recibirás alertas de fuegos</Trans></Alert>
}
<br />
<SelectionMap
center={[null, null]}
zoom={11}
action={this.state.action}
fstBtn={t('Añadir zona')}
fstBtn={t(firstBtnTitle[this.state.action])}
onFstBtn={state => this.onFstBtn(state)}
sndBtn={this.props.subscriptions.length >= 1 ? t('Editar') : null}
sndBtn={this.state.action === action.view && this.props.subscriptions.length >= 1 ? t('Editar') : null}
onSndBtn={() => this.onSndBtn()}
onViewportChanged={viewport => this.onViewportChanged(viewport)}
loadingSubs={this.props.loading}