Responsive fixes

Responsive fixes
pull/260/head
Shahana Farooqui 5 years ago
parent 0e73162f55
commit 0f9028225d

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

@ -9,8 +9,8 @@
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/images/favicon/site.webmanifest">
<link rel="stylesheet" href="styles.846fe30b50aae35fd2ff.css"></head>
<link rel="stylesheet" href="styles.68b5db6d46c8a4bbf9c7.css"></head>
<body>
<rtl-app></rtl-app>
<script src="runtime.2e7afc91ca13103620f1.js"></script><script src="polyfills-es5.2e75d230d7f9c760eb2f.js" nomodule></script><script src="polyfills.1ebb102854b0ec478c1b.js"></script><script src="main.c4e26dc0e7664be8d741.js"></script></body>
<script src="runtime.eee9164e2e2dec3d9bc1.js"></script><script src="polyfills-es5.2e75d230d7f9c760eb2f.js" nomodule></script><script src="polyfills.1ebb102854b0ec478c1b.js"></script><script src="main.36e09f96013a23748bb9.js"></script></body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1 +0,0 @@
!function(e){function r(r){for(var n,u,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)o[u=i[p]]&&s.push(o[u][0]),o[u]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return a.push.apply(a,f||[]),t()}function t(){for(var e,r=0;r<a.length;r++){for(var t=a[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(a.splice(r--,1),e=u(u.s=t[0]))}return e}var n={},o={0:0},a=[];function u(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,u),t.l=!0,t.exports}u.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var a,i=document.createElement("script");i.charset="utf-8",i.timeout=120,u.nc&&i.setAttribute("nonce",u.nc),i.src=function(e){return u.p+""+({}[e]||e)+"."+{1:"9e71a210a8bdc5ba9df9",6:"53f63444eaa25a00445e",7:"9aa78a1a4cf44c9d414c"}[e]+".js"}(e);var c=new Error;a=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+a+")",c.name="ChunkLoadError",c.type=n,c.request=a,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){a({type:"timeout",target:i})}),12e4);i.onerror=i.onload=a,document.head.appendChild(i)}return Promise.all(r)},u.m=e,u.c=n,u.d=function(e,r,t){u.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,r){if(1&r&&(e=u(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(u.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)u.d(t,n,(function(r){return e[r]}).bind(null,n));return t},u.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(r,"a",r),r},u.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},u.p="",u.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]);

