Vergara_Tech/zgo
Vergara_Tech/zgo
2
1
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity

UI language management: Global UI revision - Part 1

Browse source
This commit is contained in:
Rene V. Vergara A. 2023-03-02 21:59:33 -05:00
parent 1dddcb74ff
commit 23532f12a2
17 changed files with 209 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/app/cancel/cancel.component.html
View file

@ -1,19 +1,32 @@
<div class='cancelTitle'>{{ vE.cancelTitle }}</div> <div class='cancelTitle'>{{title}}</div>
<div class="container" > <div class="container" >
<mat-dialog-content> <mat-dialog-content
<p class="text">{{msg}}</p> style="font-family: 'Spartan', sans-serif;
display: flex;
justify-content: space-between;
margin-top: 20px;
padding: 20px;">
{{msg1}}<br>{{msg2}}
</mat-dialog-content> </mat-dialog-content>
<div style="display: flex; <div style="font-family: 'Spartan', sans-serif;
display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 20px; margin-top: 20px;
padding: 20px;"> padding: 20px;">
<button mat-raised-button <button mat-raised-button
style="background-color: #ff5722; style="background-color: #ff5722;
font-family: 'Spartan', sans-serif;
font-size: 14px;
font-weight: 600;
color : white;" color : white;"
(click)="confirm()"> (click)="confirm()">
{{ vE.cancelConfirmBtn }} {{ vE.cancelConfirmBtn }}
</button> </button>
<button mat-raised-button (click)="close()"> <button mat-raised-button
style="font-family: 'Spartan', sans-serif;
font-size: 14px;
font-weight: 600;"
(click)="close()">
{{ vE.cancelDismissBtn }} {{ vE.cancelDismissBtn }}
</button> </button>
</div> </div>

8
src/app/cancel/cancel.component.ts
View file

@ -12,7 +12,8 @@ import { LanguageData } from '../language.model';
export class CancelComponent { export class CancelComponent {
title: string; title: string;
msg: string; msg1: string;
msg2: string;
// ------------------------------------- // -------------------------------------
// //
// Language Support // Language Support
@ -27,10 +28,11 @@ export class CancelComponent {
constructor( constructor(
private languageService : LanguageService, private languageService : LanguageService,
private dialogRef: MatDialogRef<CancelComponent>, private dialogRef: MatDialogRef<CancelComponent>,
@Inject(MAT_DIALOG_DATA) public data: { title: string, msg: string} @Inject(MAT_DIALOG_DATA) public data: { title: string, msg1: string, msg2: string;}
) { ) {
this.title = data.title; this.title = data.title;
this.msg = data.msg; this.msg1 = data.msg1;
this.msg2 = data.msg2;
} }
ngOnInit() { ngOnInit() {

15
src/app/header/header.component.ts
View file

@ -57,7 +57,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
// //
vE = { vE = {
headerGetCurrency : '', headerGetCurrency : '',
headerLastBlock : '' headerLastBlock : '',
headerLogoutLbl : '',
headerLogoutMsg1 : '',
headerLogoutMsg2 : ''
} }
// //
// ------------------------------------------------------------ // ------------------------------------------------------------
@ -92,7 +95,11 @@ export class HeaderComponent implements OnInit, OnDestroy {
dialogConfig.disableClose = true; dialogConfig.disableClose = true;
dialogConfig.autoFocus = true; dialogConfig.autoFocus = true;
dialogConfig.data = {title: 'Logout?', msg: 'Are you sure you want to disconnect from ZGo? You will have to re-link your wallet via shielded memo.'}; dialogConfig.data = { title: this.vE.headerLogoutLbl,
msg1: this.vE.headerLogoutMsg1,
msg2: this.vE.headerLogoutMsg2 };
console.log(dialogConfig.data);
const dialogRef = this.dialog.open(CancelComponent, dialogConfig); const dialogRef = this.dialog.open(CancelComponent, dialogConfig);
dialogRef.afterClosed().subscribe(val => { dialogRef.afterClosed().subscribe(val => {
@ -118,6 +125,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
this.vE.headerLastBlock = response.data.header_last_block; this.vE.headerLastBlock = response.data.header_last_block;
this.vE.headerGetCurrency = response.data.header_get_currency; this.vE.headerGetCurrency = response.data.header_get_currency;
this.vE.headerLogoutLbl = response.data.header_logout_lbl;
this.vE.headerLogoutMsg1 = response.data.header_logout_msg1;
this.vE.headerLogoutMsg2 = response.data.header_logout_msg2;
}, },
error => { console.log('Error >> ',error); } error => { console.log('Error >> ',error); }
); );

2
src/app/items/item-add/item-add.component.css
View file

@ -12,5 +12,5 @@ input[type=number]{
color: white; color: white;
font-size: 26px; font-size: 26px;
text-align: center; text-align: center;
padding: 5px; padding: 10px;
} }

30
src/app/items/item-list/item-list.component.ts
View file

@ -69,7 +69,12 @@ export class ItemListComponent implements OnInit{
// //
vE = { vE = {
itemlistAvailItems : '', itemlistAvailItems : '',
itemlistListEmpty : '' itemlistListEmpty : '',
itemlistItemAdded : '',
itemlistItemUpdated : '',
itemlistItemDeleted : '',
itemlistNotifClose : '',
itemlistNotifSuccess : ''
} }
// //
// ------------------------------------------------------------ // ------------------------------------------------------------
@ -115,8 +120,10 @@ export class ItemListComponent implements OnInit{
var item:Item = {_id: '', name: val.name, description: val.description, cost: val.cost, owner: this.owner.address}; var item:Item = {_id: '', name: val.name, description: val.description, cost: val.cost, owner: this.owner.address};
this.itemService.addItem(item); this.itemService.addItem(item);
this.notifierService this.notifierService
.showNotification("Item successfully created!", .showNotification(this.vE.itemlistItemAdded ,
"Close","success"); this.vE.itemlistNotifClose,
"success",
this.vE.itemlistNotifSuccess);
} }
this.itemService.getItems(this.owner.address); this.itemService.getItems(this.owner.address);
this.itemsUpdate.subscribe((items) => { this.itemsUpdate.subscribe((items) => {
@ -150,8 +157,10 @@ export class ItemListComponent implements OnInit{
this.itemService.getItems(this.owner.address); this.itemService.getItems(this.owner.address);
}); });
this.notifierService this.notifierService
.showNotification("Item information updated!!", .showNotification(this.vE.itemlistItemUpdated,
"Close","success"); this.vE.itemlistNotifClose,
"success",
this.vE.itemlistNotifSuccess);
} }
this.itemService.getItems(this.owner.address); this.itemService.getItems(this.owner.address);
}); });
@ -174,8 +183,10 @@ export class ItemListComponent implements OnInit{
this.itemService.deleteItem(val); this.itemService.deleteItem(val);
this.items = []; this.items = [];
this.notifierService this.notifierService
.showNotification("Item deleted!!", .showNotification(this.vE.itemlistItemDeleted,
"Close","success"); this.vE.itemlistNotifClose,
"success",
this.vE.itemlistNotifSuccess);
} }
this.itemService.getItems(this.owner.address); this.itemService.getItems(this.owner.address);
this.itemsUpdate.subscribe((items) => { this.itemsUpdate.subscribe((items) => {
@ -222,6 +233,11 @@ export class ItemListComponent implements OnInit{
this.vE.itemlistListEmpty = response.data.itemlist_list_empty; this.vE.itemlistListEmpty = response.data.itemlist_list_empty;
this.vE.itemlistAvailItems = response.data.itemlist_avail_items; this.vE.itemlistAvailItems = response.data.itemlist_avail_items;
this.vE.itemlistItemAdded = response.data.itemlist_item_added;
this.vE.itemlistItemUpdated = response.data.itemlist_item_updated;
this.vE.itemlistItemDeleted = response.data.itemlist_item_deleted;
this.vE.itemlistNotifClose = response.data.itemlist_notif_close;
this.vE.itemlistNotifSuccess = response.data.itemlist_notif_success;
}, },
error => { console.log('Error >> ',error); } error => { console.log('Error >> ',error); }
); );

8
src/app/language.service.ts
View file

@ -12,13 +12,13 @@ var Buffer = require('buffer/').Buffer;
export class LanguageService { export class LanguageService {
// //
// URL for test using REST API to local MariaDB database // URL for test using REST API to local MariaDB database
// private baseURL = 'http://localhost:8080/zgointl'; private baseURL = 'http://localhost:8080/zgointl';
// //
// URL for test using REST API to local MongoDB database // URL for test using REST API to local MongoDB database
// private baseURL = 'http://localhost:5000/zgointl'; // private baseURL = 'http://localhost:5000/zgointl';
// //
// URL for access MongoDB database from remote server // URL for access MongoDB database from remote server
private baseURL = ConfigData.Be_URL + 'api/getlang'; // private baseURL = ConfigData.Be_URL + 'api/getlang';
public zgoLanguage: string = ''; public zgoLanguage: string = '';
@ -48,8 +48,8 @@ export class LanguageService {
return this.http.get<LanguageData>(this.baseURL + return this.http.get<LanguageData>(this.baseURL +
'/?lang=' + this.zgoLanguage + '/?lang=' + this.zgoLanguage +
'&component=' + viewName '&component=' + viewName
, // ,
{ headers : reqHeaders } // { headers : reqHeaders }
); );
} }
} }

4
src/app/listorders/listorders.component.css
View file

@ -128,12 +128,12 @@ img.icon{
.minibutton { .minibutton {
font-family: 'Spartan', sans-serif; font-family: 'Spartan', sans-serif;
font-size: 12px; font-size: 14px;
background: #ff5722; background: #ff5722;
color: white; color: white;
height: 24px; height: 24px;
line-height: 20px; line-height: 20px;
padding: 2px; padding: 10px;
} }
.spacer { .spacer {

6
src/app/order/order.component.css
View file

@ -55,8 +55,8 @@ img.icon{
background-color: #ff5722; background-color: #ff5722;
color: white; color: white;
font-weight: 500; font-weight: 500;
height: 25px !important; height: 30px !important;
width: 105px !important; width: 115px !important;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -67,7 +67,7 @@ img.icon{
.button-cancel-class { .button-cancel-class {
font-family: 'Spartan', sans-serif; font-family: 'Spartan', sans-serif;
font-weight: 500; font-weight: 500;
height: 25px !important; height: 30px !important;
width: 100px !important; width: 100px !important;
display: flex; display: flex;
align-items: center; align-items: center;

6
src/app/order/order.component.html
View file

@ -79,7 +79,7 @@
</table> </table>
</div> </div>
<div class="container" style="margin: 2px; <div class="container" style="margin: 2px;
height: 35px; height: 40px;
background: lightblue; background: lightblue;
border-top: 2px solid lightgray; border-top: 2px solid lightgray;
border-bottom: 2px solid lightgray; border-bottom: 2px solid lightgray;
@ -102,13 +102,13 @@
<button mat-raised-button <button mat-raised-button
class="buttons-class" class="buttons-class"
(click)="invoice()"> (click)="invoice()">
<fa-icon [icon]="faInvoice" ></fa-icon> {{ vE.orderInvoiceBtn }}</button> <fa-icon [icon]="faInvoice" ></fa-icon> {{vE.orderInvoiceBtn}}</button>
</td> </td>
<td align="right"> <td align="right">
<button mat-raised-button <button mat-raised-button
class="buttons-class" class="buttons-class"
(click)="checkout()">{{ vE.orderCheckoutBtn }} (click)="checkout()">{{vE.orderCheckoutBtn}}
</button> </button>
<!-- <!--
<button mat-raised-button class="text" color="primary" (click)="checkout()">Checkout</button> <button mat-raised-button class="text" color="primary" (click)="checkout()">Checkout</button>

5
src/app/prompt-invoice/prompt-invoice.component.css
View file

@ -1,3 +1,8 @@
::ng-deep .mdc-button__label {
font-family: "Spartan" sans-serif;
font-size: 14px;
font-weight: 600;
}
::ng-deep .invoice { ::ng-deep .invoice {
font-family: "Spartan"; font-family: "Spartan";

4
src/app/prompt-invoice/prompt-invoice.component.html
View file

@ -15,7 +15,7 @@
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tr>
<td class="urlDetail" <td class="urlDetail"
style="text-align: left;" style="text-align: left;"
width="94%"> width="94%">
@ -39,7 +39,7 @@
</a> </a>
</td> </td>
</tbody> </tr>
</table> </table>
<mat-dialog-actions> <mat-dialog-actions>

5
src/app/prompt-receipt/prompt-receipt.component.css
View file

@ -1,3 +1,8 @@
::ng-deep .mdc-button__label {
font-family: "Spartan" sans-serif;
font-size: 14px;
font-weight: 600;
}
::ng-deep .invoice { ::ng-deep .invoice {
font-family: "Spartan"; font-family: "Spartan";

70
src/app/scan/scan.component.css
View file

@ -1,12 +1,76 @@
.text { .text {
font-family: 'Spartan', sans-serif; font-family: 'Spartan', sans-serif;
} }
.scan_header {
font-family: 'Spartan', sans-serif;
font-size: 24px;
font-weight: 600;
text-align: center;
padding: 10px;
color: white;
background: #ff5722;
}
.scan_message {
font-family: 'Spartan', sans-serif;
font-size: 16px;
font-weight: 600;
text-align: center;
color: black;
padding: 10px;
}
.scan_message2 {
font-family: 'Spartan', sans-serif;
font-size: 16px;
font-weight: 600;
text-align: center;
color: black;
padding-top: 30px;
padding-bottom: 30px;
}
.scan_button_send {
font-family: 'Spartan', sans-serif;
font-size: 12px;
font-weight: 500;
text-align: center;
color: white;
background: #ff5722;
align-items: center;
}
.scan_button_close {
font-family: 'Spartan', sans-serif;
font-size: 12px;
font-weight: 500;
text-align: center;
align-items: center;
}
.scan_button_row1 {
font-family: 'Spartan', sans-serif;
font-size: 12px;
align-items: center;
height: 30px;
}
.scan_button_row2 {
font-family: 'Spartan', sans-serif;
font-size: 20px;
height: 30px;
padding: 20px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
.mat-dialog-title{ .mat-dialog-title{
line-height: 20px; line-height: 20px;
} }
h4.text{
margin: 0px;
}
.small { .small {
font-size: small; font-size: small;
} }

70
src/app/scan/scan.component.html
View file

@ -1,32 +1,54 @@
<div align="center" mat-dialog-title> <div class="scan_header">{{ vE.scanScanqrCode }}
<h4 class="text">{{ vE.scanScanqrCode }}</h4>
</div> </div>
<mat-dialog-content> <mat-dialog-content>
<div align="center"> <div align="center">
<p class="text">{{ vE.scanTextInfo }}</p> <p class="scan_message">{{ vE.scanTextInfo }}</p>
<div class="qrcode" id="checkout-qr"></div> <div class="qrcode" id="checkout-qr"></div>
</div> </div>
</mat-dialog-content> </mat-dialog-content>
<mat-dialog-actions>
<table cellspacing="0" width="100%"> <table width="100%">
<tr> <tr>
<td> <td align="center">
<button mat-raised-button class="text" color="primary" (click)="confirm()"> <button mat-raised-button class="scan_button_send" (click)="confirm()">
<mat-icon class="icon">verified_user</mat-icon>{{ vE.scanMemoSent }} <mat-icon class="icon">verified_user</mat-icon>{{ vE.scanMemoSent }}
</button> </button>
</td> </td>
<td align="right"> <td align="center">
<button mat-raised-button class="text" (click)="close()"> <button mat-raised-button class="scan_button_close" (click)="close()">
<mat-icon class="icon">close</mat-icon>{{ vE.scanCloseBtn }} <mat-icon class="icon">close</mat-icon>{{ vE.scanCloseBtn }}
</button> </button>
</td> </td>
</tr> </tr>
</table> </table>
</mat-dialog-actions>
<div align="center"> <div class='scan_message2'>
<p class="small text">{{ vE.scanUseThis }}<a [href]="zcashUrl">{{vE.scanWalletLink}}</a>, or</p> {{ vE.scanCantScan }}<br> {{ vE.scanUseThis }}<a [href]="zcashUrl">{{vE.scanWalletLink}}</a>,<br>{{ vE.scanOrButton }}
<button class="small text" (click)="copyAddress()">{{ vE.scanCopyAddress }}</button>
<button class="small text" (click)="copyAmount()">{{ vE.scanCopyAmount }}</button>
<button class="small text" (click)="copyMemo()">{{ vE.scanCopyMemo }}</button>
</div> </div>
<table style="width:100%;
padding-left: 30px;
padding-right: 30px;">
<tr>
<td align="center" style="width: 45%;">
<button style="font-size: 14px;" (click)="copyAddress()">{{ vE.scanCopyAddress }}</button>
</td>
<td style="width: 10%;"></td>
<td align="center" style="width: 45%;">
<button style="font-size: 14px;" (click)="copyAmount()">{{ vE.scanCopyAmount }}</button>
</td>
</tr>
</table>
<table style="width:100%;
padding-top: 10px;
padding-left: 30px;
padding-right: 30px;
padding-bottom: 10px;">
<tr>
<td align="center" >
<button style="font-size: 14px;" (click)="copyMemo()">{{ vE.scanCopyMemo }}</button>
</td>
</tr>
</table>

6
src/app/scan/scan.component.ts
View file

@ -42,7 +42,9 @@ export class ScanComponent implements OnInit{
scanNotservError : '', scanNotservError : '',
scanFuncNotavail : '', scanFuncNotavail : '',
scanCopyError : '', scanCopyError : '',
scanFailPayment : '' scanFailPayment : '',
scanCantScan : '',
scanOrButton : ''
} }
// //
constructor( constructor(
@ -166,6 +168,8 @@ export class ScanComponent implements OnInit{
this.vE.scanNotservClose = response.data.scan_notserv_close; this.vE.scanNotservClose = response.data.scan_notserv_close;
this.vE.scanNotservError = response.data.scan_notserv_error; this.vE.scanNotservError = response.data.scan_notserv_error;
this.vE.scanFuncNotavail = response.data.scan_func_notavail; this.vE.scanFuncNotavail = response.data.scan_func_notavail;
this.vE.scanCantScan = response.data.scan_cant_scan;
this.vE.scanOrButton = response.data.scan_or_button;
}, },
error => { console.log('Error >> ',error); } error => { console.log('Error >> ',error); }

5
src/app/settings/settings.component.css
View file

@ -2,6 +2,11 @@
font-family: 'Spartan', sans-serif; font-family: 'Spartan', sans-serif;
} }
::ng-deep .mdc-tab__text-label {
font-family: 'Spartan', sans-serif;
font-size: 14px;
}
.settings-title { .settings-title {
font-family: 'Spartan', sans-serif; font-family: 'Spartan', sans-serif;
background: #ff5722; background: #ff5722;

3
src/app/settings/settings.component.html
View file

@ -7,7 +7,8 @@
margin-left: 10px; margin-left: 10px;
margin-right: 10px;"> margin-right: 10px;">
<mat-tab-group mat-tab-align-tabs="start"> <mat-tab-group mat-tab-align-tabs="start">
<mat-tab label="{{ vE.settingsTabMainlbl }}" style="height: 400px;"> <mat-tab label="{{ vE.settingsTabMainlbl }}"
style="height: 400px;">
<div class="container" style="margin-bottom: 20px;"> <div class="container" style="margin-bottom: 20px;">
<mat-dialog-content [formGroup]="settingsForm"> <mat-dialog-content [formGroup]="settingsForm">
<mat-form-field class="settings-field" [style.width.%]="100"> <mat-form-field class="settings-field" [style.width.%]="100">