ShahanaFarooqui
5 years ago
parent
a9e8ca6a75
commit
e89ca32109
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,79 @@
|
||||
<div fxLayout="column">
|
||||
<div class="padding-gap">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-subtitle>
|
||||
<h2>Query Routes</h2>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-md="row wrap"
|
||||
(ngSubmit)="queryRoutesForm.form.valid && onQueryRoutes()" #queryRoutesForm="ngForm">
|
||||
<mat-form-field fxFlex="50" fxLayoutAlign="start end">
|
||||
<input matInput placeholder="Destination Pubkey" name="destinationPubkey" [(ngModel)]="destinationPubkey"
|
||||
tabindex="1" required #destPubkey="ngModel">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="20" fxLayoutAlign="start end">
|
||||
<input matInput placeholder="Amount (Sats)" name="amount" [(ngModel)]="amount" tabindex="2" type="number"
|
||||
step="1000" min="0" required #destAmount="ngModel">
|
||||
</mat-form-field>
|
||||
<div fxFlex="15" fxLayoutAlign="start start">
|
||||
<button fxFlex="90" fxLayoutAlign="center center" mat-raised-button color="primary"
|
||||
[disabled]="destPubkey.invalid || destAmount.invalid" type="submit" tabindex="3">
|
||||
<p *ngIf="(destPubkey.invalid && (destPubkey.dirty || destPubkey.touched) || (destAmount.invalid && (destAmount.dirty || destAmount.touched))); else queryText">Invalid Pubkey/Amount
|
||||
</p>
|
||||
<ng-template #queryText>
|
||||
<p>Query</p>
|
||||
</ng-template>
|
||||
</button>
|
||||
</div>
|
||||
<div fxFlex="15" fxLayoutAlign="start start">
|
||||
<button fxFlex="90" fxLayoutAlign="center center" mat-raised-button color="accent" tabindex="4" type="reset"
|
||||
(click)="resetData()">Clear</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="padding-gap">
|
||||
<mat-card>
|
||||
<mat-card-content class="table-card-content">
|
||||
<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]="qrHops" matSort
|
||||
[ngClass]="{'mat-elevation-z8 overflow-x-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-x-auto': true}">
|
||||
<ng-container matColumnDef="hop_sequence">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Hop </th>
|
||||
<td mat-cell *matCellDef="let hop"> {{hop?.hop_sequence}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="pubkey_alias">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Node </th>
|
||||
<td mat-cell *matCellDef="let hop"> {{hop?.pubkey_alias}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="chan_id">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>
|
||||
<td mat-cell *matCellDef="let hop"> {{hop?.chan_id}} </td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="chan_capacity">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Capacity (sats) </th>
|
||||
<td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.chan_capacity | number}}
|
||||
</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amt_to_forward_msat">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount To Fwd (msats) </th>
|
||||
<td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.amt_to_forward_msat | number}}
|
||||
</span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="fee_msat">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Fee (msat) </th>
|
||||
<td mat-cell *matCellDef="let hop"><span fxLayoutAlign="end center"> {{hop?.fee_msat | number}} </span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onHopClick(row, $event)"></tr>
|
||||
</table>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,3 @@
|
||||
table {
|
||||
width:100%;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { QueryRoutesComponent } from './query-routes.component';
|
||||
|
||||
describe('QueryRoutesComponent', () => {
|
||||
let component: QueryRoutesComponent;
|
||||
let fixture: ComponentFixture<QueryRoutesComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ QueryRoutesComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(QueryRoutesComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,103 @@
|
||||
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
|
||||
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil, take } from 'rxjs/operators';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { Actions } from '@ngrx/effects';
|
||||
|
||||
import { MatTableDataSource, MatSort } from '@angular/material';
|
||||
import { Hop } from '../../../shared/models/lndModels';
|
||||
import { LoggerService } from '../../../shared/services/logger.service';
|
||||
|
||||
import { RTLEffects } from '../../../shared/store/rtl.effects';
|
||||
import * as RTLActions from '../../../shared/store/rtl.actions';
|
||||
import * as fromRTLReducer from '../../../shared/store/rtl.reducers';
|
||||
|
||||
@Component({
|
||||
selector: 'rtl-query-routes',
|
||||
templateUrl: './query-routes.component.html',
|
||||
styleUrls: ['./query-routes.component.scss']
|
||||
})
|
||||
export class QueryRoutesComponent implements OnInit, OnDestroy {
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
public destinationPubkey = '';
|
||||
public amount = null;
|
||||
public qrHops: any;
|
||||
public flgSticky = false;
|
||||
public displayedColumns = [];
|
||||
public flgLoading: Array<Boolean | 'error'> = [false]; // 0: peers
|
||||
private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
|
||||
|
||||
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.State>, private rtlEffects: RTLEffects, private actions$: Actions) {
|
||||
switch (true) {
|
||||
case (window.innerWidth <= 415):
|
||||
this.displayedColumns = ['hop_sequence', 'pubkey_alias', 'fee_msat'];
|
||||
break;
|
||||
case (window.innerWidth > 415 && window.innerWidth <= 730):
|
||||
this.displayedColumns = ['hop_sequence', 'pubkey_alias', 'chan_id', 'fee_msat'];
|
||||
break;
|
||||
case (window.innerWidth > 730 && window.innerWidth <= 1024):
|
||||
this.displayedColumns = ['hop_sequence', 'pubkey_alias', 'chan_id', 'chan_capacity', 'amt_to_forward_msat', 'fee_msat'];
|
||||
break;
|
||||
case (window.innerWidth > 1024 && window.innerWidth <= 1280):
|
||||
this.flgSticky = true;
|
||||
this.displayedColumns = ['hop_sequence', 'pubkey_alias', 'chan_id', 'chan_capacity', 'amt_to_forward_msat', 'fee_msat'];
|
||||
break;
|
||||
default:
|
||||
this.flgSticky = true;
|
||||
this.displayedColumns = ['hop_sequence', 'pubkey_alias', 'chan_id', 'chan_capacity', 'amt_to_forward_msat', 'fee_msat'];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.store.select('rtlRoot')
|
||||
.pipe(takeUntil(this.unSubs[0]))
|
||||
.subscribe((rtlStore: fromRTLReducer.State) => {
|
||||
this.logger.info(rtlStore);
|
||||
});
|
||||
this.rtlEffects.setQueryRoutes
|
||||
.pipe(takeUntil(this.unSubs[1]))
|
||||
.subscribe(queryRoute => {
|
||||
this.qrHops = new MatTableDataSource([]);
|
||||
this.qrHops.data = [];
|
||||
if (undefined !== queryRoute.routes && undefined !== queryRoute.routes[0].hops) {
|
||||
this.flgLoading[0] = false;
|
||||
this.qrHops = new MatTableDataSource<Hop>([...queryRoute.routes[0].hops]);
|
||||
this.qrHops.data = queryRoute.routes[0].hops;
|
||||
} else {
|
||||
this.flgLoading[0] = 'error';
|
||||
}
|
||||
this.qrHops.sort = this.sort;
|
||||
});
|
||||
}
|
||||
|
||||
onQueryRoutes() {
|
||||
this.flgLoading[0] = true;
|
||||
this.store.dispatch(new RTLActions.GetQueryRoutes({destPubkey: this.destinationPubkey, amount: this.amount}));
|
||||
}
|
||||
|
||||
resetData() {
|
||||
this.destinationPubkey = '';
|
||||
this.amount = null;
|
||||
this.flgLoading[0] = false;
|
||||
}
|
||||
|
||||
onHopClick(selRow: Hop, event: any) {
|
||||
const selHop = this.qrHops.data.filter(hop => {
|
||||
return hop.hop_sequence === selRow.hop_sequence;
|
||||
})[0];
|
||||
const reorderedHop = JSON.parse(JSON.stringify(selHop, [
|
||||
'hop_sequence', 'pubkey_alias', 'pub_key', 'chan_id', 'chan_capacity', 'expiry', 'amt_to_forward', 'amt_to_forward_msat', 'fee_msat'
|
||||
] , 2));
|
||||
this.store.dispatch(new RTLActions.OpenAlert({ width: '75%', data: { type: 'INFO', message: JSON.stringify(reorderedHop)}}));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.unSubs.forEach(completeSub => {
|
||||
completeSub.next();
|
||||
completeSub.complete();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue