RTL/src/app/clightning/home/home.component.html

<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>