diff --git a/README.md b/README.md index 3c618bb..07c2bea 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ Run ```npm install``` to download all the dependencies * To generate production code, run ```npm run build``` #### TODO LIST -- [ ] Add multilanguage +- [X] Add multilanguage - [ ] Show load on fetch times - [ ] Update webpack - [X] Publish --> Add ccs diff --git a/package.json b/package.json index d6de66f..a99b50b 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,9 @@ "repository": "git@github.com/Salec/SDRBuses.git", "scripts": { "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js", - "build": "webpack -p --config ./webpack.prod.js --define process.env.NODE_ENV='\"production\"' --progress --colors --display-modules" + "build": "webpack -p --config ./webpack.prod.js --define process.env.NODE_ENV='\"production\"' --progress --colors --display-modules", + "extract": "i18n_extract", + "import": "i18n_import --translations=src/translations" }, "license": "MIT", "devDependencies": { @@ -38,6 +40,7 @@ "react-router-dom": "^4.2.2", "redux": "^3.7.2", "redux-form": "^4.1.3", + "redux-i18n": "^1.5.11", "redux-promise": "^0.5.3", "underscore": "^1.8.3" } diff --git a/src/components/about.js b/src/components/about.js index 8b484a3..b64cef4 100644 --- a/src/components/about.js +++ b/src/components/about.js @@ -1,23 +1,21 @@ -/** - * Created by Fernando on 13/11/2017. - */ import React, {Component} from 'react'; +import PropTypes from 'prop-types'; export default class About extends Component { render() { return (
-

Sobre esta página

-

- Proyecto de código abierto creado por Fernando Martín usando técnologias de react y redux +

{this.context.t("About this page")}

+

{this.context.t("Open source project created by Fernando Martín García usign react and redux tecnologies")}

-

Puedes contribuir con el projecto en github: +

