UI language management: Working language selection

src/app/app.component.html

@@ -1,9 +1,37 @@
-<main>
-	<router-outlet></router-outlet>
+<main >
+	<router-outlet ></router-outlet>
+<!--  
+  <app-login (newLanguageEvent) = "chgUILanguage($event)"></app-login>
+-->  
 </main>
 <mat-divider></mat-divider>
+<div align="center">
+  <img *ngIf="zgoLanguage == 'en-US'" 
+       src="../assets/zgo-usa-flag-default.png" 
+       (click)="usFlagClicked()"
+       height="24px" 
+       title="English (Default)"/>
+  <img *ngIf="zgoLanguage != 'en-US'"
+       src="../assets/zgo-usa-flag.png"
+       (click)="usFlagClicked()"
+       height="24px" 
+       title="English"/>
+  <img src="../assets/flag-spacer.png"
+       height="24px">     
+  <img *ngIf="zgoLanguage == 'es-US'" 
+       src="../assets/zgo-spain-flag-default.png" 
+       (click)="esFlagClicked()"
+       height="24px"
+       title="Spanish (Default)"/>
+  <img *ngIf="zgoLanguage != 'es-US'" 
+       src="../assets/zgo-spain-flag.png" 
+       (click)="esFlagClicked()"
+       height="24px"
+       title="Spanish"/>
+</div> 
 <div class="footer" align="center">
   <p>&copy; 2023 Vergara Technologies LLC</p>
   <p class="tiny">Version 1.4.1</p>
-  <p class="tiny">Price data provided by CoinGecko API</p>
+  <p class="tiny">{{ vE.mainPriceData }}</p>
 </div>
+

src/app/app.component.ts

@@ -1,4 +1,7 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { LanguageService } from './language.service';
+import { LanguageData } from './language.model';
+
 //import { Post} from './posts/post.model';
 
 @Component({
@@ -8,6 +11,49 @@ import { Component } from '@angular/core';
 })
 
 export class AppComponent {
+  
   title = 'ZGo';
 
+  zgoLanguage:string = '';
+  vE = {
+      mainPriceData : ''
+    }
+
+  constructor(
+    private languageService: LanguageService){
+  }  
+  
+  ngOnInit(){
+    console.log('chgUILanguage() called on ngOnInit ');
+    this.chgUILanguage();
+  }
+
+  chgUILanguage() {
+    console.log('MAIN.chgUILanguage Called ');
+    this.languageService.getViewElements('main').subscribe(
+          response => { 
+            console.log('response >> ', response );
+            console.log('main_price_data -> ',response.data.main_price_data);
+            this.vE.mainPriceData = response.data.main_price_data;
+            this.zgoLanguage = response.language;
+          },
+          error  => { console.log('Error --> ',error); }
+        );
+  }
+
+  usFlagClicked() {
+    if ( this.zgoLanguage != 'en-US' ) {
+      localStorage.setItem('zgo_language','en-US');
+      window.location.reload();
+    }
+  }
+
+  esFlagClicked() {
+    if ( this.zgoLanguage != 'es-US' ) {
+      localStorage.setItem('zgo_language','es-US');
+      window.location.reload();
+    }
+  }
+
 }
+

src/app/language.model.ts

@@ -0,0 +1,5 @@
+export interface LanguageData {
+	language: string;
+	component: string;
+	data?: any;
+}

