mirrors/mempool
1
0
Fork 0
mirror of https://github.com/mempool/mempool.git synced 2025-01-18 05:12:35 +01:00
Code Issues Projects Releases Wiki Activity

Fixed keyboard navigation bugs.

Browse Source
This commit is contained in:
softsimon 2020-05-13 13:03:57 +07:00
parent 910696e41c
commit afb4f6e70b
No known key found for this signature in database
GPG Key ID: 488D7DCFB5A430D7
5 changed files with 46 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/src/app/components/app/app.component.ts
View File

@ -1,6 +1,7 @@
import { Component } from '@angular/core';
import { Component, HostListener } from '@angular/core';
import { Router } from '@angular/router';
import { WebsocketService } from '../../services/websocket.service';
import { StateService } from 'src/app/services/state.service';
@Component({
selector: 'app-root',
@ -14,5 +15,15 @@ export class AppComponent {
constructor(
public router: Router,
private websocketService: WebsocketService,
private stateService: StateService,
) { }
@HostListener('document:keydown', ['$event'])
handleKeyboardEvents(event: KeyboardEvent) {
if (event.target !== document.body) {
return;
}
this.stateService.keyNavigation$.next(event);
}
}

4
frontend/src/app/components/block/block.component.html
View File

@ -48,7 +48,7 @@
<td><app-amount [satoshis]="fees * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="fees * 100000000" digitsInfo="1.0-0"></app-fiat>)</td>
</tr>
<tr>
<td>Reward + fees:</td>
<td>Subsidy + fees:</td>
<td>
<app-amount [satoshis]="(blockSubsidy + fees) * 100000000" digitsInfo="1.2-2" [noFiat]="true"></app-amount> (<app-fiat [value]="(blockSubsidy + fees) * 100000000" digitsInfo="1.0-0"></app-fiat>)
</td>
@ -60,7 +60,7 @@
<td style="width: 75%;"><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td>Reward + fees:</td>
<td>Subsidy + fees:</td>
<td><span class="skeleton-loader"></span></td>
</tr>
</ng-template>

44
frontend/src/app/components/blockchain-blocks/blockchain-blocks.component.ts
View File

@ -54,6 +54,28 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
}
this.moveArrowToPosition(false);
});
this.stateService.keyNavigation$.subscribe((event) => {
if (!this.markHeight) {
return;
}
if (event.key === 'ArrowRight') {
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (this.blocks[blockindex + 1]) {
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
this.blocks[blockindex + 1].id], { state: { data: { block: this.blocks[blockindex + 1] } } });
}
} else if (event.key === 'ArrowLeft') {
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (blockindex === 0) {
this.router.navigate([(this.network ? '/' + this.network : '') + '/mempool-block/', '0']);
} else {
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
this.blocks[blockindex - 1].id], { state: { data: { block: this.blocks[blockindex - 1] }}});
}
}
});
}
ngOnDestroy() {
@ -61,28 +83,6 @@ export class BlockchainBlocksComponent implements OnInit, OnDestroy {
clearInterval(this.interval);
}
@HostListener('document:keydown', ['$event'])
handleKeyboardEvents(event: KeyboardEvent) {
if (!this.markHeight) {
return;
}
if (event.key === 'ArrowRight') {
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (this.blocks[blockindex + 1]) {
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
this.blocks[blockindex + 1].id], { state: { data: { block: this.blocks[blockindex + 1] } } });
}
} else if (event.key === 'ArrowLeft') {
const blockindex = this.blocks.findIndex((b) => b.height === this.markHeight);
if (blockindex === 0) {
this.router.navigate([(this.network ? '/' + this.network : '') + '/mempool-block/', '0']);
} else {
this.router.navigate([(this.network ? '/' + this.network : '') + '/block/',
this.blocks[blockindex - 1].id], { state: { data: { block: this.blocks[blockindex - 1] }}});
}
}
}
moveArrowToPosition(animate: boolean) {
if (!this.markHeight) {
this.arrowVisible = false;

20
frontend/src/app/components/mempool-blocks/mempool-blocks.component.ts
View File

@ -65,21 +65,12 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
this.stateService.networkChanged$
.subscribe((network) => this.network = network);
}
@HostListener('window:resize', ['$event'])
onResize() {
if (this.mempoolBlocks && this.mempoolBlocks.length) {
this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(JSON.stringify(this.mempoolBlocksFull)));
}
}
@HostListener('document:keydown', ['$event'])
handleKeyboardEvents(event: KeyboardEvent) {
setTimeout(() => {
this.stateService.keyNavigation$.subscribe((event) => {
if (this.markIndex === undefined) {
return;
}
if (event.key === 'ArrowRight') {
if (this.mempoolBlocks[this.markIndex - 1]) {
this.router.navigate([(this.network ? '/' + this.network : '') + '/mempool-block/', this.markIndex - 1]);
@ -100,6 +91,13 @@ export class MempoolBlocksComponent implements OnInit, OnDestroy {
});
}
@HostListener('window:resize', ['$event'])
onResize() {
if (this.mempoolBlocks && this.mempoolBlocks.length) {
this.mempoolBlocks = this.reduceMempoolBlocksToFitScreen(JSON.parse(JSON.stringify(this.mempoolBlocksFull)));
}
}
ngOnDestroy() {
this.mempoolBlocksSubscription.unsubscribe();
}

1
frontend/src/app/services/state.service.ts
View File

@ -34,6 +34,7 @@ export class StateService {
connectionState$ = new BehaviorSubject<0 | 1 | 2>(2);
markBlock$ = new Subject<MarkBlockState>();
keyNavigation$ = new Subject<KeyboardEvent>();
constructor(
private router: Router,