Column width dynamic

pull/1127/head
ShahanaFarooqui 2 years ago
parent 4d163a8216
commit 2b368c4e39

@ -29,7 +29,7 @@
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let hop">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '40rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{hop?.id}}</span>
</div>
</td>
@ -37,7 +37,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let hop">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '40rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{hop?.alias}}</span>
</div>
</td>

@ -1,11 +0,0 @@
.mat-column-id, .mat-column-alias {
flex: 0 0 22%;
width: 22%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -63,7 +63,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let lqNode">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span fxLayout="row" fxLayoutAlign="start center" class="ellipsis-child">
{{lqNode?.alias}}
<mat-chip-list class="ml-half" aria-label="Address Types">
@ -78,7 +78,7 @@
<ng-container matColumnDef="nodeid">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Node Id </th>
<td mat-cell *matCellDef="let lqNode">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{lqNode?.nodeid}}</span>
</div>
</td>

@ -1,12 +0,0 @@
.mat-column-alias, .mat-column-nodeid {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -34,6 +34,7 @@ export class CLNLiquidityAdsListComponent implements OnInit, OnDestroy {
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public colWidth = '20rem';
public PAGE_ID = 'liquidity_ads';
public tableSetting: TableSetting = { tableId: 'liquidity_ads', recordsPerPage: PAGE_SIZE, sortBy: 'channel_opening_fee', sortOrder: SortOrderEnum.ASCENDING };
public askTooltipMsg = '';
@ -83,6 +84,7 @@ export class CLNLiquidityAdsListComponent implements OnInit, OnDestroy {
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
combineLatest([this.store.select(nodeInfoAndNodeSettingsAndBalance), this.dataService.listNetworkNodes('?liquidity_ads=yes')]).pipe(takeUntil(this.unSubs[1])).

@ -10,7 +10,7 @@
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table [dataSource]="listUTXOs" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="UTXO Status" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="UTXO Status" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let utxo">
<span fxLayout="row" fxLayoutAlign="end center" >
<span *ngIf="numDustUTXOs > 0 && !isDustUTXO">
@ -26,7 +26,7 @@
<ng-container matColumnDef="txid">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
<td mat-cell *matCellDef="let utxo">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{utxo.txid}}</span>
</span>
</td>
@ -34,7 +34,7 @@
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Address </th>
<td mat-cell *matCellDef="let utxo">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{utxo.address}}</span>
</span>
</td>
@ -42,7 +42,7 @@
<ng-container matColumnDef="scriptpubkey">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Script Pubkey </th>
<td mat-cell *matCellDef="let utxo">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{utxo.scriptpubkey}}</span>
</span>
</td>

@ -1,15 +1,4 @@
.mat-column-status {
width: 6rem;
}
.mat-column-txid, .mat-column-address, .mat-column-scriptpubkey {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
max-width: 1.2rem;
width:1.2rem;
}

@ -32,6 +32,7 @@ export class CLNOnChainUtxosComponent implements OnInit, AfterViewInit, OnDestro
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
@Input() numDustUTXOs = 0;
@Input() isDustUTXO = false;
public colWidth = '20rem';
public PAGE_ID = 'on_chain';
public tableSetting: TableSetting = { tableId: 'utxos', recordsPerPage: PAGE_SIZE, sortBy: 'status', sortOrder: SortOrderEnum.DESCENDING };
public displayedColumns: any[] = [];
@ -71,6 +72,7 @@ export class CLNOnChainUtxosComponent implements OnInit, AfterViewInit, OnDestro
this.displayedColumns.unshift('status');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(utxos).pipe(takeUntil(this.unSubs[1])).
@ -81,7 +83,7 @@ export class CLNOnChainUtxosComponent implements OnInit, AfterViewInit, OnDestro
this.errorMessage = !this.apiCallStatus.message ? '' : (typeof (this.apiCallStatus.message) === 'object') ? JSON.stringify(this.apiCallStatus.message) : this.apiCallStatus.message;
}
this.utxos = (this.isDustUTXO) ? utxosSeletor.utxos?.filter((utxo) => +(utxo.value || 0) < 1000) : utxosSeletor.utxos ? utxosSeletor.utxos : [];
if (this.utxos && this.utxos.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.utxos && this.utxos.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadUTXOsTable(this.utxos);
}
this.logger.info(utxosSeletor);
@ -89,7 +91,7 @@ export class CLNOnChainUtxosComponent implements OnInit, AfterViewInit, OnDestro
}
ngAfterViewInit() {
if (this.utxos && this.utxos.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.utxos && this.utxos.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadUTXOsTable(this.utxos);
}
}

@ -18,7 +18,7 @@
<ng-container matColumnDef="short_channel_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Short Channel ID </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.short_channel_id}}</span>
</div>
</td>
@ -26,7 +26,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.alias}}</span>
</div>
</td>
@ -34,7 +34,7 @@
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.id}}</span>
</div>
</td>
@ -42,7 +42,7 @@
<ng-container matColumnDef="channel_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.channel_id}}</span>
</div>
</td>
@ -50,7 +50,7 @@
<ng-container matColumnDef="funding_txid">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Funding Transaction Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.funding_txid}}</span>
</div>
</td>

@ -1,35 +1,10 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-private {
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-short_channel_id, .mat-column-alias, .mat-column-id, .mat-column-channel_id, .mat-column-funding_txid {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-balancedness {
padding-left: 3rem;
flex: 0 0 22%;
width: 22%;
}
.mat-column-state, .mat-column-msatoshi_to_us, .mat-column-msatoshi_to_them {
flex: 1 1 15%;
width: 15%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include for_screensize(phone) {
white-space: unset;
}
}
.mat-column-actions {
min-height: 4.8rem;
padding-left: 2rem;
min-width: 15rem;
max-width: 30rem;
}

@ -38,6 +38,7 @@ export class CLNChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public faEye = faEye;
public faEyeSlash = faEyeSlash;
public colWidth = '20rem';
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'open_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public totalBalance = 0;
@ -87,6 +88,7 @@ export class CLNChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
this.displayedColumns.unshift('private');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(channels).pipe(takeUntil(this.unSubs[2])).

@ -18,7 +18,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.alias}}</span>
</div>
</td>
@ -26,7 +26,7 @@
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.id}}</span>
</div>
</td>
@ -34,7 +34,7 @@
<ng-container matColumnDef="channel_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.channel_id}}</span>
</div>
</td>
@ -42,7 +42,7 @@
<ng-container matColumnDef="funding_txid">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Funding Transaction Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.funding_txid}}</span>
</div>
</td>
@ -53,7 +53,7 @@
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef mat-sort-header> State </th>
<td mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}"> {{CLNChannelPendingState[channel?.state]}} </td>
<td mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}"> {{CLNChannelPendingState[channel?.state]}} </td>
</ng-container>
<ng-container matColumnDef="our_channel_reserve_satoshis">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Local Reserve (Sats) </th>