{this.context.t("You can collaborate with the project in github:")} @@ -26,7 +24,7 @@ export default class About extends Component {

- Actuales Colaboradores + {this.context.t("Current Colaborators")}
@@ -38,7 +36,8 @@ export default class About extends Component { alt="Fernando Martín García"/>

Fernando Martín García

- +
- Tu foto aquí + Your photo here
-

Tu nombre aquí

- +

{this.context.t("Your name here")}

+
); } +} +About.contextTypes = { + t: PropTypes.func } \ No newline at end of file diff --git a/src/components/app.js b/src/components/app.js index dd84ff9..26be8e9 100644 --- a/src/components/app.js +++ b/src/components/app.js @@ -1,9 +1,11 @@ import React, {Component} from 'react'; +import I18n from "redux-i18n"; import Main from './main' +import {translations} from '../translations/translations'; const App = () => ( -
+
-
+ ); export default App \ No newline at end of file diff --git a/src/components/buses_lines.js b/src/components/buses_lines.js index ed03315..6000d9d 100644 --- a/src/components/buses_lines.js +++ b/src/components/buses_lines.js @@ -1,18 +1,14 @@ -/** - * Created by Fernando on 4/10/2017. - */ import _ from 'underscore'; import React, {Component} from 'react'; import {connect} from 'react-redux'; +import PropTypes from 'prop-types'; import {fecthListBuses} from '../actions/index'; - class BusLines extends Component { constructor(props) { super(props); - - this.state = { isOpen: false }; + this.state = {isOpen: false}; } toggleModal = () => { @@ -35,24 +31,23 @@ class BusLines extends Component { }) } - goto = (event) =>{ + goto = (event) => { this.props.history.push(event.target.parentElement.dataset.url) } render() { if (!this.props.lines) { - return
Cargando...
+ return
{this.context.t("Loading...")}
} - return (
-

Índice de líneas

+

{this.context.t("Line Index")}

- - + + @@ -65,18 +60,18 @@ class BusLines extends Component { }; componentWillMount() { - this.props.fecthListBuses(); }; } - +BusLines.contextTypes = { + t: PropTypes.func +} function mapStateToProps(state) { - let order = _.sortBy(state.lines.busLines.resources, info =>{ + let order = _.sortBy(state.lines.busLines.resources, info => { return parseInt(info['dc:identifier']); }); return {lines: order}; } - export default connect(mapStateToProps, {fecthListBuses})(BusLines); \ No newline at end of file diff --git a/src/components/languageSelector.js b/src/components/languageSelector.js new file mode 100644 index 0000000..dbd1668 --- /dev/null +++ b/src/components/languageSelector.js @@ -0,0 +1,22 @@ +import React, {Component} from 'react'; +import {connect} from 'react-redux'; +import {setLanguage} from "redux-i18n"; + +class LanguageSelector extends Component { + render() { + return ( +
+ + +
+ ); + } +} +export default connect(state => ({ + lang: state.i18nState.lang, +}))(LanguageSelector) \ No newline at end of file diff --git a/src/components/modal.js b/src/components/modal.js index db6d094..9f9d21d 100644 --- a/src/components/modal.js +++ b/src/components/modal.js @@ -7,6 +7,7 @@ import {connect} from 'react-redux'; import {bindActionCreators} from 'redux'; import {orderTimes} from '../auxFunctions/common'; import _ from 'underscore'; +import PropTypes from 'prop-types'; export const MODAL_ID = 'myModal'; @@ -19,7 +20,8 @@ class Modal extends Component {
-
Tiempo Parada {this.props.stop} - {this.props.name}
+
{this.context.t("Time for stop ")} {this.props.stop} - + {this.props.name}
@@ -63,13 +65,17 @@ class Modal extends Component { } } - - } + +} +Modal.contextTypes = { + t: PropTypes.func +} function mapsStateToProps(state) { - return {time: state.lines.time, - stop: state.lines.stop, - name: state.lines.name - } + return { + time: state.lines.time, + stop: state.lines.stop, + name: state.lines.name + } } function mapDispatchToProps(dispatch) { return bindActionCreators({fetchTimes: fetchTimes}, dispatch) diff --git a/src/components/navegation.js b/src/components/navegation.js index 23f5c59..0af96d3 100644 --- a/src/components/navegation.js +++ b/src/components/navegation.js @@ -1,54 +1,81 @@ import React from 'react'; -import { withRouter } from 'react-router-dom'; +import {withRouter} from 'react-router-dom'; import {connect} from 'react-redux'; import {changeStop} from '../actions/index'; +import LanguageSelector from "./languageSelector" +import PropTypes from 'prop-types'; + const SCHEDULE = "http://www.tusantander.es/sites/tus.int.ayto-santander.es/files/tusinvierno2017_optimizado.pdf"; const MAP = "http://www.tusantander.es/sites/tus.int.ayto-santander.es/files/planos-red-lineas_1.pdf"; class Nav extends React.Component { render() { return ( - + ); } - onFormSubmit = (event) =>{ + + onFormSubmit = (event) => { event.preventDefault(); this.props.changeStop({stop: event.target[0].value}); } } +Nav.contextTypes = { + t: PropTypes.func +} function mapsStateToProps(state) { return { stop: state.lines.stop, } } Nav = withRouter(Nav); -export default connect(mapsStateToProps,{changeStop})(Nav); \ No newline at end of file +export default connect(mapsStateToProps, {changeStop})(Nav); \ No newline at end of file diff --git a/src/components/stops_line.js b/src/components/stops_line.js index c0ff252..2d7c454 100644 --- a/src/components/stops_line.js +++ b/src/components/stops_line.js @@ -17,13 +17,11 @@ class StopsLine extends Component { constructor(props) { super(props); - - } render() { if (!this.props) { - return
Cargando...
+ return
{this.context.t("Loading...")}
} return (
@@ -53,8 +51,8 @@ class StopsLine extends Component {
NombreLinea{this.context.t("Name")}{this.context.t("Line")}
- - + + @@ -80,12 +78,12 @@ class StopsLine extends Component { - - + + @@ -105,13 +103,12 @@ class StopsLine extends Component { - - - + + @@ -138,16 +135,12 @@ class StopsLine extends Component { { - console.log('click',this); + console.log('click', this); this.props.changeStop({ stop: e.target.parentElement.dataset.url, name: e.target.parentElement.dataset.name }); - - - }} - - > + }}> @@ -159,6 +152,9 @@ class StopsLine extends Component { } } +StopsLine.contextTypes = { + t: PropTypes.func +} function mapStateToProps(state) { return {stops: state.lines.stops} diff --git a/src/reducers/index.js b/src/reducers/index.js index a11d8b5..622cf4c 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -1,8 +1,10 @@ import {combineReducers} from 'redux'; +import {i18nState} from "redux-i18n" import BusesReducer from './reducer_buses'; const rootReducer = combineReducers({ - lines: BusesReducer + lines: BusesReducer, + i18nState }); export default rootReducer; diff --git a/src/translations/translations.js b/src/translations/translations.js new file mode 100644 index 0000000..cfd48d7 --- /dev/null +++ b/src/translations/translations.js @@ -0,0 +1,32 @@ +export const translations = { + 'es': { + 'About this page': 'Sobre esta página', + 'Open source project created by Fernando Martín García usign react and redux tecnologies': 'Proyecto de código abierto creado por Fernando Martín usando técnologias de react y redux', + 'You can collaborate with the project in github:': 'Puedes contribuir con el projecto en github:', + 'Collaborate': 'Colabora', + 'Current Colaborators': 'Actuales Colaboradores', + 'Contact': 'Contacto', + 'Your name here': 'Tu nombre aquí', + 'Loading...': 'Cargando', + 'Line Index': 'Indice de líneas', + 'Name': 'Nombre', + 'Line': 'Línea', + 'Time for stop ': 'Tiempo parada', + 'Close': 'Cerrar', + 'Home': 'Inicio', + 'More...': 'Más', + 'Schedule': 'Horario', + 'Map': 'Mapa General', + 'About the page': 'Sobre esta página', + 'Time': 'Tiempo', + 'Stop Number': 'Número Parada', + 'Stop Name': 'Nombre Parada', + 'WAY1': 'IDA', + 'WAY2': 'VUELTA', + 'Where to top up': 'Dónde recargar', + 'Downloads' : 'Descargas', + 'Fares': 'Tarifas' + }, + 'options': { + }, +}
Número ParadaNombre Parada{this.context.t("Stop Number")}{this.context.t("Stop Name")}
-

IDA

+

{this.context.t("IDA")}
Número ParadaNombre Parada{this.context.t("Stop Number")}{this.context.t("Stop Name")}
-

VUELTA

+

{this.context.t("VUELTA")}
Número ParadaNombre Parada{this.context.t("Stop Number")}{this.context.t("Stop Name")}
{stop['ayto:NParada']} {stop['ayto:NombreParada']}