mempool/frontend/src/app/lightning/channel/channel.component.html
2022-11-30 18:23:59 +09:00

172 lines
6.7 KiB
HTML

<div class="container-xl" *ngIf="(channel$ | async) as channel; else skeletonLoader">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
<div class="title-container">
<h1 class="mb-0">{{ channel.short_id }}</h1>
<span class="tx-link">
<a [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
<app-clipboard [text]="channel.id"></app-clipboard>
</span>
</div>
<div class="badges mb-2">
<span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
<span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
<span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2" i18n="status.closed">Closed</span>
<app-closing-type *ngIf="channel.closing_reason" [type]="channel.closing_reason"></app-closing-type>
</div>
<div class="clearfix"></div>
<app-nodes-channels-map *ngIf="!error && (channelGeo$ | async) as channelGeo" [style]="'channelpage'"
[channel]="channelGeo"></app-nodes-channels-map>
<div class="box">
<div class="row">
<div class="col-md">
<table class="table table-borderless table-striped">
<tbody>
<tr>
<td i18n="lightning.created">Created</td>
<td><app-timestamp [dateString]="channel.created"></app-timestamp></td>
</tr>
<tr *ngIf="channel.status !== 2">
<td i18n="lightning.last-update">Last update</td>
<td><app-timestamp [dateString]="channel.updated_at"></app-timestamp></td>
</tr>
<tr *ngIf="channel.status === 2">
<td i18n="lightning.closing_date">Closing date</td>
<td><app-timestamp [dateString]="channel.closing_date"></app-timestamp></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 i18n="lightning.capacity">Capacity</td>
<td><app-sats [satoshis]="channel.capacity"></app-sats><app-fiat [value]="channel.capacity" digitsInfo="1.0-0"></app-fiat></td>
</tr>
<tr *ngIf="channel.closed_by">
<td i18n="lightning.closed_by">Closed by</td>
<td>
<a [routerLink]="['/lightning/node' | relativeUrl, channel.closed_by]" >
<ng-container *ngIf="channel.closed_by === channel.node_left.public_key">{{ channel.node_left.alias }}</ng-container>
<ng-container *ngIf="channel.closed_by === channel.node_right.public_key">{{ channel.node_right.alias }}</ng-container>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br>
<div class="row row-cols-1 row-cols-md-2">
<div class="col">
<app-channel-box [channel]="channel.node_left"></app-channel-box>
<app-channel-close-box *ngIf="showCloseBoxes(channel)" [channel]="channel" [local]="channel.node_left" [remote]="channel.node_right"></app-channel-close-box>
</div>
<div class="col">
<app-channel-box [channel]="channel.node_right"></app-channel-box>
<app-channel-close-box *ngIf="showCloseBoxes(channel)" [channel]="channel" [local]="channel.node_right" [remote]="channel.node_left"></app-channel-close-box>
</div>
</div>
<br>
<ng-container *ngIf="transactions$ | async as transactions">
<ng-template [ngIf]="transactions[0]">
<div class="d-flex">
<h3 i18n="lightning.opening-transaction">Opening transaction</h3>
<button type="button" class="btn btn-outline-info details-button btn-sm" (click)="txList1.toggleDetails()"
i18n="transaction.details|Transaction Details">Details</button>
</div>
<app-transactions-list #txList1 [transactions]="[transactions[0]]" [showConfirmations]="true" [rowLimit]="5">
</app-transactions-list>
</ng-template>
<ng-template [ngIf]="transactions[1]">
<div class="closing-header d-flex">
<h3 style="margin: 0;" i18n="lightning.closing-transaction">Closing transaction</h3>&nbsp;&nbsp;<app-closing-type [type]="channel.closing_reason">
</app-closing-type>
<button type="button" class="btn btn-outline-info details-button btn-sm" (click)="txList2.toggleDetails()"
i18n="transaction.details|Transaction Details">Details</button>
</div>
<app-transactions-list #txList2 [transactions]="[transactions[1]]" [showConfirmations]="true" [rowLimit]="5">
</app-transactions-list>
</ng-template>
</ng-container>
</div>
<br>
<ng-template [ngIf]="error">
<div class="text-center">
<span i18n="error.general-loading-data">Error loading data.</span>
<br><br>
<i>{{ error.status }}: {{ error.error }}</i>
</div>
</ng-template>
<ng-template #skeletonLoader>
<div class="container-xl">
<h5 class="mb-0" style="color: #ffffff66" i18n="lightning.channel">Lightning channel</h5>
<div class="title-container">
<h1 class="mb-0"><span class="skeleton-loader" style="width: 275px; height: 25px;"></span></h1>
<span class="tx-link">
<span class="skeleton-loader" style="margin-bottom: 5px; width: 210px;"></span>
</span>
</div>
<div class="badges mb-2">
<span class="skeleton-loader" style="width: 50px; height: 22px; margin-top: 5px;"></span>
</div>
<div class="clearfix"></div>
<div style="height: 413px; padding: 15px;">
<div class="text-center loading-spinner">
<div class="spinner-border text-light"></div>
</div>
</div>
<br>
<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>
</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>
</tbody>
</table>
</div>
</div>
</div>
</div>
</ng-template>