@ -0,0 +1 @@
!function(e){function r(r){for(var n,a,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)o[a=i[p]]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,f||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++)0!==o[t[i]]&&(n=!1);n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={0:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+""+({}[e]||e)+"."+{1:"9e71a210a8bdc5ba9df9",6:"644c1ac5d2c628ad6ca6",7:"420d59318eed00c450bb"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(f);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var f=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,(function(r){return e[r]}).bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="",a.oe=function(e){throw console.error(e),e};var i=window.webpackJsonp=window.webpackJsonp||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var f=0;f<i.length;f++)r(i[f]);var l=c;t()}([]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -223,8 +223,8 @@ exports.getConfig = (req, res, next) => {
};
exports.getCurrencyRates = (req, res, next) => {
options = common.getOptions();
options.url = 'https://blockchain.info/ticker';
console.log(options);
request(options).then((body) => {
logger.info({fileName: 'RTLConf', msg: 'Rates Received: ' + JSON.stringify(body)});
if(undefined === body || body.error) {
@ -237,6 +237,7 @@ exports.getCurrencyRates = (req, res, next) => {
}
})
.catch(function (err) {
logger.error({fileName: 'Conf', lineNum: 241, msg: 'Fetching Rates Failed! ' + JSON.stringify(err)});
return res.status(500).json({
message: "Fetching Rates Failed!",
error: err.error

@ -15,7 +15,7 @@
tabindex="1" required #paymentReq="ngModel">
</mat-form-field>
</div>
<div fxFlex="30" fxLayoutAlign="space-between stretch">
<div fxFlex="100" fxFlex.gt-sm="50" fxLayout="row" fxLayoutAlign="space-between stretch">
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary"
[disabled]="paymentReq.invalid" (click)="onSendPayment()" tabindex="2">
<p *ngIf="paymentReq.invalid && (paymentReq.dirty || paymentReq.touched); else sendText">Invalid Req</p>

@ -3,21 +3,21 @@
<fa-icon [icon]="faSearch" class="page-title-img mr-1"></fa-icon>
<span class="page-title">Lookups</span>
</div>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap-x">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap">
<mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start start" class="card-content-gap">
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="card-content-gap mt-1">
<form fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="w-100" #form="ngForm">
<mat-form-field fxFlex="22" fxLayoutAlign="start end">
<mat-form-field fxFlex="30" fxLayoutAlign="start end">
<mat-select [(ngModel)]="selectedFieldId" placeholder="Lookup Field" (selectionChange)="onSelectChange($event)" tabindex="1" required name="lookupField">
<mat-option *ngFor="let lookupField of lookupFields" [value]="lookupField.id">
{{lookupField.name}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="50" fxLayoutAlign="start end">
<mat-form-field fxFlex="68" fxLayoutAlign="start end">
<input matInput name="lookupKey" [placeholder]="lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'" (change)="clearLookupValue()" [(ngModel)]="lookupKey" tabindex="2" required>
</mat-form-field>
<div fxFlex="25" fxLayoutAlign="space-between center">
<div fxFlex="50" fxLayoutAlign="space-between stretch">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="3" type="button" (click)="resetData()">Clear</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="4" type="submit" (click)="onLookup()" [disabled]="!form.valid">Lookup</button>
</div>

@ -6,7 +6,7 @@
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap-x">
<mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start start" class="card-content-gap">
<div fxFlex="30" fxLayoutAlign="space-between center">
<div fxFlex="50" fxLayoutAlign="space-between center">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="1" (click)="onStopMonitor()">Stop Monitor</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="2" (click)="onStartMonitor()">Start Monitor</button>
</div>

@ -26,7 +26,7 @@
<input matInput [(ngModel)]="transaction.fees" placeholder="Fee ({{nodeData?.smaller_currency_unit}}/Byte)" type="number" name="fees" step="1" min="0" required tabindex="6" #fees="ngModel">
</mat-form-field>
</div>
<div fxFlex="50" fxLayoutAlign="space-between start">
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="space-between stretch">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="7" type="reset" (click)="resetData()">Clear Fields</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary"
[disabled]="invalidValues" type="submit" tabindex="8" (click)="onSendFunds()">
@ -59,7 +59,7 @@
</mat-form-field>
</div>
<div>
<div fxFlex="100" fxFlex.gt-sm="30" fxLayout="row wrap" fxLayoutAlign="space-between start">
<div fxFlex="100" fxFlex.gt-sm="50" fxLayout="row" fxLayoutAlign="space-between stretch">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="7" type="reset" (click)="resetData()">Clear Fields</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="invalidValues" type="submit" tabindex="8" (click)="onSendFunds()">
<p *ngIf="invalidValues && (addressSweep.touched || addressSweep.dirty); else sendTextSweep">Invalid Values</p>

@ -21,6 +21,14 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount (Sats) </th>
<td mat-cell *matCellDef="let transaction"><span fxLayoutAlign="end center">{{transaction.amount | number}}</span></td>
</ng-container>
<ng-container matColumnDef="total_fees">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Fees (Sats) </th>
<td mat-cell *matCellDef="let transaction"><span fxLayoutAlign="end center">{{transaction.total_fees | number}}</span></td>
</ng-container>
<ng-container matColumnDef="block_height">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Block Height </th>
<td mat-cell *matCellDef="let transaction"><span fxLayoutAlign="end center">{{transaction.block_height | number}}</span></td>
</ng-container>
<ng-container matColumnDef="num_confirmations">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Confirmations </th>
<td mat-cell *matCellDef="let transaction"><span fxLayoutAlign="end center">

@ -39,12 +39,15 @@ export class OnChainTransactionHistoryComponent implements OnInit, OnDestroy {
if(ss === ScreenSizeEnum.XS) {
this.flgSticky = false;
this.displayedColumns = ['time_stamp_str', 'amount', 'actions'];
} else if(ss === ScreenSizeEnum.SM || ss === ScreenSizeEnum.MD) {
} else if(ss === ScreenSizeEnum.SM) {
this.flgSticky = false;
this.displayedColumns = ['time_stamp_str', 'amount', 'num_confirmations', 'actions'];
this.displayedColumns = ['time_stamp_str', 'amount', 'num_confirmations', 'total_fees', 'actions'];
} else if(ss === ScreenSizeEnum.MD) {
this.flgSticky = false;
this.displayedColumns = ['time_stamp_str', 'amount', 'total_fees', 'block_height', 'num_confirmations', 'actions'];
} else {
this.flgSticky = true;
this.displayedColumns = ['time_stamp_str', 'amount', 'num_confirmations', 'actions'];
this.displayedColumns = ['time_stamp_str', 'amount', 'total_fees', 'block_height', 'num_confirmations', 'actions'];
}
}

@ -1,56 +1,58 @@
<div fxLayout="column" fxFlex="100" fxLayout.gt-sm="row wrap" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="space-between center">
<mat-form-field fxFlex="45" fxLayoutAlign="start end">
<mat-select [(ngModel)]="selectedPeer" placeholder="Alias" name="peer_alias" tabindex="1" required name="selPeer" #selPeer="ngModel">
<mat-option (click)="addNewPeer()" [value]="'new'">
ADD PEER
</mat-option>
<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" 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>
<span matSuffix> {{information?.smaller_currency_unit | titlecase}} </span>
</mat-form-field>
<div fxFlex="15" fxLayoutAlign="start center">
<mat-slide-toggle tabindex="3" color="primary" [(ngModel)]="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle>
</div>
<div fxFlex="15" fxLayoutAlign="start center">
<button fxLayoutAlign="center center" mat-stroked-button color="primary" type="reset" (click)="onShowAdvanced()" tabindex="4">
<p *ngIf="!showAdvanced; else hideAdvancedText">Show Advanced</p>
<ng-template #hideAdvancedText><p>Hide Advanced</p></ng-template>
</button>
</div>
<div *ngIf="showAdvanced" fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="75" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="space-between center">
<mat-form-field fxFlex="33" fxLayoutAlign="start end">
<mat-select tabindex="5" [(value)]="selTransType">
<mat-option *ngFor="let transType of transTypes" [value]="transType.id">
{{transType.name}}
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap">
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
<mat-form-field fxFlex="40" fxFlex.gt-sm="30" fxLayoutAlign="start end">
<mat-select [(ngModel)]="selectedPeer" placeholder="Alias" name="peer_alias" tabindex="1" required name="selPeer" #selPeer="ngModel">
<mat-option (click)="addNewPeer()" [value]="'new'">
ADD PEER
</mat-option>
<mat-option *ngFor="let peer of peers" [value]="peer.pub_key">
{{peer.alias}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="33" *ngIf="selTransType=='0'">
<input matInput placeholder="Default" disabled>
</mat-form-field>
<mat-form-field fxFlex="33" *ngIf="selTransType=='1'">
<input matInput [(ngModel)]="transTypeValue.blocks" placeholder="Target Confirmation Blocks" type="number" name="blocks" step="1" min="0" required tabindex="7" #blocks="ngModel">
<mat-form-field fxFlex="25" fxFlex.gt-sm="30" fxLayoutAlign="start end">
<input matInput [(ngModel)]="fundingAmount" placeholder="Amount" 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>
<span matSuffix> {{information?.smaller_currency_unit | titlecase}} </span>
</mat-form-field>
<mat-form-field fxFlex="33" *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="8" #fees="ngModel">
</mat-form-field>
<div fxFlex="34" fxLayoutAlign="start center">
<mat-slide-toggle tabindex="9" color="primary" [(ngModel)]="spendUnconfirmed" name="spendUnconfirmed">Spend Unconfirmed Output</mat-slide-toggle>
<div fxFlex="15" fxFlex.gt-sm="20" fxLayoutAlign="start center" [ngClass]="{'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
<mat-slide-toggle tabindex="3" color="primary" [(ngModel)]="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle>
</div>
<div fxFlex="100" fxFlex.gt-sm="17" fxLayoutAlign="start center" [ngClass]="{'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
<button fxFlex="48" fxFlex.gt-sm="100" fxLayoutAlign="center center" mat-stroked-button color="primary" type="reset" (click)="onShowAdvanced()" tabindex="4">
<p *ngIf="!showAdvanced; else hideAdvancedText">Show Advanced</p>
<ng-template #hideAdvancedText><p>Hide Advanced</p></ng-template>
</button>
</div>
<div *ngIf="showAdvanced" fxFlex="100" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
<mat-form-field fxFlex="34" fxLayoutAlign="start end">
<mat-select tabindex="5" [(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="33" *ngIf="selTransType=='0'">
<input matInput placeholder="Default" disabled>
</mat-form-field>
<mat-form-field fxFlex="33" *ngIf="selTransType=='1'">
<input matInput [(ngModel)]="transTypeValue.blocks" placeholder="Target Confirmation Blocks" type="number" name="blocks" step="1" min="0" required tabindex="7" #blocks="ngModel">
</mat-form-field>
<mat-form-field fxFlex="33" *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="8" #fees="ngModel">
</mat-form-field>
<div fxFlex="32" fxLayoutAlign="start center" [ngClass]="{'my-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
<mat-slide-toggle tabindex="9" color="primary" [(ngModel)]="spendUnconfirmed" name="spendUnconfirmed">Spend Unconfirmed Output</mat-slide-toggle>
</div>
</div>
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="space-between stretch" class="mt-2">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="10" type="reset" (click)="resetData()">Clear Field</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" (click)="onOpenChannel()" [disabled]="selectedPeer === '' || fundingAmount == null || (totalBalance - ((fundingAmount) ? fundingAmount : 0) < 0)" type="submit" tabindex="11">
<p *ngIf="(selectedPeer === '' || fundingAmount == null) && (selPeer.touched || selPeer.dirty) && (amount.touched || amount.dirty); else openText">Invalid Values</p>
<ng-template #openText><p>Open Channel</p></ng-template>
</button>
</div>
</div>
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="30" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="space-between start">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="10" type="reset" (click)="resetData()">Clear Field</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" (click)="onOpenChannel()" [disabled]="selectedPeer === '' || fundingAmount == null || (totalBalance - ((fundingAmount) ? fundingAmount : 0) < 0)" type="submit" tabindex="11">
<p *ngIf="(selectedPeer === '' || fundingAmount == null) && (selPeer.touched || selPeer.dirty) && (amount.touched || amount.dirty); else openText">Invalid Values</p>
<ng-template #openText><p>Open Channel</p></ng-template>
</button>
</div>
<rtl-channels-tables fxLayout="row" fxFlex="100"></rtl-channels-tables>
</div>

@ -1,16 +1,14 @@
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { MatTableDataSource, MatSort } from '@angular/material';
import { Channel, Peer, GetInfo } from '../../../../shared/models/lndModels';
import { TRANS_TYPES, AlertTypeEnum, DataTypeEnum } from '../../../../shared/services/consts-enums-functions';
import { MatSort } from '@angular/material';
import { Peer, GetInfo } from '../../../../shared/models/lndModels';
import { TRANS_TYPES, ScreenSizeEnum } from '../../../../shared/services/consts-enums-functions';
import { LoggerService } from '../../../../shared/services/logger.service';
import { CommonService } from '../../../../shared/services/common.service';
import { LNDEffects } from '../../../store/lnd.effects';
import { RTLEffects } from '../../../../store/rtl.effects';
import * as RTLActions from '../../../../store/rtl.actions';
import * as fromRTLReducer from '../../../../store/rtl.reducers';
@ -33,9 +31,13 @@ export class ChannelManageComponent implements OnInit, OnDestroy {
public spendUnconfirmed = false;
public isPrivate = false;
public showAdvanced = false;
public screenSizeEnum = ScreenSizeEnum;
public screenSize = '';
private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private activatedRoute: ActivatedRoute) {}
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
}
ngOnInit() {
this.store.select('lnd')

@ -1,13 +1,13 @@
<div fxLayout="column" class="mt-2">
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-md="row wrap">
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
<h4 fxFlex="100" class="blinker">Save your backup files in a redundant location.</h4>
<h4 fxFlex="100" class="mt-1">Backup folder location: {{selNode.channelBackupPath}}</h4>
<div fxLayout="row" fxFlex.gt-sm="30" fxLayoutAlign.gt-sm="space-between start" fxLayoutAlign="start start" class="mt-2">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="1" (click)="onVerifyChannels({})">Verify All Channels Backup</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="2" (click)="onBackupChannels({})">Backup All Channels</button>
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="space-between stretch" class="mt-2">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="1" (click)="onVerifyChannels({})">Verify All Backups</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="2" (click)="onBackupChannels({})">Backup All</button>
</div>
</div>
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container mt-minus-2">
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container mt-2">
<div fxFlex="70"></div>
<mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
@ -18,7 +18,7 @@
<table mat-table #table [dataSource]="channels" matSort [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
<ng-container matColumnDef="channel_point">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Point </th>
<td mat-cell *matCellDef="let channel">{{channel?.channel_point}}</td>
<td mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '28rem'}">{{channel?.channel_point}}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>

@ -1,4 +1,4 @@
.mat-column-chan_point {
.mat-column-channel_point {
flex: 1 1 25%;
white-space: nowrap;
overflow: hidden;

@ -7,8 +7,9 @@ import { Actions } from '@ngrx/effects';
import { MatTableDataSource, MatSort, MatPaginator, MatPaginatorIntl } from '@angular/material';
import { SelNodeChild } from '../../../../../shared/models/RTLconfig';
import { Channel } from '../../../../../shared/models/lndModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum } from '../../../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum } from '../../../../../shared/services/consts-enums-functions';
import { LoggerService } from '../../../../../shared/services/logger.service';
import { CommonService } from '../../../../../shared/services/common.service';
import * as RTLActions from '../../../../../store/rtl.actions';
import * as fromRTLReducer from '../../../../../store/rtl.reducers';
@ -32,9 +33,13 @@ export class ChannelBackupTableComponent implements OnInit, OnDestroy {
public channels: any;
public flgLoading: Array<Boolean | 'error'> = [true]; // 0: channels
public flgSticky = false;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions) {}
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
}
ngOnInit() {
this.store.select('lnd')

@ -7,15 +7,14 @@
</div>
<div perfectScrollbar fxLayout="row" fxLayoutAlign="start center" fxFlex="100" class="table-container">
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<table mat-table #table [dataSource]="closedChannels" matSort
[ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
<table mat-table #table [dataSource]="closedChannels" matSort [ngClass]="{'error-border': flgLoading[0]==='error'}">
<ng-container matColumnDef="close_type">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Close Type </th>
<td mat-cell *matCellDef="let channel"> {{channel.close_type}} </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>
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel ID </th>
<td mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '20rem'}"> {{channel.chan_id}} </td>
</ng-container>
<ng-container matColumnDef="capacity">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Capacity </th>
@ -33,8 +32,8 @@
</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let channel" class="pl-4">
<th mat-header-cell *matHeaderCellDef class="pl-1"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let channel" class="pl-1">
<span fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onClosedChannelClick(channel,$event)">View Info</button>
</span>

@ -1,9 +1,10 @@
.mat-column-close_type {
flex: 0 0 16%;
min-width: 160px;
flex: 0 0 16%;
min-width: 5rem;
}
.mat-column-chan_id {
flex: 0 0 17%;
min-width: 170px;
flex: 0 0 10%;
overflow: hidden;
text-overflow: ellipsis;
}

@ -7,10 +7,10 @@ import { faHistory } from '@fortawesome/free-solid-svg-icons';
import { MatTableDataSource, MatSort, MatPaginator, MatPaginatorIntl } from '@angular/material';
import { ClosedChannel } from '../../../../../shared/models/lndModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum } from '../../../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum } from '../../../../../shared/services/consts-enums-functions';
import { LoggerService } from '../../../../../shared/services/logger.service';
import { CommonService } from '../../../../../shared/services/common.service';
import { RTLEffects } from '../../../../../store/rtl.effects';
import * as RTLActions from '../../../../../store/rtl.actions';
import * as fromRTLReducer from '../../../../../store/rtl.reducers';
@ -33,27 +33,21 @@ export class ChannelClosedTableComponent implements OnInit, OnDestroy {
public flgSticky = false;
public pageSize = PAGE_SIZE;
public pageSizeOptions = PAGE_SIZE_OPTIONS;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private actions$: Actions) {
switch (true) {
case (window.innerWidth <= 415):
this.displayedColumns = ['close_type', 'chan_id', 'actions'];
break;
case (window.innerWidth > 415 && window.innerWidth <= 730):
this.displayedColumns = ['close_type', 'chan_id', 'close_height', 'settled_balance', 'actions'];
break;
case (window.innerWidth > 730 && window.innerWidth <= 1024):
this.displayedColumns = ['close_type', 'chan_id', 'capacity', 'close_height', 'settled_balance', 'actions'];
break;
case (window.innerWidth > 1024 && window.innerWidth <= 1280):
this.flgSticky = true;
this.displayedColumns = ['close_type', 'chan_id', 'capacity', 'close_height', 'settled_balance', 'actions'];
break;
default:
this.flgSticky = true;
this.displayedColumns = ['close_type', 'chan_id', 'capacity', 'close_height', 'settled_balance', 'actions'];
break;
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
if(this.screenSize === ScreenSizeEnum.XS) {
this.flgSticky = false;
this.displayedColumns = ['chan_id', 'actions'];
} else if(this.screenSize === ScreenSizeEnum.SM || this.screenSize === ScreenSizeEnum.MD) {
this.flgSticky = false;
this.displayedColumns = ['close_type', 'chan_id', 'settled_balance', 'actions'];
} else {
this.flgSticky = true;
this.displayedColumns = ['close_type', 'chan_id', 'capacity', 'close_height', 'settled_balance', 'actions'];
}
}

@ -1,31 +1,23 @@
<div fxLayout="column">
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container">
<div fxLayout="column" class="padding-gap">
<div fxLayout="row" fxLayoutAlign="start center" class="page-sub-title-container">
<div fxFlex="70"></div>
<mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter()" [(ngModel)]="selFilter" name="filter" placeholder="Filter">
</mat-form-field>
</div>
<div perfectScrollbar fxLayout="row" fxLayoutAlign="start center" fxFlex="100" class="table-container">
<div perfectScrollbar fxLayout="row" fxLayoutAlign="start center" fxFlex="100" class="table-container w-100">
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<table mat-table #table [dataSource]="channels" matSort [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
<ng-container matColumnDef="remote_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
<td mat-cell *matCellDef="let channel">
<div class="ellipsis-parent">
<div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '22rem'}">
<span *ngIf="channel.active" class="dot green"></span>
<span *ngIf="!channel.active" class="dot yellow"></span>
<span class="ellipsis-child">{{channel.remote_alias || channel.remote_pubkey}}</span>
</div>
</td>
</ng-container>
<ng-container matColumnDef="total_satoshis_sent">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sent ({{information?.smaller_currency_unit}}) </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">Received ({{information?.smaller_currency_unit}}) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.total_satoshis_received | number}} </span></td>
</ng-container>
<ng-container matColumnDef="local_balance">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Local Balance </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.local_balance | number}} </span></td>
@ -34,9 +26,17 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Remote Balance </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">Sent ({{information?.smaller_currency_unit}}) </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">Received ({{information?.smaller_currency_unit}}) </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.total_satoshis_received | number}} </span></td>
</ng-container>
<ng-container matColumnDef="capacity">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="px-3">Capacity</th>
<td mat-cell *matCellDef="let channel" class="px-3">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-3">Capacity</th>
<td mat-cell *matCellDef="let channel" class="pl-3">
<div fxLayout="row">
<mat-hint fxFlex="50" fxLayoutAlign="start center" class="font-size-80"><strong class="font-weight-900">Local: </strong>{{channel.local_balance || 0 | number}} {{information?.smaller_currency_unit}}</mat-hint>
<mat-hint fxFlex="50" fxLayoutAlign="end center" class="font-size-80"><strong class="font-weight-900">Remote: </strong>{{channel.remote_balance || 0 | number}} {{information?.smaller_currency_unit}}</mat-hint>
@ -46,7 +46,7 @@
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
<td mat-cell *matCellDef="let channel" fxLayoutAlign="end center" class="pl-3">
<div fxFlex="100" class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -3,15 +3,13 @@
width: 20%;
& .ellipsis-parent {
display: flex;
max-width: 25rem;
}
}
.mat-column-capacity {
padding-left: 3rem;
padding-right: 3rem;
flex: 0 0 30%;
width: 30%;
flex: 0 0 25%;
width: 25%;
}
.mat-column-local_balance, .mat-column-remote_balance, .mat-column-total_satoshis_sent, .mat-column-total_satoshis_received {
@ -23,7 +21,7 @@
}
.mat-column-actions {
width: 12rem;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

@ -5,8 +5,9 @@ import { Store } from '@ngrx/store';
import { MatTableDataSource, MatSort, MatPaginator, MatPaginatorIntl } from '@angular/material';
import { Channel, GetInfo } from '../../../../../shared/models/lndModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum } from '../../../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum } from '../../../../../shared/services/consts-enums-functions';
import { LoggerService } from '../../../../../shared/services/logger.service';
import { CommonService } from '../../../../../shared/services/common.service';
import { LNDEffects } from '../../../../store/lnd.effects';
import { RTLEffects } from '../../../../../store/rtl.effects';
@ -36,27 +37,24 @@ export class ChannelOpenTableComponent implements OnInit, OnDestroy {
public myChanPolicy: any = {};
public pageSize = PAGE_SIZE;
public pageSizeOptions = PAGE_SIZE_OPTIONS;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects) {
switch (true) {
case (window.innerWidth <= 415):
this.displayedColumns = ['remote_alias', 'capacity', 'actions'];
break;
case (window.innerWidth > 415 && window.innerWidth <= 730):
this.displayedColumns = ['remote_alias', 'total_satoshis_sent', 'total_satoshis_received', 'actions'];
break;
case (window.innerWidth > 730 && window.innerWidth <= 1024):
this.displayedColumns = ['remote_alias', 'total_satoshis_sent', 'total_satoshis_received', 'local_balance', 'remote_balance', 'capacity', 'actions'];
break;
case (window.innerWidth > 1024 && window.innerWidth <= 1280):
this.flgSticky = true;
this.displayedColumns = ['remote_alias', 'total_satoshis_sent', 'total_satoshis_received', 'local_balance', 'remote_balance', 'capacity', 'actions'];
break;
default:
this.flgSticky = true;
this.displayedColumns = ['remote_alias', 'total_satoshis_sent', 'total_satoshis_received', 'local_balance', 'remote_balance', 'capacity', 'actions'];
break;
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
if(this.screenSize === ScreenSizeEnum.XS) {
this.flgSticky = false;
this.displayedColumns = [ 'remote_alias', 'actions'];
} else if(this.screenSize === ScreenSizeEnum.SM) {
this.flgSticky = false;
this.displayedColumns = ['remote_alias', 'total_satoshis_sent', 'total_satoshis_received', 'actions'];
} else if(this.screenSize === ScreenSizeEnum.MD) {
this.flgSticky = false;
this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'actions'];
} else {
this.flgSticky = true;
this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'total_satoshis_sent', 'total_satoshis_received', 'capacity', 'actions'];
}
}

@ -4,7 +4,7 @@
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<mat-expansion-panel fxLayout="column" class="flat-expansion-panel">
<mat-expansion-panel-header>
<mat-panel-title>Pending Open Channels({{pendingOpenChannelsLength}})</mat-panel-title>
<mat-panel-title>Pending Open ({{pendingOpenChannelsLength}})</mat-panel-title>
</mat-expansion-panel-header>
<div perfectScrollbar fxLayout="row" fxLayoutAlign="start center" fxFlex="100" class="table-container">
<mat-table #table [dataSource]="pendingOpenChannels" matSort [ngClass]="{'w-100 error-border bordered-box': flgLoading[0]==='error','bordered-box w-100': true}">
@ -13,7 +13,7 @@
<mat-cell *matCellDef="let channel">{{channel.channel.channel_point}}</mat-cell>
</ng-container>
<ng-container matColumnDef="commit_fee">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Fee </mat-header-cell>
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Commit Fee (Sats) </mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.commit_fee | number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="commit_weight">
@ -21,7 +21,7 @@
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.commit_weight | number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="capacity">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity </mat-header-cell>
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats)</mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity | number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
@ -32,7 +32,7 @@
</ng-container>
<ng-container matColumnDef="no_pending_open">
<td mat-footer-cell *matFooterCellDef colspan="4">
<p *ngIf="!pendingOpenChannels || !pendingOpenChannels.data || pendingOpenChannels.data.length<1">No pending open channels.</p>
<p *ngIf="!pendingOpenChannels || !pendingOpenChannels.data || pendingOpenChannels.data.length<1">No pending channels.</p>
</td>
</ng-container>
<tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_open']" [ngClass]="{'display-none': pendingOpenChannels && pendingOpenChannels.data && pendingOpenChannels.data.length>0}"></tr>
@ -44,7 +44,7 @@
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<mat-expansion-panel fxLayout="column" class="flat-expansion-panel">
<mat-expansion-panel-header>
<mat-panel-title>Pending Force Closing Channels({{pendingForceClosingChannelsLength}})</mat-panel-title>
<mat-panel-title>Pending Force Closing ({{pendingForceClosingChannelsLength}})</mat-panel-title>
</mat-expansion-panel-header>
<div perfectScrollbar class="table-container">
<mat-table #table [dataSource]="pendingForceClosingChannels" matSort [ngClass]="{'error-border bordered-box': flgLoading[0]==='error','bordered-box': true}">
@ -53,15 +53,15 @@
<mat-cell *matCellDef="let channel">{{channel.channel.channel_point}}</mat-cell>
</ng-container>
<ng-container matColumnDef="recovered_balance">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Recovered Balance </mat-header-cell>
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Recovered Balance (Sats) </mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.recovered_balance | number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="limbo_balance">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Limbo Balance </mat-header-cell>
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Limbo Balance (Sats) </mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.limbo_balance | number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="capacity">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity </mat-header-cell>
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">Capacity (Sats) </mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity | number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
@ -72,7 +72,7 @@
</ng-container>
<ng-container matColumnDef="no_pending_force_closing">
<td mat-footer-cell *matFooterCellDef colspan="4">
<p *ngIf="!pendingForceClosingChannels || !pendingForceClosingChannels.data || pendingForceClosingChannels.data.length<1">No pending force closing channels.</p>
<p *ngIf="!pendingForceClosingChannels || !pendingForceClosingChannels.data || pendingForceClosingChannels.data.length<1">No pending channels.</p>
</td>
</ng-container>
<tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_force_closing']" [ngClass]="{'display-none': pendingForceClosingChannels && pendingForceClosingChannels.data && pendingForceClosingChannels.data.length>0}"></tr>
@ -84,7 +84,7 @@
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<mat-expansion-panel fxLayout="column" class="flat-expansion-panel">
<mat-expansion-panel-header>
<mat-panel-title>Pending Closing Channels({{pendingClosingChannelsLength}})</mat-panel-title>
<mat-panel-title>Pending Closing ({{pendingClosingChannelsLength}})</mat-panel-title>
</mat-expansion-panel-header>
<div perfectScrollbar class="table-container">
<mat-table #table [dataSource]="pendingClosingChannels" matSort
@ -95,19 +95,19 @@
</ng-container>
<ng-container matColumnDef="local_balance">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
Local Balance </mat-header-cell>
Local Balance (Sats) </mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.local_balance |
number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="remote_balance">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
Remote Balance </mat-header-cell>
Remote Balance (Sats) </mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.remote_balance |
number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="capacity">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
Capacity </mat-header-cell>
Capacity (Sats) </mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity |
number}}</mat-cell>
</ng-container>
@ -119,7 +119,7 @@
</ng-container>
<ng-container matColumnDef="no_pending_closing">
<td mat-footer-cell *matFooterCellDef colspan="4">
<p *ngIf="!pendingClosingChannels || !pendingClosingChannels.data || pendingClosingChannels.data.length<1">No pending closing channels.</p>
<p *ngIf="!pendingClosingChannels || !pendingClosingChannels.data || pendingClosingChannels.data.length<1">No pending channels.</p>
</td>
</ng-container>
<tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_closing']" [ngClass]="{'display-none': pendingClosingChannels && pendingClosingChannels.data && pendingClosingChannels.data.length>0}"></tr>
@ -131,7 +131,7 @@
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
<mat-expansion-panel fxLayout="column" class="flat-expansion-panel">
<mat-expansion-panel-header>
<mat-panel-title>Waiting Close Channels({{pendingWaitClosingChannelsLength}})</mat-panel-title>
<mat-panel-title>Waiting Close ({{pendingWaitClosingChannelsLength}})</mat-panel-title>
</mat-expansion-panel-header>
<div perfectScrollbar class="table-container">
<mat-table #table [dataSource]="pendingWaitClosingChannels" matSort
@ -142,25 +142,25 @@
</ng-container>
<ng-container matColumnDef="limbo_balance">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
Limbo Balance </mat-header-cell>
Limbo Balance (Sats) </mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.limbo_balance | number}}
</mat-cell>
</ng-container>
<ng-container matColumnDef="local_balance">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
Local Balance </mat-header-cell>
Local Balance (Sats) </mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.local_balance |
number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="remote_balance">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
Remote Balance </mat-header-cell>
Remote Balance (Sats) </mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.remote_balance |
number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="capacity">
<mat-header-cell fxLayoutAlign="end center" *matHeaderCellDef mat-sort-header arrowPosition="before">
Capacity </mat-header-cell>
Capacity (Sats) </mat-header-cell>
<mat-cell fxLayoutAlign="end center" *matCellDef="let channel">{{channel.channel.capacity |
number}}</mat-cell>
</ng-container>
@ -172,7 +172,7 @@
</ng-container>
<ng-container matColumnDef="no_pending_wait_closing">
<td mat-footer-cell *matFooterCellDef colspan="4">
<p *ngIf="!pendingWaitClosingChannels || !pendingWaitClosingChannels.data || pendingWaitClosingChannels.data.length<1">No pending wait closing channels.</p>
<p *ngIf="!pendingWaitClosingChannels || !pendingWaitClosingChannels.data || pendingWaitClosingChannels.data.length<1">No pending channels.</p>
</td>
</ng-container>
<tr mat-footer-row fxLayoutAlign="start center" *matFooterRowDef="['no_pending_wait_closing']" [ngClass]="{'py-0': true, 'display-none': pendingWaitClosingChannels && pendingWaitClosingChannels.data && pendingWaitClosingChannels.data.length>0}"></tr>

