UI language management: working proof of concept on Login component

src/app/language.model.ts

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

src/app/language.service.ts

@@ -1,5 +1,5 @@
 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';
@@ -10,7 +10,7 @@ import { ConfigData } from './configdata';
 
 export class LanguageService {
 
-  private baseURL = 'http://www.test.com/getlang';
+  private baseURL = 'http://localhost:8080/getlang';
 
   constructor(private http:HttpClient) { 
   }
@@ -39,7 +39,7 @@ export class LanguageService {
   getViewElements ( viewName:string, 
                     encoding:string = 'en-US' )  {
 
-    return this.http.get<any>(this.baseURL + 
+    return this.http.get<LanguageData>(this.baseURL + 
                         '/?lang_id=' + encoding +
                         '&viewname=' + viewName);
 

src/app/login/login.component.html

@@ -9,6 +9,9 @@
 <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

@@ -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');
@@ -92,14 +93,6 @@ 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 = {
     	loginConfirmLogin : '',
     	loginConnectToZGo : '',
@@ -108,6 +101,8 @@ export class LoginComponent implements OnInit, AfterViewInit {
     	loginLinkWallet : ''
     }
 
+    public zgoLanguage: string = 'en-US';
+
 	constructor(
 		private fb: UntypedFormBuilder,
 		private activatedRoute: ActivatedRoute,
@@ -163,24 +158,23 @@ export class LoginComponent implements OnInit, AfterViewInit {
 
 	ngOnInit(){
  
- 		this.languageService.getViewElements('login','es-US').subscribe(
+ 		this.languageService.getViewElements('login', this.zgoLanguage).subscribe(
 					response => { 
 						console.log('Received >> ', response );
-					    var xv = JSON.parse(response) as _vE_login;
+						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);
 
-						console.log('Last block -> ', );
+				        this.vE.loginLastBlock = response.data.login_last_block;
-/*				        this.vE.loginLastBlock = vElemObject.login_last_block;
+				        this.vE.loginConnectToZGo = response.data.login_connect_to_zgo;
-				        
+				        this.vE.loginLinkWallet = response.data.login_link_wallet;
-				        this.vE.loginConnectToZGo = vElemObject.login_connect_to_zgo;
+				        this.vE.loginConfirmLogin = response.data.login_confirm_login;
-				        this.vE.loginLinkWallet = vElemObject.login_link_wallet;
+				        this.vE.loginEnterPin = response.data.login_enter_pin;
-				        this.vE.loginConfirmLogin = vElemObject.login_confirm_login;
-				        this.vE.loginEnterPin = vElemObject.login_enter_pin;
-*/
 					},
 					error  => { console.log('Error >> ',error); }
 				);
 
-
 		this.intervalHolder = setInterval(() => {
 			this.fullnodeService.getHeight();
 			//this.userService.findUser();
@@ -252,4 +246,28 @@ export class LoginComponent implements OnInit, AfterViewInit {
 		this.UserSub.unsubscribe();
 		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);
+
+				        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); }
+				);
+	}
 }