Fundación Paraguaya (FP from now on) has developed a methodology called “Poverty Stoplight”. The Poverty Stoplight seeks to eliminate the multidimensional poverty that affects many families. It allows families to trace their own poverty map and develop and implement a clear plan to overcome it.
Through a visual survey that shows photographs, families self-assess their level of poverty with 50 indicators. These indicators are in turn grouped into 6 different dimensions of poverty.
Single Page Application working as a web client for FP-PSP-SERVER.
This project has been built with Joko Starter Kit as a skeleton.
- Node.js v5.0.0 or above
$ git clone https://github.com/FundacionParaguaya/fp-psp-frontend.git
$ cd fp-psp-frontend
Run:
npm install
npm run start
This will create the bundle from the sources in /src
and output it to /dist
.
Finally, open up your browser in:
If you need to, change the API
value in config/env_develpment.json
to point to the FP-SERVER running in your local machine. By default this should work without any modification.
Use config/env_production.json
in production environments.
When the authentication security is enabled in the server, the parameter en the config/env_XXX.json
file should be set to true
:
"authenticationEnabled": true
To see a list of default users and roles check the backend documentation.
Run:
$ npm run build
Unit and integration tests are run with Karma, Mocha and Chai:
$ npm test
To detect potential errors and bugs we use ESLint:
$ npm run lint
We use Polyglot library to include internationalization.
The language selection is made within the application, but for the pages that are previously shown as the login page, the language of the browser that is used is detected. If the language is not supported by the application, a default language is used. Therefore, you must keep the supported languages in the /src/login_app/app.js
file, where the default languages are also defined.
All messages supported by internationalization are stored in the /src/static/i18n
directory, separated according to language.
Files for each locale must be of type json and be named XX_YY.json
, where XX
is the language code and YY
is the country code. For example, es_PY.json
for Paraguay.
The keys for the values that will be localized have to be the same in every file, with values appropriate to the language they correspond to.
The content of the files must follow the following format:
{
"family": {
"messages": {
"add-done": "The family has been saved!",
"delete-done": "The \"%{nameOfFamily}\" family has been deleted!"
},
"buttons": {
"add": "Add Family"
}
}
}
The parameters are obtained with %{nameOfParameter}
.
For the translation the helper "t" was created, which uses Polyglot together with the jsons to carry out the translation.
Suppose we want to internationalize the following message to show the user:
FlashesService.request('add', {
timeout: 2000,
type: 'info',
body: 'The ${nameOfFamily} family has been deleted!'
});
To internationalize it we should replace it with the following:
FlashesService.request('add', {
timeout: 2000,
type: 'info',
body: t('family.messages.delete-done', {nameOfFamily: "García"})
});
Suppose we want to internationalize the label of a button, for example:
<button type="button">Add Family</button>
To internationalize it we should replace it with the following:
<button type="button">{{$t 'family.buttons.add'}}</button>