Adds translate support

package.json

@@ -10,7 +10,8 @@
     "build": "ionic-app-scripts build",
     "lint": "ionic-app-scripts lint",
     "ionic:build": "ionic-app-scripts build",
-    "ionic:serve": "ionic-app-scripts serve"
+    "ionic:serve": "ionic-app-scripts serve",
+    "extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/app.pot --clean --sort --format pot"
   },
   "dependencies": {
     "@angular/common": "4.1.3",
@@ -20,16 +21,18 @@
     "@angular/platform-browser": "4.1.3",
     "@angular/platform-browser-dynamic": "4.1.3",
     "@angular/tsc-wrapped": "^4.3.2",
+    "@biesbjerg/ngx-translate-po-http-loader": "^1.0.1",
     "@ionic-native/core": "3.12.1",
     "@ionic-native/splash-screen": "3.12.1",
     "@ionic-native/status-bar": "3.12.1",
     "@ionic/storage": "2.0.1",
-    "@nsalaun/ng-logger": "^2.0.1",
     "autoprefixer": "^7.1.2",
-    "ionic-angular": "3.5.3",
+    "@ngx-translate/core": "^6.0.1",
+    "@nsalaun/ng-logger": "2.0.1",
+    "ajv": "^5.2.2",
+    "ionic-angular": "3.6.0",
     "ionicons": "3.0.0",
-    "lodash": "^4.17.4",
+    "lodash": "4.17.4",
-    "pre-commit": "^1.2.2",
     "rxjs": "5.4.0",
     "sw-toolbox": "3.6.0",
     "zone.js": "0.8.12"
@@ -46,7 +49,9 @@
     "@types/lodash": "^4.14.71",
     "@types/node": "^8.0.19",
     "codecov": "^2.2.0",
+    "@biesbjerg/ngx-translate-extract": "^2.3.2",
     "ionic": "3.6.0",
+    "pre-commit": "^1.2.2",
     "jasmine-core": "^2.6.4",
     "jasmine-spec-reporter": "^4.1.1",
     "karma": "^1.7.0",

src/app/app.component.ts

@@ -5,6 +5,7 @@ import { SplashScreen } from '@ionic-native/splash-screen';
 
 import { Logger } from '@nsalaun/ng-logger';
 import { AppProvider } from '../providers/app/app';
+import { TranslateService } from '@ngx-translate/core';
 
 import { TabsPage } from '../pages/tabs/tabs';
 
@@ -19,7 +20,8 @@ export class Copay {
     statusBar: StatusBar,
     splashScreen: SplashScreen,
     log: Logger,
-    app: AppProvider
+    app: AppProvider,
+    translate: TranslateService
   ) {
     platform.ready().then(() => {
       app.getName().subscribe((name) => {
@@ -37,6 +39,9 @@ export class Copay {
         statusBar.styleDefault();
         splashScreen.hide();
       }
+
+      translate.setDefaultLang('en');
+      translate.use(platform.lang());
     });
   }
 }

src/app/app.module.ts

@@ -1,8 +1,10 @@
-import { NgModule, ErrorHandler, isDevMode } from '@angular/core';
+import { NgModule, ErrorHandler } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import { HttpModule } from '@angular/http';
+import { HttpModule, Http } from '@angular/http';
 
 import { NgLoggerModule, Level } from '@nsalaun/ng-logger';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslatePoHttpLoader } from '@biesbjerg/ngx-translate-po-http-loader';
 
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { Copay } from './app.component';
@@ -24,10 +26,8 @@ import { StorageProvider } from '../providers/storage/storage';
 import { AppProvider } from '../providers/app/app';
 import { PlatformProvider } from '../providers/platform/platform';
 
-// Set different log level depending on environment.
+export function createTranslateLoader(http: Http) {
-const LOG_LEVEL = Level.LOG;
+    return new TranslatePoHttpLoader(http, './assets/i18n/', '.po');
-if (isDevMode()) {
-  const LOG_LEVEL = Level.ERROR;
 }
 
 @NgModule({
@@ -44,7 +44,14 @@ if (isDevMode()) {
   imports: [
     BrowserModule,
     HttpModule,
-    NgLoggerModule.forRoot(LOG_LEVEL),
+    NgLoggerModule.forRoot(Level.LOG),
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: (createTranslateLoader),
+        deps: [Http]
+      }
+    }),
     IonicModule.forRoot(Copay)
   ],
   bootstrap: [IonicApp],

src/assets/i18n/app.pot

@@ -0,0 +1,17 @@
+msgid ""
+msgstr ""
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+msgid "Home"
+msgstr ""
+
+msgid "Receive"
+msgstr ""
+
+msgid "Send"
+msgstr ""
+
+msgid "Setting"
+msgstr ""

src/assets/i18n/en.po

@@ -0,0 +1,25 @@
+msgid ""
+msgstr ""
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Project-Id-Version: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Language-Team: \n"
+"X-Generator: Poedit 2.0.3\n"
+"Last-Translator: \n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"Language: en\n"
+
+msgid "Home"
+msgstr "Home"
+
+msgid "Receive"
+msgstr "Receive"
+
+msgid "Send"
+msgstr "Send"
+
+msgid "Setting"
+msgstr "Setting"

src/assets/i18n/es.po

@@ -0,0 +1,25 @@
+msgid ""
+msgstr ""
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Project-Id-Version: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Language-Team: \n"
+"X-Generator: Poedit 2.0.3\n"
+"Last-Translator: \n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"Language: es\n"
+
+msgid "Home"
+msgstr "Inicio"
+
+msgid "Receive"
+msgstr "Recibir"
+
+msgid "Send"
+msgstr "Enviar"
+
+msgid "Setting"
+msgstr "Configuración"

src/pages/setting/setting.html

@@ -20,6 +20,16 @@
       <ion-icon name="notifications" item-start></ion-icon>
       Notification
     </ion-item>
+    <ion-item>
+      <ion-icon name="globe" item-start></ion-icon>
+      <ion-label>
+        Language
+      </ion-label>
+      <ion-select [(ngModel)]="language">
+        <ion-option value="en">English</ion-option>
+        <ion-option value="es">Spanish</ion-option>
+      </ion-select>
+    </ion-item>
     <ion-item-divider color="light">&nbsp;</ion-item-divider>
     <ion-item (click)="openAboutPage()">
       <ion-icon name="apps" item-start></ion-icon>

src/pages/setting/setting.ts

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
 
 import { AppProvider } from '../../providers/app/app';
+import { TranslateService } from '@ngx-translate/core';
 
 import { AboutPage } from '../about/about';
 
@@ -10,15 +11,18 @@ import { AboutPage } from '../about/about';
   templateUrl: 'setting.html',
 })
 export class SettingPage {
+  language: string;
   appName: string;
 
   constructor(
     public navCtrl: NavController,
     public navParams: NavParams,
-    public app: AppProvider
+    public app: AppProvider,
+    public i18n: TranslateService,
   ) {
     app.getName().subscribe((data) => {
       this.appName = data;
+      this.language = i18n.currentLang;
     });
   }
 

src/pages/tabs/tabs.html

@@ -1,6 +1,6 @@
 <ion-tabs>
-  <ion-tab [root]="homeRoot" tabTitle="Home" tabIcon="home"></ion-tab>
+  <ion-tab [root]="homeRoot" tabTitle="{{'Home'|translate}}" tabIcon="home"></ion-tab>
-  <ion-tab [root]="receiveRoot" tabTitle="Receive" tabIcon="archive"></ion-tab>
+  <ion-tab [root]="receiveRoot" tabTitle="{{'Receive'|translate}}" tabIcon="archive"></ion-tab>
-  <ion-tab [root]="sendRoot" tabTitle="Send" tabIcon="send"></ion-tab>
+  <ion-tab [root]="sendRoot" tabTitle="{{'Send'|translate}}" tabIcon="send"></ion-tab>
-  <ion-tab [root]="settingRoot" tabTitle="Setting" tabIcon="settings"></ion-tab>
+  <ion-tab [root]="settingRoot" tabTitle="{{'Setting'|translate}}" tabIcon="settings"></ion-tab>
 </ion-tabs>