You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
84 lines
6.4 KiB
HTML
84 lines
6.4 KiB
HTML
<div fxLayout="column" *ngIf="selNode.userPersona === userPersonaEnum.OPERATOR; else merchantDashboard">
|
|
<div fxLayout="row" fxLayoutAlign="start end" class="padding-gap-x page-title-container mb-0">
|
|
<fa-icon [icon]="!flgLoading[0] ? faSmile : faFrown" class="page-title-img mr-1"></fa-icon>
|
|
<span class="page-title">{{!flgLoading[0] ? 'Welcome! Your node is up and running.' : 'Error! Please check the server connection.'}}</span>
|
|
</div>
|
|
<mat-grid-list cols="10" [rowHeight]="operatorCardHeight">
|
|
<mat-grid-tile *ngFor="let card of operatorCards" [colspan]="card.cols" [rowspan]="card.rows">
|
|
<mat-card fxLayout="column" fxLayoutAlign="start start" class="dashboard-card p-24">
|
|
<mat-card-header>
|
|
<mat-card-title>
|
|
<fa-icon [icon]="card.icon" class="mr-1"></fa-icon>
|
|
<span>{{card.title}}</span>
|
|
<button *ngIf="card.link" mat-icon-button class="more-button mt-1" [matMenuTriggerFor]="menuOperator" aria-label="Toggle menu">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #menuOperator="matMenu" class="dashboard-vert-menu" xPosition="before">
|
|
<button mat-menu-item (click)="onNavigateTo(card.link)">Go To {{card.goTo}}</button>
|
|
<button *ngIf="card.id === 'capacity'" (click)="onsortChannelsBy()" mat-menu-item>Sort By {{sortField === 'Balance Score' ? 'Capacity' : 'Balance Score'}}</button>
|
|
</mat-menu>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content class="dashboard-card-content w-100" fxFlex="95">
|
|
<div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
|
|
<rtl-cl-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [showColorFieldSeparately]="false" [ngClass]="{'error-border': flgLoading[0]==='error'}"></rtl-cl-node-info>
|
|
<rtl-cl-balances-info fxFlex="100" *ngSwitchCase="'balance'" [balances]="balances" [ngClass]="{'error-border': flgLoading[2]==='error'}"></rtl-cl-balances-info>
|
|
<rtl-cl-channel-capacity-info fxFlex="100" *ngSwitchCase="'capacity'" [sortBy]="sortField" [channelBalances]="channelBalances" [allChannels]="allChannelsCapacity" [ngClass]="{'error-border': flgLoading[5]==='error'}"></rtl-cl-channel-capacity-info>
|
|
<rtl-cl-fee-info fxFlex="100" *ngSwitchCase="'fee'" [fees]="fees" [ngClass]="{'error-border': flgLoading[1]==='error'}"></rtl-cl-fee-info>
|
|
<rtl-cl-channel-status-info fxFlex="100" *ngSwitchCase="'status'" [channelsStatus]="channelsStatus" [ngClass]="{'error-border': flgLoading[2]==='error'}"></rtl-cl-channel-status-info>
|
|
<h3 *ngSwitchDefault>Error! Unable to find information!</h3>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</mat-grid-tile>
|
|
</mat-grid-list>
|
|
</div>
|
|
<ng-template #merchantDashboard>
|
|
<div fxLayout="row" fxLayoutAlign="start end" class="padding-gap-x page-title-container mb-0">
|
|
<fa-icon [icon]="faSmile" class="page-title-img mr-1"></fa-icon>
|
|
<span class="page-title">Welcome! Your node is up and running.</span>
|
|
</div>
|
|
<mat-grid-list cols="6" [rowHeight]="merchantCardHeight">
|
|
<mat-grid-tile *ngFor="let card of merchantCards" [colspan]="card.cols" [rowspan]="card.rows">
|
|
<mat-card fxLayout="column" fxLayoutAlign="start start" class="dashboard-card" [ngClass]="{'p-24': card.id !== 'transactions'}">
|
|
<mat-card-header *ngIf="card.id !== 'transactions'">
|
|
<mat-card-title>
|
|
<fa-icon [icon]="card.icon" class="mr-1"></fa-icon>
|
|
<span>{{card.title}}</span>
|
|
<button *ngIf="card.link" mat-icon-button class="more-button mt-1" [matMenuTriggerFor]="menuMerchant" aria-label="Toggle menu">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #menuMerchant="matMenu" class="dashboard-vert-menu" xPosition="before">
|
|
<button mat-menu-item (click)="onNavigateTo(card.link)">Go To {{card.goTo}}</button>
|
|
</mat-menu>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content class="dashboard-card-content w-100" fxFlex="{{card.id !== 'transactions' ? 95 : 100}}">
|
|
<div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
|
|
<rtl-cl-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [ngClass]="{'error-border': flgLoading[0]==='error'}"></rtl-cl-node-info>
|
|
<rtl-cl-balances-info fxFlex="100" *ngSwitchCase="'balance'" [balances]="balances" [ngClass]="{'error-border': flgLoading[2]==='error'}"></rtl-cl-balances-info>
|
|
<rtl-cl-channel-liquidity-info fxFlex="100" *ngSwitchCase="'inboundLiq'" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels" [ngClass]="{'error-border': flgLoading[5]==='error'}"></rtl-cl-channel-liquidity-info>
|
|
<rtl-cl-channel-liquidity-info fxFlex="100" *ngSwitchCase="'outboundLiq'" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels" [ngClass]="{'error-border': flgLoading[5]==='error'}"></rtl-cl-channel-liquidity-info>
|
|
<span fxLayout="column" fxFlex="100" fxLayoutAlign="space-between start" *ngSwitchCase="'transactions'">
|
|
<mat-tab-group fxLayout="column" class="w-100 dashboard-tabs-group">
|
|
<mat-tab label="Receive"><rtl-cl-lightning-invoices class="h-100" [showDetails]="false"></rtl-cl-lightning-invoices></mat-tab>
|
|
<mat-tab label="Pay"><rtl-cl-lightning-payments [showDetails]="false"></rtl-cl-lightning-payments></mat-tab>
|
|
<mat-tab [disabled]="true">
|
|
<ng-template mat-tab-label>
|
|
<button mat-icon-button class="more-button" [matMenuTriggerFor]="menuTransactions" aria-label="Toggle menu" style="max-width: 20px;">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #menuTransactions="matMenu" class="dashboard-vert-menu" xPosition="before">
|
|
<button mat-menu-item (click)="onNavigateTo(card.link)">Go To {{card.goTo}}</button>
|
|
</mat-menu>
|
|
</ng-template>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</span>
|
|
<h3 *ngSwitchDefault>Error! Unable to find information!</h3>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</mat-grid-tile>
|
|
</mat-grid-list>
|
|
</ng-template> |