< 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 ' + information.alias + '! 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-ecl-node-info fxFlex = "100" * ngSwitchCase = "'node'" [ information ] = " information "
[showColorFieldSeparately]="false" [ngClass]="{'error-border': flgLoading[0]==='error'}">
< / rtl-ecl-node-info >
< rtl-ecl-balances-info fxFlex = "100" * ngSwitchCase = "'balance'" [ balances ] = " balances "
[ngClass]="{'error-border': flgLoading[2]==='error'}">< / rtl-ecl-balances-info >
< rtl-ecl-channel-capacity-info fxFlex = "100" * ngSwitchCase = "'capacity'" [ sortBy ] = " sortField "
[channelBalances]="channelBalances" [allChannels]="allChannelsCapacity"
[ngClass]="{'error-border': flgLoading[5]==='error'}">< / rtl-ecl-channel-capacity-info >
< rtl-ecl-fee-info fxFlex = "100" * ngSwitchCase = "'fee'" [ fees ] = " fees "
[ngClass]="{'error-border': flgLoading[1]==='error'}">< / rtl-ecl-fee-info >
< rtl-ecl-channel-status-info fxFlex = "100" * ngSwitchCase = "'status'" [ channelsStatus ] = " channelsStatus "
[ngClass]="{'error-border': flgLoading[0]==='error'}">< / rtl-ecl-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 {{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 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-ecl-node-info fxFlex = "100" * ngSwitchCase = "'node'" [ information ] = " information "
[ngClass]="{'error-border': flgLoading[0]==='error'}">< / rtl-ecl-node-info >
< rtl-ecl-balances-info fxFlex = "100" * ngSwitchCase = "'balance'" [ balances ] = " balances "
[ngClass]="{'error-border': flgLoading[2]==='error'}">< / rtl-ecl-balances-info >
< rtl-ecl-channel-liquidity-info fxFlex = "100" * ngSwitchCase = "'inboundLiq'" [ direction ] = " ' In ' "
[totalLiquidity]="totalInboundLiquidity" [allChannels]="allInboundChannels"
[ngClass]="{'error-border': flgLoading[5]==='error'}">< / rtl-ecl-channel-liquidity-info >
< rtl-ecl-channel-liquidity-info fxFlex = "100" * ngSwitchCase = "'outboundLiq'" [ direction ] = " ' Out ' "
[totalLiquidity]="totalOutboundLiquidity" [allChannels]="allOutboundChannels"
[ngClass]="{'error-border': flgLoading[5]==='error'}">< / rtl-ecl-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-ecl-lightning-invoices class = "h-100" [ showDetails ] = " false " > < / rtl-ecl-lightning-invoices >
< / mat-tab >
< mat-tab label = "Pay" >
< rtl-ecl-lightning-payments [ showDetails ] = " false " > < / rtl-ecl-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 >