UI language management: working proof of concept on Login component

This commit is contained in:
Rene V. Vergara A. 2023-01-28 19:09:18 -05:00
parent 458647d81b
commit 1335f6fd85
4 changed files with 48 additions and 22 deletions

View File

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

View File

@ -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);

View File

@ -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">

View File

@ -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,23 +158,22 @@ 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 = 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;
*/
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.intervalHolder = setInterval(() => {
this.fullnodeService.getHeight();
@ -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); }
);
}
}