mirrors/Ride-The-Lightning-RTL
1
0
Fork 0
mirror of https://github.com/Ride-The-Lightning/RTL.git synced 2025-02-22 14:22:48 +01:00
Code Issues Projects Releases Wiki Activity

Routing peers & other enhanement

Browse source 
Routing peers sort amount desc, Routing peers channel_id ellipsis, invoice modal mobile layout fix, all tables mobile scroll fix
This commit is contained in:
ShahanaFarooqui 2019-03-27 21:39:29 -04:00
parent ef0ae7af13
commit 76e3d16699
22 changed files with 137 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
angular/index.html
View file

@ -5,8 +5,8 @@
<title>RTL</title>
<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="stylesheet" href="styles.3f4899cd9b6c41fec372.css"></head>
<link rel="stylesheet" href="styles.bab7f62b489f0c86770d.css"></head>
<body>
<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>

1
angular/main.3a3051f31e385ca5b4e2.js Normal file
View file

File diff suppressed because one or more lines are too long

1
angular/main.d1d424ca435376d3eb5d.js
View file

File diff suppressed because one or more lines are too long

1
angular/styles.3f4899cd9b6c41fec372.css
View file

File diff suppressed because one or more lines are too long

1
angular/styles.bab7f62b489f0c86770d.css Normal file
View file

File diff suppressed because one or more lines are too long

3
src/app/app.module.ts
View file

@ -42,6 +42,7 @@ import { SigninComponent } from './pages/signin/signin.component';
import { RTLRootReducer } from './shared/store/rtl.reducers';
import { RTLEffects } from './shared/store/rtl.effects';
import { CommonService } from './shared/services/common.service';
import { LoggerService, ConsoleLoggerService } from './shared/services/logger.service';
import { AuthGuard, LNDUnlockedGuard } from './shared/services/auth.guard';
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: OverlayContainer, useClass: ThemeOverlay },
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
AuthGuard, LNDUnlockedGuard
AuthGuard, LNDUnlockedGuard, CommonService
],
bootstrap: [AppComponent]
})

12
src/app/pages/channels/channel-closed/channel-closed.component.scss
View file

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

12
src/app/pages/channels/channel-manage/channel-manage.component.scss
View file

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

12
src/app/pages/invoices/invoices.component.scss
View file

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

12
src/app/pages/payments/payments.component.scss
View file

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

12
src/app/pages/peers/peers.component.scss
View file

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

143
src/app/pages/routing-peers/routing-peers.component.html
View file

