UI language management: Order component in progress...

languages.csv

@@ -1,13 +1,106 @@
 "encode_id","view_name","view_element","view_element_text"
+"br-US","header","header_get_currency","Moeda:"
+"br-US","header","header_last_block","Último Bloco:"
+"br-US","itemadd","itemadd_add_2order","Adicionar artigo à Ordem"
+"br-US","itemadd","itemadd_cancel_btn","Cancelar"
+"br-US","itemadd","itemadd_save_btn","Adicionar"
+"br-US","itemcreate","itemcreate_add_item","Adicionar Artigo"
+"br-US","itemcreate","itemcreate_close_btn","Fechar"
+"br-US","itemcreate","itemcreate_item_descr","Descrição"
+"br-US","itemcreate","itemcreate_item_lbl","Artigo"
+"br-US","itemcreate","itemcreate_item_price","Preço"
+"br-US","itemcreate","itemcreate_save_btn","Salvar"
+"br-US","itemcreate","itemcreate_use_nums","Use apenas números"
+"br-US","itemdel","itemdel_close_btn","Fechar"
+"br-US","itemdel","itemdel_confirm_del","Tem certeza de que deseja apagar "
+"br-US","itemdel","itemdel_delete_btn","Eliminar"
+"br-US","itemdel","itemdel_del_item","Eliminar Artigo"
+"br-US","itemedit","itemedit_close_btn","Fechar"
+"br-US","itemedit","itemedit_edit_item","Editar artigo"
+"br-US","itemedit","itemedit_item_descr","Descrição"
+"br-US","itemedit","itemedit_item_label","Artigo"
+"br-US","itemedit","itemedit_item_price","Preço:"
+"br-US","itemedit","itemedit_save_btn","Salvar"
+"br-US","itemlist","itemlist_avail_items","Itens disponíveis:"
+"br-US","itemlist","itemlist_list_empty","Ainda não há itens"
+"br-US","login","login_check_wallet","Verifique sua carteira!!"
+"br-US","login","login_confirm_login","ZGo confirma seu login na cadeia Zcash"
+"br-US","login","login_confirm_pin","Confirmar PIN"
+"br-US","login","login_connect_to_zgo","Conecte sua carteira ao ZGo"
+"br-US","login","login_enter_pin","Insira o PIN enviado pela ZGo para confirmar a propriedade da carteira:"
+"br-US","login","login_last_block","Último bloco visto:"
+"br-US","login","login_link_wallet","Conecte sua carteira"
+"br-US","login","login_wrong_pin","PIN errado!!"
+"br-US","main","main_price_data","Preços fornecidos pela CoinGecko API"
+"br-US","order","order_no_openorder","Sem ordens abertas!!"
+"br-US","viewer","viewer_view_orders","Ver Ordens"
+"en-US","header","header_get_currency","Currency:"
+"en-US","header","header_last_block","Last Block:"
+"en-US","itemadd","itemadd_add_2order","Add Item to Order"
+"en-US","itemadd","itemadd_cancel_btn","Cancel"
+"en-US","itemadd","itemadd_save_btn","Add"
+"en-US","itemcreate","itemcreate_add_item","Add Item"
+"en-US","itemcreate","itemcreate_close_btn","Close"
+"en-US","itemcreate","itemcreate_item_descr","Description"
+"en-US","itemcreate","itemcreate_item_lbl","Item"
+"en-US","itemcreate","itemcreate_item_price","Price"
+"en-US","itemcreate","itemcreate_save_btn","Save"
+"en-US","itemcreate","itemcreate_use_nums","Use only numbers"
+"en-us","itemdel","itemdel_close_btn","Close"
+"en-US","itemdel","itemdel_confirm_del","Are you sure you want to delete "
+"en-US","itemdel","itemdel_delete_btn","Delete"
+"en-US","itemdel","itemdel_del_item","Delete Item"
+"en-US","itemedit","itemedit_close_btn","Close"
+"en-US","itemedit","itemedit_edit_item","Edit Item"
+"en-US","itemedit","itemedit_item_descr","Description"
+"en-US","itemedit","itemedit_item_label","Item"
+"en-US","itemedit","itemedit_item_price","Price:"
+"en-US","itemedit","itemedit_save_btn","Save"
+"en-US","itemlist","itemlist_avail_items","Available Items:"
+"en-US","itemlist","itemlist_list_empty","No items yet!"
+"en-US","login","login_check_wallet","Check your wallet!!"
 "en-US","login","login_confirm_login","ZGo confirms your login on the Zcash blockhain"
