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

<!-- <div fxLayout="column">
  <div class="padding-gap">
    <mat-card [ngClass]="{'flip': redirectedWithPeer}">
      <mat-card-header>
        <mat-card-subtitle>
          <h2>Open Channel</h2>
        </mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <form fxLayout="column" fxLayout.gt-sm="row wrap" (ngSubmit)="openChannelForm.form.valid && onOpenChannel(openChannelForm)" #openChannelForm="ngForm">
          <mat-form-field fxFlex="40" fxLayoutAlign="start end">
            <mat-select [(ngModel)]="selectedPeer" placeholder="Alias" name="peer_alias" tabindex="1" required name="selPeer" #selPeer="ngModel">
              <mat-option *ngFor="let peer of peers" [value]="peer.pub_key">
                {{peer.alias}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field fxFlex="25" fxLayoutAlign="start end">
            <input matInput [(ngModel)]="fundingAmount" placeholder="Amount ({{information?.smaller_currency_unit}})" type="number" step="1000" min="1" tabindex="2" required name="amount" #amount="ngModel">
            <mat-hint>(Wallet Bal: {{totalBalance}}, Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0)}})</mat-hint>
          </mat-form-field>
          <div fxFlex="15" tabindex="3" fxLayoutAlign="start center" class="chkbox-options">
            <mat-checkbox [(ngModel)]="moreOptions" name="moreOptions" (change)="onMoreOptionsChange($event)">Options</mat-checkbox>
          </div>
          <span *ngIf="moreOptions" fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="80" fxLayoutAlign.gt-sm="space-between center">
            <mat-form-field fxFlex="25" fxLayoutAlign="start end">
              <mat-select tabindex="4" [(value)]="selTransType">
                <mat-option *ngFor="let transType of transTypes" [value]="transType.id">
                  {{transType.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field fxFlex="25" *ngIf="selTransType=='0'">
              <input matInput placeholder="Channel Opening Priority" disabled>
            </mat-form-field>
            <mat-form-field fxFlex="25" *ngIf="selTransType=='1'">
              <input matInput [(ngModel)]="transTypeValue.blocks" placeholder="Target Confirmation Blocks" type="number" name="blocks" step="1" min="0" required tabindex="5" #blocks="ngModel">
            </mat-form-field>
            <mat-form-field fxFlex="25" *ngIf="selTransType=='2'">
              <input matInput [(ngModel)]="transTypeValue.fees" placeholder="Fee ({{information?.smaller_currency_unit}}/Byte)" type="number" name="fees" step="1" min="0" required tabindex="6" #fees="ngModel">
            </mat-form-field>
            <mat-checkbox fxFlex="25" fxFlex.lt-lg="35" tabindex="7" [(ngModel)]="spendUnconfirmed" name="spendUnconfirmed">Spend Unconfirmed Output</mat-checkbox>
            <mat-checkbox fxFlex="20" fxFlex.lt-lg="15" tabindex="8" [(ngModel)]="isPrivate" name="isPrivate">Private</mat-checkbox>
          </span>
          <div fxFlex="10" fxLayoutAlign="end start">
            <button fxFlex="90" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="selectedPeer === '' || fundingAmount == null || (totalBalance - ((fundingAmount) ? fundingAmount : 0) < 0)" type="submit" tabindex="8">
              <p *ngIf="(selectedPeer === '' || fundingAmount == null) && (selPeer.touched || selPeer.dirty) && (amount.touched || amount.dirty); else openText">Invalid Values</p>
              <ng-template #openText><p>Open</p></ng-template>
            </button>
          </div>
          <div fxFlex="10" fxLayoutAlign="end start">
            <button fxFlex="90" fxLayoutAlign="center center" mat-raised-button color="accent" tabindex="9" type="reset" (click)="resetData()">Clear</button>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
  <div class="padding-gap">
    <mat-card>
      <mat-card-content fxFlex="100" fxLayout="column">
        <div fxLayout="row" fxLayoutAlign="start start">
          <mat-form-field fxFlex="30">
            <input matInput (keyup)="applyFilter()" [(ngModel)]="selFilter" name="filter" placeholder="Filter">
          </mat-form-field>
        </div>
        <div perfectScrollbar class="table-container mat-elevation-z8">
          <mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
          <table mat-table #table [dataSource]="channels" matSort [ngClass]="{'mat-elevation-z8 overflow-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-auto': true}">
            <ng-container matColumnDef="close">
              <th mat-header-cell *matHeaderCellDef> Close Channel </th>
              <td mat-cell *matCellDef="let channel"><mat-icon color="accent" (click)="onChannelClose(channel)">link_off</mat-icon></td>
            </ng-container>
            <ng-container matColumnDef="update">
              <th mat-header-cell *matHeaderCellDef><mat-icon color="accent" (click)="onChannelUpdate('all')">edit</mat-icon></th>
              <td mat-cell *matCellDef="let channel"><mat-icon color="accent" (click)="onChannelUpdate(channel)">edit</mat-icon></td>
            </ng-container>
            <ng-container matColumnDef="active">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
              <td mat-cell *matCellDef="let channel"> {{(channel.active) ? 'Active' : 'Inactive'}} </td>
            </ng-container>
            <ng-container matColumnDef="chan_id">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
              <td mat-cell *matCellDef="let channel"> {{channel.chan_id}} </td>
            </ng-container>
            <ng-container matColumnDef="remote_pubkey">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> Pub Key </th>
              <td mat-cell *matCellDef="let channel">
              <div>{{channel.remote_pubkey | slice:0:10}}...</div></td>
            </ng-container>
            <ng-container matColumnDef="remote_alias">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> Alias </th>
              <td mat-cell *matCellDef="let channel">{{channel.remote_alias}}</td>
            </ng-container>
            <ng-container matColumnDef="capacity">
              <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Capacity </th>
              <td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center"> {{channel.capacity | number}} </span></td>
            </ng-container>
            <ng-container matColumnDef="local_balance">
              <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Local Bal </th>
              <td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center"> {{channel.local_balance | number}} </span></td>
            </ng-container>
            <ng-container matColumnDef="remote_balance">
              <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Remote Bal </th>
              <td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center"> {{channel.remote_balance | number}} </span></td>
            </ng-container>
            <ng-container matColumnDef="total_satoshis_sent">
              <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> {{information?.smaller_currency_unit}} Sent </th>
              <td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center"> {{channel.total_satoshis_sent | number}} </span></td>
            </ng-container>
            <ng-container matColumnDef="total_satoshis_received">
              <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> {{information?.smaller_currency_unit}} Recv </th>
              <td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center"> {{channel.total_satoshis_received | number}} </span></td>
            </ng-container>
            <ng-container matColumnDef="commit_fee">
              <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Fee </th>
              <td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center"> {{channel.commit_fee | number}} </span></td>
            </ng-container>
            <ng-container matColumnDef="private">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> Private </th>
              <td mat-cell *matCellDef="let channel"> {{(channel.private ? 'Private' : 'Public')}} </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onChannelClick(row, $event)"></tr>
          </table>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
</div>
   -->
   <h3>CHANNELS</h3>