machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' into simon/svg-logos

Browse Source
This commit is contained in:
wiz
2022-08-30 22:07:02 +02:00
committed by GitHub
parent 004c6bdcdb 08d73e24c5
commit 20f0b08b3e
63 changed files with 946 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
frontend/src/app/lightning/node/node.component.html
View File

@@ -1,10 +1,11 @@
<div class="container-xl" *ngIf="(node$ | async) as node">
<div class="container-xl" *ngIf="(node$ | async) as node; else skeletonLoader">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
<div class="title-container mb-2" *ngIf="!error">
<h1 class="mb-0 text-truncate">{{ node.alias }}</h1>
<span class="tx-link">
<a [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">
{{ node.public_key | shortenString : publicKeySize }}
<span class="d-inline d-lg-none">{{ node.public_key | shortenString : 24 }}</span>
<span class="d-none d-lg-inline">{{ node.public_key }}</span>
</a>
<app-clipboard [text]="node.public_key"></app-clipboard>
</span>
@@ -133,7 +134,7 @@
<app-node-channels style="display:block;margin-bottom: 40px" [publicKey]="node.public_key"></app-node-channels>
<div class="d-flex justify-content-between">
<div class="d-flex">
<h2 *ngIf="channelsListStatus === 'open'">
<span i18n="lightning.open-channels">Open channels</span>
<span> ({{ node.opened_channel_count }})</span>
@@ -142,12 +143,112 @@
<span i18n="lightning.open-channels">Closed channels</span>
<span> ({{ node.closed_channel_count }})</span>
</h2>
<div *ngIf="channelListLoading" class="spinner-border ml-3" role="status"></div>
</div>
<app-channels-list [publicKey]="node.public_key"
(channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"></app-channels-list>
(channelsStatusChangedEvent)="onChannelsListStatusChanged($event)"
(loadingEvent)="onLoadingEvent($event)"
></app-channels-list>
</div>
</div>
<ng-template #skeletonLoader>
<div class="container-xl">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.node">Lightning node</h5>
<div class="title-container mb-2">
<h1 class="mb-0"><span class="skeleton-loader" style="width: 250px; height: 36px;"></span></h1>
<span class="tx-link">
<span class="skeleton-loader" style="margin-bottom: 5px; width: 80%;"></span>
</span>
</div>
<div class="clearfix"></div>
<div class="box">
<div class="row">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
<div class="w-100 d-block d-md-none"></div>
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
<tr>
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="input-group mt-3" >
<span class="input-group-text" id="basic-addon3"><span class="skeleton-loader" style="width: 75px;"></span></span>
<input type="text" class="form-control" disabled style="opacity: 0.3;">
<button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" [disabled]="true">
<fa-icon [icon]="['fas', 'qrcode']" [fixedWidth]="true"></fa-icon>
</button>
<button class="btn btn-secondary ml-1" type="button" id="inputGroupFileAddon04" [disabled]="true">
<app-clipboard [text]="''"></app-clipboard>
</button>
</div>
<br>
<div class="row">
<div class="col-sm">
<div style="height: 400px;">
<div class="text-center loadingGraphs">
<div class="spinner-border text-light"></div>
</div>
</div>
</div>
<div class="col-sm">
<div style="height: 400px;">
<div class="text-center loadingGraphs">
<div class="spinner-border text-light"></div>
</div>
</div>
</div>
</div>
</div>
</ng-template>
<br>

22
frontend/src/app/lightning/node/node.component.scss
View File

@@ -56,4 +56,24 @@ app-fiat {
display: inline-block;
margin-left: 10px;
}
}
}
.spinner-border {
@media (min-width: 768px) {
margin-top: 6.5px;
width: 1.75rem;
height: 1.75rem;
}
@media (max-width: 768px) {
margin-top: 2.3px;
width: 1.5rem;
height: 1.5rem;
}
}
.loadingGraphs {
position: absolute;
top: 50%;
left: calc(50% - 15px);
z-index: 100;
}

14
frontend/src/app/lightning/node/node.component.ts
View File

@@ -4,7 +4,6 @@ import { Observable } from 'rxjs';
import { catchError, map, switchMap } from 'rxjs/operators';
import { SeoService } from 'src/app/services/seo.service';
import { LightningApiService } from '../lightning-api.service';
import { isMobile } from '../../shared/common.utils';
import { GeolocationData } from 'src/app/shared/components/geolocation/geolocation.component';
@Component({
@@ -22,18 +21,13 @@ export class NodeComponent implements OnInit {
channelsListStatus: string;
error: Error;
publicKey: string;
publicKeySize = 99;
channelListLoading = false;
constructor(
private lightningApiService: LightningApiService,
private activatedRoute: ActivatedRoute,
private seoService: SeoService,
) {
if (isMobile()) {
this.publicKeySize = 12;
}
}
) { }
ngOnInit(): void {
this.node$ = this.activatedRoute.paramMap
@@ -97,4 +91,8 @@ export class NodeComponent implements OnInit {
onChannelsListStatusChanged(e) {
this.channelsListStatus = e;
}
onLoadingEvent(e) {
this.channelListLoading = e;
}
}