diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html index 9318e925b..be7737894 100644 --- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html +++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html @@ -64,8 +64,8 @@ Channels Location - - + + {{ node.alias }} @@ -116,5 +116,10 @@ + + + diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss index 25e4cf7f3..97d42298c 100644 --- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss +++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.scss @@ -22,14 +22,14 @@ .timestamp-first { width: 20%; - @media (max-width: 576px) { + @media (max-width: 1060px) { display: none } } .timestamp-update { width: 16%; - @media (max-width: 576px) { + @media (max-width: 1060px) { display: none } } @@ -50,7 +50,7 @@ .city { max-width: 150px; - @media (max-width: 576px) { + @media (max-width: 675px) { display: none } } \ No newline at end of file diff --git a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts index 19dd999ee..4035b62d4 100644 --- a/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts +++ b/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { map, Observable, share } from 'rxjs'; +import { BehaviorSubject, combineLatest, map, Observable, share, tap } from 'rxjs'; import { ApiService } from '../../services/api.service'; import { SeoService } from '../../services/seo.service'; import { getFlagEmoji } from '../../shared/common.utils'; @@ -15,6 +15,12 @@ import { GeolocationData } from '../../shared/components/geolocation/geolocation export class NodesPerCountry implements OnInit { nodes$: Observable; country: {name: string, flag: string}; + nodesPagination$: Observable; + startingIndexSubject: BehaviorSubject = new BehaviorSubject(0); + page = 1; + pageSize = 15; + maxSize = window.innerWidth <= 767.98 ? 3 : 5; + isLoading = true; skeletonLines: number[] = []; @@ -23,7 +29,7 @@ export class NodesPerCountry implements OnInit { private seoService: SeoService, private route: ActivatedRoute, ) { - for (let i = 0; i < 20; ++i) { + for (let i = 0; i < this.pageSize; ++i) { this.skeletonLines.push(i); } } @@ -31,6 +37,7 @@ export class NodesPerCountry implements OnInit { ngOnInit(): void { this.nodes$ = this.apiService.getNodeForCountry$(this.route.snapshot.params.country) .pipe( + tap(() => this.isLoading = true), map(response => { this.seoService.setTitle($localize`Lightning nodes in ${response.country.en}`); this.seoService.setDescription($localize`:@@meta.description.lightning.nodes-country:Explore all the Lightning nodes hosted in ${response.country.en} and see an overview of each node's capacity, number of open channels, and more.`); @@ -87,11 +94,21 @@ export class NodesPerCountry implements OnInit { ispCount: Object.keys(isps).length }; }), + tap(() => this.isLoading = false), share() ); + + this.nodesPagination$ = combineLatest([this.nodes$, this.startingIndexSubject]).pipe( + map(([response, startingIndex]) => response.nodes.slice(startingIndex, startingIndex + this.pageSize)) + ); } trackByPublicKey(index: number, node: any): string { return node.public_key; } + + pageChange(page: number): void { + this.startingIndexSubject.next((page - 1) * this.pageSize); + this.page = page; + } } diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html index 3daafe4db..865d2d2dd 100644 --- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html +++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.html @@ -61,8 +61,8 @@ Channels Location - - + + {{ node.alias }} @@ -113,5 +113,10 @@ + + + diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss index b829c5b59..b043d36f8 100644 --- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss +++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.scss @@ -24,7 +24,7 @@ .timestamp-first { width: 20%; - @media (max-width: 576px) { + @media (max-width: 1060px) { display: none } } @@ -32,7 +32,7 @@ .timestamp-update { width: 16%; - @media (max-width: 576px) { + @media (max-width: 1060px) { display: none } } @@ -56,7 +56,7 @@ .city { max-width: 150px; - @media (max-width: 576px) { + @media (max-width: 675px) { display: none } } diff --git a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts index d4f27975c..f6c61a9f6 100644 --- a/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts +++ b/frontend/src/app/lightning/nodes-per-isp/nodes-per-isp.component.ts @@ -1,6 +1,6 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { map, Observable, share } from 'rxjs'; +import { BehaviorSubject, combineLatest, map, Observable, share, tap } from 'rxjs'; import { ApiService } from '../../services/api.service'; import { SeoService } from '../../services/seo.service'; import { getFlagEmoji } from '../../shared/common.utils'; @@ -15,6 +15,12 @@ import { GeolocationData } from '../../shared/components/geolocation/geolocation export class NodesPerISP implements OnInit { nodes$: Observable; isp: {name: string, id: number}; + nodesPagination$: Observable; + startingIndexSubject: BehaviorSubject = new BehaviorSubject(0); + page = 1; + pageSize = 15; + maxSize = window.innerWidth <= 767.98 ? 3 : 5; + isLoading = true; skeletonLines: number[] = []; @@ -23,7 +29,7 @@ export class NodesPerISP implements OnInit { private seoService: SeoService, private route: ActivatedRoute, ) { - for (let i = 0; i < 20; ++i) { + for (let i = 0; i < this.pageSize; ++i) { this.skeletonLines.push(i); } } @@ -31,6 +37,7 @@ export class NodesPerISP implements OnInit { ngOnInit(): void { this.nodes$ = this.apiService.getNodeForISP$(this.route.snapshot.params.isp) .pipe( + tap(() => this.isLoading = true), map(response => { this.isp = { name: response.isp, @@ -77,11 +84,21 @@ export class NodesPerISP implements OnInit { topCountry: topCountry, }; }), + tap(() => this.isLoading = false), share() ); + + this.nodesPagination$ = combineLatest([this.nodes$, this.startingIndexSubject]).pipe( + map(([response, startingIndex]) => response.nodes.slice(startingIndex, startingIndex + this.pageSize)) + ); } trackByPublicKey(index: number, node: any): string { return node.public_key; } + + pageChange(page: number): void { + this.startingIndexSubject.next((page - 1) * this.pageSize); + this.page = page; + } }