@ -12,7 +12,7 @@
(ngSubmit)="rpForm.form.valid && onRoutingPeersFetch()" #rpForm="ngForm" class="padding-gap">
<div fxFlex="69" fxLayoutAlign="space-between stretch">
<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">
<mat-datepicker-toggle matSuffix [for]="startDatepicker"></mat-datepicker-toggle>
<mat-datepicker #startDatepicker [startAt]="startDate"></mat-datepicker>
@ -35,78 +35,81 @@
</mat-card>
</div>
<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">
<mat-card-header fxFlex="100">
<mat-card-subtitle>
<h3>Incoming Traffic</h3>
</mat-card-subtitle>
</mat-card-header>
<mat-card-content class="table-card-content" fxFlex="100">
<mat-card-header fxFlex="100">
<mat-card-subtitle>
<h3>Incoming Traffic</h3>
</mat-card-subtitle>
</mat-card-header>
<mat-card-content class="table-card-content" fxFlex="100">
<div perfectScrollbar class="table-container mat-elevation-z8">
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<table mat-table #tableIn [dataSource]="RoutingPeersIncoming" matSort fxFlex="100"
[ngClass]="{'mat-elevation-z8 overflow-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-auto': true}">
<ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id</th>
<td mat-cell *matCellDef="let rPeer">{{rPeer.chan_id}}</td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
<td mat-cell *matCellDef="let rPeer">{{rPeer.alias}}</td>
</ng-container>
<ng-container matColumnDef="events">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
</td>
</ng-container>
<ng-container matColumnDef="total_amount">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total Amount (Sats)</th>
<td mat-cell *matCellDef="let rPeer"><span
fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRoutingPeerClick(row, $event, 'in')"></tr>
</table>
</div>
</mat-card-content>
</div>
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch">
<mat-card-header fxFlex="100">
<mat-card-subtitle>
<h3>Outgoing Traffic</h3>
</mat-card-subtitle>
</mat-card-header>
<mat-card-content class="table-card-content" fxFlex="100">
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<table mat-table #tableIn [dataSource]="RoutingPeersIncoming" matSort fxFlex="100"
[ngClass]="{'mat-elevation-z8 overflow-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-auto': true}">
<ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id</th>
<td mat-cell *matCellDef="let rPeer" class="ellipsis-parent"><span
class="ellipsis-child">{{rPeer.chan_id}}</span></td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
<td mat-cell *matCellDef="let rPeer">{{rPeer.alias}}</td>
</ng-container>
<ng-container matColumnDef="events">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
</td>
</ng-container>
<ng-container matColumnDef="total_amount">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total Amount (Sats)</th>
<td mat-cell *matCellDef="let rPeer"><span
fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="onRoutingPeerClick(row, $event, 'in')"></tr>
</table>
</div>
</mat-card-content>
</div>
<div fxLayout="column" fxFlex="49" fxLayoutAlign="start stretch">
<mat-card-header fxFlex="100">
<mat-card-subtitle>
<h3>Outgoing Traffic</h3>
</mat-card-subtitle>
</mat-card-header>
<mat-card-content class="table-card-content" fxFlex="100">
<div perfectScrollbar class="table-container mat-elevation-z8">
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<table mat-table #tableOut [dataSource]="RoutingPeersOutgoing" matSort
[ngClass]="{'mat-elevation-z8 overflow-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-auto': true}">
<ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id</th>
<td mat-cell *matCellDef="let rPeer">{{rPeer.chan_id}}</td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
<td mat-cell *matCellDef="let rPeer">{{rPeer.alias}}</td>
</ng-container>
<ng-container matColumnDef="events">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
</td>
</ng-container>
<ng-container matColumnDef="total_amount">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total Amount (Sats)</th>
<td mat-cell *matCellDef="let rPeer"><span
fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRoutingPeerClick(row, $event, 'out')"></tr>
</table>
</div>
</mat-card-content>
</div>
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<table mat-table #tableOut [dataSource]="RoutingPeersOutgoing" matSort
[ngClass]="{'mat-elevation-z8 overflow-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-auto': true}">
<ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Chan Id</th>
<td mat-cell *matCellDef="let rPeer" class="ellipsis-parent"><span
class="ellipsis-child">{{rPeer.chan_id}}</span></td>
</ng-container>
<ng-container matColumnDef="alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Alias</th>
<td mat-cell *matCellDef="let rPeer">{{rPeer.alias}}</td>
</ng-container>
<ng-container matColumnDef="events">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Events</th>
<td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.events | number}}</span>
</td>
</ng-container>
<ng-container matColumnDef="total_amount">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total Amount (Sats)</th>
<td mat-cell *matCellDef="let rPeer"><span
fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="onRoutingPeerClick(row, $event, 'out')"></tr>
</table>
</div>
</mat-card-content>
</div>
</mat-card>
</div>
</div>

13
src/app/pages/routing-peers/routing-peers.component.scss
View file

@ -1,3 +1,16 @@
table {
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;
}

7
src/app/pages/routing-peers/routing-peers.component.ts
View file

@ -1,5 +1,4 @@
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { formatDate } from '@angular/common';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Store } from '@ngrx/store';
@ -7,6 +6,7 @@ import { Store } from '@ngrx/store';
import { MatTableDataSource, MatSort } from '@angular/material';
import { ForwardingEvent, RoutingPeers } from '../../shared/models/lndModels';
import { LoggerService } from '../../shared/services/logger.service';
import { CommonService } from '../../shared/services/common.service';
import * as RTLActions from '../../shared/store/rtl.actions';
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.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 startDate = this.lastMonthDay;
public flgSticky = false;
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) {
case (window.innerWidth <= 415):
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;
}
});
return [incomingResults, outgoingResults];
return [this.commonService.sortDescByKey(incomingResults, 'total_amount'), this.commonService.sortDescByKey(outgoingResults, 'total_amount')];
}
onRoutingPeersFetch() {

12
src/app/pages/switch/forwarding-history.component.scss
View file

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

12
src/app/pages/transactions/list-transactions/list-transactions.component.scss
View file

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

13
src/app/shared/components/alert-message/alert-message.component.html
View file

@ -11,18 +11,19 @@
<div *ngFor="let obj of messageObj" fxLayout="row" fxLayoutAlign="center flex-start">
<div fxFlex="20">{{obj[0] | titlecase}}</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">
<span>{{obj[1] | number:'1.0-3'}}</span>
</div>
<ng-template #notNumberTemplate>
<span>{{obj[1]}}</span>
<span fxFlex="100">{{obj[1]}}
<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>
</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>
</div>
<div *ngIf="showCopyOption(obj[0])" fxFlex="15" fxLayoutAlign="center center">
<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>

14
src/app/shared/services/common.service.ts Normal file
View file

@ -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));
});
}
}

12
src/app/shared/theme/skins/light-blue.scss
View file

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

12
src/app/shared/theme/skins/light-bluegray.scss
View file

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

12
src/app/shared/theme/skins/light-teal.scss
View file

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

3
src/app/shared/theme/styles/change-theme.scss
View file

@ -38,11 +38,12 @@
}
a {
color: mat-color($foreground, text);
color: white;
}
.active-link {
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 {