Routing peers & other enhanement

Routing peers sort amount desc, Routing peers channel_id ellipsis, invoice modal mobile layout fix, all tables mobile scroll fix
pull/98/head
ShahanaFarooqui 5 years ago
parent ef0ae7af13
commit 76e3d16699

@ -5,8 +5,8 @@
<title>RTL</title> <title>RTL</title>
<base href="/rtl/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <base href="/rtl/"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="assets/images/favicon.ico"> <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
<link rel="stylesheet" href="styles.3f4899cd9b6c41fec372.css"></head> <link rel="stylesheet" href="styles.bab7f62b489f0c86770d.css"></head>
<body> <body>
<rtl-app></rtl-app> <rtl-app></rtl-app>
<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js"></script><script type="text/javascript" src="polyfills.181b5a67c421a167a96a.js"></script><script type="text/javascript" src="main.d1d424ca435376d3eb5d.js"></script></body> <script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js"></script><script type="text/javascript" src="polyfills.181b5a67c421a167a96a.js"></script><script type="text/javascript" src="main.3a3051f31e385ca5b4e2.js"></script></body>
</html> </html>

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

@ -42,6 +42,7 @@ import { SigninComponent } from './pages/signin/signin.component';
import { RTLRootReducer } from './shared/store/rtl.reducers'; import { RTLRootReducer } from './shared/store/rtl.reducers';
import { RTLEffects } from './shared/store/rtl.effects'; import { RTLEffects } from './shared/store/rtl.effects';
import { CommonService } from './shared/services/common.service';
import { LoggerService, ConsoleLoggerService } from './shared/services/logger.service'; import { LoggerService, ConsoleLoggerService } from './shared/services/logger.service';
import { AuthGuard, LNDUnlockedGuard } from './shared/services/auth.guard'; import { AuthGuard, LNDUnlockedGuard } from './shared/services/auth.guard';
import { AuthInterceptor } from './shared/services/auth.interceptor'; import { AuthInterceptor } from './shared/services/auth.interceptor';
@ -98,7 +99,7 @@ import { NodeLookupComponent } from './pages/lookups/node-lookup/node-lookup.com
{ provide: PERFECT_SCROLLBAR_CONFIG, useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG }, { provide: PERFECT_SCROLLBAR_CONFIG, useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG },
{ provide: OverlayContainer, useClass: ThemeOverlay }, { provide: OverlayContainer, useClass: ThemeOverlay },
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
AuthGuard, LNDUnlockedGuard AuthGuard, LNDUnlockedGuard, CommonService
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })

@ -11,15 +11,3 @@
table { table {
width:100%; width:100%;
} }
.table-container {
height: 79vh;
overflow: auto;
}
@media screen and (max-width: 414px) {
.table-container {
height: 68vh;
overflow: auto;
}
}

