UI language management: Shop inteface ready (English, Spanish, Portuguese)

src/app/app.component.html

@@ -28,6 +28,18 @@
        (click)="esFlagClicked()"
        height="24px"
        title="Spanish"/>
+  <img src="../assets/flag-spacer.png"
+       height="24px">     
+  <img *ngIf="zgoLanguage == 'br-US'" 
+       src="../assets/zgo-brazil-flag-default.png" 
+       (click)="brFlagClicked()"
+       height="24px"
+       title="Spanish (Default)"/>
+  <img *ngIf="zgoLanguage != 'br-US'" 
+       src="../assets/zgo-brazil-flag.png" 
+       (click)="brFlagClicked()"
+       height="24px"
+       title="Spanish"/>
 </div> 
 <div class="footer" align="center">
   <p>&copy; 2023 Vergara Technologies LLC</p>

src/app/app.component.ts

@@ -55,5 +55,12 @@ export class AppComponent {
     }
   }
 
+  brFlagClicked() {
+    if ( this.zgoLanguage != 'br-US' ) {
+      localStorage.setItem('zgo_language','br-US');
+      window.location.reload();
+    }
+  }
+
 }
 

src/app/header/header.component.html

@@ -4,8 +4,8 @@
 	</span>
 	<span class="spacer"></span>
 	<span align="center">
-		<p class="mini text">Currency: {{ getCurrency() }}</p>
+		<p class="mini text"> {{ vE.headerGetCurrency }} {{ getCurrency() }}</p>
-		<p class="mini text">Last block:</p>
+		<p class="mini text">{{ vE.headerLastBlock }} </p>
 		<p class="mini text">{{heightUpdate | async}}</p>
 	</span>
 	<span>

src/app/header/header.component.ts

@@ -1,13 +1,16 @@
 import  {Component, OnInit, OnDestroy} from '@angular/core';
 import { MatDialog, MatDialogConfig} from '@angular/material/dialog';
-import {FullnodeService} from '../fullnode.service';
+import { FullnodeService } from '../fullnode.service';
 import { Router } from '@angular/router';
 import { UserService } from '../user.service';
 import { CancelComponent } from '../cancel/cancel.component';
-import {Subscription, Observable} from 'rxjs';
+import { Subscription, Observable } from 'rxjs';
 
 import {Owner} from '../owner.model';
 
+import { LanguageService } from '../language.service';
+import { LanguageData } from '../language.model';
+
 @Component({
 	selector: 'app-header',
 	templateUrl: './header.component.html',
@@ -49,11 +52,21 @@ export class HeaderComponent implements OnInit, OnDestroy {
 	public ownerUpdate: Observable<Owner>;
 	public uZaddrUpdate: Observable<string>;
 
+    //
+    // Language Support
+    //
+    vE = {
+    	headerGetCurrency : '',
+    	headerLastBlock : ''
+    }
+    //
+    // ------------------------------------------------------------
 	constructor(
 		public fullnodeService: FullnodeService,
 		public userService: UserService,
 		private dialog: MatDialog,
-		private router: Router
+		private router: Router,
+		private languageService: LanguageService
 	){
 		this.heightUpdate = fullnodeService.heightUpdate;
 		this.uZaddrUpdate = userService.uZaddrUpdate;
@@ -63,8 +76,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
 		});
 	}
 
-
 	ngOnInit(){
+        this.chgUILanguage();
 	}
 
 	ngOnDestroy(){
@@ -93,4 +106,21 @@ export class HeaderComponent implements OnInit, OnDestroy {
 			}
 		});
 	}
+
+	chgUILanguage(){
+        console.log('HEADER.chgUILanguage Called ');
+ 		this.languageService.getViewElements('header').subscribe(
+				response => { 
+					console.log('Received >> ', response );
+					console.log('Language Code : ', response.language);
+					console.log('Component Name : ',response.component);
+					console.log('Language data : ',response.data);
+
+			        this.vE.headerLastBlock = response.data.header_last_block;
+			        this.vE.headerGetCurrency = response.data.header_get_currency;
+			    },
+				error  => { console.log('Error >> ',error); }
+			);
+	}
+
 }

src/app/items/item-add/item-add.component.html

@@ -1,4 +1,4 @@
-<div  class='itemDataTitle'>Add to Order</div>
+<div  class='itemDataTitle'>{{ vE.itemaddAdd2Order }}</div>
 
 <div class='container'>
 	<mat-dialog-content [formGroup]="orderForm">
@@ -9,13 +9,15 @@
 	</mat-dialog-content>
 
 	<div style="display: flex;
-				justify-content: space-between;">
+				justify-content: space-between;
+				margin-top: 20px;
+				padding: 20px;">
 		<button mat-raised-button 
 				class="text" 
-				(click)="close()">Cancel</button>
+				(click)="close()">{{ vE.itemaddCancelBtn }}</button>
 		<button mat-raised-button 
 				class="text" 
 				color="primary" 
-				(click)="save()">Add</button>
+				(click)="save()">{{ vE.itemaddSaveBtn }}</button>
 	</div>
 </div>

src/app/items/item-add/item-add.component.ts

@@ -4,6 +4,9 @@ import { UntypedFormBuilder, Validators, UntypedFormGroup, FormControl } from '@
 import { LineItem } from '../lineitem.model';
 import { Order } from '../../order/order.model';
 
+import { LanguageService } from '../../language.service';
+import { LanguageData } from '../../language.model';
+
 @Component({
 	selector: 'app-item-add',
 	templateUrl: './item-add.component.html',
@@ -15,8 +18,18 @@ export class ItemAddComponent implements OnInit {
 	orderForm: UntypedFormGroup;
 	lineItem: LineItem;
 	//order: Order;
-
+    //
+    // Language Support
+    //
+    vE = {
+    	itemaddAdd2Order : '',
+    	itemaddCancelBtn : '',
+    	itemaddSaveBtn : ''
+    }
+    //
+    // ------------------------------------------------------------
 	constructor(
+		private languageService : LanguageService,
 		private fb: UntypedFormBuilder,
 		private dialogRef: MatDialogRef<ItemAddComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: LineItem
@@ -32,6 +45,7 @@ export class ItemAddComponent implements OnInit {
 	}
 
 	ngOnInit() {
+        this.chgUILanguage();
 	}
 
 	close() {
@@ -42,4 +56,22 @@ export class ItemAddComponent implements OnInit {
 		this.lineItem.qty = this.orderForm.value.qty;
 		this.dialogRef.close(this.lineItem);
 	}
+
+	chgUILanguage(){
+        console.log('ITEMADD.chgUILanguage Called ');
+ 		this.languageService.getViewElements('itemadd').subscribe(
+				response => { 
+					console.log('Received >> ', response );
+					console.log('Language Code : ', response.language);
+					console.log('Component Name : ',response.component);
+					console.log('Language data : ',response.data);
+
+			        this.vE.itemaddAdd2Order = response.data.itemadd_add_2order;
+			    	this.vE.itemaddCancelBtn = response.data.itemadd_cancel_btn;
+			    	this.vE.itemaddSaveBtn = response.data.itemadd_save_btn;
+			    },
+				error  => { console.log('Error >> ',error); }
+			);
+	}
+
 }

src/app/items/item-create/item-create.component.html

@@ -1,11 +1,11 @@
 
-<div  class='itemDataTitle'>Add Item</div>
+<div  class='itemDataTitle'>{{ vE.itemcreateAddItem }}</div>
 
 <div class='container' style="margin-top: 20px;">
 	<mat-dialog-content [formGroup]="form">
 		<span style="line-height: 10px;"></span>
 		<mat-form-field class="text" [style.width.%]="100">
-			<mat-label>Item</mat-label>
+			<mat-label>{{ vE.itemcreateItemLbl }}</mat-label>
 			<input type="hidden" formControlName="id">
 			<input matInput 
 				   placeholder="Item" 
@@ -13,7 +13,7 @@
 				   maxlength="16">
 		</mat-form-field >
 		<mat-form-field class="text" [style.width.%]="100">
-			<mat-label>Description</mat-label>
+			<mat-label>{{ vE.itemcreateItemDescr }}</mat-label>
 			<textarea matInput 
 					  placeholder="Description" 
 					  formControlName="description"
@@ -22,18 +22,20 @@
     				  		 overflow:auto;"></textarea>
 		</mat-form-field>
 		<mat-form-field class="text" [style.width.%]="100">
-			<mat-label>Price</mat-label>
+			<mat-label>{{ vE.itemcreateItemPrice }}</mat-label>
 			<input matInput type="number" placeholder="Price" formControlName="cost">
 			<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
-				<div *ngIf="form.controls['cost'].errors?.pattern">Use only numbers</div>
+				<div *ngIf="form.controls['cost'].errors?.pattern">{{ vE.itemcreateUseNums }}</div>
 			</div>
 		</mat-form-field>
 	</mat-dialog-content>
 
 	<div style="display: flex;
-				justify-content: space-between;">
+				justify-content: space-between;
-		<button mat-raised-button class="text" (click)="close()">Close</button>
+				margin-top: 20px;
-		<button mat-raised-button class="text" color="primary" (click)="save()">Save</button>
+				padding: 20px;">
+		<button mat-raised-button class="text" (click)="close()">{{ vE.itemcreateCloseBtn }}</button>
+		<button mat-raised-button class="text" color="primary" (click)="save()">{{ vE.itemcreateSaveBtn }}</button>
 	</div>		
 
 </div>

src/app/items/item-create/item-create.component.ts

@@ -3,6 +3,8 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial
 import { UntypedFormBuilder, Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { Item } from '../item.model';
 
+import { LanguageService } from '../../language.service';
+import { LanguageData } from '../../language.model';
 
 @Component({
 	selector: 'app-item-create',
@@ -15,8 +17,22 @@ export class ItemCreateComponent implements OnInit {
 	form: UntypedFormGroup;
 	id: string | undefined = '';
 	numberRegEx = /\d*\.?\d{1,2}/;
-
+    //
+    // Language Support
+    //
+    vE = {
+    	itemcreateAddItem : '',
+    	itemcreateItemLbl : '',
+    	itemcreateItemDescr : '',
+    	itemcreateItemPrice : '',
+    	itemcreateUseNums : '',
+    	itemcreateCloseBtn : '',
+    	itemcreateSaveBtn : ''
+    }
+    //
+    // ------------------------------------------------------------
 	constructor(
+		private languageService : LanguageService,
 		private fb: UntypedFormBuilder,
 		private dialogRef: MatDialogRef<ItemCreateComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: Item
@@ -46,6 +62,7 @@ export class ItemCreateComponent implements OnInit {
 	}
 
 	ngOnInit () {
+        this.chgUILanguage();
 	}
 
 	save() {
@@ -56,4 +73,25 @@ export class ItemCreateComponent implements OnInit {
 	close () {
 		this.dialogRef.close();
 	}
+
+	chgUILanguage(){
+        console.log('ITEMLREATE.chgUILanguage Called ');
+ 		this.languageService.getViewElements('itemcreate').subscribe(
+				response => { 
+					console.log('Received >> ', response );
+					console.log('Language Code : ', response.language);
+					console.log('Component Name : ',response.component);
+					console.log('Language data : ',response.data);
+
+			    	this.vE.itemcreateAddItem = response.data.itemcreate_add_item;
+			    	this.vE.itemcreateItemLbl = response.data.itemcreate_item_lbl;
+			    	this.vE.itemcreateItemDescr = response.data.itemcreate_item_descr;
+			    	this.vE.itemcreateItemPrice = response.data.itemcreate_item_price;
+			    	this.vE.itemcreateUseNums = response.data.itemcreate_use_nums;
+			    	this.vE.itemcreateCloseBtn = response.data.itemcreate_close_btn;
+			    	this.vE.itemcreateSaveBtn = response.data.itemcreate_save_btn;
+			    },
+				error  => { console.log('Error >> ',error); }
+			);
+	}
 }

src/app/items/item-delete/item-delete.component.html

@@ -1,4 +1,4 @@
-<div  class='itemDataTitle'>Delete Item</div>
+<div  class='itemDataTitle'>{{ vE.itemdelDelItem }}</div>
 
 <div class='container' style="margin-top: 20px;">
 	<mat-dialog-content >
@@ -6,15 +6,17 @@
 		<span style="line-height: 10px;"></span>
 
 		<mat-dialog-content>
-			<p class="text">Are you sure you want to delete "{{item.name}}"?</p>
+			<p class="text">{{ vE.itemdelConfirmDel }}"{{item.name}}"?</p>
 		</mat-dialog-content>
 
 	</mat-dialog-content>
 
 	<div style="display: flex;
-				justify-content: space-between;">
+				justify-content: space-between;
-		<button mat-raised-button class="text" (click)="close()">Close</button>
+				margin-top: 20px;
-		<button mat-raised-button class="text" color="primary" (click)="save()">Delete</button>
+				padding: 20px;">
+		<button mat-raised-button class="text" (click)="close()">{{ vE.itemdelCloseBtn }}</button>
+		<button mat-raised-button class="text" color="primary" (click)="save()">{{ vE.itemdelDeleteBtn }}</button>
 	</div>	
 		
 </div>

src/app/items/item-delete/item-delete.component.ts

@@ -2,6 +2,8 @@ import { Inject, Component, OnInit, OnDestroy, ViewEncapsulation } from '@angula
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Item } from '../item.model';
 
+import { LanguageService } from '../../language.service';
+import { LanguageData } from '../../language.model';
 
 @Component({
 	selector: 'app-item-delete',
@@ -11,8 +13,19 @@ import { Item } from '../item.model';
 
 export class ItemDeleteComponent implements OnInit{
 	item: Item;
-
+    //
+    // Language Support
+    //
+    vE = {
+    	itemdelDelItem : '',
+    	itemdelConfirmDel : '',
+    	itemdelCloseBtn : '',
+    	itemdelDeleteBtn : ''
+    }
+    //
+    // ------------------------------------------------------------
 	constructor(
+		private languageService : LanguageService,
 		private dialogRef: MatDialogRef<ItemDeleteComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: Item
 	) {
@@ -20,6 +33,7 @@ export class ItemDeleteComponent implements OnInit{
 	}
 
 	ngOnInit() {
+        this.chgUILanguage();
 	}
 
 	save() {
@@ -29,4 +43,23 @@ export class ItemDeleteComponent implements OnInit{
 	close() {
 		this.dialogRef.close();
 	}
+
+	chgUILanguage(){
+        console.log('ITEMDEL.chgUILanguage Called ');
+ 		this.languageService.getViewElements('itemdel').subscribe(
+				response => { 
+					console.log('Received >> ', response );
+					console.log('Language Code : ', response.language);
+					console.log('Component Name : ',response.component);
+					console.log('Language data : ',response.data);
+
+			        this.vE.itemdelDelItem = response.data.itemdel_del_item;
+			        this.vE.itemdelConfirmDel = response.data.itemdel_confirm_del;
+			    	this.vE.itemdelCloseBtn = response.data.itemdel_close_btn;
+			    	this.vE.itemdelDeleteBtn = response.data.itemdel_delete_btn;
+			    },
+				error  => { console.log('Error >> ',error); }
+			);
+	}
+
 }

src/app/items/item-edit/item-edit.component.html

@@ -1,11 +1,11 @@
 
-<div  class='itemDataTitle'>Edit Item</div>
+<div  class='itemDataTitle'>{{ vE.itemeditEditItem }}</div>
 
 <div class='container' style="margin-top: 20px;">
 	<mat-dialog-content [formGroup]="form">
 		<span style="line-height: 10px;"></span>
 		<mat-form-field class="text" [style.width.%]="100">
-			<mat-label>Item</mat-label>
+			<mat-label>{{ vE.itemeditItemLabel}}</mat-label>
 			<input type="hidden" formControlName="id">
 			<input matInput 
 				   placeholder="Item" 
@@ -13,7 +13,7 @@
 				   maxlength="16">
 		</mat-form-field >
 		<mat-form-field class="text" [style.width.%]="100">
-			<mat-label>Description</mat-label>
+			<mat-label>{{ vE.itemeditItemDescr }}</mat-label>
 			<textarea matInput 
 					  placeholder="Description" 
 					  formControlName="description"
@@ -22,7 +22,7 @@
     				  		 overflow:auto;"></textarea>
 		</mat-form-field>
 		<mat-form-field class="text" [style.width.%]="100">
-			<mat-label>Price</mat-label>
+			<mat-label>{{ vE.itemeditItemPrice }}</mat-label>
 			<input matInput type="number" placeholder="Price" formControlName="cost">
 			<div *ngIf="!form.controls['cost'].valid && form.controls['cost'].touched">
 				<div *ngIf="form.controls['cost'].errors?.pattern">Use only numbers</div>
@@ -31,9 +31,11 @@
 	</mat-dialog-content>
 
 	<div style="display: flex;
-				justify-content: space-between;">
+				justify-content: space-between;
-		<button mat-raised-button class="text" (click)="close()">Close</button>
+				margin-top: 20px;
-		<button mat-raised-button class="text" color="primary" (click)="save()">Save</button>
+				padding: 20px;">
+		<button mat-raised-button class="text" (click)="close()">{{ vE.itemeditCloseBtn }}</button>
+		<button mat-raised-button class="text" color="primary" (click)="save()">{{ vE.itemeditSaveBtn }}</button>
 	</div>		
 
 </div>

src/app/items/item-edit/item-edit.component.ts

@@ -3,6 +3,8 @@ import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dial
 import { UntypedFormBuilder, Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { Item } from '../item.model';
 
+import { LanguageService } from '../../language.service';
+import { LanguageData } from '../../language.model';
 
 @Component({
 	selector: 'app-item-edit',
@@ -15,8 +17,21 @@ export class ItemEditComponent implements OnInit {
 	form: UntypedFormGroup;
 	id: string | undefined = '';
 	numberRegEx = /\d*\.?\d{1,2}/;
-
+    //
+    // Language Support
+    //
+    vE = {
+    	itemeditEditItem : '',
+    	itemeditItemLabel : '',
+    	itemeditItemDescr : '',
+    	itemeditItemPrice : '',
+    	itemeditCloseBtn : '',
+    	itemeditSaveBtn : ''
+    }
+    //
+    // ------------------------------------------------------------
 	constructor(
+		private languageService : LanguageService,
 		private fb: UntypedFormBuilder,
 		private dialogRef: MatDialogRef<ItemEditComponent>,
 		@Inject(MAT_DIALOG_DATA) public data: Item
@@ -46,6 +61,7 @@ export class ItemEditComponent implements OnInit {
 	}
 
 	ngOnInit () {
+        this.chgUILanguage();
 	}
 
 	save() {
@@ -56,4 +72,25 @@ export class ItemEditComponent implements OnInit {
 	close () {
 		this.dialogRef.close();
 	}
+
+	chgUILanguage(){
+        console.log('ITEMEDIT.chgUILanguage Called ');
+ 		this.languageService.getViewElements('itemedit').subscribe(
+				response => { 
+					console.log('Received >> ', response );
+					console.log('Language Code : ', response.language);
+					console.log('Component Name : ',response.component);
+					console.log('Language data : ',response.data);
+
+			        this.vE.itemeditEditItem = response.data.itemedit_edit_item;
+			        this.vE.itemeditItemLabel = response.data.itemedit_item_label;
+			    	this.vE.itemeditItemDescr = response.data.itemedit_item_descr;
+			    	this.vE.itemeditItemPrice = response.data.itemedit_item_price;
+			    	this.vE.itemeditCloseBtn = response.data.itemedit_close_btn;
+			    	this.vE.itemeditSaveBtn = response.data.itemedit_save_btn;
+			    },
+				error  => { console.log('Error >> ',error); }
+			);
+	}
+
 }

src/app/items/item-list/item-list.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="items.length > 0">
 	<mat-toolbar color="accent">
 		<span align="center" class="text">
-			Available Items:
+			{{ vE.itemlistAvailItems }}
 		</span>
 		<span class="spacer"></span>
 		<span align="center">
@@ -82,7 +82,7 @@
 </div>
 <div *ngIf = "items.length <= 0">
 	<div class="availableItems" >
-		No items yet!
+	    {{ vE.itemlistListEmpty }}
 		<button mat-raised-button 
 				class="buttons-class"
 				(click)="openDialog()">

src/app/items/item-list/item-list.component.ts

@@ -16,12 +16,15 @@ import { ItemDeleteComponent } from '../item-delete/item-delete.component';
 import { ItemAddComponent } from '../item-add/item-add.component';
 import { NotifierService } from '../../notifier.service';
 
+import { LanguageService } from '../../language.service';
+import { LanguageData } from '../../language.model';
+
 @Component({
 	selector: 'app-item-list',
 	templateUrl: './item-list.component.html',
 	styleUrls: ['./item-list.component.css']
 })
-
+ 
 export class ItemListComponent implements OnInit{
 
 	@Input() zecPrice: number;
@@ -61,13 +64,23 @@ export class ItemListComponent implements OnInit{
 	public ownerUpdate: Observable<Owner>;
 	public itemsUpdate: Observable<Item[]>;
 
+    //
+    // Language Support
+    //
+    vE = {
+    	itemlistAvailItems : '',
+    	itemlistListEmpty : ''
+    }
+    //
+    // ------------------------------------------------------------
 	constructor(
 		public itemService: ItemService,
 		userService: UserService,
 		public orderService: OrderService,
 		public fullnodeService: FullnodeService,
 		private dialog: MatDialog,
-		private notifierService: NotifierService )
+		private notifierService: NotifierService,
+		private languageService: LanguageService )
 	{
 			this.ownerUpdate = userService.ownerUpdate;
 			this.itemsUpdate = itemService.itemsUpdated;
@@ -82,6 +95,7 @@ export class ItemListComponent implements OnInit{
 	}
 
 	ngOnInit(){
+        this.chgUILanguage();
 		this.itemsUpdate.subscribe((items) => {
 			this.items = items;
 		});
@@ -196,5 +210,22 @@ export class ItemListComponent implements OnInit{
 	getCurrency(){
 		return this.owner.currency.toUpperCase();
 	}
+
+	chgUILanguage(){
+        console.log('ITEMLIST.chgUILanguage Called ');
+ 		this.languageService.getViewElements('itemlist').subscribe(
+				response => { 
+					console.log('Received >> ', response );
+					console.log('Language Code : ', response.language);
+					console.log('Component Name : ',response.component);
+					console.log('Language data : ',response.data);
+
+			        this.vE.itemlistListEmpty = response.data.itemlist_list_empty;
+			        this.vE.itemlistAvailItems = response.data.itemlist_avail_items;
+			    },
+				error  => { console.log('Error >> ',error); }
+			);
+	}
+
 }
 

src/app/login/login.component.html

@@ -27,16 +27,16 @@
 				<mat-step label="{{ vE.loginEnterPin }}">
 					<mat-card [formGroup]="pinForm">
 						<h4>
-							Check your wallet
+							{{ vE.loginCheckWallet}}
 						</h4>
 						<mat-form-field appearance="outline">
 							<mat-label>PIN</mat-label>
 							<input matInput formControlName="pinValue">
 						</mat-form-field>
-						<p *ngIf="pinError">Wrong pin!</p>
+						<p *ngIf="pinError">{{ vE.loginWrongPin }}</p>
 						<mat-card-actions>
 							<button mat-raised-button color="primary" [disabled]="!pinForm.valid" (click)="confirmPin()">
-								Confirm
+								{{ vE.loginConfirmPin }}
 							</button>
 						</mat-card-actions>
 					</mat-card>

src/app/login/login.component.ts

@@ -21,14 +21,6 @@ var QRCode = require('easyqrcodejs');
 var URLSafeBase64 = require('urlsafe-base64');
 var Buffer = require('buffer/').Buffer;
 
-interface _vE_login {
-    	login_confirm_login : string,
-    	login_connect_to_zgo : string,
-    	login_enter_pin : string,
-    	login_last_block : string,
-    	login_link_wallet : string
-}
-
 @Component({
 	selector: 'app-login',
 	templateUrl: './login.component.html',
@@ -101,7 +93,10 @@ export class LoginComponent implements OnInit, AfterViewInit {
     	loginConnectToZGo : '',
     	loginEnterPin : '',
     	loginLastBlock : '',
-    	loginLinkWallet : ''
+    	loginLinkWallet : '',
+		loginCheckWallet : '',
+		loginWrongPin : '',
+		loginConfirmPin : ''
     }
     //
     // ------------------------------------------------------------
@@ -241,14 +236,16 @@ export class LoginComponent implements OnInit, AfterViewInit {
 					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;
-				},
+			        this.vE.loginCheckWallet = response.data.login_check_wallet;
+			        this.vE.loginWrongPin = response.data.login_wrong_pin;
+			        this.vE.loginConfirmPin = response.data.login_confirm_pin;
+			    },
 				error  => { console.log('Error >> ',error); }
 			);
 	}

src/app/order/order.component.html

@@ -1,6 +1,6 @@
 <div class="noOrderMsg" 
      *ngIf="order.address.length == 0">
-	No open order!
+	{{ vE.orderNoOpenorder }} 
 </div>
 <mat-card style="margin-top: 10px;" *ngIf="order.address.length" >
 

src/app/order/order.component.ts

@@ -19,6 +19,9 @@ import { faSignOut } from '@fortawesome/free-solid-svg-icons';
 
 import { NotifierService } from '../notifier.service';
 
+import { LanguageService } from '../language.service';
+import { LanguageData } from '../language.model';
+
 @Component({
 	selector: 'app-order',
 	templateUrl: './order.component.html',
@@ -65,9 +68,16 @@ export class OrderComponent implements OnInit{
 	faChevronRight = faChevronRight;
 	faSignOut = faSignOut;
 	// -------------------------------------
-
+    //
-
+    // Language Support
+    //
+    vE = {
+    	orderNoOpenorder : ''
+    }
+    //
+    // ------------------------------------------------------------
 	constructor(
+		private languageService : LanguageService,
 		public fullnodeService: FullnodeService,
 		public orderService: OrderService,
 		private dialog: MatDialog,
@@ -111,6 +121,7 @@ export class OrderComponent implements OnInit{
 	}
 
 	ngOnInit() {
+        this.chgUILanguage();
 	}
 
 	cancelOrder() {
@@ -245,7 +256,21 @@ export class OrderComponent implements OnInit{
 				console.log('Returning to order');
 			}
 		});
-
-
 	}
+
+	chgUILanguage(){
+        console.log('ORDER.chgUILanguage Called ');
+ 		this.languageService.getViewElements('order').subscribe(
+				response => { 
+					console.log('Received >> ', response );
+					console.log('Language Code : ', response.language);
+					console.log('Component Name : ',response.component);
+					console.log('Language data : ',response.data);
+
+			        this.vE.orderNoOpenorder = response.data.order_no_openorder;
+			    },
+				error  => { console.log('Error >> ',error); }
+			);
+	}
+
 }

src/app/viewer/viewer.component.html

@@ -12,7 +12,7 @@
 	<div class="main-buttons">
 		<button mat-raised-button color="primary"
 		        [routerLink]="['/orders']">
-		   View Orders
+		   {{ vE.viewerViewOrders }} 
 		</button>
 		<button mat-icon-button color="primary"
 		        (click)="openSettings()">

src/app/viewer/viewer.component.ts

@@ -10,6 +10,8 @@ import { SettingsComponent } from '../settings/settings.component';
 import {Owner} from '../owner.model';
 import {User} from '../user.model';
 
+import { LanguageService } from '../language.service';
+import { LanguageData } from '../language.model';
 
 @Component({
 	selector: 'app-viewer',
@@ -60,12 +62,20 @@ export class ViewerComponent implements OnInit {
 	public userUpdate: Observable<User>;
 	public priceUpdate: Observable<number>;
 	orientation: boolean = false;
-
+    //
+    // Language Support
+    //
+    vE = {
+    	viewerViewOrders : ''
+    }
+    //
+    // ------------------------------------------------------------
 	constructor(
 		public fullnodeService: FullnodeService,
 		private router: Router,
 		public userService: UserService,
-		private dialog: MatDialog
+		private dialog: MatDialog,
+		private languageService: LanguageService
 	){
 		this.addrUpdate = fullnodeService.addrUpdate;
 		this.ownerUpdate = userService.ownerUpdate;
@@ -86,6 +96,7 @@ export class ViewerComponent implements OnInit {
 	}
 
 	ngOnInit(){
+        this.chgUILanguage();
 		this.orientation = (window.innerWidth <= 500);
 		this.ownerUpdate.subscribe((owner) => {
 			this.message = owner.name;
@@ -143,4 +154,20 @@ export class ViewerComponent implements OnInit {
 			});
 		});
 	}
+
+	chgUILanguage(){
+        console.log('VIEWER.chgUILanguage Called ');
+ 		this.languageService.getViewElements('viewer').subscribe(
+				response => { 
+					console.log('Received >> ', response );
+					console.log('Language Code : ', response.language);
+					console.log('Component Name : ',response.component);
+					console.log('Language data : ',response.data);
+
+			        this.vE.viewerViewOrders = response.data.viewer_view_orders;
+			    },
+				error  => { console.log('Error >> ',error); }
+			);
+	}
+
 }