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

UI/UX - Blocks not visible on the TV page. (#626)

Browse Source 
* Fix blocks not visible on the TV page.

* Add e2e testing for tv screen.
This commit is contained in:
Miguel Medeiros 2021-07-12 11:19:58 -03:00 committed by GitHub
parent 80d76ad1f4
commit 2c5ccab77c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/cypress/integration/mainnet/mainnet.spec.ts
View File

@ -49,6 +49,9 @@ describe('Mainnet', () => {
cy.viewport('macbook-16'); cy.viewport('macbook-16');
cy.wait(1000); cy.wait(1000);
cy.get('.blockchain-wrapper').should('be.visible'); cy.get('.blockchain-wrapper').should('be.visible');
cy.get('#mempool-block-0').should('be.visible');
cy.get('#mempool-block-1').should('be.visible');
cy.get('#mempool-block-2').should('be.visible');
}); });
}); });

8
frontend/src/app/components/television/television.component.html
View File

@ -1,10 +1,10 @@
<div id="tv-wrapper"> <div id="tv-wrapper">
<div *ngIf="loading" class="loading"> <div *ngIf="mempoolStats.length === 0" class="loading">
<div class="spinner-border text-light"></div> <div class="spinner-border text-light"></div>
</div> </div>
<div class="tv-container" *ngIf="!loading"> <div class="tv-container">
<div class="chart-holder" *ngIf="mempoolStats.length"> <div class="chart-holder" *ngIf="mempoolStats.length">
<app-mempool-graph dir="ltr" [data]="mempoolStats"></app-mempool-graph> <app-mempool-graph dir="ltr" [data]="mempoolStats"></app-mempool-graph>
@ -12,8 +12,8 @@
<div class="blockchain-wrapper"> <div class="blockchain-wrapper">
<div class="position-container"> <div class="position-container">
<app-mempool-blocks></app-mempool-blocks> <app-mempool-blocks [isLoading$]="isLoading$"></app-mempool-blocks>
<app-blockchain-blocks></app-blockchain-blocks> <app-blockchain-blocks [isLoading$]="isLoading$"></app-blockchain-blocks>
<div id="divider"></div> <div id="divider"></div>
</div> </div>
</div> </div>

5
frontend/src/app/components/television/television.component.ts
View File

@ -4,6 +4,7 @@ import { OptimizedMempoolStats } from '../../interfaces/node-api.interface';
import { StateService } from 'src/app/services/state.service'; import { StateService } from 'src/app/services/state.service';
import { ApiService } from 'src/app/services/api.service'; import { ApiService } from 'src/app/services/api.service';
import { SeoService } from 'src/app/services/seo.service'; import { SeoService } from 'src/app/services/seo.service';
import { Observable } from 'rxjs';
@Component({ @Component({
selector: 'app-television', selector: 'app-television',
@ -11,7 +12,7 @@ import { SeoService } from 'src/app/services/seo.service';
styleUrls: ['./television.component.scss'] styleUrls: ['./television.component.scss']
}) })
export class TelevisionComponent implements OnInit { export class TelevisionComponent implements OnInit {
loading = true; isLoading$: Observable<boolean>;
mempoolStats: OptimizedMempoolStats[] = []; mempoolStats: OptimizedMempoolStats[] = [];
mempoolVsizeFeesData: any; mempoolVsizeFeesData: any;
@ -26,11 +27,11 @@ export class TelevisionComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`); this.seoService.setTitle($localize`:@@46ce8155c9ab953edeec97e8950b5a21e67d7c4e:TV view`);
this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']); this.websocketService.want(['blocks', 'live-2h-chart', 'mempool-blocks']);
this.isLoading$ = this.stateService.isLoadingWebSocket$;
this.apiService.list2HStatistics$() this.apiService.list2HStatistics$()
.subscribe((mempoolStats) => { .subscribe((mempoolStats) => {
this.mempoolStats = mempoolStats; this.mempoolStats = mempoolStats;
this.loading = false;
}); });
this.stateService.live2Chart$ this.stateService.live2Chart$