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.
112 lines
9.3 KiB
HTML
112 lines
9.3 KiB
HTML
<div *ngIf="selNode?.userPersona === userPersonaEnum.OPERATOR; else merchantDashboard"fxLayout="column">
|
|
<div fxLayout="row" fxLayoutAlign="start start" class="page-title-container mb-2">
|
|
<fa-icon class="page-title-img mr-1" [icon]="apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR ? faFrown : faSmile" />
|
|
<span class="page-title">{{apiCallStatusNodeInfo.status === apiCallStatusEnum.COMPLETED ? 'Welcome ' + information.alias + '! Your node is up and running.' : apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED ? 'Wait! Getting your node information...' : 'Error! Please check the server connection.'}}</span>
|
|
</div>
|
|
<mat-grid-list cols="10" gutterSize="20px" [rowHeight]="operatorCardHeight">
|
|
<mat-grid-tile *ngFor="let card of operatorCards" fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" [colspan]="card.cols" [rowspan]="card.rows">
|
|
<mat-card fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" class="h-100 dashboard-card">
|
|
<mat-card-header>
|
|
<mat-card-title fxLayoutAlign="space-between center">
|
|
<div>
|
|
<fa-icon class="mr-1" [icon]="card.icon" />
|
|
<span>{{card.title}}</span>
|
|
</div>
|
|
<div>
|
|
<button *ngIf="card.links[0]" mat-icon-button class="more-button" aria-label="Toggle menu" [matMenuTriggerFor]="menuOperator">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #menuOperator="matMenu" class="dashboard-vert-menu" xPosition="before">
|
|
<button *ngFor="let goToOption of card.goToOptions; index as i" mat-menu-item (click)="onNavigateTo(card.links[i])">{{goToOption}}</button>
|
|
<button *ngIf="card.id === 'capacity'" mat-menu-item (click)="onsortChannelsBy()">Sort By {{sortField === 'Balance Score' ? 'Capacity' : 'Balance Score'}}</button>
|
|
</mat-menu>
|
|
</div>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content fxLayout="column" fxFlex="{{card.id === 'capacity' ? 90 : 70}}"
|
|
[ngClass]="{'dashboard-card-content': true,
|
|
'error-border': (card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR) ||
|
|
(card.id === 'balance' && apiCallStatusBalances.status === apiCallStatusEnum.ERROR) ||
|
|
(card.id === 'capacity' && (apiCallStatusChannels.status === apiCallStatusEnum.ERROR || apiCallStatusBalances.status === apiCallStatusEnum.ERROR)) ||
|
|
(card.id === 'fee' && (apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR || apiCallStatusChannels.status === apiCallStatusEnum.ERROR || apiCallStatusFHistory.status === apiCallStatusEnum.ERROR)) ||
|
|
(card.id === 'status' && (apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR || apiCallStatusChannels.status === apiCallStatusEnum.ERROR || apiCallStatusBalances.status === apiCallStatusEnum.ERROR))}">
|
|
<mat-progress-bar *ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
|
(card.id === 'balance' && apiCallStatusBalances.status === apiCallStatusEnum.INITIATED) ||
|
|
(card.id === 'capacity' && (apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusBalances.status === apiCallStatusEnum.INITIATED)) ||
|
|
(card.id === 'fee' && (apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED || apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusFHistory.status === apiCallStatusEnum.INITIATED)) ||
|
|
(card.id === 'status' && (apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED || apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusBalances.status === apiCallStatusEnum.INITIATED))"
|
|
mode="indeterminate"
|
|
/>
|
|
<div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
|
|
<rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" [showColorFieldSeparately]="false" />
|
|
<rtl-cln-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[1]" />
|
|
<rtl-cln-channel-capacity-info *ngSwitchCase="'capacity'" fxFlex="100" [sortBy]="sortField" [channelBalances]="channelBalances" [activeChannels]="activeChannelsCapacity" [errorMessage]="errorMessages[2] + ' ' + errorMessages[1]" />
|
|
<rtl-cln-fee-info *ngSwitchCase="'fee'" fxFlex="100" [fees]="fees" [errorMessage]="errorMessages[0] + ' ' + errorMessages[2] + ' ' + errorMessages[3]" />
|
|
<rtl-cln-channel-status-info *ngSwitchCase="'status'" fxFlex="100" [channelsStatus]="channelsStatus" [errorMessage]="errorMessages[0] + ' ' + errorMessages[1] + ' ' + errorMessages[2]" />
|
|
<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="page-title-container mb-2">
|
|
<fa-icon class="page-title-img mr-1" [icon]="faSmile" />
|
|
<span class="page-title">Welcome {{information.alias}}! Your node is up and running.</span>
|
|
</div>
|
|
<mat-grid-list cols="6" gutterSize="20px" [rowHeight]="merchantCardHeight">
|
|
<mat-grid-tile *ngFor="let card of merchantCards" fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" [colspan]="card.cols" [rowspan]="card.rows">
|
|
<mat-card fxFlex="100" fxLayout="column" fxLayoutAlign="start stretch" class="h-100 dashboard-card" [ngClass]="{'p-0': card.id === 'transactions'}">
|
|
<mat-card-header *ngIf="card.id !== 'transactions'">
|
|
<mat-card-title fxLayoutAlign="space-between center">
|
|
<div>
|
|
<fa-icon class="mr-1" [icon]="card.icon" />
|
|
<span>{{card.title}}</span>
|
|
</div>
|
|
<div>
|
|
<button *ngIf="card.links[0]" mat-icon-button class="more-button" aria-label="Toggle menu" [matMenuTriggerFor]="menuMerchant">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #menuMerchant="matMenu" class="dashboard-vert-menu" xPosition="before">
|
|
<button *ngFor="let goToOption of card.goToOptions; index as i" mat-menu-item (click)="onNavigateTo(card.links[i])">{{goToOption}}</button>
|
|
</mat-menu>
|
|
</div>
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content fxLayout="column" fxLayoutAlign="start stretch" fxFlex="{{card.id === 'transactions' ? 100 : card.id === 'balance' ? 70: 90}}"
|
|
[ngClass]="{'dashboard-card-content': true,
|
|
'error-border': (card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR) ||
|
|
(card.id === 'balance' && apiCallStatusBalances.status === apiCallStatusEnum.ERROR) ||
|
|
((card.id === 'inboundLiq' || card.id === 'outboundLiq') && apiCallStatusChannels.status === apiCallStatusEnum.ERROR)}">
|
|
<mat-progress-bar *ngIf="(card.id === 'node' && apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED) ||
|
|
(card.id === 'balance' && apiCallStatusBalances.status === apiCallStatusEnum.INITIATED) ||
|
|
((card.id === 'inboundLiq' || card.id === 'outboundLiq') && apiCallStatusChannels.status === apiCallStatusEnum.INITIATED)"
|
|
mode="indeterminate"
|
|
/>
|
|
<div fxLayout="column" fxFlex="100" [ngSwitch]="card.id">
|
|
<rtl-cln-node-info *ngSwitchCase="'node'" fxFlex="100" [information]="information" />
|
|
<rtl-cln-balances-info *ngSwitchCase="'balance'" fxFlex="100" [balances]="balances" [errorMessage]="errorMessages[1]" />
|
|
<rtl-cln-channel-liquidity-info *ngSwitchCase="'inboundLiq'" fxFlex="100" [direction]="'In'" [totalLiquidity]="totalInboundLiquidity" [activeChannels]="allInboundChannels" [errorMessage]="errorMessages[2]" />
|
|
<rtl-cln-channel-liquidity-info *ngSwitchCase="'outboundLiq'" fxFlex="100" [direction]="'Out'" [totalLiquidity]="totalOutboundLiquidity" [activeChannels]="allOutboundChannels" [errorMessage]="errorMessages[2]" />
|
|
<span *ngSwitchCase="'transactions'" fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
|
|
<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start" fxLayout="column" class="dashboard-tabs-group">
|
|
<mat-tab label="Receive"><rtl-cln-lightning-invoices-table class="h-100" [calledFrom]="'home'" /></mat-tab>
|
|
<mat-tab label="Pay"><rtl-cln-lightning-payments [calledFrom]="'home'" /></mat-tab>
|
|
</mat-tab-group>
|
|
<div class="underline">
|
|
<button mat-icon-button class="more-button" aria-label="Toggle menu" [matMenuTriggerFor]="menuTransactions">
|
|
<mat-icon>more_vert</mat-icon>
|
|
</button>
|
|
<mat-menu #menuTransactions="matMenu" class="dashboard-vert-menu" xPosition="before">
|
|
<button *ngFor="let goToOption of card.goToOptions; index as i" mat-menu-item (click)="onNavigateTo(card.links[i])">{{goToOption}}</button>
|
|
</mat-menu>
|
|
</div>
|
|
</span>
|
|
<h3 *ngSwitchDefault>Error! Unable to find information!</h3>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</mat-grid-tile>
|
|
</mat-grid-list>
|
|
</ng-template> |