+"en-US","login","login_confirm_pin","Confirm PIN"
 "en-US","login","login_connect_to_zgo","Connect your wallet to ZGo"
 "en-US","login","login_enter_pin","Enter the PIN sent by ZGo to confirm wallet ownership:"
 "en-US","login","login_last_block","Last block seen:"
 "en-US","login","login_link_wallet","Link Wallet"
+"en-US","login","login_wrong_pin","Wrong PIN!!"
 "en-US","main","main_price_data","Price data provided by CoinGecko API"
+"en-US","order","order_no_openorder","No open orders!!"
+"en-US","viewer","viewer_view_orders","View Orders"
+"es-US","header","header_get_currency","Moneda:"
+"es-US","header","header_last_block","Último Bloque:"
+"es-US","itemadd","itemadd_add_2order","Agregar Item a la orden"
+"es-US","itemadd","itemadd_cancel_btn","Cancelar"
+"es-US","itemadd","itemadd_save_btn","Agregar"
+"es-US","itemcreate","itemcreate_add_item","Agregar Item"
+"es-US","itemcreate","itemcreate_close_btn","Cerrar"
+"es-US","itemcreate","itemcreate_item_descr","Descripcion"
+"es-US","itemcreate","itemcreate_item_lbl","Item"
+"es-US","itemcreate","itemcreate_item_price","Precio"
+"es-US","itemcreate","itemcreate_save_btn","Grabar"
+"es-US","itemcreate","itemcreate_use_nums","Use solo números"
+"es-US","itemdel","itemdel_close_btn","Cerrar"
+"es-US","itemdel","itemdel_confirm_del","Esta seguro de querer eliminar el item "
+"es-US","itemdel","itemdel_delete_btn","Eliminar"
+"es-US","itemdel","itemdel_del_item","Eliminar Item"
+"es-US","itemedit","itemedit_close_btn","Cerrar"
+"es-US","itemedit","itemedit_edit_item","Editar Item"
+"es-US","itemedit","itemedit_item_descr","Descripcion"
+"es-US","itemedit","itemedit_item_label","Item"
+"es-US","itemedit","itemedit_item_price","Precio:"
+"es-US","itemedit","itemedit_save_btn","Guardar"
+"es-US","itemlist","itemlist_avail_items","Items Disponibles:"
+"es-US","itemlist","itemlist_list_empty","No existen items!"
+"es-US","login","login_check_wallet","Verifique su billetera!!"
 "es-US","login","login_confirm_login","ZGo confirma su ingreso en la cadena de Zcash"
+"es-US","login","login_confirm_pin","Confirme el PIN"
 "es-US","login","login_connect_to_zgo","Conectar su billetera a ZGo"
 "es-US","login","login_enter_pin","Ingrese el PIN enviado por ZGo para confirmar su billetera:"
 "es-US","login","login_last_block","Ultimo Bloque Verificado: "
 "es-US","login","login_link_wallet","Asociar Billetera"
+"es-US","login","login_wrong_pin","PIN Invalido!!"
 "es-US","main","main_price_data","Precios provistos por API de CoinGecko"
+"es-US","order","order_no_openorder","Sin órdenes abiertas!!"
+"es-US","viewer","viewer_view_orders","Ver Ordenes"

src/app/app.component.css

@@ -8,5 +8,6 @@ main{
 }
 
 .tiny{
-	font-size: 10px;
+	font-size: 12px;
+	margin-top: 3px;
 }