@ -1,29 +1,4 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-private {
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-short_channel_id, .mat-column-alias, .mat-column-id, .mat-column-channel_id, .mat-column-funding_txid {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-state, .mat-column-msatoshi_to_us, .mat-column-msatoshi_to_them {
flex: 1 1 15%;
width: 15%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include for_screensize(phone) {
white-space: unset;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -36,6 +36,7 @@ export class CLNChannelPendingTableComponent implements OnInit, AfterViewInit, O
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public faEye = faEye;
public faEyeSlash = faEyeSlash;
public colWidth = '20rem';
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'pending_inactive_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public isCompatibleVersion = false;
@ -89,6 +90,7 @@ export class CLNChannelPendingTableComponent implements OnInit, AfterViewInit, O
this.displayedColumns.unshift('private');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(channels).pipe(takeUntil(this.unSubs[2])).

@ -18,7 +18,7 @@
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table [dataSource]="peers" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="connected">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Connected" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Connected" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let peer">
<span *ngIf="peer?.connected" class="dot green" matTooltip="Connected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="!peer?.connected" class="dot red" matTooltip="Disconnected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
@ -27,7 +27,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '40rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{peer?.alias}}</span>
</div>
</td>
@ -35,7 +35,7 @@
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '40rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{peer?.id}}</span>
</div>
</td>
@ -43,7 +43,7 @@
<ng-container matColumnDef="netaddr">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Network Address </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '40rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child" *ngFor="let addr of peer?.netaddr; last as isLast">{{addr}}<span *ngIf="!isLast">,<br></span></span>
</div>
</td>

@ -2,16 +2,3 @@
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-alias, .mat-column-id, .mat-column-netaddr {
flex: 0 0 20%;
width: 20%;
white-space: nowrap;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -37,6 +37,7 @@ export class CLNPeersComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public faUsers = faUsers;
public colWidth = '20rem';
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'peers', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public newlyAddedPeer = '';
@ -82,6 +83,7 @@ export class CLNPeersComponent implements OnInit, AfterViewInit, OnDestroy {
this.displayedColumns.unshift('connected');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(peers).pipe(takeUntil(this.unSubs[2])).

@ -27,6 +27,7 @@ export class CLNTransactionsReportComponent implements OnInit, OnDestroy {
public secondsInADay = 24 * 60 * 60;
public payments: Payment[] = [];
public invoices: Invoice[] = [];
public colWidth = '20rem';
public PAGE_ID = 'reports';
public tableSetting: TableSetting = { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'date', sortOrder: SortOrderEnum.DESCENDING };
public displayedColumns: any[] = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'];
@ -61,6 +62,7 @@ export class CLNTransactionsReportComponent implements OnInit, OnDestroy {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.push('actions');
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(payments).pipe(takeUntil(this.unSubs[1]),

@ -30,7 +30,7 @@
<ng-container matColumnDef="in_channel_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span>
</span>
</td>
@ -42,7 +42,7 @@
<ng-container matColumnDef="out_channel_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span>
</span>
</td>

@ -1,11 +0,0 @@
.mat-column-in_channel_alias, .mat-column-out_channel_alias {
flex: 0 0 10%;
width: 10%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -33,6 +33,7 @@ export class CLNFailedTransactionsComponent implements OnInit, AfterViewInit, On
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public colWidth = '20rem';
public PAGE_ID = 'routing';
public tableSetting: TableSetting = { tableId: 'failed', recordsPerPage: PAGE_SIZE, sortBy: 'received_time', sortOrder: SortOrderEnum.DESCENDING };
public faExclamationTriangle = faExclamationTriangle;
@ -73,6 +74,7 @@ export class CLNFailedTransactionsComponent implements OnInit, AfterViewInit, On
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(failedForwardingHistory).pipe(takeUntil(this.unSubs[1])).
@ -84,7 +86,7 @@ export class CLNFailedTransactionsComponent implements OnInit, AfterViewInit, On
}
this.totalFailedTransactions = ffhSeletor.failedForwardingHistory.totalForwards || 0;
this.failedEvents = ffhSeletor.failedForwardingHistory.listForwards || [];
if (this.failedEvents.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.failedEvents.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadFailedEventsTable(this.failedEvents);
}
this.logger.info(ffhSeletor);

@ -24,7 +24,7 @@
<ng-container matColumnDef="in_channel_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span>
</div>
</td>
@ -36,7 +36,7 @@
<ng-container matColumnDef="out_channel_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span>
</div>
</td>
@ -44,7 +44,7 @@
<ng-container matColumnDef="payment_hash">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.payment_hash}}</span>
</div>
</td>

@ -1,11 +0,0 @@
.mat-column-in_channel_alias, .mat-column-out_channel_alias, .mat-column-payment_hash {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -36,6 +36,7 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
@Input() tableId = 'forwarding_history';
@Input() eventsData = [];
@Input() filterValue = '';
public colWidth = '20rem';
public tableSetting: TableSetting = { tableId: 'forwarding_history', recordsPerPage: PAGE_SIZE, sortBy: 'received_time', sortOrder: SortOrderEnum.DESCENDING };
public successfulEvents: ForwardingEvent[] = [];
public displayedColumns: any[] = [];
@ -73,6 +74,7 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.pipe(take(1)).subscribe((state) => {
@ -90,7 +92,7 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
if (this.eventsData.length <= 0 && fhSeletor.forwardingHistory.listForwards) {
this.totalForwardedTransactions = fhSeletor.forwardingHistory.totalForwards || 0;
this.successfulEvents = fhSeletor.forwardingHistory.listForwards || [];
if (this.successfulEvents.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.successfulEvents.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadForwardingEventsTable(this.successfulEvents);
}
this.logger.info(fhSeletor);

@ -26,7 +26,7 @@
<ng-container matColumnDef="in_channel_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.in_channel_alias}}</span>
</span>
</td>
@ -38,7 +38,7 @@
<ng-container matColumnDef="out_channel_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.out_channel_alias}}</span>
</span>
</td>

@ -1,11 +0,0 @@
.mat-column-in_channel_alias, .mat-column-out_channel_alias {
flex: 0 0 10%;
width: 10%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -34,6 +34,7 @@ export class CLNLocalFailedTransactionsComponent implements OnInit, AfterViewIni
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public faExclamationTriangle = faExclamationTriangle;
public colWidth = '20rem';
public PAGE_ID = 'routing';
public tableSetting: TableSetting = { tableId: 'local_failed', recordsPerPage: PAGE_SIZE, sortBy: 'received_time', sortOrder: SortOrderEnum.DESCENDING };
public CLNFailReason = CLNFailReason;
@ -74,6 +75,7 @@ export class CLNLocalFailedTransactionsComponent implements OnInit, AfterViewIni
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(localFailedForwardingHistory).pipe(takeUntil(this.unSubs[1])).
@ -85,7 +87,7 @@ export class CLNLocalFailedTransactionsComponent implements OnInit, AfterViewIni
}
this.totalLocalFailedTransactions = lffhSeletor.localFailedForwardingHistory.totalForwards || 0;
this.failedLocalEvents = lffhSeletor.localFailedForwardingHistory.listForwards || [];
if (this.failedLocalEvents.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.failedLocalEvents.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadLocalfailedLocalEventsTable(this.failedLocalEvents);
}
this.logger.info(lffhSeletor);

@ -14,7 +14,7 @@
<ng-container matColumnDef="channel_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
<td mat-cell *matCellDef="let rPeer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '10rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{rPeer.channel_id}}</span>
</div>
</td>
@ -22,7 +22,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
<td mat-cell *matCellDef="let rPeer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '10rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{rPeer.alias}}</span>
</div>
</td>
@ -67,7 +67,7 @@
<ng-container matColumnDef="channel_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
<td mat-cell *matCellDef="let rPeer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '10rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{rPeer.channel_id}}</span>
</div>
</td>
@ -75,7 +75,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
<td mat-cell *matCellDef="let rPeer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '10rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{rPeer.alias}}</span>
</div>
</td>

@ -33,6 +33,7 @@ export class CLNRoutingPeersComponent implements OnInit, OnChanges, AfterViewIni
@ViewChild('paginatorOut', { static: false }) paginatorOut: MatPaginator | undefined;
@Input() eventsData = [];
@Input() filterValue = '';
public colWidth = '20rem';
public PAGE_ID = 'routing';
public tableSetting: TableSetting = { tableId: 'routing_peers', recordsPerPage: PAGE_SIZE, sortBy: 'total_fee', sortOrder: SortOrderEnum.DESCENDING };
public successfulEvents: ForwardingEvent[] = [];
@ -74,6 +75,7 @@ export class CLNRoutingPeersComponent implements OnInit, OnChanges, AfterViewIni
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[1])).

@ -31,7 +31,7 @@
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="invoices" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Status" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Status" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let invoice">
<span *ngIf="invoice?.status === 'paid'" class="dot green" matTooltip="Paid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="invoice?.status === 'unpaid'" class="dot yellow" matTooltip="Unpaid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
@ -55,7 +55,7 @@
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
<td mat-cell *matCellDef="let invoice">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{invoice?.description}}</span>
</div>
</td>
@ -63,7 +63,7 @@
<ng-container matColumnDef="label">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Label </th>
<td mat-cell *matCellDef="let invoice">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{invoice?.label}}</span>
</div>
</td>
@ -71,7 +71,7 @@
<ng-container matColumnDef="payment_hash">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Payment Hash </th>
<td mat-cell *matCellDef="let invoice">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{invoice?.payment_hash}}</span>
</div>
</td>
@ -79,7 +79,7 @@
<ng-container matColumnDef="bolt11">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Invoice </th>
<td mat-cell *matCellDef="let invoice">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{invoice?.bolt11}}</span>
</div>
</td>

@ -2,15 +2,3 @@
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-description, .mat-column-label, .mat-column-payment_hash, .mat-column-bolt11 {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -40,6 +40,7 @@ export class CLNLightningInvoicesTableComponent implements OnInit, AfterViewInit
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
faHistory = faHistory;
public colWidth = '20rem';
public PAGE_ID = 'transactions';
public tableSetting: TableSetting = { tableId: 'invoices', recordsPerPage: PAGE_SIZE, sortBy: 'expires_at', sortOrder: SortOrderEnum.DESCENDING };
public selNode: SelNodeChild | null = {};
@ -93,6 +94,7 @@ export class CLNLightningInvoicesTableComponent implements OnInit, AfterViewInit
this.displayedColumns.unshift('status');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(listInvoices).pipe(takeUntil(this.unSubs[3])).
@ -103,7 +105,7 @@ export class CLNLightningInvoicesTableComponent implements OnInit, AfterViewInit
this.errorMessage = !this.apiCallStatus.message ? '' : (typeof (this.apiCallStatus.message) === 'object') ? JSON.stringify(this.apiCallStatus.message) : this.apiCallStatus.message;
}
this.invoiceJSONArr = invoicesSeletor.listInvoices.invoices || [];
if (this.invoiceJSONArr && this.invoiceJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.invoiceJSONArr && this.invoiceJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadInvoicesTable(this.invoiceJSONArr);
}
this.logger.info(invoicesSeletor);
@ -120,7 +122,7 @@ export class CLNLightningInvoicesTableComponent implements OnInit, AfterViewInit
}
ngAfterViewInit() {
if (this.invoiceJSONArr && this.invoiceJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.invoiceJSONArr && this.invoiceJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadInvoicesTable(this.invoiceJSONArr);
}
}

@ -20,7 +20,7 @@
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Title </th>
<td mat-cell *matCellDef="let offersbookmark">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{offersbookmark.title}}</span>
</div>
</td>
@ -32,7 +32,7 @@
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
<td mat-cell *matCellDef="let offersbookmark">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{offersbookmark.description}}</span>
</div>
</td>
@ -44,7 +44,7 @@
<ng-container matColumnDef="bolt12">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Invoice </th>
<td mat-cell *matCellDef="let offersbookmark">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{offersbookmark.bolt12}}</span>
</div>
</td>

@ -1,11 +0,0 @@
.mat-column-title, .mat-column-description, .mat-column-bolt12 {
flex: 0 0 20%;
width: 20%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -35,6 +35,7 @@ export class CLNOfferBookmarksTableComponent implements OnInit, AfterViewInit, O
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
faHistory = faHistory;
public colWidth = '20rem';
public PAGE_ID = 'transactions';
public tableSetting: TableSetting = { tableId: 'offer_bookmarks', recordsPerPage: PAGE_SIZE, sortBy: 'lastUpdatedAt', sortOrder: SortOrderEnum.DESCENDING };
public displayedColumns: any[] = [];
@ -70,6 +71,7 @@ export class CLNOfferBookmarksTableComponent implements OnInit, AfterViewInit, O
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(offerBookmarks).pipe(takeUntil(this.unSubs[1])).

@ -16,7 +16,7 @@
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="offers" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="active">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Active" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Active" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let offer">
<span *ngIf="offer.active" class="dot green" matTooltip="Active" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="!offer.active" class="dot red" matTooltip="Inactive" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
@ -25,7 +25,7 @@
<ng-container matColumnDef="offer_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Offer ID </th>
<td mat-cell *matCellDef="let offer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '50rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">
{{offer.offer_id}}
</span>
@ -45,7 +45,7 @@
<ng-container matColumnDef="bolt12">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Invoice </th>
<td mat-cell *matCellDef="let offer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '50rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">
{{offer.bolt12}}
</span>

@ -2,15 +2,3 @@
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-offer_id, .mat-column-bolt12 {
flex: 0 0 35%;
width: 35%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -42,6 +42,7 @@ export class CLNOffersTableComponent implements OnInit, AfterViewInit, OnDestroy
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
faHistory = faHistory;
public colWidth = '20rem';
public PAGE_ID = 'transactions';
public tableSetting: TableSetting = { tableId: 'offers', recordsPerPage: PAGE_SIZE, sortBy: 'offer_id', sortOrder: SortOrderEnum.DESCENDING };
public selNode: SelNodeChild | null = {};
@ -95,6 +96,7 @@ export class CLNOffersTableComponent implements OnInit, AfterViewInit, OnDestroy
this.displayedColumns.unshift('active');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(offers).pipe(takeUntil(this.unSubs[3])).

@ -28,7 +28,7 @@
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="payments" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Status" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Status" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let payment">
<span *ngIf="payment.status === 'complete'" class="dot green" matTooltip="Completed" matTooltipPosition="right"></span>
<span *ngIf="payment.status !== 'complete'" class="dot yellow" matTooltip="Failed" matTooltipPosition="right"></span>
@ -47,7 +47,7 @@
<ng-container matColumnDef="payment_hash">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
<td mat-cell *matCellDef="let payment">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{payment?.payment_hash}}</span>
</span>
</td>
@ -55,7 +55,7 @@
<ng-container matColumnDef="bolt11">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Invoice</th>
<td mat-cell *matCellDef="let payment">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{payment?.bolt11}}</span>
</span>
</td>
@ -63,7 +63,7 @@
<ng-container matColumnDef="label">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Label</th>
<td mat-cell *matCellDef="let payment">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{payment?.label}}</span>
</span>
</td>
@ -71,7 +71,7 @@
<ng-container matColumnDef="destination">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Destination</th>
<td mat-cell *matCellDef="let payment">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{payment?.destination}}</span>
</span>
</td>
@ -79,7 +79,7 @@
<ng-container matColumnDef="memo">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Memo</th>
<td mat-cell *matCellDef="let payment">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{payment?.memo}}</span>
</span>
</td>
@ -148,7 +148,7 @@
</ng-container>
<ng-container matColumnDef="group_payment_hash">
<td mat-cell *matCellDef="let payment">
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{payment?.payment_hash}}</span>
</span>
<span *ngIf="payment.is_expanded">
@ -160,11 +160,11 @@
</ng-container>
<ng-container matColumnDef="group_bolt11">
<td mat-cell *matCellDef="let payment">
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{payment?.bolt11}}</span>
</span>
<span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child"></span>
</span>
</span>
@ -172,11 +172,11 @@
</ng-container>
<ng-container matColumnDef="group_label">
<td mat-cell *matCellDef="let payment">
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{payment?.label}}</span>
</span>
<span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child"></span>
</span>
</span>
@ -184,11 +184,11 @@
</ng-container>
<ng-container matColumnDef="group_destination">
<td mat-cell *matCellDef="let payment">
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{payment?.destination}}</span>
</span>
<span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child"></span>
</span>
</span>
@ -196,11 +196,11 @@
</ng-container>
<ng-container matColumnDef="group_memo">
<td mat-cell *matCellDef="let payment">
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{payment?.memo}}</span>
</span>
<span *ngIf="payment.is_expanded">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child"></span>
</span>
</span>