@ -7,11 +7,11 @@ import { MatTableDataSource, MatSort } from '@angular/material';
import { Channel, GetInfo, PendingChannels } from '../../../../../shared/models/lndModels';
import { SelNodeChild } from '../../../../../shared/models/RTLconfig';
import { LoggerService } from '../../../../../shared/services/logger.service';
import { CommonService } from '../../../../../shared/services/common.service';
import { RTLEffects } from '../../../../../store/rtl.effects';
import * as RTLActions from '../../../../../store/rtl.actions';
import * as fromRTLReducer from '../../../../../store/rtl.reducers';
import { AlertTypeEnum, DataTypeEnum } from '../../../../../shared/services/consts-enums-functions';
import { AlertTypeEnum, DataTypeEnum, ScreenSizeEnum } from '../../../../../shared/services/consts-enums-functions';
@Component({
selector: 'rtl-channel-pending-table',
@ -37,40 +37,27 @@ export class ChannelPendingTableComponent implements OnInit, OnDestroy {
public pendingWaitClosingChannelsLength = 0;
public pendingWaitClosingChannels: any;
public flgLoading: Array<Boolean | 'error'> = [true];
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects) {
switch (true) {
case (window.innerWidth <= 415):
this.displayedOpenColumns = ['channel_point', 'commit_fee', 'actions'];
this.displayedForceClosingColumns = ['channel_point', 'limbo_balance', 'actions'];
this.displayedClosingColumns = ['channel_point', 'capacity', 'actions'];
this.displayedWaitClosingColumns = ['channel_point', 'limbo_balance', 'actions'];
break;
case (window.innerWidth > 415 && window.innerWidth <= 730):
this.displayedOpenColumns = ['channel_point', 'commit_fee', 'commit_weight', 'actions'];
this.displayedForceClosingColumns = ['channel_point', 'recovered_balance', 'limbo_balance', 'actions'];
this.displayedClosingColumns = ['channel_point', 'local_balance', 'remote_balance', 'actions'];
this.displayedWaitClosingColumns = ['channel_point', 'limbo_balance', 'capacity', 'actions'];
break;
case (window.innerWidth > 730 && window.innerWidth <= 1024):
this.displayedOpenColumns = ['channel_point', 'commit_fee', 'commit_weight', 'capacity', 'actions'];
this.displayedForceClosingColumns = ['channel_point', 'recovered_balance', 'limbo_balance', 'capacity', 'actions'];
this.displayedClosingColumns = ['channel_point', 'local_balance', 'remote_balance', 'capacity', 'actions'];
this.displayedWaitClosingColumns = ['channel_point', 'limbo_balance', 'local_balance', 'remote_balance', 'actions'];
break;
case (window.innerWidth > 1024 && window.innerWidth <= 1280):
this.displayedOpenColumns = ['channel_point', 'commit_fee', 'commit_weight', 'capacity', 'actions'];
this.displayedForceClosingColumns = ['channel_point', 'recovered_balance', 'limbo_balance', 'capacity', 'actions'];
this.displayedClosingColumns = ['channel_point', 'local_balance', 'remote_balance', 'capacity', 'actions'];
this.displayedWaitClosingColumns = ['channel_point', 'limbo_balance', 'local_balance', 'remote_balance', 'actions'];
break;
default:
this.displayedOpenColumns = ['channel_point', 'commit_fee', 'commit_weight', 'capacity', 'actions'];
this.displayedForceClosingColumns = ['channel_point', 'recovered_balance', 'limbo_balance', 'capacity', 'actions'];
this.displayedClosingColumns = ['channel_point', 'local_balance', 'remote_balance', 'capacity', 'actions'];
this.displayedWaitClosingColumns = ['channel_point', 'limbo_balance', 'local_balance', 'remote_balance', 'actions'];
break;
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
if(this.screenSize === ScreenSizeEnum.XS) {
this.displayedOpenColumns = ['channel_point', 'actions'];
this.displayedForceClosingColumns = ['channel_point', 'actions'];
this.displayedClosingColumns = ['channel_point', 'actions'];
this.displayedWaitClosingColumns = ['channel_point', 'actions'];
} else if(this.screenSize === ScreenSizeEnum.SM || this.screenSize === ScreenSizeEnum.MD) {
this.displayedOpenColumns = ['channel_point', 'commit_fee', 'actions'];
this.displayedForceClosingColumns = ['channel_point', 'limbo_balance', 'actions'];
this.displayedClosingColumns = ['channel_point', 'remote_balance', 'actions'];
this.displayedWaitClosingColumns = ['channel_point', 'limbo_balance', 'actions'];
} else {
this.displayedOpenColumns = ['channel_point', 'commit_fee', 'commit_weight', 'capacity', 'actions'];
this.displayedForceClosingColumns = ['channel_point', 'recovered_balance', 'limbo_balance', 'capacity', 'actions'];
this.displayedClosingColumns = ['channel_point', 'local_balance', 'remote_balance', 'capacity', 'actions'];
this.displayedWaitClosingColumns = ['channel_point', 'limbo_balance', 'local_balance', 'remote_balance', 'actions'];
}
}

@ -1,8 +1,8 @@
<div fxLayout="column" class="mt-2">
<div fxLayout="column" fxLayoutAlign="space-between start" fxLayout.gt-md="row wrap" *ngIf="allRestoreExists">
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" *ngIf="allRestoreExists">
<h4 fxFlex="100">Restore folder location: {{selNode.channelBackupPath}}/restore</h4>
<div fxLayout="row" fxFlex.gt-sm="20" fxLayoutAlign="start start" class="mt-2">
<button fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="1" (click)="onRestoreChannels({})">Restore All Channels</button>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="mt-2">
<button fxFlex="48" fxFlex.gt-sm="24" fxFlex.gt-md="20" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="1" (click)="onRestoreChannels({})">Restore All</button>
</div>
</div>
<div fxLayout="column" fxLayoutAlign="space-between start" fxLayout.gt-md="row wrap" *ngIf="!allRestoreExists && (!channels || channels.data.length<=0)">
@ -12,7 +12,7 @@
<div fxLayout="column" fxLayoutAlign="space-between start" fxLayout.gt-md="row wrap" *ngIf="!allRestoreExists && channels && channels.data.length && channels.data.length>0">
<h4 fxFlex="100">Restore folder location: {{selNode.channelBackupPath}}/restore</h4>
</div>
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container mt-minus-2">
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container mt-2">
<div fxFlex="70"></div>
<mat-form-field fxFlex="30">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
@ -23,11 +23,11 @@
<table mat-table #table [dataSource]="channels" matSort [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
<ng-container matColumnDef="channel_point">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel Point </th>
<td mat-cell *matCellDef="let channel">{{channel?.channel_point}}</td>
<td mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '45rem'}">{{channel?.channel_point}}</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let channel" class="pl-4">
<th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let channel">
<span fxLayoutAlign="end center">
<button mat-stroked-button color="primary" type="button" tabindex="1" (click)="onRestoreChannels(channel)">Restore</button>
</span>

@ -1,4 +1,4 @@
.mat-column-chan_point {
.mat-column-channel_point {
flex: 1 1 25%;
white-space: nowrap;
overflow: hidden;

@ -6,8 +6,9 @@ import { Store } from '@ngrx/store';
import { MatTableDataSource, MatSort, MatPaginator, MatPaginatorIntl } from '@angular/material';
import { SelNodeChild } from '../../../../../shared/models/RTLconfig';
import { Channel } from '../../../../../shared/models/lndModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum } from '../../../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum } from '../../../../../shared/services/consts-enums-functions';
import { LoggerService } from '../../../../../shared/services/logger.service';
import { CommonService } from '../../../../../shared/services/common.service';
import { LNDEffects } from '../../../../store/lnd.effects';
import * as RTLActions from '../../../../../store/rtl.actions';
@ -33,9 +34,13 @@ export class ChannelRestoreTableComponent implements OnInit {
public allRestoreExists = false;
public flgLoading: Array<Boolean | 'error'> = [true]; // 0: channels
public flgSticky = false;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private lndEffects: LNDEffects) {}
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private lndEffects: LNDEffects, private commonService: CommonService) {
this.screenSize = this.commonService.getScreenSize();
}
ngOnInit() {
this.store.dispatch(new RTLActions.RestoreChannelsList());

@ -1,9 +1,9 @@
<div fxLayout="column">
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-md="row wrap" #peersForm="ngForm">
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap">
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" #peersForm="ngForm">
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
<input matInput placeholder="Lightning Address (pubkey OR pubkey@ip:port)" name="peerAddress" [(ngModel)]="peerAddress" tabindex="1" required #peerAdd="ngModel">
</mat-form-field>
<div fxFlex="30" fxLayoutAlign="space-between start">
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="space-between stretch">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="2" type="reset" (click)="resetData()">Clear Field</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="peerAdd.invalid" type="submit" tabindex="3" (click)="onConnectPeer()">
<p *ngIf="peerAdd.invalid && (peerAdd.dirty || peerAdd.touched); else connectText">Invalid Address</p>
@ -51,8 +51,8 @@
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center">
<th mat-header-cell *matHeaderCellDef class="px-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let peer" fxLayoutAlign="end center" class="pl-3">
<div fxFlex="100" class="bordered-box table-actions-select" fxLayoutAlign="center center">
<mat-select placeholder="Actions" tabindex="1" class="mr-0">
<mat-select-trigger></mat-select-trigger>

@ -1,5 +1,4 @@
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil, filter, take } from 'rxjs/operators';
@ -9,8 +8,9 @@ import { faUsers } from '@fortawesome/free-solid-svg-icons';
import { MatTableDataSource, MatSort, MatPaginator, MatPaginatorIntl } from '@angular/material';
import { Peer, GetInfo } from '../../../shared/models/lndModels';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum } from '../../../shared/services/consts-enums-functions';
import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
import { LoggerService } from '../../../shared/services/logger.service';
import { CommonService } from '../../../shared/services/common.service';
import { OpenChannelComponent } from '../../../shared/components/data-modal/open-channel/open-channel.component';
import { newlyAddedRowAnimation } from '../../../shared/animation/row-animation';
import { LNDEffects } from '../../store/lnd.effects';
@ -44,25 +44,20 @@ export class PeersComponent implements OnInit, OnDestroy {
public pageSizeOptions = PAGE_SIZE_OPTIONS;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects, private actions$: Actions, private router: Router) {
switch (true) {
case (window.innerWidth <= 415):
this.displayedColumns = [ 'alias', 'sat_sent', 'sat_recv', 'actions'];
break;
case (window.innerWidth > 415 && window.innerWidth <= 730):
this.displayedColumns = [ 'alias', 'pub_key', 'sat_sent', 'sat_recv', 'actions'];
break;
case (window.innerWidth > 730 && window.innerWidth <= 1024):
this.displayedColumns = ['alias', 'pub_key', 'sat_sent', 'sat_recv', 'ping_time', 'actions'];
break;
case (window.innerWidth > 1024 && window.innerWidth <= 1280):
this.flgSticky = true;
this.displayedColumns = ['alias', 'pub_key', 'sat_sent', 'sat_recv', 'ping_time', 'actions'];
break;
default:
this.flgSticky = true;
this.displayedColumns = ['alias', 'pub_key', 'sat_sent', 'sat_recv', 'ping_time', 'actions'];
break;
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects, private actions$: Actions, private commonService: CommonService) {
let ss = this.commonService.getScreenSize();
if(ss === ScreenSizeEnum.XS) {
this.flgSticky = false;
this.displayedColumns = [ 'alias', 'actions'];
} else if(ss === ScreenSizeEnum.SM) {
this.flgSticky = false;
this.displayedColumns = [ 'alias', 'sat_sent', 'sat_recv', 'actions'];
} else if(ss === ScreenSizeEnum.MD) {
this.flgSticky = false;
this.displayedColumns = ['alias', 'sat_sent', 'sat_recv', 'ping_time', 'actions'];
} else {
this.flgSticky = true;
this.displayedColumns = ['alias', 'pub_key', 'sat_sent', 'sat_recv', 'ping_time', 'actions'];
}
}

@ -24,8 +24,8 @@
<td mat-cell *matCellDef="let fhEvent"><span fxLayoutAlign="end center">{{fhEvent.fee | number}}</span></td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let fhEvent" class="pl-4">
<th mat-header-cell *matHeaderCellDef class="px-3"><span fxLayoutAlign="end center">Actions</span></th>
<td mat-cell *matCellDef="let fhEvent" class="pl-3">
<button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onForwardingEventClick(fhEvent,$event)">View Info</button>
</td>
</ng-container>

@ -5,9 +5,9 @@
</div>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap-x">
<mat-card fxLayout="row" fxFlex="100" fxLayoutAlign="start start">
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start start" class="card-content-gap">
<mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="start start" class="card-content-gap mt-1">
<form fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="w-100" (ngSubmit)="routingForm.form.valid && onEventsFetch()" #routingForm="ngForm">
<div fxFlex="69" fxLayoutAlign="space-between stretch">
<div fxFlex="100" fxLayoutAlign="space-between stretch">
<mat-form-field fxFlex="49" fxLayoutAlign="start">
<input matInput [matDatepicker]="startDatepicker" placeholder="Start Date" [max]="yesterday"
name="startDate" [(ngModel)]="startDate" tabindex="1" #strtDate="ngModel">
@ -21,7 +21,7 @@
<mat-datepicker #endDatepicker [startAt]="endDate"></mat-datepicker>
</mat-form-field>
</div>
<div fxFlex="30" fxLayoutAlign="space-between center">
<div fxFlex="50" fxLayoutAlign="space-between stretch">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="3" type="reset" (click)="resetData()">Clear</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="routingForm.invalid" type="submit" tabindex="4">Fetch Events</button>
</div>

@ -1,34 +1,34 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap">
<form [fxLayout]="showDetails ? 'column' : 'row wrap'" [fxLayoutAlign]="showDetails ? 'start stretch' : 'space-between start'" fxLayout.gt-md="row wrap" fxFlex="100" #addInvoiceForm="ngForm">
<form [fxLayout]="showDetails ? 'column' : 'row wrap'" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" fxFlex="100" #addInvoiceForm="ngForm">
<mat-form-field fxFlex="100" fxLayoutAlign="end start">
<input matInput [(ngModel)]="memo" placeholder="Memo" tabindex="1" name="memo">
</mat-form-field>
<mat-form-field [fxFlex]="showDetails ? '30' : '100'" fxLayoutAlign="start end" [ngClass]="{'mr-2': screenSize === screenSizeEnum.LG}">
<mat-form-field fxFlex="100" fxFlex.gt-sm="40" fxLayoutAlign="start end">
<input matInput [(ngModel)]="invoiceValue" (keyup)="onInvoiceValueChange()" placeholder="Amount" type="number" step="100" min="1" tabindex="2" name="invoiceValue">
<span matSuffix> {{information?.smaller_currency_unit}} </span>
<mat-hint>{{invoiceValueHint}}</mat-hint>
</mat-form-field>
<mat-form-field fxFlex="12" fxLayoutAlign="start end" *ngIf="showDetails" [ngClass]="{'mr-2': screenSize === screenSizeEnum.LG}">
<mat-form-field fxFlex="15" fxLayoutAlign="start end" *ngIf="showDetails" [ngClass]="{'mr-2': screenSize === screenSizeEnum.LG}">
<input matInput [(ngModel)]="expiry" placeholder="Expiry" type="number" step="{{selTimeUnit === timeUnitEnum.SECS ? 300 : selTimeUnit === timeUnitEnum.MINS ? 10 : selTimeUnit === timeUnitEnum.HOURS ? 2 : 1}}" min="1" tabindex="3" name="expiry">
<span matSuffix> {{selTimeUnit | titlecase}} </span>
</mat-form-field>
<mat-form-field fxFlex="12" fxLayoutAlign="start end" *ngIf="showDetails" [ngClass]="{'mr-2': screenSize === screenSizeEnum.LG}">
<mat-form-field fxFlex="15" fxLayoutAlign="start end" *ngIf="showDetails" [ngClass]="{'mr-2': screenSize === screenSizeEnum.LG}">
<mat-select [value]="selTimeUnit" tabindex="4" required name="timeUnit" (selectionChange)="onTimeUnitChange($event)">
<mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">{{timeUnit | titlecase}}</mat-option>
</mat-select>
</mat-form-field>
<div fxFlex="20" tabindex="4" fxLayoutAlign="start center" *ngIf="showDetails">
<div fxFlex="23" tabindex="4" fxLayoutAlign="start center" *ngIf="showDetails">
<mat-slide-toggle color="primary" [(ngModel)]="private" matTooltip="Include routing hints for private channels" [matTooltipPosition]="'above'" name="private">Private Routing Hints</mat-slide-toggle>
</div>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start" fxLayoutAlign.gt-md="start start" *ngIf="showDetails">
<button fxFlex="48" fxFlex.gt-md="10" fxLayoutAlign="center center" mat-stroked-button color="primary" class="mr-2" tabindex="5" type="reset" (click)="resetData()">Clear Field</button>
<button fxFlex="48" fxFlex.gt-md="10" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="addInvoiceForm.form.invalid" (click)="onAddInvoice(addInvoiceForm)" tabindex="6">
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="space-between start" *ngIf="showDetails">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="5" type="reset" (click)="resetData()">Clear Field</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="addInvoiceForm.form.invalid" (click)="onAddInvoice(addInvoiceForm)" tabindex="6">
<p *ngIf="addInvoiceForm.form.invalid; else createText">Invalid values</p>
<ng-template #createText><p>Create Invoice</p></ng-template>
</button>
</div>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch" *ngIf="!showDetails">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" class="mr-2" tabindex="5" type="reset" (click)="resetData()">Clear Field</button>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch" *ngIf="!showDetails">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="5" type="reset" (click)="resetData()">Clear Field</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="addInvoiceForm.form.invalid" (click)="onAddInvoice(addInvoiceForm)" tabindex="6">
<p *ngIf="addInvoiceForm.form.invalid; else createText">Invalid values</p>
<ng-template #createText><p>Create Invoice</p></ng-template>
@ -51,7 +51,7 @@
<ng-container matColumnDef="creation_date">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date Created </th>
<td mat-cell *matCellDef="let invoice">
<span *ngIf="invoice.settled" class="dot green"></span>
<span *ngIf="invoice.settled" class="dot green" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
<span *ngIf="!invoice.settled" class="dot yellow"></span>
{{invoice.creation_date_str}}</td>
</ng-container>

@ -1,17 +1,17 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch" class="padding-gap">
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-md="row wrap" #sendPaymentForm="ngForm">
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" #sendPaymentForm="ngForm">
<mat-form-field class="w-100">
<input matInput placeholder="Payment Request" name="paymentRequest" [(ngModel)]="paymentRequest" tabindex="1" required #paymentReq="ngModel">
</mat-form-field>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start" fxLayoutAlign.gt-md="start start" *ngIf="showDetails">
<button fxFlex="48" fxFlex.gt-md="10" mat-stroked-button color="primary" class="mr-2" tabindex="2" type="reset" (click)="resetData()">Clear Field</button>
<button fxFlex="48" fxFlex.gt-md="10" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="paymentReq.invalid" (click)="onSendPayment();" tabindex="3">
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="space-between stretch" *ngIf="showDetails">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="2" type="reset" (click)="resetData()">Clear Field</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="paymentReq.invalid" (click)="onSendPayment();" tabindex="3">
<p *ngIf="paymentReq.invalid && (paymentReq.dirty || paymentReq.touched); else sendText">Invalid Req</p>
<ng-template #sendText><p>Send Payment</p></ng-template>
</button>
</div>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between stretch" *ngIf="!showDetails">
<button fxFlex="48" mat-stroked-button color="primary" tabindex="2" type="reset" (click)="resetData()">Clear Field</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="2" type="reset" (click)="resetData()">Clear Field</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="paymentReq.invalid" (click)="onSendPayment();" tabindex="3">
<p *ngIf="paymentReq.invalid && (paymentReq.dirty || paymentReq.touched); else sendText">Invalid Req</p>
<ng-template #sendText><p>Send Payment</p></ng-template>

@ -49,13 +49,13 @@ export class LightningPaymentsComponent implements OnInit, OnDestroy {
let ss = this.commonService.getScreenSize();
if(ss === ScreenSizeEnum.XS) {
this.flgSticky = false;
this.displayedColumns = ['creation_date', 'value', 'actions'];
this.displayedColumns = ['creation_date', 'actions'];
} else if(ss === ScreenSizeEnum.SM) {
this.flgSticky = false;
this.displayedColumns = ['creation_date', 'fee', 'value', 'actions'];
this.displayedColumns = ['creation_date', 'value', 'actions'];
} else if(ss === ScreenSizeEnum.MD) {
this.flgSticky = false;
this.displayedColumns = ['creation_date', 'fee', 'value', 'path', 'actions'];
this.displayedColumns = ['creation_date', 'fee', 'value', 'actions'];
} else {
this.flgSticky = true;
this.displayedColumns = ['creation_date', 'payment_hash', 'fee', 'value', 'path', 'actions'];

@ -1,12 +1,12 @@
<div fxLayout="column" fxFlex="100" class="padding-gap">
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-md="row wrap" (ngSubmit)="queryRoutesForm.form.valid && onQueryRoutes()" #queryRoutesForm="ngForm">
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap" (ngSubmit)="queryRoutesForm.form.valid && onQueryRoutes()" #queryRoutesForm="ngForm">
<mat-form-field fxFlex="69" fxLayoutAlign="start end">
<input matInput placeholder="Destination Pubkey" name="destinationPubkey" [(ngModel)]="destinationPubkey" tabindex="1" required #destPubkey="ngModel">
</mat-form-field>
<mat-form-field fxFlex="29" 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="30" fxLayoutAlign="space-between start">
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="space-between stretch">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="3" type="reset" (click)="resetData()">Clear</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="destPubkey.invalid || destAmount.invalid" type="submit" tabindex="4">
<p *ngIf="(destPubkey.invalid && (destPubkey.dirty || destPubkey.touched) || (destAmount.invalid && (destAmount.dirty || destAmount.touched))); else queryText">Invalid Pubkey/Amount</p>
@ -29,7 +29,7 @@
</ng-container>
<ng-container matColumnDef="pubkey_alias">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
<td mat-cell *matCellDef="let hop"> {{hop?.pubkey_alias}} </td>
<td mat-cell *matCellDef="let hop" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '28rem'}"> {{hop?.pubkey_alias}} </td>
</ng-container>
<ng-container matColumnDef="chan_id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Channel </th>

@ -2,3 +2,10 @@
flex: 0 0 5%;
width: 5%;
}
.mat-column-pubkey_alias {
flex: 1 1 25%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@ -28,6 +28,7 @@ export class QueryRoutesComponent implements OnInit, OnDestroy {
public flgLoading: Array<Boolean | 'error'> = [false]; // 0: peers
public faRoute = faRoute;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
constructor(private store: Store<fromRTLReducer.RTLState>, private lndEffects: LNDEffects, private commonService: CommonService) {

@ -4,7 +4,7 @@
<input matInput type="password" placeholder="Password" name="walletPassword" [(ngModel)]="walletPassword" tabindex="1" required>
<mat-hint>Enter Wallet Password</mat-hint>
</mat-form-field>
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="35" fxLayoutAlign="space-between start" class="mt-2">
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="space-between stretch">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="2" type="reset" (click)="resetData()">Clear Field</button>
<button mat-raised-button fxFlex="48" color="primary" [disabled]="walletPassword == ''" (click)="onUnlockWallet()" tabindex="3">Unlock Wallet</button>
</div>

@ -127,11 +127,10 @@
</div>
</div>
</div>
<div fxLayout="row" fxLayoutAlign="start start" class="mt-4">
<mat-divider class="mb-2"></mat-divider>
<div class="mt-2">
<button fxFlex="10" fxLayoutAlign="center center" mat-stroked-button color="primary" (click)="onResetSettings()" tabindex="12" class="mr-2">Reset</button>
<button fxFlex="10" fxLayoutAlign="center center" mat-raised-button color="primary" (click)="onUpdateSettings()" tabindex="13">Update</button>
<div fxLayout="row" fxFlex="100" class="mt-4">
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="space-between stretch">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" (click)="onResetSettings()" tabindex="12">Reset</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" (click)="onUpdateSettings()" tabindex="13">Update</button>
</div>
</div>
</mat-card-content>

@ -90,7 +90,7 @@
<ng-template #openText><p>Open Channel</p></ng-template>
</button>
</div>
<div *ngIf="!newlyAdded" fxLayoutAlign="space-between center" fxFlex="40">
<div *ngIf="!newlyAdded" fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="50">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="7" type="reset" (click)="resetData()">Clear Field</button>
<button autoFocus fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" (click)="onOpenChannel()" [disabled]="fundingAmount == null || (totalBalance - ((fundingAmount) ? fundingAmount : 0) < 0)" type="submit" tabindex="8">
<p *ngIf="(fundingAmount == null) && (amount.touched || amount.dirty); else openText">Invalid Values</p>

@ -7,12 +7,12 @@
<mat-card fxLayout="column" fxFlex="100" class="padding-gap-large">
<mat-card-content class="card-content-gap">
<form fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-md="row wrap">
<mat-radio-group color="primary" fxFlex="20" fxLayoutAlign="start" (change)="onSelectionChange($event)" class="mt-1 mb-1">
<mat-radio-group color="primary" fxFlex="100" fxLayoutAlign="start" (change)="onSelectionChange($event)" class="mt-1 mb-1">
<mat-radio-button tabindex="1" class="pr-5" value="rtl" [checked]="selectedNodeType=='rtl'">RTL</mat-radio-button>
<mat-radio-button tabindex="2" class="pr-5" value="ln" *ngIf="showLnConfig" [checked]="selectedNodeType=='ln'">{{lnImplementationStr}}</mat-radio-button>
<mat-radio-button tabindex="3" class="pr-5" value="bitcoind" *ngIf="showBitcoind" [checked]="selectedNodeType=='bitcoind'">BITCOIND</mat-radio-button>
</mat-radio-group>
<div fxFlex="30" fxLayoutAlign="space-between center">
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="space-between stretch">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="4" type="reset" (click)="resetData()">Clear</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" (click)="onShowConfig()" tabindex="5">Show Config</button>
</div>

@ -12,7 +12,7 @@
tabindex="1" required>
<mat-hint>{{hintStr}}</mat-hint>
</mat-form-field>
<div fxFlex="100" fxFlex.gt-sm="30" fxLayoutAlign="space-between start" fxLayoutAlign.gt-sm="space-between center" class="mt-2">
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="50" fxLayoutAlign="space-between stretch">
<button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="2" type="reset" (click)="resetData()">Clear</button>
<button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="3" type="submit" [disabled]="!password">Login</button>
</div>

@ -56,8 +56,8 @@ export class CommonService implements OnInit, OnDestroy {
} else {
return this.httpClient.get(environment.CONF_API + '/rates')
.pipe(take(1),
map(data => {
this.conversionData.data = data;
map((data: any) => {
this.conversionData.data = data ? JSON.parse(data) : {};
this.conversionData.last_fetched = latest_date;
return this.convert(value, from, otherCurrencyUnit);
}));

@ -393,6 +393,10 @@ body {
padding-left: 1rem !important;
}
.pr-0 {
padding-right: 0 !important;
}
.pr-1 {
padding-right: 1rem !important;
}

Loading…
Cancel
Save