src/app/app.component.html

@@ -41,9 +41,12 @@
        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">{{ vE.mainPriceData }}</p>
+<div class="footer" align="center" 
+     style="margin-top: 10px;
+            margin-bottom: 20px;">
+  <div >&copy; 2023 Vergara Technologies LLC</div>
+  <div class="tiny">Version 1.4.1</div>
+  <div class="tiny">{{ vE.mainPriceData }}</div>
 </div>
+<div></div>
 

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

@@ -21,11 +21,11 @@ export class ItemEditComponent implements OnInit {
     // Language Support
     //
     vE = {
-    	itemeditEditItem : '',
-    	itemeditItemLabel : '',
-    	itemeditItemDescr : '',
-    	itemeditItemPrice : '',
     	itemeditCloseBtn : '',
+    	itemeditEditItem : '',
+    	itemeditItemDescr : '',
+    	itemeditItemLabel : '',
+    	itemeditItemPrice : '',
     	itemeditSaveBtn : ''
     }
     //

src/app/notifier.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatSnackBar, MatSnackBarHorizontalPosition,
+         MatSnackBarVerticalPosition } from '@angular/material/snack-bar';
 import { NotifierComponent } from './notifier/notifier.component';
 
 @Injectable({
@@ -7,18 +8,23 @@ import { NotifierComponent } from './notifier/notifier.component';
 })
 export class NotifierService {
 
-  constructor(private snackBar:MatSnackBar) { }
+  constructor(public snackBar:MatSnackBar,
+              ) { }
 
-  showNotification(displayMessage:string, buttonText: string, messageType: 'error' | 'success' | 'warning') {
+  showNotification(displayMessage:string, 
+                   buttonText: string, 
+                   messageType: 'error' | 'success' | 'warning',
+                   messageTypeStr : string = '') {
     this.snackBar.openFromComponent(NotifierComponent, {
       data: {
         message: displayMessage,
         buttonText: buttonText,
-        type : messageType
+        type : messageType,
+        typelbl : messageTypeStr
       },  
       duration: 4000,
       verticalPosition: 'top',
-      panelClass: [messageType] 
+      panelClass: ['panelClass'],
     });
     this.playSound();
   }

src/app/notifier/notifier.component.css

@@ -1,37 +1,23 @@
-
-.notifier {
-	font-family: 'Spartan', sans-serif;
-	color: black;
-	font-size: 16px;
-	text-align: center;
-}
-
-.notifier-type {
-	border: 2px solid;
-	border-color: lightcoral;
-	background: #ff5722; 
-	font-size: 26px;
-	font-weight: 700;
-	height: 30px;
-	color: white;
+.panelClass {
+	font-family: 'Spartan' sans-serif;
 	justify-content: center;
+	height: 100px;
 	text-align: center;
 	align-items: center;
 	vertical-align: center;
 }
 
-::ng-deep .mat-snack-bar-container.error {
-	background: navajowhite; 
+.notifier-type {
+	font-size: 30px;
+	font-weight: 700;
+	height: 40px;
 	color: red;
 }
 
-::ng-deep .mat-snack-bar-container.success {
-	background: whitesmoke; 
-	color: black;
-}
-
-::ng-deep .mat-snack-bar-container.warning {
-	background: antiquewhite; 
-	color: black;
-	
+.notifier-msg {
+	font-size: 16px;
+	font-weight: 700;
+	color: white;
+	height: 30px;
+	margin-bottom: 20 !important;
 }

src/app/notifier/notifier.component.html

@@ -1,11 +1,10 @@
-
-<div class="notifier" >
+<div class="panelClass">
 	<div class="notifier-type">
-		{{ data.type | titlecase }}
+		{{ data.typelbl | titlecase }}
 	</div>
-	<p>
+	<div class="notifier-msg">
 		{{ data.message }}
-	</p>
+	</div>
 	<div >
 		<button mat-flat-button (click)="sbRef.dismiss()"
 				style="justify-content: center;

src/app/notifier/notifier.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit, Inject}  from '@angular/core';
+import { Component, OnInit, Inject, ViewEncapsulation}  from '@angular/core';
 import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-notifier',
   templateUrl: './notifier.component.html',
-  styleUrls: ['./notifier.component.css']
+  styleUrls: ['./notifier.component.css'],
+  encapsulation: ViewEncapsulation.None
 })
 
 export class NotifierComponent implements OnInit {
@@ -15,6 +16,7 @@ export class NotifierComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
+    
   }
 
 }

src/app/order/order.component.ts

@@ -72,7 +72,15 @@ export class OrderComponent implements OnInit{
     // Language Support
     //
     vE = {
-    	orderNoOpenorder : ''
+    	orderNoOpenorder : '',
+    	orderCancelOrder : '',
+    	orderConfirmCancel : '',
+    	orderRemoveItem : '',
+    	orderConfirmRemove : '',
+    	orderConfirmRemove1 : '',
+    	orderCancelOk : '',
+    	orderNotservClose : '',
+    	orderNotservSuccess : ''
     }
     //
     // ------------------------------------------------------------
@@ -129,7 +137,8 @@ export class OrderComponent implements OnInit{
 
 		dialogConfig.disableClose = true;
 		dialogConfig.autoFocus = true;
-		dialogConfig.data = {title: 'Cancel Order?', msg: 'Are you sure you want to cancel the order?'};
+		dialogConfig.data = {title: this.vE.orderCancelOrder, 
+		                     msg: this.vE.orderConfirmCancel };
 
 		const dialogRef = this.dialog.open(CancelComponent, dialogConfig);
 		dialogRef.afterClosed().subscribe((val) => {
@@ -138,8 +147,10 @@ export class OrderComponent implements OnInit{
 				this.orderService.cancelOrder(this.order._id!).subscribe((response) => {
 					this.orderService.getOrder();
 				this.notifierService
-				    .showNotification("Order successfully cancelled!",
-			    	              "Close","success");
+				    .showNotification(this.vE.orderCancelOk,
+			    	              this.vE.orderNotservClose,
+			    	              'success',
+			    	              this.vE.orderNotservSuccess);
 				});
 			} else {
 				console.log('Returning to page');
@@ -233,10 +244,10 @@ export class OrderComponent implements OnInit{
 
 		dialogConfig.disableClose = true;
 		dialogConfig.autoFocus = true;
-		dialogConfig.data = {title: 'Remove Item?',
-		                     msg: 'Are you sure you want to remove   <<' + 
+		dialogConfig.data = {title: this.vE.orderRemoveItem,
+		                     msg: this.vE.orderConfirmRemove + 
 		                          item.name + ' x ' + item.qty +
-		                          '>>   from this order?'};
+		                          this.vE.orderConfirmRemove1 };
 		const dialogRef = this.dialog.open(CancelComponent, dialogConfig);
 		dialogRef.afterClosed().subscribe((val) => {
 			if (val) {
@@ -268,6 +279,15 @@ export class OrderComponent implements OnInit{
 					console.log('Language data : ',response.data);
 
 			        this.vE.orderNoOpenorder = response.data.order_no_openorder;
+			        this.vE.orderCancelOrder = response.data.order_cancel_order;
+			        this.vE.orderConfirmCancel = response.data.order_confirm_cancel;
+			        this.vE.orderRemoveItem = response.data.order_remove_item;
+			        this.vE.orderConfirmRemove = response.data.order_confirm_remove;
+			        this.vE.orderConfirmRemove1 = response.data.order_confirm_remove1; 
+			        this.vE.orderCancelOk = response.data.order_cancel_ok;
+			        this.vE.orderNotservClose = response.data.order_notserv_close;
+			        this.vE.orderNotservSuccess = response.data.order_notserv_success;
+			         
 			    },
 				error  => { console.log('Error >> ',error); }
 			);