Work in progress apply UI translation

openchargemap · Jul 2, 2016 · 09dc6e6 · 09dc6e6
1 parent 99aa690
commit 09dc6e6
Show file tree

Hide file tree

Showing 31 changed files with 573 additions and 747 deletions.
diff --git a/App/Ionic2/ocm-app/app/app.ts b/App/Ionic2/ocm-app/app/app.ts
@@ -92,21 +92,25 @@ export class OpenChargeMapApp extends Base implements OnInit {
     initTranslation() {
         //init translation
         //this.translate.useStaticFilesLoader('lang', '.json');
-
+        var defaultLang = "it";
         var userLang = navigator.language.split('-')[0]; // use navigator lang if available
-        userLang = /(it|en)/gi.test(userLang) ? userLang : 'en';
-
+        userLang = /(it|en)/gi.test(userLang) ? userLang : defaultLang;
+userLang="sk";
         // optional, default is "en"
-        this.translate.setDefaultLang('en');
+        this.translate.setDefaultLang(defaultLang);
         // the lang to use, if the lang isn't available, it will use the current loader to get them
-        this.translate.use(userLang);
-
 
-        var test = this.translate.get("ocm.general.shortDescription");
-        test.subscribe(data => {
-            this.log("Translation test:" + data);
+        this.log("[translate] "+ navigator.language+ ":: using language:" + userLang);
+        this.translate.use(userLang).subscribe(() => {
+            var test = this.translate.get("ocm.general.shortDescription");
+            test.subscribe(data => {
+                this.log("Translation test:" + data);
+            });
         });
 
+
+
+
         /*
           var test2 = this.translate.get("ocm.general.shortDescription");
                     test2.subscribe(data => { 
@@ -166,6 +170,6 @@ ionicBootstrap(OpenChargeMapApp, [
     ReferenceDataManager
 ], {
         //config
-        prodMode:true,
-        mode:"ios"
+        prodMode: true,
+        mode: "ios"
     });
diff --git a/App/Ionic2/ocm-app/app/core/ocm/model/SearchSettings.ts b/App/Ionic2/ocm-app/app/core/ocm/model/SearchSettings.ts
@@ -12,6 +12,7 @@ export class SearchSettings {
   UseDistanceInKM: boolean;
   HasActiveFilters: boolean;
   LastSearchPosition: GeoLatLng;
+  Language:string;
 
   constructor() {
     this.OperatorList = [];

diff --git a/App/Ionic2/ocm-app/app/core/ocm/pipes/NullableTranslatePipe.ts b/App/Ionic2/ocm-app/app/core/ocm/pipes/NullableTranslatePipe.ts
@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform, ChangeDetectorRef } from '@angular/core';
+import { TranslatePipe, TranslateService} from 'ng2-translate/ng2-translate';
+
+@Pipe({name: 'nullableTranslate'})
+export class NullableTranslatePipe extends TranslatePipe {
+    constructor(translate: TranslateService,  _ref: ChangeDetectorRef) {
+        super(translate,_ref);
+
+    }
+  transform(query: string, ...args: any[]): any {
+      return super.transform(query, ...args);
+  // if (result==null) return "..no value..";
+  }
+}
diff --git a/App/Ionic2/ocm-app/app/core/ocm/services/AppManager.ts b/App/Ionic2/ocm-app/app/core/ocm/services/AppManager.ts
@@ -6,6 +6,7 @@ import {APIClient} from './APIClient';
 import {Http} from '@angular/http';
 import {Injectable} from '@angular/core';
 import {Events, NavController, Platform, Toast, Loading} from 'ionic-angular';
+import {TranslateService} from 'ng2-translate/ng2-translate';
 import {Base, LogLevel} from '../Base';
 import {JwtHelper} from 'angular2-jwt';
 import {UserProfile, SubmissionType, SearchSettings, Journey, WayPoint, GeoLatLng} from '../model/AppModels'
@@ -30,7 +31,7 @@ export class AppManager extends Base {
 
     public isRequestInProgress: boolean = false;
 
-    constructor(public http: Http, public events: Events, public api: APIClient, public submissionQueue: SubmissionQueue, private platform: Platform, public referenceDataManager: ReferenceDataManager, public journeyManager: JourneyManager) {
+    constructor(public http: Http, public events: Events, public api: APIClient, public submissionQueue: SubmissionQueue, private platform: Platform, public referenceDataManager: ReferenceDataManager, public journeyManager: JourneyManager, public translateService: TranslateService) {
         super();
         this.api.clientName = "ocm.app.ionic.v6_0_0";
         this.isDebugMode = false;
@@ -43,9 +44,9 @@ export class AppManager extends Base {
             this.platformMode = "web";
         }
 
-       // this.referenceDataManager = new ReferenceDataManager(http);
-     
-       // this.poiManager = new POIManager(this);
+        // this.referenceDataManager = new ReferenceDataManager(http);
+
+        // this.poiManager = new POIManager(this);
 
         this.searchSettings = new SearchSettings();
 
@@ -62,9 +63,9 @@ export class AppManager extends Base {
     public loadSearchSettings() {
         if (localStorage.getItem('searchSettings') != null) {
             try {
-            this.searchSettings = JSON.parse(localStorage.getItem('searchSettings'));
-            } catch(ex){
-                this.searchSettings=new SearchSettings();
+                this.searchSettings = JSON.parse(localStorage.getItem('searchSettings'));
+            } catch (ex) {
+                this.searchSettings = new SearchSettings();
             }
         }
     }
@@ -76,7 +77,12 @@ export class AppManager extends Base {
         this.searchSettings.CheckForActiveFilters();
         localStorage.setItem('searchSettings', JSON.stringify(this.searchSettings));
     }
-
+    public getLanguages(): Array<string> {
+        return this.translateService.getLangs();
+    }
+    public setLanguage(languageCode: string) {
+        this.translateService.use(languageCode);
+    }
     public initAppManager() {
         this.initAuthFromStorage();
 
@@ -191,7 +197,7 @@ export class AppManager extends Base {
 
         nav.present(this.loading);
     }
-    public dismissLoadingProgress(): Promise<any>{
+    public dismissLoadingProgress(): Promise<any> {
         return this.loading.dismiss();
     }
 
@@ -214,8 +220,8 @@ export class AppManager extends Base {
     public launchWebPage(url: string) {
         window.open(url, '_system');
     }
-    
-    public isPlatform(platformName:string){
+
+    public isPlatform(platformName: string) {
         return this.platform.is(platformName);
     }
 }
diff --git a/App/Ionic2/ocm-app/app/pages/poi-details/poi-details.html b/App/Ionic2/ocm-app/app/pages/poi-details/poi-details.html
@@ -223,7 +223,7 @@ <h3>{{item.ConnectionType?.Title}} <span class="details-minor" *ngIf="item.Quant
                         <div *ngIf="item.User">{{item.User.Username}}</div>
                         <div *ngIf="!item.User">{{item.Username}}</div>
 
-                        <p>{{item.DateCreated}}</p>
+                        <p>{{item.DateCreated | date }}</p>
                         <p>{{item.Comment}}</p>
                         <p *ngIf="item.CommentTypeID!=10">
                             {{item.CommentType?.Title}}
@@ -254,7 +254,7 @@ <h2>
                         <img src="{{item.User?.ProfileImageURL}}">
                     </ion-avatar>
                     <h2>{{item.User.Username}}</h2>
-                    <p>{{item.DateCreated}}</p>
+                    <p>{{item.DateCreated | date}}</p>
                 </ion-item>
 
                 <img src="{{item.ItemMediumURL}}" />

diff --git a/App/Ionic2/ocm-app/app/pages/poi-details/poi-details.ts b/App/Ionic2/ocm-app/app/pages/poi-details/poi-details.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {DatePipe} from '@angular/common';
 import {NavController, NavParams, ViewController, Modal, ActionSheet} from 'ionic-angular';
 import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
 import {AppManager} from '../../core/ocm/services/AppManager';
@@ -8,7 +9,7 @@ import {FavouriteEditorPage} from '../journeys/favourite-editor';
 
 @Component({
     templateUrl: 'build/pages/poi-details/poi-details.html',
-    pipes: [TranslatePipe]
+    pipes: [TranslatePipe, DatePipe]
 })
 
 export class POIDetailsPage {

diff --git a/App/Ionic2/ocm-app/app/pages/profile/profile.html b/App/Ionic2/ocm-app/app/pages/profile/profile.html
@@ -1,17 +1,17 @@
 <ion-header>
     <ion-navbar default>
         <ion-title>
-            My Profile
+            {{'ocm.navigation.profile.sectionTitle' | translate}}
         </ion-title>
     </ion-navbar>
 </ion-header>
 
 <ion-content class="profile-page" padding>
-    <h1>My Profile</h1>
+    <h1>{{'ocm.navigation.profile.sectionTitle' | translate}}</h1>
 
 
     <div *ngIf="userProfile==null">
-        You are not signed in. <button (click)="showSignInModal()">Sign In</button>
+        You are not signed in. <button (click)="showSignInModal()">{{'ocm.general.signIn' | translate}}</button>
     </div>
     <div *ngIf="userProfile!=null">
 

diff --git a/App/Ionic2/ocm-app/app/pages/profile/profile.ts b/App/Ionic2/ocm-app/app/pages/profile/profile.ts
@@ -1,17 +1,19 @@
 import {Component} from '@angular/core';
 import {NavController, Modal, Alert} from 'ionic-angular';
+import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
 import {AppManager} from '../../core/ocm/services/AppManager';
 import {SignInPage} from '../signin/signin';
 import {MediaUploadPage} from '../mediaupload/mediaupload';
 import {CommentPage} from '../comment/comment';
 
 @Component({
-    templateUrl: 'build/pages/profile/profile.html'
+    templateUrl: 'build/pages/profile/profile.html',
+    pipes:[TranslatePipe]
 })
 export class ProfilePage {
 
     userProfile: any;
-    constructor(public appManager: AppManager, public nav: NavController) {
+    constructor(public appManager: AppManager, public nav: NavController, private translate:TranslateService) {
 
     }
 

diff --git a/App/Ionic2/ocm-app/app/pages/search/search.html b/App/Ionic2/ocm-app/app/pages/search/search.html
@@ -8,7 +8,7 @@
     </button>
 
       </ion-buttons>
-      <ion-searchbar [(ngModel)]="searchKeyword" (ionInput)="getPlacesAutoComplete($event)" (ionCancel)="onPlaceSearchCancel($event)">
+      <ion-searchbar [(ngModel)]="searchKeyword" (ionInput)="getPlacesAutoComplete($event)" (ionCancel)="onPlaceSearchCancel($event)" [placeholder]="'ocm.search.performSearch' | translate">
         [debounce]="500"></ion-searchbar>
       <ion-buttons end>
         <button (click)="openSearchOptions()">

diff --git a/App/Ionic2/ocm-app/app/pages/settings/settings.html b/App/Ionic2/ocm-app/app/pages/settings/settings.html
@@ -1,7 +1,7 @@
 <ion-header>
   <ion-navbar default>
     <ion-title>
-      Settings
+      {{'ocm.general.settings' | translate}}
     </ion-title>
   </ion-navbar>
 </ion-header>
@@ -13,39 +13,39 @@ <h2>Search Filters</h2>
     <ion-icon name="alert"></ion-icon> One or more filters are currently being applied.</p>
   <ion-list>
     <ion-item>
-      <ion-label>Operators</ion-label>
+      <ion-label>{{'ocm.search.networkOperators' | translate}}</ion-label>
       <ion-select [(ngModel)]="searchSettings.OperatorList" multiple="true" cancelText="Cancel" okText="OK">
-        <ion-option *ngFor="let item of operators" [value]="item.ID">{{item.Title}}</ion-option>
+        <ion-option *ngFor="let item of operators" [value]="item.ID">{{'ocm.reference.operatorInfo.value_'+item.ID | nullableTranslate  }}</ion-option>
 
       </ion-select>
     </ion-item>
 
     <ion-item>
-      <ion-label>Usage Types</ion-label>
+      <ion-label>{{'ocm.search.usageTypes' | translate}}</ion-label>
       <ion-select [(ngModel)]="searchSettings.UsageTypeList" multiple="true" cancelText="Cancel" okText="OK">
         <ion-option *ngFor="let item of usageTypes" [value]="item.ID">{{item.Title}}</ion-option>
 
       </ion-select>
     </ion-item>
 
     <ion-item>
-      <ion-label>Status Types</ion-label>
+      <ion-label>{{'ocm.search.operationalStatusTypes' | translate}}</ion-label>
       <ion-select [(ngModel)]="searchSettings.StatusTypeList" multiple="true" cancelText="Cancel" okText="OK">
-        <ion-option *ngFor="let item of statusTypes" [value]="item.ID">{{item.Title}}</ion-option>
+        <ion-option *ngFor="let item of statusTypes" [value]="item.ID">{{'ocm.reference.statusType.value_'+item.ID | nullableTranslate }}</ion-option>
 
       </ion-select>
     </ion-item>
 
     <ion-item>
-      <ion-label>Connector Types</ion-label>
+      <ion-label>{{'ocm.search.connectionTypes'| translate }}</ion-label>
       <ion-select [(ngModel)]="searchSettings.ConnectionTypeList" multiple="true" cancelText="Cancel" okText="OK">
         <ion-option *ngFor="let item of connectionTypes" [value]="item.ID">{{item.Title}}</ion-option>
 
       </ion-select>
     </ion-item>
 
     <ion-item>
-      <ion-label>Min. Power (kW)</ion-label>
+      <ion-label>{{'ocm.search.minPowerKW' | translate}}</ion-label>
       <ion-input type="number" [(ngModel)]="searchSettings.MinPowerKW"></ion-input>
     </ion-item>
 
@@ -61,6 +61,13 @@ <h2>
     <ion-label>Show Distance in Kilometers</ion-label>
     <ion-toggle [(ngModel)]="searchSettings.UseDistanceInKM"></ion-toggle>
   </ion-item>
+  <ion-item>
+    <ion-label>Language</ion-label>
+    <ion-select [(ngModel)]="searchSettings.Language" multiple="false">
+      <ion-option *ngFor="let item of languages" [value]="item">{{item}}</ion-option>
+
+    </ion-select>
+  </ion-item>
 
 
 </ion-content>
diff --git a/App/Ionic2/ocm-app/app/pages/settings/settings.ts b/App/Ionic2/ocm-app/app/pages/settings/settings.ts
@@ -2,9 +2,12 @@ import {Component} from '@angular/core';
 import {AppManager} from '../../core/ocm/services/AppManager';
 import {POIManager} from '../../core/ocm/services/POIManager';
 import {SearchSettings} from '../../core/ocm/model/AppModels';
+import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
+import {NullableTranslatePipe} from '../../core/ocm/pipes/NullableTranslatePipe';
 
 @Component({
-  templateUrl: 'build/pages/settings/settings.html'
+  templateUrl: 'build/pages/settings/settings.html',
+  pipes:[TranslatePipe, NullableTranslatePipe]
 })
 export class SettingsPage {
 
@@ -16,6 +19,7 @@ export class SettingsPage {
 
   searchSettings: SearchSettings;
   filterByCountryPref: boolean = true;
+  languages:any;
   constructor(public appManager: AppManager, public poiManager: POIManager) {
 
     this.searchSettings = new SearchSettings();
@@ -25,10 +29,15 @@ export class SettingsPage {
     this.statusTypes = this.appManager.referenceDataManager.getStatusTypes(this.filterByCountryPref);
     this.connectionTypes = this.appManager.referenceDataManager.getConnectionTypes(this.filterByCountryPref);
 
+this.languages= this.appManager.getLanguages();
     //TODO reference data manager with filtered versions of reference type lists
+   // 
   }
 
   ionViewWillLeave() {
+
+    this.appManager.setLanguage(this.searchSettings.Language);
+
     //save search settings
     this.appManager.searchSettings=this.searchSettings;
     this.appManager.saveSearchSettings();

diff --git a/App/Ionic2/ocm-app/app/pages/signin/signin.html b/App/Ionic2/ocm-app/app/pages/signin/signin.html
@@ -1,7 +1,7 @@
 <ion-header>
     <ion-navbar default>
         <ion-title>
-            Sign In
+            {{'ocm.general.signIn' |translate}}
         </ion-title>
     </ion-navbar>
 </ion-header>
@@ -40,7 +40,7 @@
         </ion-buttons>
         <ion-buttons end>
 
-            <button (click)="performSignIn()" type="submit" primary><ion-icon name="log-in"></ion-icon> Sign In</button>
+            <button (click)="performSignIn()" type="submit" primary><ion-icon name="log-in"></ion-icon> {{'ocm.general.signIn' | translate}}</button>
 
         </ion-buttons>
 

diff --git a/App/Ionic2/ocm-app/app/pages/signin/signin.ts b/App/Ionic2/ocm-app/app/pages/signin/signin.ts
@@ -1,21 +1,21 @@
 import {Component, NgZone} from '@angular/core';
 import {NavController, NavParams, Alert, Loading, ViewController} from 'ionic-angular';
+import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate';
 import {AppManager} from '../../core/ocm/services/AppManager';
 import {UserProfile, AsyncResult} from '../../core/ocm/model/AppModels';
 
 
 @Component({
-    templateUrl: 'build/pages/signin/signin.html'
+    templateUrl: 'build/pages/signin/signin.html',
+    pipes:[TranslatePipe]
 })
 export class SignInPage {
     email: string;
     password: string;
 
-    constructor(private appManager: AppManager, private nav: NavController, private viewController: ViewController, params: NavParams, private zone: NgZone) {
+    constructor(private appManager: AppManager, private nav: NavController, private viewController: ViewController, params: NavParams, private zone: NgZone, public translate:TranslateService) {
         this.email = "";
 
-        //TODO:load/save username?
-
         var currentProfile = <UserProfile>params.get("Profile");
         if (currentProfile != null) {
             this.email = currentProfile.EmailAddress;

diff --git a/App/Ionic2/ocm-app/app/pages/tabs/tabs.html b/App/Ionic2/ocm-app/app/pages/tabs/tabs.html
@@ -1,6 +1,7 @@
 <ion-tabs>
-    <ion-tab [root]="tabSearch" tabTitle="Map" tabIcon="map"></ion-tab>
-    <ion-tab [root]="tabJourneys" tabTitle="Journeys" tabIcon="car"></ion-tab>
-    <ion-tab [root]="tabSettings" tabTitle="Settings" tabIcon="options" [tabBadge]="settingsTabBadge" tabBadgeStyle="danger"></ion-tab>
-    <ion-tab [root]="tabProfile" tabTitle="Profile" tabIcon="person"></ion-tab>
+    <ion-tab [root]="tabSearch" [tabTitle]="'ocm.search.sectionTitle'| translate" tabIcon="map"></ion-tab>
+    <ion-tab [root]="tabJourneys" [tabTitle]="tabJourneysTitle" tabIcon="car"></ion-tab>
+    <ion-tab [root]="tabSettings" [tabTitle]="'ocm.general.settings' | translate" tabIcon="options" [tabBadge]="settingsTabBadge"
+        tabBadgeStyle="danger"></ion-tab>
+    <ion-tab [root]="tabProfile" [tabTitle]="'ocm.navigation.profile.sectionTitle'|translate" tabIcon="person"></ion-tab>
 </ion-tabs>