src/app/language.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
-import { viewElement } from './viewelement.model';
+import { LanguageData } from './language.model';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
-
 import { ConfigData } from './configdata';
 
 @Injectable({
@@ -10,39 +9,30 @@ import { ConfigData } from './configdata';
 
 export class LanguageService {
 
-  private baseURL = 'http://www.test.com/getlang';
+  private baseURL = 'http://localhost:8080/getlang';
+
+  public zgoLanguage: string = '';
 
   constructor(private http:HttpClient) { 
   }
 
-  httpOptions = {
-    headers: new HttpHeaders({
-      'Content-Type': 'application/json'
-    })
-  };
-
-  _getViewElements ( viewName:string, 
-                    encoding:string = 'en-US' ){
-
-    
-    const vElem : string = '{' +
-              '"login_confirm_login":"ZGo confirma su ingreso en la cadena de Zcash"' + ',' +
-              '"login_connect_to_zgo":"Conectar su billetera a ZGo"' + ',' +
-              '"login_enter_pin":"Ingrese el PIN enviado por ZGo para confirmar su billetera:"' + ',' +
-              '"login_last_block":"Ultimo Bloque Verificado: "' + ',' +
-              '"login_link_wallet":"Asociar Billetera"' + '}';  
-
-    return vElem;
+  getViewElements ( viewName:string )  {
+    //
+    // Get default language from localStorage
+    //
+    var def_zgoLanguage = localStorage.getItem('zgo_language');
 
+    if ( def_zgoLanguage == null ) {
+      this.zgoLanguage = 'en-US';
+      localStorage.setItem('zgo_language',this.zgoLanguage);
+    } else {
+      this.zgoLanguage = def_zgoLanguage;
     }
-
-  getViewElements ( viewName:string, 
-                    encoding:string = 'en-US' )  {
-
-    return this.http.get<any>(this.baseURL + 
-                        '/?lang_id=' + encoding +
+    //
+    // Get View's text data from language database
+    //
+    return this.http.get<LanguageData>(this.baseURL + 
+                        '/?lang_id=' + this.zgoLanguage +
                         '&viewname=' + viewName);
-
   }  
-   
 }

src/app/login/login.component.ts

@@ -15,6 +15,7 @@ import { take } from 'rxjs/operators';
 import { v4 as uuidv4 } from 'uuid';
 
 import { LanguageService } from '../language.service';
+import { LanguageData } from '../language.model';
 
 var QRCode = require('easyqrcodejs');
 var URLSafeBase64 = require('urlsafe-base64');
@@ -78,8 +79,8 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	private UserSub: Subscription = new Subscription();
 	public heightUpdate: Observable<number>;
 	public uZaddrUpdate: Observable<string>;
-	public userUpdate:Observable<User>;
-	public ownerUpdate:Observable<Owner>;
+	public userUpdate: Observable<User>;
+	public ownerUpdate: Observable<Owner>;
 	public txsUpdate: Observable<Tx[]>;
 	prompt: boolean = false;
 	confirmedMemo: boolean = false;
@@ -92,22 +93,18 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	entryForm: UntypedFormGroup;
 	pinForm: UntypedFormGroup;
 
-    public vResponse : _vE_login = {
-    	login_confirm_login : '',
-    	login_connect_to_zgo : '',
-    	login_enter_pin : '',
-    	login_last_block : '',
-    	login_link_wallet : ''
-    }; 
-
-    public vE = {
+    //
+    // Language Support
+    //
+    vE = {
     	loginConfirmLogin : '',
     	loginConnectToZGo : '',
     	loginEnterPin : '',
     	loginLastBlock : '',
     	loginLinkWallet : ''
     }
-
+    //
+    // ------------------------------------------------------------
 	constructor(
 		private fb: UntypedFormBuilder,
 		private activatedRoute: ActivatedRoute,
@@ -118,6 +115,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
 		private _changeDetectorRef: ChangeDetectorRef,
 		private languageService: LanguageService
 	){
+
 		//this.fullnodeService.getAddr();
 		this.entryForm = fb.group({
 			selectedSession: [0.001, Validators.required]
@@ -162,25 +160,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	}
 
 	ngOnInit(){
- 
- 		this.languageService.getViewElements('login','es-US').subscribe(
-					response => { 
-						console.log('Received >> ', response );
-					    var xv = JSON.parse(response) as _vE_login;
-
-						console.log('Last block -> ', );
-/*				        this.vE.loginLastBlock = vElemObject.login_last_block;
-				        
-				        this.vE.loginConnectToZGo = vElemObject.login_connect_to_zgo;
-				        this.vE.loginLinkWallet = vElemObject.login_link_wallet;
-				        this.vE.loginConfirmLogin = vElemObject.login_confirm_login;
-				        this.vE.loginEnterPin = vElemObject.login_enter_pin;
-*/
-					},
-					error  => { console.log('Error >> ',error); }
-				);
-       
-
+        this.chgUILanguage();
 		this.intervalHolder = setInterval(() => {
 			this.fullnodeService.getHeight();
 			//this.userService.findUser();
@@ -252,4 +232,24 @@ export class LoginComponent implements OnInit, AfterViewInit {
 		this.UserSub.unsubscribe();
 		clearInterval(this.intervalHolder);
 	}
+
+	chgUILanguage(){
+        console.log('LOGIN.chgUILanguage Called ');
+ 		this.languageService.getViewElements('login').subscribe(
+				response => { 
+					console.log('Received >> ', response );
+					console.log('Language Code : ', response.language);
+					console.log('Component Name : ',response.component);
+					console.log('Language data : ',response.data);
+					console.log('Login_Last_Block -> ',response.data.login_last_block);
+
+			        this.vE.loginLastBlock = response.data.login_last_block;
+			        this.vE.loginConnectToZGo = response.data.login_connect_to_zgo;
+			        this.vE.loginLinkWallet = response.data.login_link_wallet;
+			        this.vE.loginConfirmLogin = response.data.login_confirm_login;
+			        this.vE.loginEnterPin = response.data.login_enter_pin;
+				},
+				error  => { console.log('Error >> ',error); }
+			);
+	}
 }