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';
+  
+  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.service.ts

@@ -1,7 +1,6 @@
 import { Injectable } from '@angular/core';
 import { LanguageData } from './language.model';
 import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';
-
 import { ConfigData } from './configdata';
 
 @Injectable({
@@ -12,37 +11,28 @@ export class LanguageService {
 
   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, 
-                    encoding:string = 'en-US' )  {
+  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;
+    }
+    //
+    // Get View's text data from language database
+    //
     return this.http.get<LanguageData>(this.baseURL + 
-                        '/?lang_id=' + encoding +
+                        '/?lang_id=' + this.zgoLanguage +
                         '&viewname=' + viewName);
-
   }  
-   
 }

src/app/login/login.component.html

@@ -9,9 +9,6 @@
 <div align="center">
 	<mat-card class="centercard">
 		<h3>The Zcash Register</h3>
-		    <div>
-				<button style="font-size: 10px;" (click)="changeLanguage()">Switch Language</button>
-		    </div>
 			<mat-vertical-stepper #stepper linear>
 				<mat-step label= "{{ vE.loginConnectToZGo }}" editable="false">
 					<div align="center" id="info">

src/app/login/login.component.ts

@@ -79,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;
@@ -93,16 +93,18 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	entryForm: UntypedFormGroup;
 	pinForm: UntypedFormGroup;
 
-    public vE = {
+    //
+    // Language Support
+    //
+    vE = {
     	loginConfirmLogin : '',
     	loginConnectToZGo : '',
     	loginEnterPin : '',
     	loginLastBlock : '',
     	loginLinkWallet : ''
     }
-
-    public zgoLanguage: string = 'en-US';
-
+    //
+    // ------------------------------------------------------------
 	constructor(
 		private fb: UntypedFormBuilder,
 		private activatedRoute: ActivatedRoute,
@@ -113,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]
@@ -157,24 +160,7 @@ export class LoginComponent implements OnInit, AfterViewInit {
 	}
 
 	ngOnInit(){
- 
- 		this.languageService.getViewElements('login', this.zgoLanguage).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); }
-				);
-
+        this.chgUILanguage();
 		this.intervalHolder = setInterval(() => {
 			this.fullnodeService.getHeight();
 			//this.userService.findUser();
@@ -247,27 +233,23 @@ export class LoginComponent implements OnInit, AfterViewInit {
 		clearInterval(this.intervalHolder);
 	}
 
-	changeLanguage(){
-		if ( this.zgoLanguage == 'en-US' ) {
-			this.zgoLanguage = 'es-US';
-		} else {
-			this.zgoLanguage = 'en-US';
-		}
- 		this.languageService.getViewElements('login', this.zgoLanguage).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);
+	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); }
-				);
+			        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); }
+			);
 	}
 }