@ -3,18 +3,6 @@
width:1.2rem;
}
.mat-column-payment_hash, .mat-column-bolt11, .mat-column-destination, .mat-column-label, .mat-column-memo {
flex: 0 0 10%;
width: 10%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}
.mat-column-group_actions {
min-height: 4.8rem;

@ -40,6 +40,7 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
@ViewChild('sendPaymentForm', { static: false }) form;
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public colWidth = '20rem';
public PAGE_ID = 'transactions';
public tableSetting: TableSetting = { tableId: 'payments', recordsPerPage: PAGE_SIZE, sortBy: 'created_at', sortOrder: SortOrderEnum.DESCENDING };
public faHistory = faHistory;
@ -92,6 +93,7 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
this.mppColumns = [];
this.displayedColumns.map((col) => this.mppColumns.push('group_' + col));
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
this.logger.info(this.mppColumns);
});
@ -103,7 +105,7 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
this.errorMessage = !this.apiCallStatus.message ? '' : (typeof (this.apiCallStatus.message) === 'object') ? JSON.stringify(this.apiCallStatus.message) : this.apiCallStatus.message;
}
this.paymentJSONArr = paymentsSeletor.payments || [];
if (this.paymentJSONArr.length && this.paymentJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.paymentJSONArr.length && this.paymentJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadPaymentsTable(this.paymentJSONArr);
}
this.logger.info(paymentsSeletor);
@ -111,7 +113,7 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
}
ngAfterViewInit() {
if (this.paymentJSONArr.length && this.paymentJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.paymentJSONArr.length && this.paymentJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadPaymentsTable(this.paymentJSONArr);
}
}

@ -1,10 +0,0 @@
.mat-column-actions {
min-height: 4.8rem;
}
.mat-column-payment_hash {
flex: 1 1 20%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@ -39,12 +39,16 @@
<table mat-table #table[i] [dataSource]="qrHops[i]" [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef> Alias </th>
<td mat-cell *matCellDef="let hop"> {{hop?.alias}} </td>
<td mat-cell *matCellDef="let hop">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span class="ellipsis-child">{{hop?.alias}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let hop">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '60rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
<span class="ellipsis-child">{{hop?.nodeId}}</span>
</span>
</td>

@ -1,11 +0,0 @@
.mat-column-nodeId {
flex: 0 0 50%;
width: 50%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -36,7 +36,7 @@
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Address </th>
<td mat-cell *matCellDef="let transaction">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{transaction?.address}}</span>
</div>
</td>
@ -44,7 +44,7 @@
<ng-container matColumnDef="blockHash">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Blockhash </th>
<td mat-cell *matCellDef="let transaction">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{transaction?.blockHash}}</span>
</div>
</td>
@ -52,7 +52,7 @@
<ng-container matColumnDef="txid">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Id </th>
<td mat-cell *matCellDef="let transaction">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{transaction?.txid}}</span>
</div>
</td>

@ -1,11 +0,0 @@
.mat-column-blockHash, .mat-column-txid, .mat-column-address {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -32,7 +32,8 @@ export class ECLOnChainTransactionHistoryComponent implements OnInit, OnDestroy
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
faHistory = faHistory;
public faHistory = faHistory;
public colWidth = '20rem';
public PAGE_ID = 'on_chain';
public tableSetting: TableSetting = { tableId: 'transaction', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING };
public displayedColumns: any[] = [];
@ -68,6 +69,7 @@ export class ECLOnChainTransactionHistoryComponent implements OnInit, OnDestroy
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(transactions).pipe(takeUntil(this.unSubs[1])).

@ -26,7 +26,7 @@
<ng-container matColumnDef="channelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.channelId}}</span>
</div>
</td>
@ -34,7 +34,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.alias}}</span>
</div>
</td>
@ -42,7 +42,7 @@
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Node Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.nodeId}}</span>
</div>
</td>

@ -1,35 +1,10 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-announceChannel {
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-alias, .mat-column-channelId, .mat-column-nodeId {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-balancedness {
padding-left: 3rem;
flex: 0 0 20%;
width: 20%;
}
.mat-column-shortChannelId, .mat-column-toLocal, .mat-column-toRemote {
flex: 1 1 15%;
width: 15%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include for_screensize(phone) {
white-space: unset;
}
}
.mat-column-actions {
min-height: 4.8rem;
min-width: 15rem;
max-width: 30rem;
}

@ -35,6 +35,7 @@ export class ECLChannelInactiveTableComponent implements OnInit, AfterViewInit,
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public faEye = faEye;
public faEyeSlash = faEyeSlash;
public colWidth = '20rem';
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'inactive_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public inactiveChannels: Channel[];
@ -76,6 +77,7 @@ export class ECLChannelInactiveTableComponent implements OnInit, AfterViewInit,
this.displayedColumns.unshift('announceChannel');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[1])).

@ -22,7 +22,7 @@
<ng-container matColumnDef="channelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.channelId}}</span>
</div>
</td>
@ -30,7 +30,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.alias}}</span>
</div>
</td>
@ -38,7 +38,7 @@
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Node Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.nodeId}}</span>
</div>
</td>

@ -1,40 +1,10 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-announceChannel {
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-alias, .mat-column-channelId, .mat-column-nodeId {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-state, .mat-column-feeBaseMsat, .mat-column-feeProportionalMillionths, .mat-column-toLocal, .mat-column-toRemote {
flex: 1 1 10%;
width: 10%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include for_screensize(tab-port) {
white-space: unset;
flex: 1 1 20%;
width: 20%;
}
@include for_screensize(phone) {
white-space: unset;
}
}
.mat-column-balancedness {
padding-left: 2rem;
flex: 0 0 17%;
width: 17%;
}
.mat-column-actions {
min-height: 4.8rem;
min-width: 15rem;
max-width: 30rem;
}

@ -36,6 +36,7 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public faEye = faEye;
public faEyeSlash = faEyeSlash;
public colWidth = '20rem';
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'open_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public activeChannels: Channel[];
@ -78,6 +79,7 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
this.displayedColumns.unshift('announceChannel');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[1])).
@ -88,7 +90,7 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
this.errorMessage = !this.apiCallStatus.message ? '' : (typeof (this.apiCallStatus.message) === 'object') ? JSON.stringify(this.apiCallStatus.message) : this.apiCallStatus.message;
}
this.activeChannels = allChannelsSelector.activeChannels;
if (this.activeChannels.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.activeChannels.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadChannelsTable();
}
this.logger.info(allChannelsSelector);
@ -108,7 +110,7 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
}
ngAfterViewInit() {
if (this.activeChannels.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.activeChannels.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadChannelsTable();
}
}

@ -22,7 +22,7 @@
<ng-container matColumnDef="channelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.channelId}}</span>
</div>
</td>
@ -34,7 +34,7 @@
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Node Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.nodeId}}</span>
</div>
</td>

@ -2,15 +2,3 @@
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-alias, .mat-column-channelId, .mat-column-nodeId {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -35,6 +35,7 @@ export class ECLChannelPendingTableComponent implements OnInit, AfterViewInit, O
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public faEye = faEye;
public faEyeSlash = faEyeSlash;
public colWidth = '20rem';
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'pending_channels', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public pendingChannels: Channel[];
@ -76,6 +77,7 @@ export class ECLChannelPendingTableComponent implements OnInit, AfterViewInit, O
this.displayedColumns.unshift('announceChannel');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(allChannelsInfo).pipe(takeUntil(this.unSubs[1])).

@ -18,7 +18,7 @@
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="peers" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="State" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="State" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let peer">
<span *ngIf="peer.state === 'CONNECTED'" class="dot green" matTooltip="Connected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="peer.state === 'DISCONNECTED'" class="dot red" matTooltip="Disconnected" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
@ -27,7 +27,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{peer?.alias}}</span>
</div>
</td>
@ -35,7 +35,7 @@
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{peer?.nodeId}}</span>
</div>
</td>

@ -2,15 +2,3 @@
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-alias, .mat-column-nodeId, .mat-column-address {
flex: 0 0 20%;
width: 20%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -36,6 +36,7 @@ export class ECLPeersComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public colWidth = '20rem';
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'peers', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public faUsers = faUsers;
@ -81,6 +82,7 @@ export class ECLPeersComponent implements OnInit, AfterViewInit, OnDestroy {
this.displayedColumns.unshift('state');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});

@ -27,6 +27,7 @@ export class ECLTransactionsReportComponent implements OnInit, OnDestroy {
public secondsInADay = 24 * 60 * 60;
public payments: PaymentSent[] = [];
public invoices: Invoice[] = [];
public colWidth = '20rem';
public PAGE_ID = 'reports';
public tableSetting: TableSetting = { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'date', sortOrder: SortOrderEnum.DESCENDING };
public displayedColumns: any[] = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'];
@ -61,6 +62,7 @@ export class ECLTransactionsReportComponent implements OnInit, OnDestroy {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.push('actions');
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});

@ -10,7 +10,7 @@
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table [dataSource]="forwardingHistoryEvents" fxFlex="100" matSort class="overflow-auto">
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Type (if not payment relayed)" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Type (if not payment relayed)" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let fhEvent">
<span *ngIf="fhEvent?.type !== 'payment-relayed'" class="dot yellow" matTooltip="{{fhEvent?.type | camelcase}}" matTooltipPosition="right" [ngClass]="{'ml-0': screenSize === screenSizeEnum.XS}"></span>
</td>
@ -24,7 +24,7 @@
<ng-container matColumnDef="fromChannelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel Id</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.fromChannelId}}</span>
</div>
</td>
@ -36,7 +36,7 @@
<ng-container matColumnDef="fromChannelAlias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>In Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.fromChannelAlias}}</span>
</div>
</td>
@ -44,7 +44,7 @@
<ng-container matColumnDef="toChannelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel Id</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.toChannelId}}</span>
</div>
</td>
@ -56,7 +56,7 @@
<ng-container matColumnDef="toChannelAlias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Out Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.toChannelAlias}}</span>
</div>
</td>
@ -76,7 +76,7 @@
<ng-container matColumnDef="paymentHash">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Payment Hash</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.paymentHash}}</span>
</div>
</td>

@ -6,16 +6,3 @@
width:1.6rem;
}
}
.mat-column-fromChannelId, .mat-column-fromChannelAlias, .mat-column-toChannelId, .mat-column-toChannelAlias, .mat-column-paymentHash {
padding-left: 1rem;
flex: 0 0 25%;
width: 25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -34,6 +34,7 @@ export class ECLForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
@Input() tableId = 'forwarding_history';
@Input() eventsData: PaymentRelayed[] = [];
@Input() filterValue = '';
public colWidth = '20rem';
public tableSetting: TableSetting = { tableId: 'forwarding_history', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING };
public displayedColumns: any[] = [];
public forwardingHistoryEvents: any = new MatTableDataSource([]);
@ -68,6 +69,7 @@ export class ECLForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
this.displayedColumns.unshift('type');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(payments).pipe(takeUntil(this.unSubs[1])).
@ -79,7 +81,7 @@ export class ECLForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
this.errorMessage = !this.apiCallStatus.message ? '' : (typeof (this.apiCallStatus.message) === 'object') ? JSON.stringify(this.apiCallStatus.message) : this.apiCallStatus.message;
}
this.eventsData = paymentsSelector.payments && paymentsSelector.payments.relayed ? paymentsSelector.payments.relayed : [];
if (this.eventsData.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.eventsData.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadForwardingEventsTable(this.eventsData);
}
this.logger.info(this.eventsData);

@ -14,7 +14,7 @@
<ng-container matColumnDef="channelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
<td mat-cell *matCellDef="let rPeer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '10rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{rPeer?.channelId}}</span>
</div>
</td>
@ -22,7 +22,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
<td mat-cell *matCellDef="let rPeer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '10rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{rPeer?.alias}}</span>
</div>
</td>
@ -67,7 +67,7 @@
<ng-container matColumnDef="channelId">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel ID</th>
<td mat-cell *matCellDef="let rPeer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '10rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{rPeer?.channelId}}</span>
</div>
</td>
@ -75,7 +75,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Peer Alias</th>
<td mat-cell *matCellDef="let rPeer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '10rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{rPeer?.alias}}</span>
</div>
</td>

@ -30,6 +30,7 @@ export class ECLRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
@ViewChild('tableOut', { read: MatSort, static: false }) sortOut: MatSort;
@ViewChild('paginatorIn', { static: false }) paginatorIn: MatPaginator | undefined;
@ViewChild('paginatorOut', { static: false }) paginatorOut: MatPaginator | undefined;
public colWidth = '20rem';
public PAGE_ID = 'routing';
public tableSetting: TableSetting = { tableId: 'routing_peers', recordsPerPage: PAGE_SIZE, sortBy: 'totalFee', sortOrder: SortOrderEnum.DESCENDING };
public routingPeersData: PaymentRelayed[] = [];
@ -66,6 +67,7 @@ export class ECLRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(payments).pipe(takeUntil(this.unSubs[1])).

@ -31,7 +31,7 @@
<mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="invoices" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="status">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Status" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Status" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let invoice">
<span *ngIf="invoice?.status === 'received'" class="dot green" matTooltip="Received" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="invoice?.status === 'unpaid'" class="dot yellow" matTooltip="Unpaid" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
@ -53,7 +53,7 @@
<ng-container matColumnDef="nodeId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Node Id </th>
<td mat-cell *matCellDef="let invoice">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{invoice?.nodeId}}</span>
</div>
</td>
@ -61,7 +61,7 @@
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Description </th>
<td mat-cell *matCellDef="let invoice">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{invoice?.description}}</span>
</div>
</td>
@ -69,7 +69,7 @@
<ng-container matColumnDef="paymentHash">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Payment Hash </th>
<td mat-cell *matCellDef="let invoice">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{invoice?.paymentHash}}</span>
</div>
</td>

@ -2,15 +2,3 @@
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-nodeId, .mat-column-paymentHash, .mat-column-description {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -39,6 +39,7 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
faHistory = faHistory;
public colWidth = '20rem';
public PAGE_ID = 'transactions';
public tableSetting: TableSetting = { tableId: 'invoices', recordsPerPage: PAGE_SIZE, sortBy: 'expiresAt', sortOrder: SortOrderEnum.DESCENDING };
public selNode: SelNodeChild | null = {};
@ -92,6 +93,7 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
this.displayedColumns.unshift('status');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(invoices).pipe(takeUntil(this.unSubs[3])).
@ -102,7 +104,7 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
this.errorMessage = !this.apiCallStatus.message ? '' : (typeof (this.apiCallStatus.message) === 'object') ? JSON.stringify(this.apiCallStatus.message) : this.apiCallStatus.message;
}
this.invoiceJSONArr = (invoicesSelector.invoices && invoicesSelector.invoices.length > 0) ? invoicesSelector.invoices : [];
if (this.invoiceJSONArr && this.invoiceJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.invoiceJSONArr && this.invoiceJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadInvoicesTable(this.invoiceJSONArr);
}
this.logger.info(invoicesSelector);
@ -119,7 +121,7 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
}
ngAfterViewInit() {
if (this.invoiceJSONArr && this.invoiceJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
if (this.invoiceJSONArr && this.invoiceJSONArr.length > 0 && this.sort && this.paginator && this.displayedColumns.length > 0) {
this.loadInvoicesTable(this.invoiceJSONArr);
}
}

@ -1,20 +1,3 @@
.mat-column-id, .mat-column-recipientNodeAlias,
.mat-column-recipientNodeId, .mat-column-description,
.mat-column-paymentHash, .mat-column-paymentPreimage,
.mat-column-group_id, .mat-column-group_recipientNodeId,
.mat-column-group_recipientNodeAlias, .mat-column-group_recipientAmount,
.mat-column-group_description, .mat-column-group_paymentHash, .mat-column-group_paymentPreimage {
flex: 0 0 20%;
width: 20%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}
.mat-column-group_actions {
min-height: 4.8rem;
@ -40,9 +23,6 @@
min-height: 4.2rem;
place-content: center flex-start;
align-items: center;
&.ellipsis-parent {
display: flex;
}
}
.mat-column-group_firstPartTimestamp {

@ -1,10 +0,0 @@
.mat-column-actions {
min-height: 4.8rem;
}
.mat-column-payment_hash {
flex: 1 1 20%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@ -29,7 +29,7 @@
<ng-container matColumnDef="channel_point">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Point </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '28rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '25rem' : '60rem'}">
<span class="ellipsis-child">{{channel?.channel_point}}</span>
</div>
</td>

@ -24,7 +24,7 @@
<ng-container matColumnDef="channel_point">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Point </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '45rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '25rem' : '60rem'}">
<span class="ellipsis-child">{{channel?.channel_point}}</span>
</div>
</td>

@ -33,7 +33,7 @@
<ng-container matColumnDef="pubkey_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
<td mat-cell *matCellDef="let hop">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{hop?.pubkey_alias}}</span>
</div>
</td>
@ -41,7 +41,7 @@
<ng-container matColumnDef="pub_key">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer Pubkey </th>
<td mat-cell *matCellDef="let hop">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{hop?.pub_key}}</span>
</div>
</td>
@ -49,7 +49,7 @@
<ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
<td mat-cell *matCellDef="let hop">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{hop?.chan_id}}</span>
</div>
</td>

@ -1,10 +0,0 @@
.mat-column-actions {
min-height: 4.8rem;
}
.mat-column-pubkey_alias, .mat-column-pub_key, .mat-column-chan_id {
flex: 1 1 20%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@ -27,6 +27,7 @@ import { LoggerService } from '../../../shared/services/logger.service';
export class QueryRoutesComponent implements OnInit, OnDestroy {
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
public colWidth = '20rem';
public PAGE_ID = 'graph_lookup';
public tableSetting: TableSetting = { tableId: 'query_routes', recordsPerPage: PAGE_SIZE, sortBy: 'hop_sequence', sortOrder: SortOrderEnum.ASCENDING };
public destinationPubkey = '';
@ -54,6 +55,7 @@ export class QueryRoutesComponent implements OnInit, OnDestroy {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.push('actions');
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.lndEffects.setQueryRoutes.pipe(takeUntil(this.unSubs[1])).subscribe((queryRoute) => {

@ -15,7 +15,7 @@
<ng-container matColumnDef="label">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Label </th>
<td mat-cell *matCellDef="let transaction">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{transaction?.label}}</span>
</div>
</td>
@ -23,7 +23,7 @@
<ng-container matColumnDef="block_hash">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Block Hash </th>
<td mat-cell *matCellDef="let transaction">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{transaction?.block_hash}}</span>
</div>
</td>
@ -31,7 +31,7 @@
<ng-container matColumnDef="tx_hash">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction Hash </th>
<td mat-cell *matCellDef="let transaction">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{transaction?.tx_hash}}</span>
</div>
</td>

@ -1,10 +0,0 @@
.mat-column-label, .mat-column-block_hash, .mat-column-tx_hash {
flex: 1 1 20%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -31,6 +31,7 @@ export class OnChainTransactionHistoryComponent implements OnInit, OnChanges, On
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public colWidth = '20rem';
public PAGE_ID = 'on_chain';
public tableSetting: TableSetting = { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'time_stamp', sortOrder: SortOrderEnum.DESCENDING };
public transactions: Transaction[];
@ -67,6 +68,7 @@ export class OnChainTransactionHistoryComponent implements OnInit, OnChanges, On
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(transactions).pipe(takeUntil(this.unSubs[1])).

@ -20,7 +20,7 @@
<ng-container matColumnDef="tx_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
<td mat-cell *matCellDef="let utxo">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{utxo.outpoint.txid_str}}</span>
</span>
</td>
@ -34,7 +34,7 @@
<ng-container matColumnDef="label">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Label </th>
<td mat-cell *matCellDef="let utxo">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{utxo.label}}</span>
</span>
</td>
@ -50,7 +50,7 @@
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Address </th>
<td mat-cell *matCellDef="let utxo">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{utxo?.address}}</span>
</span>
</td>

@ -2,15 +2,3 @@
max-width: 1.2rem;
width:1.2rem;
}
.mat-column-label, .mat-column-tx_id, .mat-column-address {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -38,6 +38,7 @@ export class OnChainUTXOsComponent implements OnInit, OnChanges, OnDestroy {
@Input() isDustUTXO = false;
public faMoneyBillWave = faMoneyBillWave;
public DUST_AMOUNT = 1000;
public colWidth = '20rem';
public PAGE_ID = 'on_chain';
public tableSetting: TableSetting = { tableId: 'utxos', recordsPerPage: PAGE_SIZE, sortBy: 'tx_id', sortOrder: SortOrderEnum.DESCENDING };
public utxos: UTXO[];
@ -78,6 +79,7 @@ export class OnChainUTXOsComponent implements OnInit, OnChanges, OnDestroy {
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(utxos).pipe(takeUntil(this.unSubs[1])).

@ -23,8 +23,6 @@
}
.mat-column-actions {
min-height: 4.8rem;
& .btn-htlc-expand {
min-width: 10rem;
width: 10rem;

@ -30,6 +30,7 @@ export class ChannelActiveHTLCsTableComponent implements OnInit, AfterViewInit,
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public colWidth = '20rem';
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'active_HTLCs', recordsPerPage: PAGE_SIZE, sortBy: 'expiration_height', sortOrder: SortOrderEnum.DESCENDING };
public channels: any = new MatTableDataSource([]);
@ -66,6 +67,7 @@ export class ChannelActiveHTLCsTableComponent implements OnInit, AfterViewInit,
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(channels).pipe(takeUntil(this.unSubs[1])).

@ -20,7 +20,7 @@
<ng-container matColumnDef="remote_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.remote_alias}}</span>
</div>
</td>
@ -28,7 +28,7 @@
<ng-container matColumnDef="remote_pubkey">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.remote_pubkey}}</span>
</div>
</td>
@ -36,7 +36,7 @@
<ng-container matColumnDef="channel_point">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Point </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.channel_point}}</span>
</div>
</td>
@ -44,7 +44,7 @@
<ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.chan_id}}</span>
</div>
</td>
@ -52,7 +52,7 @@
<ng-container matColumnDef="closing_tx_hash">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Closing Tx Hash </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.closing_tx_hash}}</span>
</div>
</td>
@ -60,7 +60,7 @@
<ng-container matColumnDef="chain_hash">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Chain Hash </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel?.chain_hash}}</span>
</div>
</td>

@ -30,6 +30,7 @@ export class ChannelClosedTableComponent implements OnInit, AfterViewInit, OnDes
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public colWidth = '20rem';
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'closed', recordsPerPage: PAGE_SIZE, sortBy: 'close_type', sortOrder: SortOrderEnum.DESCENDING };
public channelClosureType = CHANNEL_CLOSURE_TYPE;
@ -67,6 +68,7 @@ export class ChannelClosedTableComponent implements OnInit, AfterViewInit, OnDes
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(closedChannels).pipe(takeUntil(this.unSubs[1])).

@ -9,14 +9,14 @@
<mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
<table mat-table #table fxFlex="100" [dataSource]="channels" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
<ng-container matColumnDef="active">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Active" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Active" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let channel">
<span *ngIf="channel.active" class="dot green" matTooltip="Active" matTooltipPosition="right"></span>
<span *ngIf="!channel.active" class="dot yellow" matTooltip="Inactive" matTooltipPosition="right"></span>
</td>
</ng-container>
<ng-container matColumnDef="private">
<th mat-header-cell *matHeaderCellDef mat-sort-header matTooltip="Private" matTooltipPosition="right"></th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before" matTooltip="Private" matTooltipPosition="right"></th>
<td mat-cell *matCellDef="let channel">
<span *ngIf="channel.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
<span *ngIf="!channel.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
@ -25,7 +25,7 @@
<ng-container matColumnDef="remote_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.remote_alias || channel.remote_pubkey}}</span>
</div>
</td>
@ -33,7 +33,7 @@
<ng-container matColumnDef="remote_pubkey">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.remote_pubkey}}</span>
</div>
</td>
@ -41,7 +41,7 @@
<ng-container matColumnDef="channel_point">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Point </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel_point}}</span>
</div>
</td>
@ -49,7 +49,7 @@
<ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Channel Id</th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.chan_id}}</span>
</div>
</td>

@ -1,5 +1,3 @@
@import "../../../../../shared/theme/styles/mixins.scss";
.mat-column-active {
max-width: 1.2rem;
width:1.2rem;
@ -10,47 +8,8 @@
width:1.6rem;
}
.mat-column-remote_alias, .mat-column-remote_pubkey, .mat-column-channel_point, .mat-column-chan_id {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
.mat-column-balancedness {
flex: 0 0 20%;
width: 20%;
@include for_screensize(tab-land) {
flex: 0 0 35%;
width: 35%;
}
@include for_screensize(tab-port) {
flex: 0 0 25%;
width: 25%;
}
}
.mat-column-uptime, .mat-column-lifetime, .mat-column-local_balance, .mat-column-remote_balance, .mat-column-total_satoshis_sent, .mat-column-total_satoshis_received {
flex: 1 1 10%;
width: 10%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include for_screensize(tab-land) {
white-space: unset;
flex: 1 1 25%;
width: 25%;
}
@include for_screensize(tab-port) {
flex: 0 0 15%;
width: 15%;
}
@include for_screensize(phone) {
white-space: unset;
}
}
.mat-column-actions {
min-height: 4.8rem;
padding-left: 2rem;
min-width: 15rem;
max-width: 30rem;
}

@ -41,6 +41,7 @@ export class ChannelOpenTableComponent implements OnInit, AfterViewInit, OnDestr
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public colWidth = '20rem';
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'open', recordsPerPage: PAGE_SIZE, sortBy: 'balancedness', sortOrder: SortOrderEnum.DESCENDING };
public timeUnit = 'mins:secs';
@ -101,6 +102,7 @@ export class ChannelOpenTableComponent implements OnInit, AfterViewInit, OnDestr
this.displayedColumns.unshift('active');
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(peers).pipe(takeUntil(this.unSubs[3])).

@ -12,7 +12,7 @@
<ng-container matColumnDef="remote_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.remote_alias}}</span>
</div>
</td>
@ -20,7 +20,7 @@
<ng-container matColumnDef="remote_node_pub">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.remote_node_pub}}</span>
</div>
</td>
@ -28,7 +28,7 @@
<ng-container matColumnDef="channel_point">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.channel_point}}</span>
</div>
</td>
@ -106,7 +106,7 @@
<ng-container matColumnDef="closing_txid">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Closing Tx Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.closing_txid}}</span>
</div>
</td>
@ -114,7 +114,7 @@
<ng-container matColumnDef="remote_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.remote_alias}}</span>
</div>
</td>
@ -122,7 +122,7 @@
<ng-container matColumnDef="remote_node_pub">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.remote_node_pub}}</span>
</div>
</td>
@ -130,7 +130,7 @@
<ng-container matColumnDef="channel_point">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.channel_point}}</span>
</div>
</td>
@ -202,7 +202,7 @@
<ng-container matColumnDef="closing_txid">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Closing Tx Id </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.closing_txid}}</span>
</div>
</td>
@ -210,7 +210,7 @@
<ng-container matColumnDef="remote_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.remote_alias}}</span>
</div>
</td>
@ -218,7 +218,7 @@
<ng-container matColumnDef="remote_node_pub">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.remote_node_pub}}</span>
</div>
</td>
@ -226,7 +226,7 @@
<ng-container matColumnDef="channel_point">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.channel_point}}</span>
</div>
</td>
@ -282,7 +282,7 @@
<ng-container matColumnDef="remote_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.remote_alias}}</span>
</div>
</td>
@ -290,7 +290,7 @@
<ng-container matColumnDef="remote_node_pub">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Pubkey </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.remote_node_pub}}</span>
</div>
</td>
@ -298,7 +298,7 @@
<ng-container matColumnDef="channel_point">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{channel.channel.channel_point}}</span>
</div>
</td>

@ -1,11 +1,3 @@
.mat-column-channel_point, .mat-column-remote_alias, .mat-column-remote_node_pub, .mat-column-closing_txid {
flex: 0 0 15%;
width: 15%;
& .ellipsis-parent {
display: flex;
}
}
tr.mat-footer-row td.mat-footer-cell {
border-bottom: none;
}

@ -18,7 +18,7 @@
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{peer?.alias}}</span>
</div>
</td>
@ -26,7 +26,7 @@
<ng-container matColumnDef="pub_key">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Public Key </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{peer?.pub_key}}</span>
</div>
</td>
@ -34,7 +34,7 @@
<ng-container matColumnDef="address">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Address </th>
<td mat-cell *matCellDef="let peer">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '25rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{peer?.address}}</span>
</div>
</td>

@ -1,10 +0,0 @@
.mat-column-alias, .mat-column-address, .mat-column-pub_key {
flex: 1 1 20%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -34,6 +34,7 @@ export class PeersComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
public colWidth = '20rem';
public PAGE_ID = 'peers_channels';
public tableSetting: TableSetting = { tableId: 'peers', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
public availableBalance = 0;
@ -73,6 +74,7 @@ export class PeersComponent implements OnInit, AfterViewInit, OnDestroy {
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(blockchainBalance).pipe(takeUntil(this.unSubs[2])).

@ -29,6 +29,7 @@ export class TransactionsReportComponent implements OnInit, OnDestroy {
public secondsInADay = 24 * 60 * 60;
public payments: Payment[] = [];
public invoices: Invoice[] = [];
public colWidth = '20rem';
public PAGE_ID = 'reports';
public tableSetting: TableSetting = { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'date', sortOrder: SortOrderEnum.DESCENDING };
public displayedColumns: any[] = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'];
@ -66,6 +67,7 @@ export class TransactionsReportComponent implements OnInit, OnDestroy {
this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
}
this.displayedColumns.push('actions');
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});

@ -16,7 +16,7 @@
<ng-container matColumnDef="alias_in">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Inbound Alias</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.alias_in}}</span>
</div>
</td>
@ -24,7 +24,7 @@
<ng-container matColumnDef="chan_id_in">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Inbound Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.chan_id_in}}</span>
</div>
</td>
@ -32,7 +32,7 @@
<ng-container matColumnDef="alias_out">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Outbound Alias</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.alias_out}}</span>
</div>
</td>
@ -40,7 +40,7 @@
<ng-container matColumnDef="chan_id_out">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Outbound Channel</th>
<td mat-cell *matCellDef="let fhEvent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : colWidth}">
<span class="ellipsis-child">{{fhEvent?.chan_id_out}}</span>
</div>
</td>

@ -1,10 +0,0 @@
.mat-column-alias_in, .mat-column-alias_out, .mat-column-chan_id_in, .mat-column-chan_id_out {
flex: 1 1 20%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mat-column-actions {
min-height: 4.8rem;
}

@ -34,6 +34,7 @@ export class ForwardingHistoryComponent implements OnInit, AfterViewInit, OnChan
@Input() tableId = 'forwarding_history';
@Input() eventsData = [];
@Input() filterValue = '';
public colWidth = '20rem';
public PAGE_ID = 'routing';
public tableSetting: TableSetting = { tableId: 'forwarding_history', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING };
public forwardingHistoryData: ForwardingEvent[] = [];
@ -69,6 +70,7 @@ export class ForwardingHistoryComponent implements OnInit, AfterViewInit, OnChan
}
this.displayedColumns.push('actions');
this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
this.colWidth = this.displayedColumns.length ? ((this.commonService.getContainerSize().width / this.displayedColumns.length) / 10) + 'rem' : '20rem';
this.logger.info(this.displayedColumns);
});
this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[1])).

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save