Feedback button
This commit is contained in:
vjrj
parent
5c7380a199
commit
ba32c4fd0d
7 changed files with 238 additions and 3 deletions
25
imports/startup/server/feedback.js
Normal file
25
imports/startup/server/feedback.js
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
/* eslint-disable prefer-arrow-callback */
|
||||||
|
/* eslint-disable import/no-absolute-path */
|
||||||
|
|
||||||
|
import { Meteor } from 'meteor/meteor';
|
||||||
|
import i18n from 'i18next';
|
||||||
|
import { check } from 'meteor/check';
|
||||||
|
import sendEmail from '/imports/startup/server/email';
|
||||||
|
|
||||||
|
Meteor.methods({
|
||||||
|
'send-feedback': function sendFeedback(email, feedback) {
|
||||||
|
check(email, String);
|
||||||
|
check(feedback, String);
|
||||||
|
const appName = i18n.t('AppName');
|
||||||
|
sendEmail({
|
||||||
|
to: 'info@comunes.org',
|
||||||
|
from: `${appName} <noreply@comunes.org>`,
|
||||||
|
subject: `Feedback de ${email}!`,
|
||||||
|
sendAt: new Date(),
|
||||||
|
text: `Feedback de ${email}\n\n${feedback}`,
|
||||||
|
html: `<p>${feedback}</p>`,
|
||||||
|
template: '<body>{{appName}}<h2>{{{subject}}}</h2>{{{html}}}</body>',
|
||||||
|
appName
|
||||||
|
}, true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
@ -12,3 +12,4 @@ import '../common/comments';
|
||||||
import './sitemaps';
|
import './sitemaps';
|
||||||
import './subsUnion';
|
import './subsUnion';
|
||||||
import './prerender';
|
import './prerender';
|
||||||
|
import './feedback';
|
||||||
|
|
|
||||||
120
imports/ui/components/Feedback/Feedback.js
Normal file
120
imports/ui/components/Feedback/Feedback.js
Normal file
|
|
@ -0,0 +1,120 @@
|
||||||
|
/* eslint-disable react/jsx-indent-props */
|
||||||
|
/* eslint-disable import/no-absolute-path */
|
||||||
|
/* eslint-disable import/no-absolute-path */
|
||||||
|
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Meteor } from 'meteor/meteor';
|
||||||
|
import { translate } from 'react-i18next';
|
||||||
|
import { FormGroup, Button, FormControl } from 'react-bootstrap';
|
||||||
|
import { Bert } from 'meteor/themeteorchef:bert';
|
||||||
|
import validate from '../../../modules/validate';
|
||||||
|
|
||||||
|
import './Feedback.scss';
|
||||||
|
|
||||||
|
class Feedback extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.t = props.t;
|
||||||
|
this.handleSubmit = this.handleSubmit.bind(this);
|
||||||
|
this.onTabClick = this.onTabClick.bind(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const component = this;
|
||||||
|
|
||||||
|
validate(component.form, {
|
||||||
|
rules: {
|
||||||
|
email: {
|
||||||
|
required: true,
|
||||||
|
email: true
|
||||||
|
},
|
||||||
|
feedbackText: {
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
messages: {
|
||||||
|
feedbackText: {
|
||||||
|
required: this.t('Por favor, escribe aquí tu feedback...')
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
required: this.t('Tu correo'),
|
||||||
|
email: this.t('¿Es correcto este correo?')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
submitHandler() { component.handleSubmit(); }
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onTabClick() {
|
||||||
|
$('#feedback-form').toggle('slide');
|
||||||
|
}
|
||||||
|
|
||||||
|
handleSubmit() {
|
||||||
|
const email = this.email.value.trim();
|
||||||
|
const feedbackText = this.feedbackText.value.trim();
|
||||||
|
|
||||||
|
Meteor.call('send-feedback', email, feedbackText, (error) => {
|
||||||
|
if (error) {
|
||||||
|
Bert.alert(error.reason, 'danger');
|
||||||
|
} else {
|
||||||
|
this.form.reset();
|
||||||
|
Bert.alert('Feedback recibido, gracias...', 'success');
|
||||||
|
this.onTabClick();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div id="feedback">
|
||||||
|
<div id="feedback-form" ref={formdiv => (this.formdiv = formdiv)} style={{ display: 'none' }} className="card">
|
||||||
|
<form
|
||||||
|
ref={form => (this.form = form)}
|
||||||
|
className="form card-body"
|
||||||
|
onSubmit={event => event.preventDefault()}
|
||||||
|
>
|
||||||
|
<FormGroup controlId="formEmail">
|
||||||
|
<input
|
||||||
|
onChange={this.handleChange}
|
||||||
|
name="email"
|
||||||
|
autoFocus
|
||||||
|
className="form-control"
|
||||||
|
ref={email => (this.email = email)}
|
||||||
|
placeholder={this.t('Tu correo')}
|
||||||
|
type="email"
|
||||||
|
/>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup
|
||||||
|
controlId="formFeedback"
|
||||||
|
>
|
||||||
|
<textarea
|
||||||
|
className="form-control"
|
||||||
|
name="feedbackText"
|
||||||
|
ref={feedbackText => (this.feedbackText = feedbackText)}
|
||||||
|
placeholder={this.t('Por favor, escribe aquí tu feedback...')}
|
||||||
|
rows="6"
|
||||||
|
/>
|
||||||
|
<FormControl.Feedback />
|
||||||
|
</FormGroup>
|
||||||
|
<Button type="submit" bsStyle="success" className="float-right" >
|
||||||
|
{this.t('Enviar')}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="feedback-tab"
|
||||||
|
onClick={(event) => { this.onTabClick(event); }}
|
||||||
|
>
|
||||||
|
{this.t('Feedback')}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Feedback.propTypes = {
|
||||||
|
t: PropTypes.func.isRequired
|
||||||
|
};
|
||||||
|
|
||||||
|
export default translate([], { wait: true })(Feedback);
|
||||||
71
imports/ui/components/Feedback/Feedback.scss
Normal file
71
imports/ui/components/Feedback/Feedback.scss
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
/* From: https://github.com/spektom/bootstrap-feedback-form */
|
||||||
|
@import '../../stylesheets/mixins';
|
||||||
|
|
||||||
|
#feedback {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1000;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 350px;
|
||||||
|
margin-left: -3px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(tablet) {
|
||||||
|
#feedback {
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#feedback-form {
|
||||||
|
float: left;
|
||||||
|
width: 400px;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 1000;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 10px;
|
||||||
|
background-clip: padding-box;
|
||||||
|
border: 1px solid rgba(0,0,0,.2);
|
||||||
|
border-radius: 0px;
|
||||||
|
box-shadow: 0 5px 10px rgba(0,0,0,.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(mobile) {
|
||||||
|
#feedback-form {
|
||||||
|
width: 270px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#feedback-tab {
|
||||||
|
float: right;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
width: 80px;
|
||||||
|
height: 24px;
|
||||||
|
background-color: rgba(0,0,0,0.5);
|
||||||
|
margin-top: 60px;
|
||||||
|
margin-left: -28px;
|
||||||
|
padding-top: 3px;
|
||||||
|
-webkit-border-top-left-radius: 3px;
|
||||||
|
-webkit-border-top-right-radius: 3px;
|
||||||
|
-moz-border-radius-topleft: 3px;
|
||||||
|
-moz-border-radius-topright: 3px;
|
||||||
|
border-top-left-radius: 3px;
|
||||||
|
border-top-right-radius: 3px;
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
-moz-transform: rotate(90deg);
|
||||||
|
-ms-transform: rotate(90deg);
|
||||||
|
-o-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
#feedback-tab:hover {
|
||||||
|
background-color: rgba(0,0,0,0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
#feedback-form textarea {
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
@ -42,12 +42,13 @@ import NotFound from '../../pages/NotFound/NotFound';
|
||||||
import FiresMap from '../../pages/FiresMap/FiresMap';
|
import FiresMap from '../../pages/FiresMap/FiresMap';
|
||||||
import Fires from '../../pages/Fires/Fires';
|
import Fires from '../../pages/Fires/Fires';
|
||||||
import Sandbox from '../../pages/Sandbox/Sandbox';
|
import Sandbox from '../../pages/Sandbox/Sandbox';
|
||||||
import Footer from '../../components/Footer/Footer';
|
|
||||||
import Terms from '../../pages/Terms/Terms';
|
import Terms from '../../pages/Terms/Terms';
|
||||||
import Privacy from '../../pages/Privacy/Privacy';
|
import Privacy from '../../pages/Privacy/Privacy';
|
||||||
import License from '../../pages/License/License';
|
import License from '../../pages/License/License';
|
||||||
import Credits from '../../pages/Credits/Credits';
|
import Credits from '../../pages/Credits/Credits';
|
||||||
import ZonesMap from '../../pages/ZonesMap/ZonesMap';
|
import ZonesMap from '../../pages/ZonesMap/ZonesMap';
|
||||||
|
import Footer from '../../components/Footer/Footer';
|
||||||
|
import Feedback from '../../components/Feedback/Feedback';
|
||||||
import ReSendEmail from '../../components/ReSendEmail/ReSendEmail';
|
import ReSendEmail from '../../components/ReSendEmail/ReSendEmail';
|
||||||
import ErrorBoundary from '../../components/ErrorBoundary/ErrorBoundary';
|
import ErrorBoundary from '../../components/ErrorBoundary/ErrorBoundary';
|
||||||
import history from '../../components/History/History';
|
import history from '../../components/History/History';
|
||||||
|
|
@ -138,6 +139,7 @@ const App = props => (
|
||||||
</Switch>
|
</Switch>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
<Feedback />
|
||||||
<Reconnect />
|
<Reconnect />
|
||||||
{props.i18nReady.get() &&
|
{props.i18nReady.get() &&
|
||||||
<Blaze template="cookieConsent" />
|
<Blaze template="cookieConsent" />
|
||||||
|
|
|
||||||
|
|
@ -190,5 +190,13 @@
|
||||||
"Choose a type",
|
"Choose a type",
|
||||||
"Puedes participar en las traducciones":
|
"Puedes participar en las traducciones":
|
||||||
"You can help with the translations",
|
"You can help with the translations",
|
||||||
"Aceptar": "Accept"
|
"Aceptar": "Accept",
|
||||||
|
"Por favor, escribe aquí tu feedback...":
|
||||||
|
"Please write your feedback here...",
|
||||||
|
"Feedback":
|
||||||
|
"Feedback",
|
||||||
|
"Enviar":
|
||||||
|
"Send",
|
||||||
|
"Tu correo":
|
||||||
|
"Your e-mail"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -277,5 +277,13 @@
|
||||||
"Elige un tipo",
|
"Elige un tipo",
|
||||||
"Puedes participar en las traducciones":
|
"Puedes participar en las traducciones":
|
||||||
"Puedes participar en las traducciones",
|
"Puedes participar en las traducciones",
|
||||||
"Aceptar": "Aceptar"
|
"Aceptar": "Aceptar",
|
||||||
|
"Por favor, escribe aquí tu feedback...":
|
||||||
|
"Por favor, escribe aquí tu feedback...",
|
||||||
|
"Feedback":
|
||||||
|
"Feedback",
|
||||||
|
"Enviar":
|
||||||
|
"Enviar",
|
||||||
|
"Tu correo":
|
||||||
|
"Tu correo"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue