< div fxLayout = "column" * ngIf = "selNode.userPersona === userPersonaEnum.OPERATOR; else merchantDashboard" >
< div fxLayout = "row" fxLayoutAlign = "start start" class = "page-title-container mb-0" >
< fa-icon [ icon ] = " apisCallStatus ? . FetchInfo . status = == apiCallStatusEnum . ERROR ? faFrown : faSmile " class = "page-title-img mr-1" > < / fa-icon >
< span class = "page-title" > {{apisCallStatus?.FetchInfo.status === apiCallStatusEnum.COMPLETED ? 'Welcome ' + information.alias + '! Your node is up and running.' : apisCallStatus?.FetchInfo.status === apiCallStatusEnum.INITIATED ? 'Wait! Getting your node information...' : '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 fxFlex = "100" fxLayout = "column" fxLayoutAlign = "start stretch" class = "h-100 dashboard-card mt-4" >
< mat-card-header >
< mat-card-title fxLayoutAlign = "space-between center" >
< div >
< fa-icon [ icon ] = " card . icon " class = "mr-1" > < / fa-icon >
< span > {{card.title}}< / span >
< / div >
< div >
< button * ngIf = "card.link" mat-icon-button class = "more-button" [ 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 === 'fee'" ( click ) = " onNavigateTo ( ' / cl / reports ' ) " mat-menu-item > Fees Summary< / button >
< button * ngIf = "card.id === 'capacity'" ( click ) = " onsortChannelsBy ( ) " mat-menu-item > 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' & & apisCallStatus?.FetchInfo.status === apiCallStatusEnum.ERROR) ||
(card.id === 'balance' & & (apisCallStatus?.FetchBalance.status === apiCallStatusEnum.ERROR || apisCallStatus?.FetchLocalRemoteBalance.status === apiCallStatusEnum.ERROR)) ||
(card.id === 'capacity' & & (apisCallStatus?.FetchChannels.status === apiCallStatusEnum.ERROR || apisCallStatus?.FetchLocalRemoteBalance.status === apiCallStatusEnum.ERROR)) ||
(card.id === 'fee' & & (apisCallStatus?.FetchFees.status === apiCallStatusEnum.ERROR || apisCallStatus?.FetchChannels.status === apiCallStatusEnum.ERROR || apisCallStatus?.GetForwardingHistory.status === apiCallStatusEnum.ERROR)) ||
(card.id === 'status' & & (apisCallStatus?.FetchInfo.status === apiCallStatusEnum.ERROR || apisCallStatus?.FetchLocalRemoteBalance.status === apiCallStatusEnum.ERROR))}">
< mat-progress-bar mode = "indeterminate"
*ngIf="(card.id === 'node' & & apisCallStatus?.FetchInfo.status === apiCallStatusEnum.INITIATED) ||
(card.id === 'balance' & & (apisCallStatus?.FetchBalance.status === apiCallStatusEnum.INITIATED || apisCallStatus?.FetchLocalRemoteBalance.status === apiCallStatusEnum.INITIATED)) ||
(card.id === 'capacity' & & (apisCallStatus?.FetchChannels.status === apiCallStatusEnum.INITIATED || apisCallStatus?.FetchLocalRemoteBalance.status === apiCallStatusEnum.INITIATED)) ||
(card.id === 'fee' & & (apisCallStatus?.FetchFees.status === apiCallStatusEnum.INITIATED || apisCallStatus?.FetchChannels.status === apiCallStatusEnum.INITIATED || apisCallStatus?.GetForwardingHistory.status === apiCallStatusEnum.INITIATED)) ||
(card.id === 'status' & & (apisCallStatus?.FetchInfo.status === apiCallStatusEnum.INITIATED || apisCallStatus?.FetchLocalRemoteBalance.status === apiCallStatusEnum.INITIATED))"
>< / mat-progress-bar >
< div [ ngSwitch ] = " card . id " fxLayout = "column" fxFlex = "100" >
< rtl-cl-node-info fxFlex = "100" * ngSwitchCase = "'node'" [ information ] = " information " [ showColorFieldSeparately ] = " false " > < / rtl-cl-node-info >
< rtl-cl-balances-info fxFlex = "100" * ngSwitchCase = "'balance'" [ balances ] = " balances " [ errorMessage ] = " errorMessages [ 2 ] + ' ' + errorMessages [ 3 ] " > < / rtl-cl-balances-info >
< rtl-cl-channel-capacity-info fxFlex = "100" * ngSwitchCase = "'capacity'" [ sortBy ] = " sortField " [ channelBalances ] = " channelBalances " [ allChannels ] = " allChannelsCapacity " [ errorMessage ] = " errorMessages [ 4 ] + ' ' + errorMessages [ 3 ] " > < / rtl-cl-channel-capacity-info >
< rtl-cl-fee-info fxFlex = "100" * ngSwitchCase = "'fee'" [ fees ] = " fees " [ errorMessage ] = " errorMessages [ 1 ] + ' ' + errorMessages [ 4 ] + ' ' + errorMessages [ 5 ] " > < / rtl-cl-fee-info >
< rtl-cl-channel-status-info fxFlex = "100" * ngSwitchCase = "'status'" [ channelsStatus ] = " channelsStatus " [ errorMessage ] = " errorMessages [ 0 ] + ' ' + errorMessages [ 3 ] " > < / 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 = "page-title-container mb-0" >
< fa-icon [ icon ] = " faSmile " class = "page-title-img mr-1" > < / fa-icon >
< span class = "page-title" > Welcome {{information.alias}}! 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 fxFlex = "100" fxLayout = "column" fxLayoutAlign = "start stretch" class = "h-100 dashboard-card mt-4" [ ngClass ] = " { ' p-0 ' : card . id = == ' transactions ' } " >
< mat-card-header * ngIf = "card.id !== 'transactions'" >
< mat-card-title fxLayoutAlign = "space-between center" >
< div >
< fa-icon [ icon ] = " card . icon " class = "mr-1" > < / fa-icon >
< span > {{card.title}}< / span >
< / div >
< div >
< button * ngIf = "card.link" mat-icon-button class = "more-button" [ 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 >
< / 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' & & apisCallStatus?.FetchInfo.status === apiCallStatusEnum.ERROR) ||
(card.id === 'balance' & & (apisCallStatus?.FetchBalance.status === apiCallStatusEnum.ERROR || apisCallStatus?.FetchLocalRemoteBalance.status === apiCallStatusEnum.ERROR)) ||
((card.id === 'inboundLiq' || card.id === 'outboundLiq') & & apisCallStatus?.FetchChannels.status === apiCallStatusEnum.ERROR)}">
< mat-progress-bar mode = "indeterminate"
*ngIf="(card.id === 'node' & & apisCallStatus?.FetchInfo.status === apiCallStatusEnum.INITIATED) ||
(card.id === 'balance' & & (apisCallStatus?.FetchBalance.status === apiCallStatusEnum.INITIATED || apisCallStatus?.FetchLocalRemoteBalance.status === apiCallStatusEnum.INITIATED)) ||
((card.id === 'inboundLiq' || card.id === 'outboundLiq') & & apisCallStatus?.FetchChannels.status === apiCallStatusEnum.INITIATED)"
>< / mat-progress-bar >
< div [ ngSwitch ] = " card . id " fxLayout = "column" fxFlex = "100" >
< rtl-cl-node-info fxFlex = "100" * ngSwitchCase = "'node'" [ information ] = " information " > < / rtl-cl-node-info >
< rtl-cl-balances-info fxFlex = "100" * ngSwitchCase = "'balance'" [ balances ] = " balances " [ errorMessage ] = " errorMessages [ 2 ] + ' ' + errorMessages [ 3 ] " > < / rtl-cl-balances-info >
< rtl-cl-channel-liquidity-info fxFlex = "100" * ngSwitchCase = "'inboundLiq'" [ direction ] = " ' In ' " [ totalLiquidity ] = " totalInboundLiquidity " [ allChannels ] = " allInboundChannels " [ errorMessage ] = " errorMessages [ 4 ] " > < / rtl-cl-channel-liquidity-info >
< rtl-cl-channel-liquidity-info fxFlex = "100" * ngSwitchCase = "'outboundLiq'" [ direction ] = " ' Out ' " [ totalLiquidity ] = " totalOutboundLiquidity " [ allChannels ] = " allOutboundChannels " [ errorMessage ] = " errorMessages [ 4 ] " > < / 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" [ calledFrom ] = " ' home ' " > < / rtl-cl-lightning-invoices > < / mat-tab >
< mat-tab label = "Pay" > < rtl-cl-lightning-payments [ calledFrom ] = " ' home ' " > < / 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 >
< button mat-menu-item ( click ) = " onNavigateTo ( ' / cl / reports / transactions ' ) " > Transactions Summary< / 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 >