mempool/frontend/src/app/assets/assets.component.html

75 lines
2.9 KiB
HTML

<div class="container-xl">
<h1 style="float: left;">Registered assets</h1>
<br>
<div class="clearfix"></div>
<form [formGroup]="searchForm" class="form-inline">
<div class="input-group m-2">
<input style="width: 250px;" formControlName="searchText" type="text" class="form-control" placeholder="Search asset">
<div class="input-group-append">
<button [disabled]="!searchForm.get('searchText')?.value.length" class="btn btn-secondary" type="button" (click)="searchForm.get('searchText')?.setValue('');" autocomplete="off">Clear</button>
</div>
</div>
</form>
<ng-template [ngIf]="!isLoading && !error">
<table class="table table-borderless table-striped">
<thead>
<th class="td-name">Name</th>
<th>Ticker</th>
<th class="d-none d-md-block">Issuer domain</th>
<th>Asset ID</th>
<th class="d-none d-lg-block">Issuance TX</th>
</thead>
<tbody>
<tr *ngFor="let asset of filteredAssets; trackBy: trackByAsset">
<td class="td-name">{{ asset.name }}</td>
<td>{{ asset.ticker }}</td>
<td class="d-none d-md-block"><a *ngIf="asset.entity" target="_blank" href="{{ 'http://' + asset.entity.domain }}">{{ asset.entity.domain }}</a></td>
<td><a [routerLink]="['/asset/' | relativeUrl, asset.asset_id]">{{ asset.asset_id | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.asset_id"></app-clipboard></td>
<td class="d-none d-lg-block"><ng-template [ngIf]="asset.issuance_txin"><a [routerLink]="['/tx/' | relativeUrl, asset.issuance_txin.txid]">{{ asset.issuance_txin.txid | shortenString : 13 }}</a> <app-clipboard class="d-none d-sm-inline-block" [text]="asset.issuance_txin.txid"></app-clipboard></ng-template></td>
</tr>
</tbody>
</table>
<br>
<ngb-pagination [collectionSize]="assets.length" [rotate]="true" [pageSize]="itemsPerPage" [(page)]="page" (pageChange)="pageChange(page)" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
</ng-template>
<ng-template [ngIf]="isLoading && !error">
<table class="table table-borderless table-striped">
<thead>
<th>Name</th>
<th>Ticker</th>
<th>Issuer domain</th>
<th>Asset ID</th>
<th>Issuance TX</th>
</thead>
<tbody>
<tr *ngFor="let dummy of [0,0,0]">
<td><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td class="d-none d-md-block"><span class="skeleton-loader"></span></td>
<td><span class="skeleton-loader"></span></td>
<td class="d-none d-lg-block"><span class="skeleton-loader"></span></td>
</tr>
</tbody>
</table>
</ng-template>
<ng-template [ngIf]="error">
<div class="text-center">
Error loading assets data.
<br>
<i>{{ error.error }}</i>
</div>
</ng-template>
</div>
<br>