< 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' & & (apiCallStatusBalance.status === apiCallStatusEnum.ERROR || apiCallStatusLRBal.status === apiCallStatusEnum.ERROR)) ||
(card.id === 'capacity' & & (apiCallStatusChannels.status === apiCallStatusEnum.ERROR || apiCallStatusLRBal.status === apiCallStatusEnum.ERROR)) ||
(card.id === 'fee' & & (apiCallStatusFees.status === apiCallStatusEnum.ERROR || apiCallStatusChannels.status === apiCallStatusEnum.ERROR || apiCallStatusFHistory.status === apiCallStatusEnum.ERROR)) ||
(card.id === 'status' & & (apiCallStatusNodeInfo.status === apiCallStatusEnum.ERROR || apiCallStatusChannels.status === apiCallStatusEnum.ERROR || apiCallStatusLRBal.status === apiCallStatusEnum.ERROR))}">
< mat-progress-bar * ngIf = "(card.id = = = ' node ' & & apiCallStatusNodeInfo . status = == apiCallStatusEnum . INITIATED ) | |
(card.id === 'balance' & & (apiCallStatusBalance.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.status === apiCallStatusEnum.INITIATED)) ||
(card.id === 'capacity' & & (apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.status === apiCallStatusEnum.INITIATED)) ||
(card.id === 'fee' & & (apiCallStatusFees.status === apiCallStatusEnum.INITIATED || apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusFHistory.status === apiCallStatusEnum.INITIATED)) ||
(card.id === 'status' & & (apiCallStatusNodeInfo.status === apiCallStatusEnum.INITIATED || apiCallStatusChannels.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.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 [ 2 ] + ' ' + errorMessages [ 3 ] " / >
< rtl-cln-channel-capacity-info * ngSwitchCase = "'capacity'" fxFlex = "100" [ sortBy ] = " sortField " [ channelBalances ] = " channelBalances " [ activeChannels ] = " activeChannelsCapacity " [ errorMessage ] = " errorMessages [ 4 ] + ' ' + errorMessages [ 3 ] " / >
< rtl-cln-fee-info * ngSwitchCase = "'fee'" fxFlex = "100" [ fees ] = " fees " [ errorMessage ] = " errorMessages [ 1 ] + ' ' + errorMessages [ 4 ] + ' ' + errorMessages [ 5 ] " / >
< rtl-cln-channel-status-info * ngSwitchCase = "'status'" fxFlex = "100" [ channelsStatus ] = " channelsStatus " [ errorMessage ] = " errorMessages [ 0 ] + ' ' + errorMessages [ 3 ] + ' ' + errorMessages [ 4 ] " / >
< 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' & & (apiCallStatusBalance.status === apiCallStatusEnum.ERROR || apiCallStatusLRBal.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' & & (apiCallStatusBalance.status === apiCallStatusEnum.INITIATED || apiCallStatusLRBal.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 [ 2 ] + ' ' + errorMessages [ 3 ] " / >
< rtl-cln-channel-liquidity-info * ngSwitchCase = "'inboundLiq'" fxFlex = "100" [ direction ] = " ' In ' " [ totalLiquidity ] = " totalInboundLiquidity " [ activeChannels ] = " allInboundChannels " [ errorMessage ] = " errorMessages [ 4 ] " / >
< rtl-cln-channel-liquidity-info * ngSwitchCase = "'outboundLiq'" fxFlex = "100" [ direction ] = " ' Out ' " [ totalLiquidity ] = " totalOutboundLiquidity " [ activeChannels ] = " allOutboundChannels " [ errorMessage ] = " errorMessages [ 4 ] " / >
< 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 >