allow language override via settings

src/app/app.component.ts

@@ -6,6 +6,7 @@ import { TranslateService } from '@ngx-translate/core';
 
 import { COLORS, DEFAULT_LANG } from '../constants';
 import { BlocklyPage } from '../pages/blockly/blockly';
+import { StorageProvider, SETTINGS } from '../providers/storage/storage';
 
 @Component({
   templateUrl: 'app.html'
@@ -43,12 +44,16 @@ export class openSenseApp {
 
   constructor(
     public translate: TranslateService,
+    private storage: StorageProvider,
     platform: Platform,
     statusBar: StatusBar,
     splashScreen: SplashScreen,
   ) {
+    this.translate.addLangs(['en', 'de']);
     this.translate.setDefaultLang(DEFAULT_LANG)
-    this.translate.use(this.getPreferredLanguage())
+    const lang = this.getPreferredLanguage()
+    this.translate.use(lang)
+    this.storage.get(SETTINGS).language = lang
 
     platform.ready()
       .then(() => {
@@ -73,7 +78,7 @@ export class openSenseApp {
 
   private getPreferredLanguage () {
     const langsAvailable = this.translate.getLangs()
-    const lang = this.translate.getBrowserLang()
+    const lang = this.storage.get(SETTINGS).language || this.translate.getBrowserLang()
     return langsAvailable.indexOf(lang) === -1 ? DEFAULT_LANG : lang
   }
 }

src/assets/i18n/de.json

@@ -26,6 +26,9 @@
   },
   "SETTINGS": {
     "TITLE": "Einstellungen",
+    "LANGUAGE": {
+      "TITLE": "Sprache"
+    },
     "LOG_OPTIN": {
       "TITLE": "Sende uns automatisch Fehler-Berichte zu",
       "TEXT": "Das hilft uns beim Beheben von Fehlern.<br/>Keine persönlichen Daten außer deinem Sketch werden übertragen."

src/assets/i18n/en.json

@@ -26,6 +26,9 @@
   },
   "SETTINGS": {
     "TITLE": "Settings",
+    "LANGUAGE": {
+      "TITLE": "Language"
+    },
     "LOG_OPTIN": {
       "TITLE": "Automatically send error reports to us",
       "TEXT": "These reports help us in troubleshooting issues.<br/>No personal information is collected, except for your Sketch."

src/pages/settings/settings.html

@@ -9,6 +9,20 @@
 
 <ion-content padding>
   <ion-list>
+    <ion-item>
+      <ion-icon name="text" item-start></ion-icon>
+      <ion-label>
+        <h2 style="color: black;" translate>SETTINGS.LANGUAGE.TITLE</h2>
+      </ion-label>
+      <ion-select
+        interface="popover"
+        (ngModelChange)="onSettingsChange('language', $event)"
+        [ngModel]="settings.language"
+      >
+        <ion-option *ngFor="let lang of translate.langs" value="{{lang}}">{{ lang }}</ion-option>
+      </ion-select>
+    </ion-item>
+
     <ion-item>
       <ion-icon name="megaphone" item-start></ion-icon>
       <ion-label>

src/pages/settings/settings.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { IonicPage } from 'ionic-angular';
+import { TranslateService } from '@ngx-translate/core';
 
 import { StorageProvider, SETTINGS } from '../../providers/storage/storage';
 
@@ -10,14 +11,20 @@ import { StorageProvider, SETTINGS } from '../../providers/storage/storage';
   templateUrl: 'settings.html',
 })
 export class SettingsPage {
-  settings = {}
+  settings = {} as any
 
-  constructor(private storage: StorageProvider) {
+  constructor(
+    public translate: TranslateService,
+    private storage: StorageProvider,
+  ) {
     this.settings = this.storage.get(SETTINGS)
+    this.settings.language = this.translate.currentLang
   }
 
   onSettingsChange (name, value) {
     this.settings[name] = value
     this.storage.set(SETTINGS, this.settings)
+    if (name === 'language')
+      this.translate.use(value)
   }
 }