@ -36,15 +36,3 @@ mat-cell.mat-column-close, .mat-column-update {
table { table {
width:100%; width:100%;
} }
.table-container {
height: 68vh;
overflow: auto;
}
@media screen and (max-width: 414px) {
.table-container {
height: 31vh;
overflow: auto;
}
}

@ -9,15 +9,3 @@
table { table {
width:100%; width:100%;
} }
.table-container {
height: 68vh;
overflow: auto;
}
@media screen and (max-width: 414px) {
.table-container {
max-height: 31vh;
overflow: auto;
}
}

@ -29,15 +29,3 @@
table { table {
width:100%; width:100%;
} }
.table-container {
height: 68vh;
overflow: auto;
}
@media screen and (max-width: 414px) {
.table-container {
max-height: 46vh;
overflow: auto;
}
}

@ -16,15 +16,3 @@ mat-cell.mat-column-detach {
table { table {
width:100%; width:100%;
} }
.table-container {
height: 68vh;
overflow: auto;
}
@media screen and (max-width: 414px) {
.table-container {
height: 40vh;
overflow: auto;
}
}

@ -12,7 +12,7 @@
(ngSubmit)="rpForm.form.valid && onRoutingPeersFetch()" #rpForm="ngForm" class="padding-gap"> (ngSubmit)="rpForm.form.valid && onRoutingPeersFetch()" #rpForm="ngForm" class="padding-gap">
<div fxFlex="69" fxLayoutAlign="space-between stretch"> <div fxFlex="69" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49" fxLayoutAlign="start"> <mat-form-field fxFlex="49" fxLayoutAlign="start">
<input matInput [matDatepicker]="startDatepicker" placeholder="Start Date" [max]="lastMonthDay" <input matInput [matDatepicker]="startDatepicker" placeholder="Start Date" [max]="yesterday"
name="startDate" [(ngModel)]="startDate" tabindex="1" #strtDate="ngModel"> name="startDate" [(ngModel)]="startDate" tabindex="1" #strtDate="ngModel">
<mat-datepicker-toggle matSuffix [for]="startDatepicker"></mat-datepicker-toggle> <mat-datepicker-toggle matSuffix [for]="startDatepicker"></mat-datepicker-toggle>
<mat-datepicker #startDatepicker [startAt]="startDate"></mat-datepicker> <mat-datepicker #startDatepicker [startAt]="startDate"></mat-datepicker>
@ -35,7 +35,7 @@
</mat-card> </mat-card>
</div> </div>
<div class="padding-gap"> <div class="padding-gap">
<mat-card fxLayout="column" fxLayoutAlign="space-between start" fxLayout.gt-md="row wrap"> <mat-card fxLayout="column" fxLayoutAlign.gt-sm="space-between start" fxLayoutAlign.lt-md="space-between stretch" fxLayout.gt-sm="row wrap">
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch"> <div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch">
<mat-card-header fxFlex="100"> <mat-card-header fxFlex="100">
<mat-card-subtitle> <mat-card-subtitle>
@ -49,7 +49,8 @@
[ngClass]="{'mat-elevation-z8 overflow-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-auto': true}"> [ngClass]="{'mat-elevation-z8 overflow-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-auto': true}">
<ng-container matColumnDef="chan_id"> <ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id</th> <th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id</th>
<td mat-cell *matCellDef="let rPeer">{{rPeer.chan_id}}</td> <td mat-cell *matCellDef="let rPeer" class="ellipsis-parent"><span
class="ellipsis-child">{{rPeer.chan_id}}</span></td>
</ng-container> </ng-container>
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th> <th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
@ -66,10 +67,10 @@
fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td> fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRoutingPeerClick(row, $event, 'in')"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="onRoutingPeerClick(row, $event, 'in')"></tr>
</table> </table>
</div> </div>
</mat-card-content> </mat-card-content>
</div> </div>
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch"> <div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch">
@ -85,7 +86,8 @@
[ngClass]="{'mat-elevation-z8 overflow-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-auto': true}"> [ngClass]="{'mat-elevation-z8 overflow-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-auto': true}">
<ng-container matColumnDef="chan_id"> <ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id</th> <th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id</th>
<td mat-cell *matCellDef="let rPeer">{{rPeer.chan_id}}</td> <td mat-cell *matCellDef="let rPeer" class="ellipsis-parent"><span
class="ellipsis-child">{{rPeer.chan_id}}</span></td>
</ng-container> </ng-container>
<ng-container matColumnDef="alias"> <ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th> <th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
@ -102,7 +104,8 @@
fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td> fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
</ng-container> </ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr> <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRoutingPeerClick(row, $event, 'out')"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="onRoutingPeerClick(row, $event, 'out')"></tr>
</table> </table>
</div> </div>
</mat-card-content> </mat-card-content>

@ -1,3 +1,16 @@
table { table {
width:100%; width:100%;
} }
.ellipsis-parent {
min-width: 20px;
display: flex;
padding: 13px 0 13px 24px;
}
.ellipsis-child {
max-width:97%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@ -1,5 +1,4 @@
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { formatDate } from '@angular/common';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
@ -7,6 +6,7 @@ import { Store } from '@ngrx/store';
import { MatTableDataSource, MatSort } from '@angular/material'; import { MatTableDataSource, MatSort } from '@angular/material';
import { ForwardingEvent, RoutingPeers } from '../../shared/models/lndModels'; import { ForwardingEvent, RoutingPeers } from '../../shared/models/lndModels';
import { LoggerService } from '../../shared/services/logger.service'; import { LoggerService } from '../../shared/services/logger.service';
import { CommonService } from '../../shared/services/common.service';
import * as RTLActions from '../../shared/store/rtl.actions'; import * as RTLActions from '../../shared/store/rtl.actions';
import * as fromRTLReducer from '../../shared/store/rtl.reducers'; import * as fromRTLReducer from '../../shared/store/rtl.reducers';
@ -28,12 +28,13 @@ export class RoutingPeersComponent implements OnInit, OnDestroy {
this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 30, this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 30,
this.today.getHours(), this.today.getMinutes(), this.today.getSeconds() this.today.getHours(), this.today.getMinutes(), this.today.getSeconds()
); );
public yesterday = new Date(this.today.getFullYear(), this.today.getMonth(), this.today.getDate() - 1, this.today.getHours(), this.today.getMinutes(), this.today.getSeconds());
public endDate = this.today; public endDate = this.today;
public startDate = this.lastMonthDay; public startDate = this.lastMonthDay;
public flgSticky = false; public flgSticky = false;
private unsub: Array<Subject<void>> = [new Subject(), new Subject()]; private unsub: Array<Subject<void>> = [new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.State>) { constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.State>) {
switch (true) { switch (true) {
case (window.innerWidth <= 415): case (window.innerWidth <= 415):
this.displayedColumns = ['chan_id', 'events', 'total_amount']; this.displayedColumns = ['chan_id', 'events', 'total_amount'];
@ -123,7 +124,7 @@ export class RoutingPeersComponent implements OnInit, OnDestroy {
outgoing.total_amount = +outgoing.total_amount + +event.amt_out; outgoing.total_amount = +outgoing.total_amount + +event.amt_out;
} }
}); });
return [incomingResults, outgoingResults]; return [this.commonService.sortDescByKey(incomingResults, 'total_amount'), this.commonService.sortDescByKey(outgoingResults, 'total_amount')];
} }
onRoutingPeersFetch() { onRoutingPeersFetch() {

@ -7,15 +7,3 @@
table { table {
width:100%; width:100%;
} }
.table-container {
height: 72vh;
overflow: auto;
}
@media screen and (max-width: 414px) {
.table-container {
height: 53vh;
overflow: auto;
}
}

@ -17,15 +17,3 @@
table { table {
width:100%; width:100%;
} }
.table-container {
height: 78vh;
overflow: auto;
}
@media screen and (max-width: 414px) {
.table-container {
height: 68vh;
overflow: auto;
}
}

@ -11,17 +11,18 @@
<div *ngFor="let obj of messageObj" fxLayout="row" fxLayoutAlign="center flex-start"> <div *ngFor="let obj of messageObj" fxLayout="row" fxLayoutAlign="center flex-start">
<div fxFlex="20">{{obj[0] | titlecase}}</div> <div fxFlex="20">{{obj[0] | titlecase}}</div>
<div fxFlex="2">:</div> <div fxFlex="2">:</div>
<div [fxFlex]="showCopyOption(obj[0]) ? 60 : 75" class="pr-2"> <div fxLayout="column" fxFlex="75">
<div *ngIf="isNumber(obj[1], obj[0]);else notNumberTemplate"> <div *ngIf="isNumber(obj[1], obj[0]);else notNumberTemplate">
<span>{{obj[1] | number:'1.0-3'}}</span> <span>{{obj[1] | number:'1.0-3'}}</span>
</div> </div>
<ng-template #notNumberTemplate> <ng-template #notNumberTemplate>
<span>{{obj[1]}}</span> <span fxFlex="100">{{obj[1]}}
</ng-template>
<mat-icon *ngIf="showCopyOption(obj[0])" class="icon-small cursor-pointer pl-1 top-5px" rtlClipboard [payload]="obj[1]" (copied)="copiedText($event)">file_copy</mat-icon><span *ngIf="showCopyOption(obj[0])" [hidden]="!flgCopied">Copied</span> <mat-icon *ngIf="showCopyOption(obj[0])" class="icon-small cursor-pointer pl-1 top-5px" rtlClipboard [payload]="obj[1]" (copied)="copiedText($event)">file_copy</mat-icon><span *ngIf="showCopyOption(obj[0])" [hidden]="!flgCopied">Copied</span>
</span>
<div *ngIf="showCopyOption(obj[0])" fxFlex="100" fxLayoutAlign.gt-sm="start center">
<qrcode [qrdata]="obj[1]" [size]="120" [level]="'L'" [allowEmptyString]="true" [ngStyle]="{'visibility': (obj[1] === '') ? 'hidden' : 'visible'}" class="qr-border"></qrcode>
</div> </div>
<div *ngIf="showCopyOption(obj[0])" fxFlex="15" fxLayoutAlign="center center"> </ng-template>
<qrcode [qrdata]="obj[1]" [size]="120" [level]="'L'" [allowEmptyString]="true" [ngStyle]="{'visibility': (obj[1] === '') ? 'hidden' : 'visible'}" class="mt-minus-40px qr-border"></qrcode>
</div> </div>
</div> </div>
</div> </div>

@ -0,0 +1,14 @@
import { Injectable } from '@angular/core';
@Injectable()
export class CommonService {
sortDescByKey(array, key) {
return array.sort(function (a, b) {
const x = a[key];
const y = b[key];
return ((x > y) ? -1 : ((x < y) ? 1 : 0));
});
}
}

@ -24,12 +24,12 @@ $custom-light-theme-foreground: (
disabled-text: $dark-disabled-text, disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text, hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text, secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54), icon: rgba(black, 1),
icons: rgba(black, 0.54), icons: rgba(black, 1),
text: rgba(black, 0.87), text: rgba(black, 1),
slider-min: rgba(black, 0.87), slider-min: rgba(black, 1),
slider-off: rgba(black, 0.26), slider-off: rgba(black, 0.5),
slider-off-active: rgba(black, 0.38), slider-off-active: rgba(black, 0.6),
); );
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) { @function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {

@ -24,12 +24,12 @@ $custom-light-theme-foreground: (
disabled-text: $dark-disabled-text, disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text, hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text, secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54), icon: rgba(black, 1),
icons: rgba(black, 0.54), icons: rgba(black, 1),
text: rgba(black, 0.87), text: rgba(black, 1),
slider-min: rgba(black, 0.87), slider-min: rgba(black, 1),
slider-off: rgba(black, 0.26), slider-off: rgba(black, 0.5),
slider-off-active: rgba(black, 0.38), slider-off-active: rgba(black, 0.6),
); );
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) { @function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {

@ -24,12 +24,12 @@ $custom-light-theme-foreground: (
disabled-text: $dark-disabled-text, disabled-text: $dark-disabled-text,
hint-text: $dark-disabled-text, hint-text: $dark-disabled-text,
secondary-text: $dark-secondary-text, secondary-text: $dark-secondary-text,
icon: rgba(black, 0.54), icon: rgba(black, 1),
icons: rgba(black, 0.54), icons: rgba(black, 1),
text: rgba(black, 0.87), text: rgba(black, 1),
slider-min: rgba(black, 0.87), slider-min: rgba(black, 1),
slider-off: rgba(black, 0.26), slider-off: rgba(black, 0.5),
slider-off-active: rgba(black, 0.38), slider-off-active: rgba(black, 0.6),
); );
@function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) { @function create-custom-theme($primary, $accent, $warn: mat-palette($mat-red)) {

@ -38,11 +38,12 @@
} }
a { a {
color: mat-color($foreground, text); color: white;
} }
.active-link { .active-link {
background: mat-color($primary); background: mat-color($primary);
color: white; // mat-color($foreground, text); for dark theme but for light theme the foreground text color is black
} }
.h-active-link { .h-active-link {

Loading…
Cancel
Save