< div fxLayout = "column" fxLayoutAlign = "start stretch" class = "padding-gap" >
< div * ngIf = "errorMessage !== ''" class = "p-2 error-border my-2" > {{errorMessage}}< / div >
< div * ngIf = "errorMessage === ''" fxLayout = "column" fxLayout . gt-md = "row" fxFlex = "100" fxLayoutAlign = "space-between stretch" class = "page-sub-title-container mt-2" >
< div fxLayout = "column" fxFlex = "49" fxLayoutAlign = "start stretch" class = "mb-4" >
< div fxLayout = "column" fxLayout . gt-sm = "row" fxLayoutAlign . gt-sm = "space-between center" fxLayoutAlign = "start stretch" class = "page-sub-title-container w-100" [ ngClass ] = " { ' mt-2 ' : screenSize = == screenSizeEnum . XS , ' mt-1 ' : screenSize = == screenSizeEnum . SM } " >
< div fxFlex = "70" > Incoming< / div >
< div fxFlex . gt-xs = "30" fxLayoutAlign . gt-xs = "space-between center" fxLayout = "row" fxLayoutAlign = "space-between stretch" >
<!-- <mat - form - field fxLayout="column" fxFlex="49">
< mat-label > Filter By< / mat-label >
< mat-select tabindex = "1" [ ( ngModel ) ] = " selFilterByIn " ( selectionChange ) = " selFilterIn = '' ; applyFilterIncoming ( ) " name = "filterByIn" >
< perfect-scrollbar > < mat-option * ngFor = "let column of ['all'].concat(displayedColumns)" [ value ] = " column " > {{getLabel(column)}}< / mat-option > < / perfect-scrollbar >
< / mat-select >
< / mat-form-field >
< mat-form-field fxLayout = "column" fxFlex = "49" >
< mat-label > Filter< / mat-label >
< input matInput [ ( ngModel ) ] = " selFilterIn " ( input ) = " applyFilterIncoming ( ) " ( keyup ) = " applyFilterIncoming ( ) " name = "filterin" >
< / mat-form-field > -->
< / div >
< / div >
< div fxLayout = "column" fxLayoutAlign = "start start" fxFlex = "100" class = "table-container" [ perfectScrollbar ] >
< mat-progress-bar * ngIf = "apiCallStatus.status === apiCallStatusEnum.INITIATED" mode = "indeterminate" / >
< table # tableIn mat-table matSort class = "overflow-auto incoming-table" [ matSortActive ] = " tableSetting . sortBy " [ matSortDirection ] = " tableSetting . sortOrder " [ dataSource ] = " routingPeersIncoming " >
< ng-container matColumnDef = "channelId" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Channel ID< / th >
< td * matCellDef = "let rPeer" mat-cell >
< div class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{rPeer?.channelId}}< / span >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "alias" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Peer Alias< / th >
< td * matCellDef = "let rPeer" mat-cell >
< div class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{rPeer?.alias}}< / span >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "events" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Events< / th >
< td * matCellDef = "let rPeer" mat-cell > < span fxLayoutAlign = "end center" > {{rPeer.events | number}}< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "totalAmount" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Amount (Sats)< / th >
< td * matCellDef = "let rPeer" mat-cell > < span fxLayoutAlign = "end center" > {{rPeer.totalAmount | number}}< / span > < / td >
< / ng-container >
< ng-container matColumnDef = "totalFee" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Fee (Sats)< / th >
< td * matCellDef = "let rPeer" mat-cell > < span fxLayoutAlign = "end center" > {{rPeer.totalFee | number}}< / span > < / td >
< / ng-container >
< ng-container matColumnDef = "no_incoming_event" >
< td * matFooterCellDef mat-footer-cell colspan = "4" >
< p * ngIf = "(!routingPeersIncoming?.data || routingPeersIncoming?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED" > No incoming routing peer available.< / p >
< p * ngIf = "(!routingPeersIncoming?.data || routingPeersIncoming?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED" > Getting incoming routing peers...< / p >
< p * ngIf = "(!routingPeersIncoming?.data || routingPeersIncoming?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR" > {{errorMessage}}< / p >
< / td >
< / ng-container >
< tr * matFooterRowDef = "['no_incoming_event']" mat-footer-row [ ngClass ] = " { ' display-none ' : routingPeersIncoming ? . data & & routingPeersIncoming ? . data ? . length > 0}">< / tr >
< tr * matHeaderRowDef = "displayedColumns" mat-header-row > < / tr >
< tr * matRowDef = "let row; columns: displayedColumns;" mat-row > < / tr >
< / table >
< / div >
< mat-paginator # paginatorIn class = "mb-1" [ pageSize ] = " pageSize " [ pageSizeOptions ] = " pageSizeOptions " [ showFirstLastButtons ] = " screenSize = == screenSizeEnum . XS ? false : true " / >
< / div >
< div fxLayout = "column" fxFlex = "49" fxLayoutAlign = "end stretch" class = "mb-4" >
< div fxLayout = "column" fxLayout . gt-sm = "row" fxLayoutAlign . gt-sm = "space-between center" fxLayoutAlign = "start stretch" class = "page-sub-title-container w-100" [ ngClass ] = " { ' mt-2 ' : screenSize ! = = screenSizeEnum . LG } " >
< div fxFlex = "70" > Outgoing< / div >
< div fxFlex . gt-xs = "30" fxLayoutAlign . gt-xs = "space-between center" fxLayout = "row" fxLayoutAlign = "space-between stretch" >
<!-- <mat - form - field fxLayout="column" fxFlex="49">
< mat-label > Filter By< / mat-label >
< mat-select tabindex = "1" [ ( ngModel ) ] = " selFilterByOut " ( selectionChange ) = " selFilterOut = '' ; applyFilterOutgoing ( ) " name = "filterByOut" >
< perfect-scrollbar > < mat-option * ngFor = "let column of ['all'].concat(displayedColumns.slice(0, -1))" [ value ] = " column " > {{getLabel(column)}}< / mat-option > < / perfect-scrollbar >
< / mat-select >
< / mat-form-field >
< mat-form-field fxLayout = "column" fxFlex = "49" >
< mat-label > Filter< / mat-label >
< input matInput [ ( ngModel ) ] = " selFilterOut " ( input ) = " applyFilterOutgoing ( ) " ( keyup ) = " applyFilterOutgoing ( ) " name = "filterout" >
< / mat-form-field > -->
< / div >
< / div >
< div fxLayout = "column" fxLayoutAlign = "start end" fxFlex = "100" class = "table-container" [ perfectScrollbar ] >
< mat-progress-bar * ngIf = "apiCallStatus.status === apiCallStatusEnum.INITIATED" mode = "indeterminate" / >
< table # tableOut mat-table matSort class = "overflow-auto outgoing-table" [ matSortActive ] = " tableSetting . sortBy " [ matSortDirection ] = " tableSetting . sortOrder " [ dataSource ] = " routingPeersOutgoing " >
< ng-container matColumnDef = "channelId" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Channel ID< / th >
< td * matCellDef = "let rPeer" mat-cell >
< div class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{rPeer?.channelId}}< / span >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "alias" >
< th * matHeaderCellDef mat-header-cell mat-sort-header > Peer Alias< / th >
< td * matCellDef = "let rPeer" mat-cell >
< div class = "ellipsis-parent" [ ngStyle ] = " { ' width ' : ( screenSize = == screenSizeEnum . XS ) ? ' 6rem ' : colWidth } " >
< span class = "ellipsis-child" > {{rPeer?.alias}}< / span >
< / div >
< / td >
< / ng-container >
< ng-container matColumnDef = "events" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Events< / th >
< td * matCellDef = "let rPeer" mat-cell > < span fxLayoutAlign = "end center" > {{rPeer.events | number}}< / span >
< / td >
< / ng-container >
< ng-container matColumnDef = "totalAmount" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Amount (Sats)< / th >
< td * matCellDef = "let rPeer" mat-cell > < span fxLayoutAlign = "end center" > {{rPeer.totalAmount | number}}< / span > < / td >
< / ng-container >
< ng-container matColumnDef = "totalFee" >
< th * matHeaderCellDef mat-header-cell mat-sort-header arrowPosition = "before" > Fee (Sats)< / th >
< td * matCellDef = "let rPeer" mat-cell > < span fxLayoutAlign = "end center" > {{rPeer.totalFee | number}}< / span > < / td >
< / ng-container >
< ng-container matColumnDef = "no_outgoing_event" >
< td * matFooterCellDef mat-footer-cell colspan = "4" >
< p * ngIf = "(!routingPeersOutgoing?.data || routingPeersOutgoing?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED" > No outgoing routing peer available.< / p >
< p * ngIf = "(!routingPeersOutgoing?.data || routingPeersOutgoing?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.INITIATED" > Getting outgoing routing peers...< / p >
< p * ngIf = "(!routingPeersOutgoing?.data || routingPeersOutgoing?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.ERROR" > {{errorMessage}}< / p >
< / td >
< / ng-container >
< tr * matFooterRowDef = "['no_outgoing_event']" mat-footer-row [ ngClass ] = " { ' display-none ' : routingPeersOutgoing ? . data & & routingPeersOutgoing ? . data ? . length > 0}">< / tr >
< tr * matHeaderRowDef = "displayedColumns" mat-header-row > < / tr >
< tr * matRowDef = "let row; columns: displayedColumns;" mat-row > < / tr >
< / table >
< mat-paginator # paginatorOut class = "mb-1" [ pageSize ] = " pageSize " [ pageSizeOptions ] = " pageSizeOptions " [ showFirstLastButtons ] = " screenSize = == screenSizeEnum . XS ? false : true " / >
< / div >
< / div >
< / div >
< / div >