Shahana Farooqui
5 years ago
parent
a629cb235c
commit
1f13f7bce7
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
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
@ -1 +1 @@
|
||||
!function(e){function r(r){for(var n,i,a=r[0],c=r[1],f=r[2],p=0,s=[];p<a.length;p++)o[i=a[p]]&&s.push(o[i][0]),o[i]=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,a=1;a<t.length;a++)0!==o[t[a]]&&(n=!1);n&&(u.splice(r--,1),e=i(i.s=t[0]))}return e}var n={},o={0:0},u=[];function i(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,i),t.l=!0,t.exports}i.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,a=document.createElement("script");a.charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.src=function(e){return i.p+""+({}[e]||e)+"."+{1:"df9093d1e13d9e6f0394",6:"156118a5fd225700d103",7:"325ae7790ee297067bcc"}[e]+".js"}(e);var c=new Error;u=function(r){a.onerror=a.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:a})}),12e4);a.onerror=a.onload=u,document.head.appendChild(a)}return Promise.all(r)},i.m=e,i.c=n,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,r){if(1&r&&(e=i(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)i.d(t,n,(function(r){return e[r]}).bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="",i.oe=function(e){throw console.error(e),e};var a=window.webpackJsonp=window.webpackJsonp||[],c=a.push.bind(a);a.push=r,a=a.slice();for(var f=0;f<a.length;f++)r(a[f]);var l=c;t()}([]);
|
||||
!function(e){function r(r){for(var n,i,a=r[0],f=r[1],c=r[2],p=0,s=[];p<a.length;p++)o[i=a[p]]&&s.push(o[i][0]),o[i]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(l&&l(r);s.length;)s.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++)0!==o[t[a]]&&(n=!1);n&&(u.splice(r--,1),e=i(i.s=t[0]))}return e}var n={},o={0:0},u=[];function i(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,i),t.l=!0,t.exports}i.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,a=document.createElement("script");a.charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.src=function(e){return i.p+""+({}[e]||e)+"."+{1:"1f534535205fd170f4b8",6:"fcf8cc2d0ffb9c7af5ec",7:"5148e351b6e8445fab11"}[e]+".js"}(e);var f=new Error;u=function(r){a.onerror=a.onload=null,clearTimeout(c);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;f.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",f.name="ChunkLoadError",f.type=n,f.request=u,t[1](f)}o[e]=void 0}};var c=setTimeout((function(){u({type:"timeout",target:a})}),12e4);a.onerror=a.onload=u,document.head.appendChild(a)}return Promise.all(r)},i.m=e,i.c=n,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,r){if(1&r&&(e=i(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)i.d(t,n,(function(r){return e[r]}).bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="",i.oe=function(e){throw console.error(e),e};var a=window.webpackJsonp=window.webpackJsonp||[],f=a.push.bind(a);a.push=r,a=a.slice();for(var c=0;c<a.length;c++)r(a[c]);var l=f;t()}([]);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,84 +0,0 @@
|
||||
<div fxLayout="column">
|
||||
<div class="padding-gap">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-subtitle>
|
||||
<h2>Invoices</h2>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<form fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" (ngSubmit)="addInvoiceForm.form.valid && onAddInvoice(addInvoiceForm)" #addInvoiceForm="ngForm">
|
||||
<mat-form-field fxFlex="30" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="memo" placeholder="Memo" tabindex="1" name="memo">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="15" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="invoiceValue" placeholder="Invoice Value ({{information?.smaller_currency_unit}})" type="number" step="100" min="1" tabindex="2" name="invoiceValue">
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="15" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="expiry" placeholder="Expiry (Sec)" type="number" step="100" min="1" tabindex="3" name="expiry">
|
||||
</mat-form-field>
|
||||
<div fxFlex="15" tabindex="4" fxLayoutAlign="start center" class="chkbox-private">
|
||||
<mat-checkbox [(ngModel)]="private" matTooltip="Include routing hints for private channels" [matTooltipPosition]="'above'" name="private">Private</mat-checkbox>
|
||||
</div>
|
||||
<button fxFlex="10" fxLayoutAlign="center center" mat-raised-button color="primary" type="submit" tabindex="5">Add</button>
|
||||
<button fxFlex="10" fxLayoutAlign="center center" mat-stroked-button color="accent" tabindex="6" type="reset" (click)="resetData()">Clear</button>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="padding-gap">
|
||||
<mat-card>
|
||||
<mat-card-content class="table-card-content">
|
||||
<div fxLayout="row" fxLayoutAlign="start start">
|
||||
<mat-form-field fxFlex="30">
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div perfectScrollbar class="table-container mat-elevation-z8">
|
||||
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table [dataSource]="invoices" matSort [ngClass]="{'mat-elevation-z8 overflow-auto error-border': flgLoading[0]==='error','mat-elevation-z8 overflow-auto': true}">
|
||||
<ng-container matColumnDef="settled">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Settled </th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<span *ngIf="invoice.settled"><i class="material-icons primary">done_all</i></span>
|
||||
<span *ngIf="!invoice.settled"><i class="material-icons accent">done</i></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="creation_date">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Creation Date </th>
|
||||
<td mat-cell *matCellDef="let invoice">{{invoice.creation_date_str}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="settle_date">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Settle Date </th>
|
||||
<td mat-cell *matCellDef="let invoice">{{invoice.settle_date_str}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="memo">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Memo </th>
|
||||
<td mat-cell *matCellDef="let invoice">{{invoice.memo}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="value">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Value ({{(selNode?.satsToBTC) ? information?.currency_unit : information?.smaller_currency_unit}}) </th>
|
||||
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{(selNode?.satsToBTC) ? (invoice?.btc_value | number:'1.0-3') : (invoice?.value | number)}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="expiry">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Expiry (Sec)</th>
|
||||
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice.expiry | number}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="cltv_expiry">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> CLTV Expiry </th>
|
||||
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{invoice.cltv_expiry | number}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="amt_paid_sat">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount Paid ({{(selNode?.satsToBTC) ? information?.currency_unit : information?.smaller_currency_unit}})</th>
|
||||
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{(selNode?.satsToBTC) ? (invoice?.btc_amt_paid_sat | number:'1.0-3') : (invoice?.amt_paid_sat | number)}} </span></td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.memo == newlyAddedInvoiceMemo && row.value == newlyAddedInvoiceValue && flgAnimate) ? 'added' : 'notAdded'" (click)="onInvoiceClick(row, $event)" class="row-invoices"
|
||||
[ngClass]="{'settled': row.settled, 'unsettled': !row.settled}"></tr>
|
||||
</table>
|
||||
<mat-paginator [length]="totalInvoices" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)"></mat-paginator>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,16 +0,0 @@
|
||||
.mat-column-value {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.mat-column-settled {
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.chkbox-private:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
table {
|
||||
width:100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
@ -1,164 +0,0 @@
|
||||
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';
|
||||
import { Actions } from '@ngrx/effects';
|
||||
|
||||
import { MatTableDataSource, MatSort } from '@angular/material';
|
||||
import { SelNodeChild } from '../../shared/models/RTLconfig';
|
||||
import { GetInfo, Invoice } from '../../shared/models/lndModels';
|
||||
import { LoggerService } from '../../shared/services/logger.service';
|
||||
|
||||
import { newlyAddedRowAnimation } from '../../shared/animation/row-animation';
|
||||
import * as RTLActions from '../../store/rtl.actions';
|
||||
import * as fromRTLReducer from '../../store/rtl.reducers';
|
||||
|
||||
@Component({
|
||||
selector: 'rtl-invoices',
|
||||
templateUrl: './invoices.component.html',
|
||||
styleUrls: ['./invoices.component.scss'],
|
||||
animations: [newlyAddedRowAnimation]
|
||||
})
|
||||
export class InvoicesComponent implements OnInit, OnDestroy {
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
public selNode: SelNodeChild = {};
|
||||
public newlyAddedInvoiceMemo = '';
|
||||
public newlyAddedInvoiceValue = 0;
|
||||
public flgAnimate = true;
|
||||
public memo = '';
|
||||
public expiry: number;
|
||||
public invoiceValue: number;
|
||||
public displayedColumns = [];
|
||||
public invoicePaymentReq = '';
|
||||
public invoices: any;
|
||||
public information: GetInfo = {};
|
||||
public flgLoading: Array<Boolean | 'error'> = [true];
|
||||
public flgSticky = false;
|
||||
public private = false;
|
||||
public totalInvoices = 100;
|
||||
public pageSize = 25;
|
||||
public pageSizeOptions = [5, 10, 25, 100];
|
||||
private firstOffset = -1;
|
||||
private lastOffset = -1;
|
||||
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 actions$: Actions) {
|
||||
switch (true) {
|
||||
case (window.innerWidth <= 415):
|
||||
this.displayedColumns = ['settled', 'creation_date', 'memo', 'value'];
|
||||
break;
|
||||
case (window.innerWidth > 415 && window.innerWidth <= 730):
|
||||
this.displayedColumns = ['settled', 'creation_date', 'settle_date', 'memo', 'value', 'amt_paid_sat'];
|
||||
break;
|
||||
case (window.innerWidth > 730 && window.innerWidth <= 1024):
|
||||
this.displayedColumns = ['settled', 'creation_date', 'settle_date', 'memo', 'value', 'amt_paid_sat'];
|
||||
break;
|
||||
case (window.innerWidth > 1024 && window.innerWidth <= 1280):
|
||||
this.flgSticky = true;
|
||||
this.displayedColumns = ['settled', 'creation_date', 'settle_date', 'memo', 'value', 'amt_paid_sat', 'expiry', 'cltv_expiry'];
|
||||
break;
|
||||
default:
|
||||
this.flgSticky = true;
|
||||
this.displayedColumns = ['settled', 'creation_date', 'settle_date', 'memo', 'value', 'amt_paid_sat', 'expiry', 'cltv_expiry'];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.store.select('lnd')
|
||||
.pipe(takeUntil(this.unSubs[0]))
|
||||
.subscribe((rtlStore) => {
|
||||
rtlStore.effectErrorsLnd.forEach(effectsErr => {
|
||||
if (effectsErr.action === 'FetchInvoices') {
|
||||
this.flgLoading[0] = 'error';
|
||||
}
|
||||
});
|
||||
this.selNode = rtlStore.nodeSettings;
|
||||
this.information = rtlStore.information;
|
||||
this.totalInvoices = rtlStore.totalInvoices;
|
||||
this.firstOffset = +rtlStore.invoices.first_index_offset;
|
||||
this.lastOffset = +rtlStore.invoices.last_index_offset;
|
||||
this.logger.info(rtlStore);
|
||||
this.loadInvoicesTable(rtlStore.invoices.invoices ? rtlStore.invoices.invoices : []);
|
||||
if (this.flgLoading[0] !== 'error') {
|
||||
this.flgLoading[0] = (undefined !== rtlStore.invoices) ? false : true;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
onAddInvoice(form: any) {
|
||||
this.flgAnimate = true;
|
||||
this.newlyAddedInvoiceMemo = this.memo;
|
||||
this.newlyAddedInvoiceValue = this.invoiceValue;
|
||||
this.store.dispatch(new RTLActions.OpenSpinner('Adding Invoice...'));
|
||||
this.store.dispatch(new RTLActions.SaveNewInvoice({
|
||||
memo: this.memo, invoiceValue: this.invoiceValue, private: this.private, expiry: (this.expiry ? this.expiry : 3600), pageSize: this.pageSize
|
||||
}));
|
||||
this.resetData();
|
||||
}
|
||||
|
||||
onInvoiceClick(selRow: Invoice, event: any) {
|
||||
const selInvoice = this.invoices.data.filter(invoice => {
|
||||
return invoice.payment_request === selRow.payment_request;
|
||||
})[0];
|
||||
const reorderedInvoice = JSON.parse(JSON.stringify(selInvoice, [
|
||||
'settled', 'creation_date_str', 'settle_date_str', 'memo', 'receipt', 'r_preimage', 'r_hash', 'value', 'payment_request',
|
||||
'description_hash', 'expiry', 'fallback_addr', 'cltv_expiry', 'route_hints', 'private', 'add_index', 'settle_index',
|
||||
'amt_paid', 'amt_paid_sat', 'amt_paid_msat'
|
||||
] , 2));
|
||||
this.store.dispatch(new RTLActions.OpenAlert({ width: '75%', data: {
|
||||
type: 'INFO',
|
||||
message: JSON.stringify(reorderedInvoice)
|
||||
}}));
|
||||
}
|
||||
|
||||
loadInvoicesTable(invoices) {
|
||||
this.invoices = new MatTableDataSource<Invoice>([...invoices]);
|
||||
this.invoices.sort = this.sort;
|
||||
this.invoices.data.forEach(invoice => {
|
||||
if (undefined !== invoice.creation_date_str) {
|
||||
invoice.creation_date_str = (invoice.creation_date_str === '') ? '' : formatDate(invoice.creation_date_str, 'dd/MMM/yyyy HH:mm', 'en-US');
|
||||
}
|
||||
if (undefined !== invoice.settle_date_str) {
|
||||
invoice.settle_date_str = (invoice.settle_date_str === '') ? '' : formatDate(invoice.settle_date_str, 'dd/MMM/yyyy HH:mm', 'en-US');
|
||||
}
|
||||
});
|
||||
setTimeout(() => { this.flgAnimate = false; }, 5000);
|
||||
this.logger.info(this.invoices);
|
||||
}
|
||||
|
||||
resetData() {
|
||||
this.memo = '';
|
||||
this.invoiceValue = 0;
|
||||
this.private = false;
|
||||
this.expiry = undefined;
|
||||
}
|
||||
|
||||
applyFilter(selFilter: string) {
|
||||
this.invoices.filter = selFilter;
|
||||
}
|
||||
|
||||
onPageChange(event: any) {
|
||||
let reversed = true;
|
||||
let index_offset = this.firstOffset;
|
||||
if (event.pageIndex < event.previousPageIndex) {
|
||||
reversed = false;
|
||||
index_offset = this.lastOffset;
|
||||
}
|
||||
if (event.pageIndex === event.previousPageIndex) {
|
||||
reversed = true;
|
||||
index_offset = 0;
|
||||
}
|
||||
this.store.dispatch(new RTLActions.FetchInvoices({num_max_invoices: event.pageSize, index_offset: index_offset, reversed: reversed}));
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.unSubs.forEach(completeSub => {
|
||||
completeSub.next();
|
||||
completeSub.complete();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,81 @@
|
||||
<div fxLayout="column">
|
||||
<form #addInvoiceForm="ngForm">
|
||||
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="start center">
|
||||
<mat-form-field fxFlex="100" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="memo" placeholder="Memo" tabindex="1" name="memo">
|
||||
</mat-form-field>
|
||||
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="60" fxLayoutAlign.gt-sm="space-between center">
|
||||
<mat-form-field fxFlex="50" 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="15" fxLayoutAlign="start end">
|
||||
<input matInput [(ngModel)]="expiry" placeholder="Expiry" type="number" step="{{selTimeUnit === 'Secs' ? 300 : selTimeUnit === 'Mins' ? 10 : selTimeUnit === 'Hours' ? 2 : 1}}" min="1" tabindex="3" name="expiry">
|
||||
<span matSuffix> {{selTimeUnit}} </span>
|
||||
</mat-form-field>
|
||||
<mat-form-field fxFlex="15" fxLayoutAlign="start end">
|
||||
<mat-select [value]="selTimeUnit" tabindex="4" required name="timeUnit" (selectionChange)="onTimeUnitChange($event)">
|
||||
<mat-option *ngFor="let timeUnit of timeUnits" [value]="timeUnit">{{timeUnit}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<div fxFlex="15" tabindex="4" fxLayoutAlign="start center">
|
||||
<mat-slide-toggle color="primary" [(ngModel)]="private" matTooltip="Include routing hints for private channels" [matTooltipPosition]="'above'" name="private">Private</mat-slide-toggle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2">
|
||||
<button fxFlex="48" fxFlex.gt-md="10" fxLayoutAlign="center center" class="mr-2" mat-raised-button color="primary" [disabled]="addInvoiceForm.form.invalid" (click)="onAddInvoice(addInvoiceForm)" tabindex="5" class="mr-2">
|
||||
<p *ngIf="addInvoiceForm.form.invalid; else createText">Invalid values</p>
|
||||
<ng-template #createText><p>Create Invoice</p></ng-template>
|
||||
</button>
|
||||
<button fxFlex="10" fxLayoutAlign="center center" mat-stroked-button color="accent" tabindex="6" type="reset" (click)="resetData()">Clear Field</button>
|
||||
</div>
|
||||
</form>
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-sub-title-container mt-2">
|
||||
<div fxFlex="70">
|
||||
<fa-icon [icon]="faHistory" class="page-title-img mr-1"></fa-icon>
|
||||
<span class="page-title">Invoices History</span>
|
||||
</div>
|
||||
<mat-form-field fxFlex="30">
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div perfectScrollbar class="table-container">
|
||||
<mat-progress-bar *ngIf="flgLoading[0]===true" mode="indeterminate"></mat-progress-bar>
|
||||
<table mat-table #table [dataSource]="invoices" matSort [ngClass]="{'overflow-auto error-border': flgLoading[0]==='error','overflow-auto': true}">
|
||||
<ng-container matColumnDef="settled">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Settled </th>
|
||||
<td mat-cell *matCellDef="let invoice">
|
||||
<span *ngIf="invoice.settled"><i class="material-icons primary">done_all</i></span>
|
||||
<span *ngIf="!invoice.settled"><i class="material-icons primary">done</i></span>
|
||||
</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="creation_date">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date Created </th>
|
||||
<td mat-cell *matCellDef="let invoice">{{invoice.creation_date_str}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="memo">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header> Memo </th>
|
||||
<td mat-cell *matCellDef="let invoice">{{invoice.memo}}</td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="value">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Value ({{(selNode?.satsToBTC) ? information?.currency_unit : information?.smaller_currency_unit}}) </th>
|
||||
<td mat-cell *matCellDef="let invoice"><span fxLayoutAlign="end center"> {{(selNode?.satsToBTC) ? (invoice?.btc_value | number:'1.0-3') : (invoice?.value | number)}} </span></td>
|
||||
</ng-container>
|
||||
<ng-container matColumnDef="settle_date">
|
||||
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-4"> Date Settled </th>
|
||||
<td mat-cell *matCellDef="let invoice" class="pl-4">{{invoice.settle_date_str || '-'}}</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 invoice">
|
||||
<button mat-stroked-button color="accent" type="button" tabindex="4" (click)="onInvoiceClick(invoice, $event)">View Info</button>
|
||||
</td>
|
||||
</ng-container>
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
|
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;" [@newlyAddedRowAnimation]="(row.memo == newlyAddedInvoiceMemo && row.value == newlyAddedInvoiceValue && flgAnimate) ? 'added' : 'notAdded'" class="row-invoices"></tr>
|
||||
</table>
|
||||
<mat-paginator [length]="totalInvoices" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)" showFirstLastButtons class="mb-4"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,4 @@
|
||||
.mat-column-actions {
|
||||
flex: 0 0 5%;
|
||||
width: 5%;
|
||||
}
|
||||
@ -0,0 +1,270 @@
|
||||
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
|
||||
import { DecimalPipe } from '@angular/common';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { Store } from '@ngrx/store';
|
||||
import { faHistory } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { MatTableDataSource, MatSort } from '@angular/material';
|
||||
import { SelNodeChild } from '../../../shared/models/RTLconfig';
|
||||
import { GetInfo, Invoice } from '../../../shared/models/lndModels';
|
||||
import { CurrencyUnitConvertPipe } from '../../../shared/pipes/app.pipe';
|
||||
import { LoggerService } from '../../../shared/services/logger.service';
|
||||
import { InvoiceInformationComponent } from '../../../shared/components/invoice-information/invoice-information.component';
|
||||
|
||||
import { newlyAddedRowAnimation } from '../../../shared/animation/row-animation';
|
||||
import * as RTLActions from '../../../store/rtl.actions';
|
||||
import * as fromRTLReducer from '../../../store/rtl.reducers';
|
||||
|
||||
@Component({
|
||||
selector: 'rtl-lightning-invoices',
|
||||
templateUrl: './lightning-invoices.component.html',
|
||||
styleUrls: ['./lightning-invoices.component.scss'],
|
||||
animations: [newlyAddedRowAnimation]
|
||||
})
|
||||
export class LightningInvoicesComponent implements OnInit, OnDestroy {
|
||||
@ViewChild(MatSort, { static: true }) sort: MatSort;
|
||||
faHistory = faHistory;
|
||||
public currencyUnits = [];
|
||||
public currConvertorRate = null;
|
||||
public selNode: SelNodeChild = {};
|
||||
public newlyAddedInvoiceMemo = '';
|
||||
public newlyAddedInvoiceValue = 0;
|
||||
public flgAnimate = true;
|
||||
public memo = '';
|
||||
public expiry: number;
|
||||
public invoiceValue: number;
|
||||
public invoiceValueHint = '';
|
||||
public displayedColumns = [];
|
||||
public invoicePaymentReq = '';
|
||||
public invoices: any;
|
||||
public information: GetInfo = {};
|
||||
public flgLoading: Array<Boolean | 'error'> = [true];
|
||||
public flgSticky = false;
|
||||
public private = false;
|
||||
public timeUnits = ['Secs', 'Mins', 'Hours', 'Days'];
|
||||
public selTimeUnit = 'Secs';
|
||||
public expiryStep = 100;
|
||||
public totalInvoices = 100;
|
||||
public pageSize = 10;
|
||||
public pageSizeOptions = [5, 10, 25, 100];
|
||||
private firstOffset = -1;
|
||||
private lastOffset = -1;
|
||||
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 httpClient: HttpClient, private currencyConvert: CurrencyUnitConvertPipe, private decimalPipe: DecimalPipe) {
|
||||
switch (true) {
|
||||
case (window.innerWidth <= 415):
|
||||
this.displayedColumns = ['settled', 'creation_date', 'value', 'actions'];
|
||||
break;
|
||||
case (window.innerWidth > 415 && window.innerWidth <= 730):
|
||||
this.displayedColumns = ['settled', 'creation_date', 'value', 'settle_date', 'actions'];
|
||||
break;
|
||||
case (window.innerWidth > 730 && window.innerWidth <= 1024):
|
||||
this.displayedColumns = ['settled', 'creation_date', 'memo', 'value', 'settle_date', 'actions'];
|
||||
break;
|
||||
case (window.innerWidth > 1024 && window.innerWidth <= 1280):
|
||||
this.flgSticky = true;
|
||||
this.displayedColumns = ['settled', 'creation_date', 'memo', 'value', 'settle_date', 'actions'];
|
||||
break;
|
||||
default:
|
||||
this.flgSticky = true;
|
||||
this.displayedColumns = ['settled', 'creation_date', 'memo', 'value', 'settle_date', 'actions'];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.store.select('lnd')
|
||||
.pipe(takeUntil(this.unSubs[0]))
|
||||
.subscribe((rtlStore) => {
|
||||
rtlStore.effectErrorsLnd.forEach(effectsErr => {
|
||||
if (effectsErr.action === 'FetchInvoices') {
|
||||
this.flgLoading[0] = 'error';
|
||||
}
|
||||
});
|
||||
this.currencyUnits = rtlStore.nodeSettings.currencyUnits;
|
||||
this.selNode = rtlStore.nodeSettings;
|
||||
this.information = rtlStore.information;
|
||||
this.totalInvoices = rtlStore.totalInvoices;
|
||||
this.firstOffset = +rtlStore.invoices.first_index_offset;
|
||||
this.lastOffset = +rtlStore.invoices.last_index_offset;
|
||||
this.logger.info(rtlStore);
|
||||
this.loadInvoicesTable(rtlStore.invoices.invoices ? rtlStore.invoices.invoices : []);
|
||||
if (this.flgLoading[0] !== 'error') {
|
||||
this.flgLoading[0] = (undefined !== rtlStore.invoices) ? false : true;
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
onAddInvoice(form: any) {
|
||||
let expiryInSecs = (this.expiry ? this.expiry : 3600);
|
||||
if (this.selTimeUnit !== this.timeUnits[0]) {
|
||||
switch (this.selTimeUnit) {
|
||||
case this.timeUnits[1]:
|
||||
expiryInSecs = this.expiry * 60;
|
||||
break;
|
||||
case this.timeUnits[2]:
|
||||
expiryInSecs = this.expiry * 3600;
|
||||
break;
|
||||
case this.timeUnits[3]:
|
||||
expiryInSecs = this.expiry * 3600 * 24;
|
||||
break;
|
||||
default:
|
||||
expiryInSecs = this.expiry;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.flgAnimate = true;
|
||||
this.newlyAddedInvoiceMemo = this.memo;
|
||||
this.newlyAddedInvoiceValue = this.invoiceValue;
|
||||
this.store.dispatch(new RTLActions.OpenSpinner('Adding Invoice...'));
|
||||
this.store.dispatch(new RTLActions.SaveNewInvoice({
|
||||
memo: this.memo, invoiceValue: this.invoiceValue, private: this.private, expiry: expiryInSecs, pageSize: this.pageSize
|
||||
}));
|
||||
this.resetData();
|
||||
}
|
||||
|
||||
onInvoiceClick(selRow: Invoice, event: any) {
|
||||
const selInvoice = this.invoices.data.filter(invoice => {
|
||||
return invoice.payment_request === selRow.payment_request;
|
||||
})[0];
|
||||
const reorderedInvoice = JSON.parse(JSON.stringify(selInvoice, [
|
||||
'settled', 'creation_date_str', 'settle_date_str', 'memo', 'receipt', 'r_preimage', 'r_hash', 'value', 'payment_request',
|
||||
'description_hash', 'expiry', 'fallback_addr', 'cltv_expiry', 'route_hints', 'private', 'add_index', 'settle_index',
|
||||
'amt_paid', 'amt_paid_sat', 'amt_paid_msat'
|
||||
] , 2));
|
||||
this.store.dispatch(new RTLActions.OpenAlert({
|
||||
config: { width: '58%', data: { type: 'INFO', message: JSON.stringify(reorderedInvoice)}},
|
||||
component: InvoiceInformationComponent
|
||||
}));
|
||||
}
|
||||
|
||||
loadInvoicesTable(invoices) {
|
||||
this.invoices = new MatTableDataSource<Invoice>([...invoices]);
|
||||
this.invoices.sort = this.sort;
|
||||
setTimeout(() => { this.flgAnimate = false; }, 5000);
|
||||
this.logger.info(this.invoices);
|
||||
}
|
||||
|
||||
resetData() {
|
||||
this.memo = '';
|
||||
this.invoiceValue = 0;
|
||||
this.private = false;
|
||||
this.expiry = undefined;
|
||||
}
|
||||
|
||||
applyFilter(selFilter: string) {
|
||||
this.invoices.filter = selFilter;
|
||||
}
|
||||
|
||||
onPageChange(event: any) {
|
||||
let reversed = true;
|
||||
let index_offset = this.firstOffset;
|
||||
if (event.pageIndex < event.previousPageIndex) {
|
||||
reversed = false;
|
||||
index_offset = this.lastOffset;
|
||||
}
|
||||
if (event.pageIndex === event.previousPageIndex) {
|
||||
reversed = true;
|
||||
index_offset = 0;
|
||||
}
|
||||
this.store.dispatch(new RTLActions.FetchInvoices({num_max_invoices: event.pageSize, index_offset: index_offset, reversed: reversed}));
|
||||
}
|
||||
|
||||
onInvoiceValueChange() {
|
||||
let self = this;
|
||||
if(this.currencyUnits[2] && this.invoiceValue && this.invoiceValue.toString().length > 2) {
|
||||
if(!this.currConvertorRate) {
|
||||
this.httpClient.get('https://blockchain.info/ticker')
|
||||
.pipe(takeUntil(this.unSubs[0]))
|
||||
.subscribe((currConvertorData: any) => {
|
||||
self.currConvertorRate = currConvertorData;
|
||||
self.invoiceValueHint = '= ' + currConvertorData[self.currencyUnits[2]].symbol + self.decimalPipe.transform(self.currencyConvert.transform(self.invoiceValue.toString(), currConvertorData[self.currencyUnits[2]].last * 0.00000001), '1.2-2') + ' ' + self.currencyUnits[2];
|
||||
});
|
||||
} else {
|
||||
self.invoiceValueHint = '= ' + this.currConvertorRate[self.currencyUnits[2]].symbol + self.decimalPipe.transform(self.currencyConvert.transform(self.invoiceValue.toString(), this.currConvertorRate[self.currencyUnits[2]].last * 0.00000001), '1.2-2') + ' ' + self.currencyUnits[2];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onTimeUnitChange(event: any) {
|
||||
if(this.expiry && this.selTimeUnit !== event.value) {
|
||||
switch (this.selTimeUnit) {
|
||||
case this.timeUnits[0]:
|
||||
switch (event.value) {
|
||||
case this.timeUnits[1]:
|
||||
this.expiry = this.expiry / 60;
|
||||
break;
|
||||
case this.timeUnits[2]:
|
||||
this.expiry = this.expiry / 3600;
|
||||
break;
|
||||
case this.timeUnits[3]:
|
||||
this.expiry = this.expiry / (3600 * 24);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case this.timeUnits[1]:
|
||||
switch (event.value) {
|
||||
case this.timeUnits[0]:
|
||||
this.expiry = this.expiry * 60;
|
||||
break;
|
||||
case this.timeUnits[2]:
|
||||
this.expiry = this.expiry / 60;
|
||||
break;
|
||||
case this.timeUnits[3]:
|
||||
this.expiry = this.expiry / (60 * 24);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case this.timeUnits[2]:
|
||||
switch (event.value) {
|
||||
case this.timeUnits[0]:
|
||||
this.expiry = this.expiry * 3600;
|
||||
break;
|
||||
case this.timeUnits[1]:
|
||||
this.expiry = this.expiry * 60;
|
||||
break;
|
||||
case this.timeUnits[3]:
|
||||
this.expiry = this.expiry / 24;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
case this.timeUnits[3]:
|
||||
switch (event.value) {
|
||||
case this.timeUnits[0]:
|
||||
this.expiry = this.expiry * 3600 * 24;
|
||||
break;
|
||||
case this.timeUnits[1]:
|
||||
this.expiry = this.expiry * 60 * 24;
|
||||
break;
|
||||
case this.timeUnits[2]:
|
||||
this.expiry = this.expiry * 24;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.selTimeUnit = event.value;
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.unSubs.forEach(completeSub => {
|
||||
completeSub.next();
|
||||
completeSub.complete();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="35" fxLayoutAlign="center start" class="invoice-qr-code-container padding-gap-large">
|
||||
<qrcode [qrdata]="invoice.payment_request" [size]="230" [level]="'L'" [allowEmptyString]="true" class="qr-border"></qrcode>
|
||||
</div>
|
||||
<div fxFlex="65" class="padding-gap-large">
|
||||
<mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="invoice-info-header mb-2">
|
||||
<div fxFlex="95" fxLayoutAlign="start start">
|
||||
<fa-icon [icon]="faReceipt" class="page-title-img mr-1"></fa-icon>
|
||||
<span class="page-title">Invoice Information</span>
|
||||
</div>
|
||||
<mat-icon fxFlex="5" type="button" (click)="onClose()" class="cursor-pointer icon-medium">close</mat-icon>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div fxLayout="column">
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Amount Requested</h4>
|
||||
<span class="foreground-secondary-text">{{(invoice.value || 0) | number}} Sats</span>
|
||||
</div>
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Memo</h4>
|
||||
<span class="foreground-secondary-text">{{invoice.memo}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="w-100 my-1"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Date Created</h4>
|
||||
<span class="foreground-secondary-text">{{invoice.creation_date_str}}</span>
|
||||
</div>
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Date Settled</h4>
|
||||
<span class="foreground-secondary-text">{{invoice.settle_date_str || '-'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="w-100 my-1"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Payment Request</h4>
|
||||
<span class="overflow-wrap foreground-secondary-text">{{invoice.payment_request}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="showAdvanced">
|
||||
<mat-divider class="w-100 my-1"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">R Hash</h4>
|
||||
<span class="overflow-wrap foreground-secondary-text">{{invoice.r_hash}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="w-100 my-1"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="100">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">R Preimage</h4>
|
||||
<span class="overflow-wrap foreground-secondary-text">{{invoice.r_preimage || '-'}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="w-100 my-1"></mat-divider>
|
||||
<div fxLayout="row">
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">Expiry</h4>
|
||||
<span class="overflow-wrap foreground-secondary-text">{{invoice.expiry}}</span>
|
||||
</div>
|
||||
<div fxFlex="50">
|
||||
<h4 fxLayoutAlign="start" class="font-bold-500">CLTV Expiry</h4>
|
||||
<span class="overflow-wrap foreground-secondary-text">{{invoice.cltv_expiry}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider class="w-100 my-1"></mat-divider>
|
||||
</div>
|
||||
<div [ngClass]="{'mt-2': !showAdvanced, 'mt-1': showAdvanced}" fxLayout="row" fxLayoutAlign="end center">
|
||||
<button fxFlex="25" fxLayoutAlign="center center" class="mr-2" mat-stroked-button color="accent" type="reset" (click)="onShowAdvanced()" tabindex="1">
|
||||
<p *ngIf="!showAdvanced; else hideAdvancedText">Show Advanced</p>
|
||||
<ng-template #hideAdvancedText><p>Hide Advanced</p></ng-template>
|
||||
</button>
|
||||
<button fxFlex="33" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="2" type="submit" rtlClipboard [payload]="invoice.payment_request" (copied)="onCopyPayment($event)">
|
||||
<p *ngIf="!flgCopied; else copiedText">Copy Payment Request</p>
|
||||
<ng-template #copiedText><p>Copied</p></ng-template>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
</div>
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { InvoiceInformationComponent } from './invoice-information.component';
|
||||
|
||||
describe('InvoiceInformationComponent', () => {
|
||||
let component: InvoiceInformationComponent;
|
||||
let fixture: ComponentFixture<InvoiceInformationComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ InvoiceInformationComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InvoiceInformationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,39 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
|
||||
import { faReceipt } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
import { LoggerService } from '../../../shared/services/logger.service';
|
||||
import { AlertData } from '../../../shared/models/alertData';
|
||||
import { Invoice } from '../../../shared/models/lndModels';
|
||||
|
||||
@Component({
|
||||
selector: 'rtl-invoice-information',
|
||||
templateUrl: './invoice-information.component.html',
|
||||
styleUrls: ['./invoice-information.component.scss']
|
||||
})
|
||||
export class InvoiceInformationComponent implements OnInit {
|
||||
public faReceipt = faReceipt;
|
||||
public flgCopied = false;
|
||||
public showAdvanced = false;
|
||||
public invoice: Invoice;
|
||||
|
||||
constructor(public dialogRef: MatDialogRef<InvoiceInformationComponent>, @Inject(MAT_DIALOG_DATA) public data: AlertData, private logger: LoggerService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.invoice = JSON.parse(this.data.message);
|
||||
}
|
||||
|
||||
onClose() {
|
||||
this.dialogRef.close(false);
|
||||
}
|
||||
|
||||
onShowAdvanced() {
|
||||
this.showAdvanced = !this.showAdvanced;
|
||||
}
|
||||
|
||||
onCopyPayment(payload) {
|
||||
this.flgCopied = true;
|
||||
setTimeout(() => {this.flgCopied = false; }, 5000);
|
||||
this.logger.info('Copied Text: ' + payload);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,231 @@
|
||||
@import "constants";
|
||||
@include mat-core();
|
||||
|
||||
@mixin change-font($typography) {
|
||||
@include mat-core($typography);
|
||||
&.small-font {
|
||||
.mat-header-cell {
|
||||
font-weight: 700;
|
||||
}
|
||||
.mr-4 {
|
||||
margin-right: 1rem !important;
|
||||
}
|
||||
.mat-menu-item, .mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
|
||||
min-height: $tree-node-height * 0.7;
|
||||
height: $tree-node-height * 0.7;
|
||||
}
|
||||
.mat-primary .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple),
|
||||
.mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
|
||||
font-size: $small-font-size * 1.1;
|
||||
}
|
||||
.genseed-message, .insecure-message, .validation-error-icon, .fa-icon-small, .top-icon-small {
|
||||
font-size: $small-font-size * 1.2;
|
||||
}
|
||||
.page-title-container, .page-sub-title-container {
|
||||
font-size: $small-font-size * 1.1;
|
||||
& .page-title-img {
|
||||
width: $small-font-size * 1.8;
|
||||
height: $small-font-size * 1.8;
|
||||
font-size: $small-font-size * 1.5;
|
||||
}
|
||||
}
|
||||
.mat-icon-button .top-toolbar-icon.icon-pinned {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
.top-toolbar-icon .top-toolbar-img, .sidenav-img svg {
|
||||
width: $small-font-size * 1.8;
|
||||
height: $small-font-size * 1.8;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.horizontal-button .sidenav-img svg {
|
||||
width: $small-font-size * 2.1;
|
||||
height: $small-font-size * 2.1;
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
.material-icons, .invoice-info-header {
|
||||
font-size: $small-font-size * 1.5;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-option, .mat-select, .mat-selection-list .mat-list-item {
|
||||
font-size: $small-font-size !important;
|
||||
}
|
||||
.logo {
|
||||
font-size: $small-font-size * 2;
|
||||
}
|
||||
.font-60-percent {
|
||||
font-size: $small-font-size * 0.6;
|
||||
}
|
||||
.fa-icon-regular {
|
||||
font-size: $small-font-size * 1.75;
|
||||
}
|
||||
.icon-large {
|
||||
font-size: $small-font-size * 5;
|
||||
}
|
||||
.icon-medium {
|
||||
font-size: $small-font-size * 2 !important;
|
||||
}
|
||||
.icon-small {
|
||||
font-size: $small-font-size * 1.5 !important;
|
||||
}
|
||||
.icon-smaller {
|
||||
font-size: $small-font-size * 0.75 !important;
|
||||
}
|
||||
.size-triple {
|
||||
font-size: $small-font-size * 3;
|
||||
}
|
||||
.mat-icon-36 {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
}
|
||||
&.regular-font {
|
||||
.mat-header-cell {
|
||||
font-weight: 700;
|
||||
}
|
||||
.inner-sidenav-content {
|
||||
padding-top: $regular-font-size;
|
||||
}
|
||||
.mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
|
||||
height: $tree-node-height;
|
||||
}
|
||||
.mat-primary .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple),
|
||||
.mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
|
||||
font-size: $regular-font-size * 1.1;
|
||||
}
|
||||
.genseed-message, .insecure-message, .validation-error-icon {
|
||||
font-size: $regular-font-size * 1.2;
|
||||
}
|
||||
.page-title-container, .page-sub-title-container {
|
||||
font-size: $regular-font-size * 1.1;
|
||||
& .page-title-img {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: $regular-font-size * 1.3;
|
||||
}
|
||||
}
|
||||
.mat-button .mat-icon-button .top-toolbar-icon.icon-pinned {
|
||||
font-size: $regular-font-size;
|
||||
}
|
||||
.fa-icon-small, .top-icon-small, .invoice-info-header {
|
||||
font-size: $regular-font-size * 1.5;
|
||||
}
|
||||
.top-toolbar-icon.icon-pinned {
|
||||
font-size: $regular-font-size * 1.3;
|
||||
}
|
||||
.top-toolbar-icon .top-toolbar-img, .sidenav-img svg {
|
||||
width: $regular-font-size * 1.8;
|
||||
height: $regular-font-size * 1.8;
|
||||
font-size: $regular-font-size * 1.3;
|
||||
}
|
||||
.horizontal-button .sidenav-img svg {
|
||||
width: $regular-font-size * 2.2;
|
||||
height: $regular-font-size * 2.2;
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.material-icons {
|
||||
font-size: $regular-font-size * 2;
|
||||
}
|
||||
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-option, .mat-select, .mat-selection-list .mat-list-item {
|
||||
font-size: $regular-font-size !important;
|
||||
}
|
||||
.logo {
|
||||
font-size: $regular-font-size * 2;
|
||||
}
|
||||
.font-60-percent {
|
||||
font-size: $regular-font-size * 0.6;
|
||||
}
|
||||
.fa-icon-regular {
|
||||
font-size: $regular-font-size * 1.75;
|
||||
}
|
||||
.icon-large {
|
||||
font-size: $regular-font-size * 5;
|
||||
}
|
||||
.icon-medium {
|
||||
font-size: $regular-font-size * 2 !important;
|
||||
}
|
||||
.icon-small {
|
||||
font-size: $regular-font-size * 1.5 !important;
|
||||
}
|
||||
.icon-smaller {
|
||||
font-size: $regular-font-size * 0.75 !important;
|
||||
}
|
||||
.size-triple {
|
||||
font-size: $regular-font-size * 3;
|
||||
}
|
||||
.mat-icon-36 {
|
||||
font-size: $regular-font-size;
|
||||
}
|
||||
}
|
||||
&.large-font {
|
||||
.mat-header-cell {
|
||||
font-weight: 800;
|
||||
}
|
||||
.mat-tree .mat-tree-node, .mat-tree .mat-nested-tree-node-parent {
|
||||
height: $tree-node-height;
|
||||
}
|
||||
.mat-primary .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple),
|
||||
.mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
|
||||
font-size: $large-font-size * 1.1;
|
||||
}
|
||||
.genseed-message, .insecure-message, .validation-error-icon {
|
||||
font-size: $large-font-size * 1.2;
|
||||
}
|
||||
.page-title-container, .page-sub-title-container {
|
||||
margin-top: 0.5rem;
|
||||
font-size: $large-font-size * 1.1;
|
||||
& .page-title-img {
|
||||
width: $large-font-size * 2;
|
||||
height: $large-font-size * 2;
|
||||
font-size: $large-font-size * 2.1;
|
||||
}
|
||||
}
|
||||
.fa-icon-small, .top-icon-small, .invoice-info-header {
|
||||
font-size: $large-font-size * 1.4;
|
||||
}
|
||||
.top-toolbar-icon.icon-pinned {
|
||||
font-size: $large-font-size * 1.25;
|
||||
}
|
||||
.top-toolbar-icon .top-toolbar-img, .sidenav-img svg {
|
||||
width: $large-font-size * 2;
|
||||
height: $large-font-size * 2;
|
||||
font-size: $large-font-size * 1.25;
|
||||
}
|
||||
.horizontal-button .sidenav-img svg {
|
||||
width: $large-font-size * 2.25;
|
||||
height: $large-font-size * 2.25;
|
||||
font-size: $large-font-size * 2;
|
||||
}
|
||||
.material-icons {
|
||||
font-size: $large-font-size * 2.5;
|
||||
}
|
||||
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-option, .mat-select, .mat-selection-list .mat-list-item {
|
||||
font-size: $large-font-size !important;
|
||||
}
|
||||
.logo {
|
||||
font-size: $large-font-size * 2;
|
||||
}
|
||||
.font-60-percent {
|
||||
font-size: $large-font-size * 0.6;
|
||||
}
|
||||
.fa-icon-regular {
|
||||
font-size: $large-font-size * 1.75;
|
||||
}
|
||||
.icon-large {
|
||||
font-size: $large-font-size * 5;
|
||||
}
|
||||
.icon-medium {
|
||||
font-size: $large-font-size * 2 !important;
|
||||
}
|
||||
.icon-small {
|
||||
font-size: $large-font-size * 1.5 !important;
|
||||
}
|
||||
.icon-smaller {
|
||||
font-size: $large-font-size * 0.75 !important;
|
||||
}
|
||||
.size-triple {
|
||||
font-size: $large-font-size * 3;
|
||||
}
|
||||
.mat-icon-36 {
|
||||
font-size: $large-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue