Charon/blockchain
1
0
Fork 0
forked from lthn/blockchain
Code Pull requests Activity

Pagination + html (#143)

Browse source 
* Pagination + html

* offset + rebuild
This commit is contained in:
zetov 2019-12-05 17:06:05 +02:00 • committed by cryptozoidberg
parent 52083f20b0
commit 182e4f82e4
25 changed files with 3141 additions and 583 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/gui/qt-daemon/html/assets/scss/base/_theme.scss
View file

@ -53,7 +53,8 @@ $themes: (
tooltipCriticalBackgroundColor: #5f1d1d,
tooltipShadow: 0 0 1rem rgba(0, 0, 0, 0.5),
modalBackground: url(~src/assets/images/background-dark.png),
closeButtonColor: #556576
closeButtonColor: #556576,
hoverPage: #3a485a
),
gray: (
bodyBackgroundColor: #101417,
@ -109,7 +110,8 @@ $themes: (
tooltipCriticalBackgroundColor: #4c1919,
tooltipShadow: 0 0 1rem rgba(0, 0, 0, 0.5),
modalBackground: url(~src/assets/images/background-gray.png),
closeButtonColor: #515960
closeButtonColor: #515960,
hoverPage: #383e43
),
white: (
bodyBackgroundColor: #eeeeee,
@ -165,7 +167,8 @@ $themes: (
tooltipCriticalBackgroundColor: #e53935,
tooltipShadow: 0 0 1rem rgba(120, 120, 120, 0.5),
modalBackground: url(~src/assets/images/background-white.png),
closeButtonColor: #43454b
closeButtonColor: #43454b,
hoverPage: #ffffff
)
);

35
src/gui/qt-daemon/html/assets/scss/layout/_wallet.scss
View file

@ -92,6 +92,41 @@ app-wallet {
background-color: themed(contentBackgroundColor);
}
}
.pagination-wrapper {
@include themify($themes) {
background-color: themed(contentBackgroundColor);
}
.pagination {
@include themify($themes) {
border-top: 0.2rem solid themed(transparentButtonBorderColor);
}
button {
@include themify($themes) {
background-color: themed(transparentButtonBorderColor);
color: themed(mainTextColor);
}
&.active {
@include themify($themes) {
background-color: themed(tableBackgroundColor);
color: themed(mainTextColor);
}
}
&:hover {
@include themify($themes) {
background-color: themed(hoverPage);
color: themed(mainTextColor);
}
}
}
}
}
}
}

254
src/gui/qt-daemon/html/main.js
View file

File diff suppressed because one or more lines are too long

2
src/gui/qt-daemon/html/main.js.map
View file

File diff suppressed because one or more lines are too long

4
src/gui/qt-daemon/html/polyfills.js
View file

@ -5800,8 +5800,8 @@ __webpack_require__.r(__webpack_exports__);
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
__webpack_require__(/*! C:\Users\Admin\Desktop\zano\src\gui\qt-daemon\html_source\src\polyfills.ts */"./src/polyfills.ts");
module.exports = __webpack_require__(/*! C:\Users\Admin\Desktop\zano\src\gui\qt-daemon\html_source\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\jit-polyfills.js */"./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js");
__webpack_require__(/*! c:\Users\Admin\Desktop\zano\src\gui\qt-daemon\html_source\src\polyfills.ts */"./src/polyfills.ts");
module.exports = __webpack_require__(/*! c:\Users\Admin\Desktop\zano\src\gui\qt-daemon\html_source\node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\jit-polyfills.js */"./node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js");
/***/ })

4
src/gui/qt-daemon/html/styles.js
View file

File diff suppressed because one or more lines are too long

2
src/gui/qt-daemon/html/styles.js.map
View file

File diff suppressed because one or more lines are too long

3148
src/gui/qt-daemon/html/vendor.js
View file

File diff suppressed because it is too large Load diff

2
src/gui/qt-daemon/html/vendor.js.map
View file

File diff suppressed because one or more lines are too long

5
src/gui/qt-daemon/html_source/src/app/_helpers/models/wallet.model.ts
View file

@ -21,12 +21,17 @@ export class Wallet {
new_contracts?: number;
history: Array<Transaction> = [];
total_history_item?: number;
pages = [];
totalPages: number;
currentPage: number;
excluded_history: Array<Transaction> = [];
contracts: Array<Contract> = [];
progress?: number;
loaded?: boolean;
restore?: boolean;
send_data?: any = {
address: null,

9
src/gui/qt-daemon/html_source/src/app/_helpers/services/backend.service.ts
View file

@ -631,6 +631,15 @@ export class BackendService {
}
}
getRecentTransfers( id, offset, count, callback) {
const params = {
wallet_id: id,
offset: offset,
count: count
};
this.runCommand('get_recent_transfers', params, callback);
}
getPoolInfo(callback) {
this.runCommand('get_tx_pool_info', {}, callback);
}

16
src/gui/qt-daemon/html_source/src/app/_helpers/services/pagination.service.spec.ts Normal file
View file

@ -0,0 +1,16 @@
/* tslint:disable:no-unused-variable */
import { TestBed, async, inject } from '@angular/core/testing';
import { PaginationService } from './pagination.service';
describe('Service: Pagination', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [PaginationService]
});
});
it('should ...', inject([PaginationService], (service: PaginationService) => {
expect(service).toBeTruthy();
}));
});

47
src/gui/qt-daemon/html_source/src/app/_helpers/services/pagination.service.ts Normal file
View file

@ -0,0 +1,47 @@
import { Injectable, NgZone } from '@angular/core';
import { VariablesService } from './variables.service';
@Injectable({
providedIn: 'root'
})
export class PaginationService {
constructor(
private variables: VariablesService,
private ngZone: NgZone
) { }
paginate(currentPage = 1) {
if (currentPage < 1) {
currentPage = 1;
} else if (currentPage > this.variables.currentWallet.totalPages) {
currentPage = this.variables.currentWallet.totalPages;
}
let startPage: number, endPage: number;
if (this.variables.currentWallet.totalPages <= this.variables.maxPages) {
startPage = 1;
endPage = this.variables.currentWallet.totalPages;
} else {
const maxPagesBeforeCurrentPage = Math.floor(this.variables.maxPages / 2);
const maxPagesAfterCurrentPage = Math.ceil(this.variables.maxPages / 2) - 1;
if (currentPage <= maxPagesBeforeCurrentPage) {
startPage = 1;
this.variables.currentWallet.totalPages > this.variables.maxPages
? endPage = this.variables.maxPages
: endPage = this.variables.currentWallet.totalPages
;
} else if (currentPage + maxPagesAfterCurrentPage >= this.variables.currentWallet.totalPages) {
startPage = this.variables.currentWallet.totalPages - this.variables.maxPages + 1;
endPage = this.variables.currentWallet.totalPages;
} else {
startPage = currentPage - maxPagesBeforeCurrentPage;
endPage = currentPage + maxPagesAfterCurrentPage;
}
}
this.ngZone.run(() => {
this.variables.currentWallet.pages = Array.from(Array((endPage + 1) - startPage).keys()).map(i => startPage + i);
});
}
}

3
src/gui/qt-daemon/html_source/src/app/_helpers/services/variables.service.ts
View file

@ -45,6 +45,9 @@ export class VariablesService {
wallets: []
};
public count = 40;
public maxPages = 5;
public wallets: Array<Wallet> = [];
public currentWallet: Wallet;
public selectWallet: number;

19
src/gui/qt-daemon/html_source/src/app/app.component.ts
View file

@ -158,6 +158,17 @@ export class AppComponent implements OnInit, OnDestroy {
wallet.loaded = false;
} else if (wallet.progress === 100) {
wallet.loaded = true;
if (wallet.total_history_item) {
wallet.totalPages = Math.ceil( wallet.total_history_item / this.variablesService.count);
wallet.totalPages > this.variablesService.maxPages
? wallet.pages = new Array(5).fill(1).map((value, index) => value + index)
: wallet.pages = new Array(wallet.totalPages).fill(1).map((value, index) => value + index);
} else if (wallet.restore) {
wallet.totalPages = Math.ceil( wallet.history.length / this.variablesService.count);
wallet.totalPages > this.variablesService.maxPages
? wallet.pages = new Array(5).fill(1).map((value, index) => value + index)
: wallet.pages = new Array(wallet.totalPages).fill(1).map((value, index) => value + index);
}
}
});
}
@ -216,7 +227,6 @@ export class AppComponent implements OnInit, OnDestroy {
const tr_info = data.ti;
const wallet = this.variablesService.getWallet(wallet_id);
if (wallet) {
this.ngZone.run(() => {
@ -236,6 +246,13 @@ export class AppComponent implements OnInit, OnDestroy {
tr_exists = (!tr_exists) ? wallet.history.some(elem => elem.tx_hash === tr_info.tx_hash) : tr_exists;
wallet.prepareHistory([tr_info]);
if (wallet.restore) {
wallet.total_history_item = wallet.history.length;
wallet.totalPages = Math.ceil( wallet.total_history_item / this.variablesService.count);
wallet.totalPages > this.variablesService.maxPages
? wallet.pages = new Array(5).fill(1).map((value, index) => value + index)
: wallet.pages = new Array(wallet.totalPages).fill(1).map((value, index) => value + index);
}
if (tr_info.hasOwnProperty('contract')) {
const exp_med_ts = this.variablesService.exp_med_ts;

4
src/gui/qt-daemon/html_source/src/app/create-wallet/create-wallet.component.ts
View file

@ -78,6 +78,10 @@ export class CreateWalletComponent implements OnInit {
generate_data['wi'].tracking_hey
);
this.variablesService.opening_wallet.alias = this.backend.getWalletAlias(generate_data['wi'].address);
this.variablesService.opening_wallet.total_history_item = 0;
this.variablesService.opening_wallet.pages = new Array(1).fill(1);
this.variablesService.opening_wallet.totalPages = 1;
this.variablesService.opening_wallet.currentPage = 1;
this.ngZone.run(() => {
this.walletSaved = true;
this.progressWidth = '50%';

10
src/gui/qt-daemon/html_source/src/app/login/login.component.ts
View file

@ -177,8 +177,18 @@ export class LoginComponent implements OnInit, OnDestroy {
} else {
new_wallet.staking = false;
}
new_wallet.currentPage = 1;
if (open_data.recent_history && open_data.recent_history.history) {
new_wallet.total_history_item = open_data.recent_history.total_history_items;
new_wallet.totalPages = Math.ceil( open_data.recent_history.total_history_items / this.variablesService.count);
new_wallet.totalPages > this.variablesService.maxPages
? new_wallet.pages = new Array(5).fill(1).map((value, index) => value + index)
: new_wallet.pages = new Array(new_wallet.totalPages).fill(1).map((value, index) => value + index);
new_wallet.prepareHistory(open_data.recent_history.history);
} else {
new_wallet.total_history_item = 0;
new_wallet.pages = new Array(1).fill(1);
new_wallet.totalPages = 1;
}
this.backend.getContracts(open_data.wallet_id, (contracts_status, contracts_data) => {
if (contracts_status && contracts_data.hasOwnProperty('contracts')) {

9
src/gui/qt-daemon/html_source/src/app/open-wallet-modal/open-wallet-modal.component.ts
View file

@ -87,7 +87,16 @@ export class OpenWalletModalComponent implements OnInit {
);
new_wallet.alias = this.backend.getWalletAlias(new_wallet.address);
if (open_data.recent_history && open_data.recent_history.history) {
new_wallet.total_history_item = open_data.recent_history.total_history_items;
new_wallet.totalPages = Math.ceil( open_data.recent_history.total_history_items / this.variablesService.count);
new_wallet.totalPages > this.variablesService.maxPages
? new_wallet.pages = new Array(5).fill(1).map((value, index) => value + index)
: new_wallet.pages = new Array(new_wallet.totalPages).fill(1).map((value, index) => value + index);
new_wallet.prepareHistory(open_data.recent_history.history);
} else {
new_wallet.total_history_item = 0;
new_wallet.pages = new Array(1).fill(1);
new_wallet.totalPages = 1;
}
this.backend.getContracts(open_data.wallet_id, (contracts_status, contracts_data) => {
if (contracts_status && contracts_data.hasOwnProperty('contracts')) {

10
src/gui/qt-daemon/html_source/src/app/open-wallet/open-wallet.component.ts
View file

@ -97,8 +97,18 @@ export class OpenWalletComponent implements OnInit, OnDestroy {
open_data['wi'].tracking_hey
);
new_wallet.alias = this.backend.getWalletAlias(new_wallet.address);
new_wallet.currentPage = 1;
if (open_data.recent_history && open_data.recent_history.history) {
new_wallet.total_history_item = open_data.recent_history.total_history_items;
new_wallet.totalPages = Math.ceil( open_data.recent_history.total_history_items / this.variablesService.count);
new_wallet.totalPages > this.variablesService.maxPages
? new_wallet.pages = new Array(5).fill(1).map((value, index) => value + index)
: new_wallet.pages = new Array(new_wallet.totalPages).fill(1).map((value, index) => value + index);
new_wallet.prepareHistory(open_data.recent_history.history);
} else {
new_wallet.total_history_item = 0;
new_wallet.pages = new Array(1).fill(1);
new_wallet.totalPages = 1;
}
this.backend.getContracts(open_data.wallet_id, (contracts_status, contracts_data) => {
if (contracts_status && contracts_data.hasOwnProperty('contracts')) {

9
src/gui/qt-daemon/html_source/src/app/restore-wallet/restore-wallet.component.ts
View file

@ -83,7 +83,16 @@ export class RestoreWalletComponent implements OnInit {
restore_data['wi'].tracking_hey
);
this.variablesService.opening_wallet.alias = this.backend.getWalletAlias(this.variablesService.opening_wallet.address);
this.variablesService.opening_wallet.pages = new Array(1).fill(1);
this.variablesService.opening_wallet.totalPages = 1;
this.variablesService.opening_wallet.currentPage = 1;
this.variablesService.opening_wallet.total_history_item = 0;
this.variablesService.opening_wallet.restore = true;
if (restore_data.recent_history && restore_data.recent_history.history) {
this.variablesService.opening_wallet.totalPages = Math.ceil( restore_data.recent_history.total_history_items / this.variablesService.count);
this.variablesService.opening_wallet.totalPages > this.variablesService.maxPages
? this.variablesService.opening_wallet.pages = new Array(5).fill(1).map((value, index) => value + index)
: this.variablesService.opening_wallet.pages = new Array(this.variablesService.opening_wallet.totalPages).fill(1).map((value, index) => value + index);
this.variablesService.opening_wallet.prepareHistory(restore_data.recent_history.history);
}
this.backend.getContracts(this.variablesService.opening_wallet.wallet_id, (contracts_status, contracts_data) => {

10
src/gui/qt-daemon/html_source/src/app/wallet/wallet.component.html
View file

@ -46,6 +46,16 @@
<div #scrolledContent class="tabs-content scrolled-content">
<router-outlet></router-outlet>
</div>
<div *ngIf="activeTab === 'history'" class="pagination-wrapper">
<div class="pagination">
<button [disabled]="variablesService.currentWallet.currentPage === 1" (click)="setPage(variablesService.currentWallet.currentPage - 1)"><</button>
<ng-container *ngFor="let page of variablesService.currentWallet.pages">
<button [ngClass]="{ 'active': variablesService.currentWallet.currentPage === page }"
(click)="setPage(page)">{{page}}</button>
</ng-container>
<button [disabled]="variablesService.currentWallet.currentPage === variablesService.currentWallet.totalPages" (click)="setPage(variablesService.currentWallet.currentPage + 1)">></button>
</div>
</div>
</div>
<app-confirm-modal *ngIf="isModalDialogVisible" [title]=" 'WALLET.CONFIRM.TITLE' | translate " [message]=" 'WALLET.CONFIRM.MESSAGE' | translate " (confirmed)="confirmed($event)"></app-confirm-modal>

14
src/gui/qt-daemon/html_source/src/app/wallet/wallet.component.scss
View file

@ -238,4 +238,18 @@
overflow-x: hidden;
overflow-y: overlay;
}
.pagination-wrapper {
.pagination {
padding: 1rem;
button {
margin-right: 0.5rem;
padding: 0;
width: 2.5rem;
height: 2.5rem;
font-size: 1.2rem;
}
}
}
}

55
src/gui/qt-daemon/html_source/src/app/wallet/wallet.component.ts
View file

@ -1,12 +1,13 @@
import {Component, OnInit, OnDestroy, NgZone, ViewChild, ElementRef} from '@angular/core';
import {ActivatedRoute, Router, RoutesRecognized} from '@angular/router';
import {VariablesService} from '../_helpers/services/variables.service';
import {BackendService} from '../_helpers/services/backend.service';
import {TranslateService} from '@ngx-translate/core';
import {IntToMoneyPipe} from '../_helpers/pipes/int-to-money.pipe';
import {Subscription} from 'rxjs';
import { Component, OnInit, OnDestroy, NgZone, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute, Router, RoutesRecognized } from '@angular/router';
import { VariablesService } from '../_helpers/services/variables.service';
import { BackendService } from '../_helpers/services/backend.service';
import { TranslateService } from '@ngx-translate/core';
import { IntToMoneyPipe } from '../_helpers/pipes/int-to-money.pipe';
import { Subscription } from 'rxjs';
import icons from '../../assets/icons/icons.json';
import { PaginationService } from '../_helpers/services/pagination.service';
@Component({
selector: 'app-wallet',
@ -22,6 +23,9 @@ export class WalletComponent implements OnInit, OnDestroy {
copyAnimationTimeout;
balanceTooltip;
isModalDialogVisible = false;
activeTab = 'history';
public currentPage = 1;
@ViewChild('scrolledContent') private scrolledContent: ElementRef;
@ -90,8 +94,9 @@ export class WalletComponent implements OnInit, OnDestroy {
public variablesService: VariablesService,
private ngZone: NgZone,
private translate: TranslateService,
private intToMoneyPipe: IntToMoneyPipe
) {}
private intToMoneyPipe: IntToMoneyPipe,
private pagination: PaginationService
) { }
ngOnInit() {
this.subRouting1 = this.route.params.subscribe(params => {
@ -103,7 +108,8 @@ export class WalletComponent implements OnInit, OnDestroy {
});
this.subRouting2 = this.router.events.subscribe(val => {
if (val instanceof RoutesRecognized) {
if ( val.state.root.firstChild && val.state.root.firstChild.firstChild ) {
this.activeTab = val.urlAfterRedirects.split('/').pop();
if (val.state.root.firstChild && val.state.root.firstChild.firstChild) {
for (let i = 0; i < this.tabs.length; i++) {
this.tabs[i].active = (this.tabs[i].link === '/' + val.state.root.firstChild.firstChild.url[0].path);
}
@ -137,7 +143,7 @@ export class WalletComponent implements OnInit, OnDestroy {
tab.active = false;
});
this.tabs[index].active = true;
this.ngZone.run( () => {
this.ngZone.run(() => {
this.scrolledContent.nativeElement.scrollTop = 0;
this.router.navigate(['wallet/' + this.walletID + this.tabs[index].link]);
});
@ -159,11 +165,11 @@ export class WalletComponent implements OnInit, OnDestroy {
this.balanceTooltip = document.createElement('div');
const available = document.createElement('span');
available.setAttribute('class', 'available');
available.innerHTML = this.translate.instant('WALLET.AVAILABLE_BALANCE', {available: this.intToMoneyPipe.transform(this.variablesService.currentWallet.unlocked_balance), currency: this.variablesService.defaultCurrency});
available.innerHTML = this.translate.instant('WALLET.AVAILABLE_BALANCE', { available: this.intToMoneyPipe.transform(this.variablesService.currentWallet.unlocked_balance), currency: this.variablesService.defaultCurrency });
this.balanceTooltip.appendChild(available);
const locked = document.createElement('span');
locked.setAttribute('class', 'locked');
locked.innerHTML = this.translate.instant('WALLET.LOCKED_BALANCE', {locked: this.intToMoneyPipe.transform(this.variablesService.currentWallet.balance.minus(this.variablesService.currentWallet.unlocked_balance)), currency: this.variablesService.defaultCurrency});
locked.innerHTML = this.translate.instant('WALLET.LOCKED_BALANCE', { locked: this.intToMoneyPipe.transform(this.variablesService.currentWallet.balance.minus(this.variablesService.currentWallet.unlocked_balance)), currency: this.variablesService.defaultCurrency });
this.balanceTooltip.appendChild(locked);
const link = document.createElement('span');
link.setAttribute('class', 'link');
@ -215,6 +221,29 @@ export class WalletComponent implements OnInit, OnDestroy {
});
}
public setPage(pageNumber: number) {
if (pageNumber === this.variablesService.currentWallet.currentPage) {
return;
}
this.variablesService.currentWallet.currentPage = pageNumber;
this.backend.getRecentTransfers(
this.walletID,
(this.variablesService.currentWallet.currentPage - 1) * this.variablesService.count,
this.variablesService.count, (status, data) => {
if (status && data.total_history_items) {
this.variablesService.currentWallet.history.splice(0, this.variablesService.currentWallet.history.length);
this.ngZone.run(() => {
this.pagination.paginate(this.variablesService.currentWallet.currentPage);
if (data.history.length !== 0) {
this.variablesService.currentWallet.restore = false;
this.variablesService.currentWallet.total_history_item = data.total_history_items;
this.variablesService.currentWallet.prepareHistory(data.history);
}
});
}
});
}
ngOnDestroy() {
this.subRouting1.unsubscribe();
this.subRouting2.unsubscribe();

9
src/gui/qt-daemon/html_source/src/assets/scss/base/_theme.scss
View file

@ -53,7 +53,8 @@ $themes: (
tooltipCriticalBackgroundColor: #5f1d1d,
tooltipShadow: 0 0 1rem rgba(0, 0, 0, 0.5),
modalBackground: url(~src/assets/images/background-dark.png),
closeButtonColor: #556576
closeButtonColor: #556576,
hoverPage: #3a485a
),
gray: (
bodyBackgroundColor: #101417,
@ -109,7 +110,8 @@ $themes: (
tooltipCriticalBackgroundColor: #4c1919,
tooltipShadow: 0 0 1rem rgba(0, 0, 0, 0.5),
modalBackground: url(~src/assets/images/background-gray.png),
closeButtonColor: #515960
closeButtonColor: #515960,
hoverPage: #383e43
),
white: (
bodyBackgroundColor: #eeeeee,
@ -165,7 +167,8 @@ $themes: (
tooltipCriticalBackgroundColor: #e53935,
tooltipShadow: 0 0 1rem rgba(120, 120, 120, 0.5),
modalBackground: url(~src/assets/images/background-white.png),
closeButtonColor: #43454b
closeButtonColor: #43454b,
hoverPage: #ffffff
)
);

35
src/gui/qt-daemon/html_source/src/assets/scss/layout/_wallet.scss
View file

@ -92,6 +92,41 @@ app-wallet {
background-color: themed(contentBackgroundColor);
}
}
.pagination-wrapper {
@include themify($themes) {
background-color: themed(contentBackgroundColor);
}
.pagination {
@include themify($themes) {
border-top: 0.2rem solid themed(transparentButtonBorderColor);
}
button {
@include themify($themes) {
background-color: themed(transparentButtonBorderColor);
color: themed(mainTextColor);
}
&.active {
@include themify($themes) {
background-color: themed(tableBackgroundColor);
color: themed(mainTextColor);
}
}
&:hover {
@include themify($themes) {
background-color: themed(hoverPage);
color: themed(mainTextColor);
}
}
}
}
}
}
}