Responsive and other fixes

Responsive and other fixes
pull/260/head
Shahana Farooqui 5 years ago
parent 98f874cd07
commit 1c372a8554

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

@ -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="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="icon" type="image/png" sizes="16x16" href="assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/images/favicon/site.webmanifest"> <link rel="manifest" href="assets/images/favicon/site.webmanifest">
<link rel="stylesheet" href="styles.8a1ddaedb5da1018195e.css"></head> <link rel="stylesheet" href="styles.827667a8b89989da4050.css"></head>
<body> <body>
<rtl-app></rtl-app> <rtl-app></rtl-app>
<script src="runtime.8de0300ea7cbcf176757.js"></script><script src="polyfills-es5.2e75d230d7f9c760eb2f.js" nomodule></script><script src="polyfills.1ebb102854b0ec478c1b.js"></script><script src="main.54108a6aab5d60775c5e.js"></script></body> <script src="runtime.6a515545e0365c8b17e5.js"></script><script src="polyfills-es5.2e75d230d7f9c760eb2f.js" nomodule></script><script src="polyfills.1ebb102854b0ec478c1b.js"></script><script src="main.b2d9b22a93962013c7ba.js"></script></body>
</html> </html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1 +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:"9f448ec4afdcbbc42cf2",7:"f304a8c9801c62bf8967"}[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()}([]); !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:"55dfc1c099334589c71d",7:"9aa78a1a4cf44c9d414c"}[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

@ -2,6 +2,8 @@ var ini = require('ini');
var fs = require('fs'); var fs = require('fs');
var logger = require('./logger'); var logger = require('./logger');
var common = require('../common'); var common = require('../common');
var request = require('request-promise');
var options = {};
exports.updateSelectedNode = (req, res, next) => { exports.updateSelectedNode = (req, res, next) => {
const selNodeIndex = req.body.selNodeIndex; const selNodeIndex = req.body.selNodeIndex;
@ -219,3 +221,25 @@ exports.getConfig = (req, res, next) => {
} }
}); });
}; };
exports.getCurrencyRates = (req, res, next) => {
options = common.getOptions();
options.url = 'https://blockchain.info/ticker';
request(options).then((body) => {
logger.info({fileName: 'RTLConf', msg: 'Rates Received: ' + JSON.stringify(body)});
if(undefined === body || body.error) {
res.status(500).json({
message: "Fetching Rates Failed!",
error: (undefined === body) ? 'Error From External Server!' : body.error
});
} else {
res.status(200).json(body);
}
})
.catch(function (err) {
return res.status(500).json({
message: "Fetching Rates Failed!",
error: err.error
});
});
};

@ -8,4 +8,5 @@ router.post("/", authCheck, RTLConfController.updateUISettings);
router.get("/config/:nodeType", authCheck, RTLConfController.getConfig); router.get("/config/:nodeType", authCheck, RTLConfController.getConfig);
router.post("/updateSelNode", RTLConfController.updateSelectedNode); router.post("/updateSelNode", RTLConfController.updateSelectedNode);
router.post("/updateDefaultNode", RTLConfController.updateDefaultNode); router.post("/updateDefaultNode", RTLConfController.updateDefaultNode);
router.get("/rates", RTLConfController.getCurrencyRates);
module.exports = router; module.exports = router;

@ -2,7 +2,7 @@
<mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="padding-gap-x bg-primary rtl-top-toolbar" *ngIf="settings.menu === 'vertical'"> <mat-toolbar fxLayout="row" fxLayoutAlign="space-between center" class="padding-gap-x bg-primary rtl-top-toolbar" *ngIf="settings.menu === 'vertical'">
<div fxLayoutAlign="center center"> <div fxLayoutAlign="center center">
<button *ngIf="settings.menu === 'vertical'" class="top-toolbar-icon" mat-icon-button (click)="sideNavToggle()"> <button *ngIf="settings.menu === 'vertical'" class="top-toolbar-icon" mat-icon-button (click)="sideNavToggle()">
<mat-icon>menu</mat-icon> <mat-icon class="mr-5px">menu</mat-icon>
</button> </button>
<button *ngIf="settings.fontSize === 'small-font' && settings.menu === 'vertical' && !smallScreen" mat-icon-button (click)="settings.flgSidenavPinned = !settings.flgSidenavPinned"> <button *ngIf="settings.fontSize === 'small-font' && settings.menu === 'vertical' && !smallScreen" mat-icon-button (click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
<svg class="top-toolbar-icon icon-pinned" viewBox="0 0 42 42"> <svg class="top-toolbar-icon icon-pinned" viewBox="0 0 42 42">
@ -31,8 +31,7 @@
<rtl-horizontal-navigation fxLayout="row" fxFlex="100" fxLayoutAlign="start center" class="h-100"></rtl-horizontal-navigation> <rtl-horizontal-navigation fxLayout="row" fxFlex="100" fxLayoutAlign="start center" class="h-100"></rtl-horizontal-navigation>
</mat-toolbar> </mat-toolbar>
<mat-sidenav-container> <mat-sidenav-container>
<mat-sidenav perfectScrollbar *ngIf="settings.menu === 'vertical'" [opened]="settings.flgSidenavOpened" [mode]="(settings.flgSidenavPinned) ? 'side' : 'over'" <mat-sidenav perfectScrollbar *ngIf="settings.menu === 'vertical'" [opened]="settings.flgSidenavOpened" [mode]="(settings.flgSidenavPinned) ? 'side' : 'over'" #sideNavigation class="sidenav mat-elevation-z6">
#sideNavigation class="sidenav mat-elevation-z6">
<rtl-side-navigation (ChildNavClicked)="onNavigationClicked($event)" fxFlex="100"></rtl-side-navigation> <rtl-side-navigation (ChildNavClicked)="onNavigationClicked($event)" fxFlex="100"></rtl-side-navigation>
</mat-sidenav> </mat-sidenav>
<mat-sidenav-content perfectScrollbar> <mat-sidenav-content perfectScrollbar>

@ -1,5 +1,6 @@
import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild, HostListener } from '@angular/core'; import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators'; import { takeUntil, filter } from 'rxjs/operators';
@ -11,11 +12,11 @@ import * as sha256 from 'sha256';
import { LoggerService } from './shared/services/logger.service'; import { LoggerService } from './shared/services/logger.service';
import { CommonService } from './shared/services/common.service'; import { CommonService } from './shared/services/common.service';
import { SessionService } from './shared/services/session.service'; import { SessionService } from './shared/services/session.service';
import { AlertTypeEnum, ScreenSizeEnum } from './shared/services/consts-enums-functions';
import { RTLConfiguration, Settings, LightningNode, GetInfoRoot } from './shared/models/RTLconfig'; import { RTLConfiguration, Settings, LightningNode, GetInfoRoot } from './shared/models/RTLconfig';
import * as RTLActions from './store/rtl.actions'; import * as RTLActions from './store/rtl.actions';
import * as fromRTLReducer from './store/rtl.reducers'; import * as fromRTLReducer from './store/rtl.reducers';
import { AlertTypeEnum } from './shared/services/consts-enums-functions';
@Component({ @Component({
selector: 'rtl-app', selector: 'rtl-app',
@ -35,9 +36,30 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()]; unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions, constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions,
private userIdle: UserIdleService, private router: Router, private sessionService: SessionService) {} private userIdle: UserIdleService, private router: Router, private sessionService: SessionService, private breakpointObserver: BreakpointObserver) {}
ngOnInit() { ngOnInit() {
this.breakpointObserver.observe([Breakpoints.XSmall, Breakpoints.TabletPortrait, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
.pipe(takeUntil(this.unSubs[5]))
.subscribe((matches) => {
if(matches.breakpoints[Breakpoints.XSmall]) {
this.commonService.setScreenSize(ScreenSizeEnum.XS);
this.smallScreen = true;
} else if(matches.breakpoints[Breakpoints.TabletPortrait]) {
this.commonService.setScreenSize(ScreenSizeEnum.SM);
this.smallScreen = true;
} else if(matches.breakpoints[Breakpoints.Small] || matches.breakpoints[Breakpoints.Medium]) {
this.commonService.setScreenSize(ScreenSizeEnum.MD);
this.smallScreen = false;
} else if(matches.breakpoints[Breakpoints.Large] || matches.breakpoints[Breakpoints.XLarge]) {
this.commonService.setScreenSize(ScreenSizeEnum.LG);
this.smallScreen = false;
} else {
this.commonService.setScreenSize(ScreenSizeEnum.MD);
this.smallScreen = false;
}
});
this.store.dispatch(new RTLActions.FetchRTLConfig()); this.store.dispatch(new RTLActions.FetchRTLConfig());
this.accessKey = this.readAccessKey(); this.accessKey = this.readAccessKey();
this.store.select('root') this.store.select('root')
@ -48,14 +70,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
this.appConfig = rtlStore.appConfig; this.appConfig = rtlStore.appConfig;
this.information = rtlStore.nodeData; this.information = rtlStore.nodeData;
this.flgLoading[0] = (undefined !== this.information.identity_pubkey) ? false : true; this.flgLoading[0] = (undefined !== this.information.identity_pubkey) ? false : true;
if (window.innerWidth <= 768) {
this.settings.menu = 'vertical';
this.settings.flgSidenavOpened = false;
this.settings.flgSidenavPinned = false;
}
if (window.innerWidth <= 414) {
this.smallScreen = true;
}
this.logger.info(this.settings); this.logger.info(this.settings);
if (!this.sessionService.getItem('token')) { if (!this.sessionService.getItem('token')) {
this.flgLoading[0] = false; this.flgLoading[0] = false;
@ -83,7 +97,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
this.userIdle.onTimeout().pipe(takeUntil(this.unSubs[3])).subscribe(() => { this.userIdle.onTimeout().pipe(takeUntil(this.unSubs[3])).subscribe(() => {
if (this.sessionService.getItem('token')) { if (this.sessionService.getItem('token')) {
this.logger.warn('Time limit exceeded for session inactivity.'); this.logger.warn('Time limit exceeded for session inactivity.');
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.WARNING, type: AlertTypeEnum.WARNING,
alertTitle: 'Logging out', alertTitle: 'Logging out',
titleMessage: 'Time limit exceeded for session inactivity.' titleMessage: 'Time limit exceeded for session inactivity.'
@ -109,30 +123,18 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
} }
ngAfterViewInit() { ngAfterViewInit() {
if (this.settings.menuType.toLowerCase() !== 'regular' || !this.settings.flgSidenavPinned) { if ((this.settings.menuType.toLowerCase() !== 'regular' || !this.settings.flgSidenavPinned) || (this.smallScreen)) {
this.sideNavigation.close();
}
if (window.innerWidth <= 768) {
this.sideNavigation.close(); this.sideNavigation.close();
} }
} }
@HostListener('window:resize')
public onWindowResize(): void {
if (window.innerWidth <= 768) {
this.settings.menu = 'vertical';
this.settings.flgSidenavOpened = false;
this.settings.flgSidenavPinned = false;
}
}
sideNavToggle() { sideNavToggle() {
this.settings.flgSidenavOpened = !this.settings.flgSidenavOpened; this.settings.flgSidenavOpened = !this.settings.flgSidenavOpened;
this.sideNavigation.toggle(); this.sideNavigation.toggle();
} }
onNavigationClicked(event: any) { onNavigationClicked(event: any) {
if (window.innerWidth <= 414) { if (this.smallScreen) {
this.sideNavigation.close(); this.sideNavigation.close();
} }
} }

@ -16,6 +16,7 @@ import { AppComponent } from './app.component';
import { environment } from '../environments/environment'; import { environment } from '../environments/environment';
import { SessionService } from './shared/services/session.service'; import { SessionService } from './shared/services/session.service';
import { CommonService } from './shared/services/common.service';
import { LoggerService, ConsoleLoggerService } from './shared/services/logger.service'; import { LoggerService, ConsoleLoggerService } from './shared/services/logger.service';
import { AuthGuard } from './shared/services/auth.guard'; import { AuthGuard } from './shared/services/auth.guard';
import { AuthInterceptor } from './shared/services/auth.interceptor'; import { AuthInterceptor } from './shared/services/auth.interceptor';
@ -43,7 +44,7 @@ import { CLEffects } from './clightning/store/cl.effects';
{ provide: LoggerService, useClass: ConsoleLoggerService }, { provide: LoggerService, useClass: ConsoleLoggerService },
{ provide: OverlayContainer, useClass: ThemeOverlay }, { provide: OverlayContainer, useClass: ThemeOverlay },
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }, { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
AuthGuard, SessionService CommonService, AuthGuard, SessionService
], ],
bootstrap: [AppComponent] bootstrap: [AppComponent]
}) })

@ -120,7 +120,7 @@ export class CLChannelsComponent implements OnInit, OnDestroy {
const titleMsg = 'Updated Values for ALL Channels'; const titleMsg = 'Updated Values for ALL Channels';
// const confirmationMsg = {}; // const confirmationMsg = {};
const confirmationMsg = [[{key: '', value: '', title: '', width: 0, type: DataTypeEnum.NUMBER}]]; const confirmationMsg = [[{key: '', value: '', title: '', width: 0, type: DataTypeEnum.NUMBER}]];
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '70%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Confirm Channels Update', alertTitle: 'Confirm Channels Update',
titleMessage: titleMsg, titleMessage: titleMsg,
@ -162,7 +162,7 @@ export class CLChannelsComponent implements OnInit, OnDestroy {
const titleMsg = 'Updated Values for Channel: ' + channelToUpdate.channel_id; const titleMsg = 'Updated Values for Channel: ' + channelToUpdate.channel_id;
// const confirmationMsg = {}; // const confirmationMsg = {};
const confirmationMsg = [[{key: '', value: '', title: '', width: 0, type: DataTypeEnum.NUMBER}]]; const confirmationMsg = [[{key: '', value: '', title: '', width: 0, type: DataTypeEnum.NUMBER}]];
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '70%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Confirm Channel Update', alertTitle: 'Confirm Channel Update',
titleMessage: titleMsg, titleMessage: titleMsg,
@ -195,14 +195,14 @@ export class CLChannelsComponent implements OnInit, OnDestroy {
return; return;
} }
if (channelToClose.state === 'AWAITING_UNILATERAL') { if (channelToClose.state === 'AWAITING_UNILATERAL') {
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.WARNING, type: AlertTypeEnum.WARNING,
alertTitle: 'Unable to Close Channel', alertTitle: 'Unable to Close Channel',
titleMessage: 'Channel can not be closed when it is in AWAITING UNILATERAL state.' titleMessage: 'Channel can not be closed when it is in AWAITING UNILATERAL state.'
}})); }}));
} else { } else {
this.store.dispatch(new RTLActions.OpenConfirmation({ this.store.dispatch(new RTLActions.OpenConfirmation({
width: '70%', data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Confirm Channel Closing', titleMessage: 'Closing channel: ' + channelToClose.channel_id, noBtnText: 'Cancel', yesBtnText: 'Close Channel' data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Confirm Channel Closing', titleMessage: 'Closing channel: ' + channelToClose.channel_id, noBtnText: 'Cancel', yesBtnText: 'Close Channel'
}})); }}));
this.rtlEffects.closeConfirm this.rtlEffects.closeConfirm
.pipe(takeUntil(this.unsub[1])) .pipe(takeUntil(this.unsub[1]))

@ -87,7 +87,7 @@ export class CLForwardingHistoryComponent implements OnInit, OnDestroy {
// 'status', 'received_time_str', 'resolved_time_str', 'in_channel', 'out_channel', 'in_msatoshi', 'in_msat', 'out_msatoshi', 'out_msat', 'fee', 'fee_msat', 'payment_hash' // 'status', 'received_time_str', 'resolved_time_str', 'in_channel', 'out_channel', 'in_msatoshi', 'in_msat', 'out_msatoshi', 'out_msat', 'fee', 'fee_msat', 'payment_hash'
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '40%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Forwarding History', alertTitle: 'Forwarding History',
message: reorderedFHEvent message: reorderedFHEvent

@ -103,7 +103,7 @@ export class CLInvoicesComponent implements OnInit, OnDestroy {
onDeleteExpiredInvoices() { onDeleteExpiredInvoices() {
this.store.dispatch(new RTLActions.OpenConfirmation({ this.store.dispatch(new RTLActions.OpenConfirmation({
width: '70%', data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Confirm Delete Invoices', titleMessage: 'Delete Expired Invoices', noBtnText: 'Cancel', yesBtnText: 'Delete Invoices' data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Confirm Delete Invoices', titleMessage: 'Delete Expired Invoices', noBtnText: 'Cancel', yesBtnText: 'Delete Invoices'
}})); }}));
this.rtlEffects.closeConfirm this.rtlEffects.closeConfirm
.pipe(takeUntil(this.unSubs[1])) .pipe(takeUntil(this.unSubs[1]))
@ -123,7 +123,7 @@ export class CLInvoicesComponent implements OnInit, OnDestroy {
[{key: 'status', value: selInvoice.status, title: 'Status', width: 100, type: DataTypeEnum.NUMBER}] [{key: 'status', value: selInvoice.status, title: 'Status', width: 100, type: DataTypeEnum.NUMBER}]
// 'status', 'expires_at_str', 'paid_at_str', 'pay_index', 'label', 'bolt11', 'payment_hash', 'msatoshi', 'msatoshi_received', 'description' // 'status', 'expires_at_str', 'paid_at_str', 'pay_index', 'label', 'bolt11', 'payment_hash', 'msatoshi', 'msatoshi_received', 'description'
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Invoice Information', alertTitle: 'Invoice Information',
message: reorderedInvoice message: reorderedInvoice

@ -90,7 +90,7 @@ export class CLOnChainComponent implements OnInit, OnDestroy {
const reorderedTransaction = [ const reorderedTransaction = [
[{key: 'address', value: this.transaction.address, title: 'Address', width: 100, type: DataTypeEnum.NUMBER}] [{key: 'address', value: this.transaction.address, title: 'Address', width: 100, type: DataTypeEnum.NUMBER}]
]; ];
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '70%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Confirm Send Funds', alertTitle: 'Confirm Send Funds',
message: reorderedTransaction, message: reorderedTransaction,

@ -87,7 +87,7 @@ export class CLQueryRoutesComponent implements OnInit, OnDestroy {
[{key: 'id', value: selRoute.id, title: 'ID', width: 100, type: DataTypeEnum.NUMBER}] [{key: 'id', value: selRoute.id, title: 'ID', width: 100, type: DataTypeEnum.NUMBER}]
// 'id', 'alias', 'channel', 'direction', 'msatoshi', 'amount_msat', 'delay' // 'id', 'alias', 'channel', 'direction', 'msatoshi', 'amount_msat', 'delay'
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Route Information', alertTitle: 'Route Information',
message: reorderedRoute message: reorderedRoute

@ -107,7 +107,7 @@ export class CLPaymentsComponent implements OnInit, OnDestroy {
]; ];
if (undefined === this.paymentDecoded.msatoshi || this.paymentDecoded.msatoshi === 0) { if (undefined === this.paymentDecoded.msatoshi || this.paymentDecoded.msatoshi === 0) {
const titleMsg = 'It is an open amount invoice. Enter the amount (Sats) to pay.'; const titleMsg = 'It is an open amount invoice. Enter the amount (Sats) to pay.';
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '70%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Enter Amount and Confirm Send Payment', alertTitle: 'Enter Amount and Confirm Send Payment',
titleMessage: titleMsg, titleMessage: titleMsg,
@ -130,7 +130,7 @@ export class CLPaymentsComponent implements OnInit, OnDestroy {
const reorderedDecodedPayment = [ const reorderedDecodedPayment = [
[{key: 'amount_msat', value: this.paymentDecoded.amount_msat, title: 'Amount (mSat)', width: 100, type: DataTypeEnum.NUMBER}] [{key: 'amount_msat', value: this.paymentDecoded.amount_msat, title: 'Amount (mSat)', width: 100, type: DataTypeEnum.NUMBER}]
]; ];
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '40%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Confirm Send Payment', alertTitle: 'Confirm Send Payment',
titleMessage: 'Send Payment', titleMessage: 'Send Payment',
@ -177,7 +177,7 @@ export class CLPaymentsComponent implements OnInit, OnDestroy {
[{key: 'id', value: selPayment.id, title: 'Status', width: 100, type: DataTypeEnum.NUMBER}] [{key: 'id', value: selPayment.id, title: 'Status', width: 100, type: DataTypeEnum.NUMBER}]
// 'id', 'bolt11', 'created_at_str', 'created_at', 'destination', 'status', 'msatoshi', 'msatoshi_sent', 'payment_hash', 'payment_preimage','amount_msat', 'amount_sent_msat' // 'id', 'bolt11', 'created_at_str', 'created_at', 'destination', 'status', 'msatoshi', 'msatoshi_sent', 'payment_hash', 'payment_preimage','amount_msat', 'amount_sent_msat'
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Payment Information', alertTitle: 'Payment Information',
message: reorderedPayment message: reorderedPayment

@ -109,7 +109,7 @@ export class CLPeersComponent implements OnInit, OnDestroy {
[{key: 'status', value: selPeer.status, title: 'Status', width: 100, type: DataTypeEnum.NUMBER}] [{key: 'status', value: selPeer.status, title: 'Status', width: 100, type: DataTypeEnum.NUMBER}]
// 'id', 'alias', 'connected', 'netaddr', 'globalfeatures', 'localfeatures' // 'id', 'alias', 'connected', 'netaddr', 'globalfeatures', 'localfeatures'
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '40%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Peer Information', alertTitle: 'Peer Information',
message: reorderedPeer message: reorderedPeer
@ -126,7 +126,7 @@ export class CLPeersComponent implements OnInit, OnDestroy {
onPeerDetach(peerToDetach: PeerCL) { onPeerDetach(peerToDetach: PeerCL) {
const msg = 'Detach peer: ' + peerToDetach.id; const msg = 'Detach peer: ' + peerToDetach.id;
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '70%', data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Confirm Disconnect Peer', titleMessage: msg, noBtnText: 'Cancel', yesBtnText: 'Detach'}})); this.store.dispatch(new RTLActions.OpenConfirmation({ data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Confirm Disconnect Peer', titleMessage: msg, noBtnText: 'Cancel', yesBtnText: 'Detach'}}));
this.rtlEffects.closeConfirm this.rtlEffects.closeConfirm
.pipe(takeUntil(this.unSubs[3])) .pipe(takeUntil(this.unSubs[3]))
.subscribe(confirmRes => { .subscribe(confirmRes => {

@ -213,7 +213,7 @@ export class CLEffects implements OnDestroy {
map((postRes: any) => { map((postRes: any) => {
this.logger.info(postRes); this.logger.info(postRes);
this.store.dispatch(new RTLActions.CloseSpinner()); this.store.dispatch(new RTLActions.CloseSpinner());
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { type: AlertTypeEnum.SUCCESS, alertTitle: 'Peer Connected', titleMessage: 'Peer Added Successfully!' }})); this.store.dispatch(new RTLActions.OpenAlert({ data: { type: AlertTypeEnum.SUCCESS, alertTitle: 'Peer Connected', titleMessage: 'Peer Added Successfully!' }}));
return { return {
type: RTLActions.SET_PEERS_CL, type: RTLActions.SET_PEERS_CL,
payload: (postRes && postRes.length > 0) ? postRes : [] payload: (postRes && postRes.length > 0) ? postRes : []
@ -236,7 +236,7 @@ export class CLEffects implements OnDestroy {
map((postRes: any) => { map((postRes: any) => {
this.logger.info(postRes); this.logger.info(postRes);
this.store.dispatch(new RTLActions.CloseSpinner()); this.store.dispatch(new RTLActions.CloseSpinner());
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { type: AlertTypeEnum.SUCCESS, alertTitle: 'Peer Disconnected', titleMessage: 'Peer Disconnected Successfully!' }})); this.store.dispatch(new RTLActions.OpenAlert({ data: { type: AlertTypeEnum.SUCCESS, alertTitle: 'Peer Disconnected', titleMessage: 'Peer Disconnected Successfully!' }}));
return { return {
type: RTLActions.REMOVE_PEER_CL, type: RTLActions.REMOVE_PEER_CL,
payload: { id: action.payload.id } payload: { id: action.payload.id }
@ -305,7 +305,7 @@ export class CLEffects implements OnDestroy {
map((postRes: any) => { map((postRes: any) => {
this.logger.info(postRes); this.logger.info(postRes);
this.store.dispatch(new RTLActions.CloseSpinner()); this.store.dispatch(new RTLActions.CloseSpinner());
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { type: AlertTypeEnum.SUCCESS, alertTitle: 'Channel Updated', titleMessage: 'Channel Updated Successfully!' }})); this.store.dispatch(new RTLActions.OpenAlert({ data: { type: AlertTypeEnum.SUCCESS, alertTitle: 'Channel Updated', titleMessage: 'Channel Updated Successfully!' }}));
return { return {
type: RTLActions.FETCH_CHANNELS_CL type: RTLActions.FETCH_CHANNELS_CL
}; };

@ -4,7 +4,7 @@
<span class="page-title">{{!flgLoading[0] ? 'Welcome! Your node is up and running.' : 'Error! Please check the server connection.'}}</span> <span class="page-title">{{!flgLoading[0] ? 'Welcome! Your node is up and running.' : 'Error! Please check the server connection.'}}</span>
</div> </div>
<mat-grid-list cols="10" rowHeight="330px"> <mat-grid-list cols="10" rowHeight="330px">
<mat-grid-tile *ngFor="let card of operatorCards | async" [colspan]="card.cols" [rowspan]="card.rows"> <mat-grid-tile *ngFor="let card of operatorCards" [colspan]="card.cols" [rowspan]="card.rows">
<mat-card fxLayout="column" fxLayoutAlign="start start" class="dashboard-card p-16"> <mat-card fxLayout="column" fxLayoutAlign="start start" class="dashboard-card p-16">
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
@ -30,8 +30,8 @@
<fa-icon [icon]="faSmile" class="page-title-img mr-1"></fa-icon> <fa-icon [icon]="faSmile" class="page-title-img mr-1"></fa-icon>
<span class="page-title">Welcome! Your node is up and running.</span> <span class="page-title">Welcome! Your node is up and running.</span>
</div> </div>
<mat-grid-list cols="3" rowHeight="66px"> <mat-grid-list cols="6" rowHeight="66px">
<mat-grid-tile *ngFor="let card of merchantCards | async" [colspan]="card.cols" [rowspan]="card.rows"> <mat-grid-tile *ngFor="let card of merchantCards" [colspan]="card.cols" [rowspan]="card.rows">
<mat-card fxLayout="column" fxLayoutAlign="start start" class="dashboard-card" [ngClass]="{'p-16': card.id !== 'transactions'}"> <mat-card fxLayout="column" fxLayoutAlign="start start" class="dashboard-card" [ngClass]="{'p-16': card.id !== 'transactions'}">
<mat-card-header *ngIf="card.id !== 'transactions'"><mat-card-title>{{card.title}}</mat-card-title></mat-card-header> <mat-card-header *ngIf="card.id !== 'transactions'"><mat-card-title>{{card.title}}</mat-card-title></mat-card-header>
<mat-card-content class="dashboard-card-content w-100" fxFlex="{{card.id !== 'transactions' ? 95 : 100}}"> <mat-card-content class="dashboard-card-content w-100" fxFlex="{{card.id !== 'transactions' ? 95 : 100}}">

@ -1,6 +1,4 @@
import { Component, OnInit, OnDestroy } from '@angular/core'; import { Component, OnInit, OnDestroy } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators'; import { takeUntil, filter } from 'rxjs/operators';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
@ -9,7 +7,7 @@ import { faSmile, faFrown } from '@fortawesome/free-regular-svg-icons';
import { LoggerService } from '../../shared/services/logger.service'; import { LoggerService } from '../../shared/services/logger.service';
import { CommonService } from '../../shared/services/common.service'; import { CommonService } from '../../shared/services/common.service';
import { UserPersonaEnum } from '../../shared/services/consts-enums-functions'; import { UserPersonaEnum, ScreenSizeEnum } from '../../shared/services/consts-enums-functions';
import { ChannelsStatus, GetInfo, Fees, Channel } from '../../shared/models/lndModels'; import { ChannelsStatus, GetInfo, Fees, Channel } from '../../shared/models/lndModels';
import { SelNodeChild } from '../../shared/models/RTLconfig'; import { SelNodeChild } from '../../shared/models/RTLconfig';
import * as fromRTLReducer from '../../store/rtl.reducers'; import * as fromRTLReducer from '../../store/rtl.reducers';
@ -40,53 +38,61 @@ export class HomeComponent implements OnInit, OnDestroy {
public allOutboundChannels: Channel[] = []; public allOutboundChannels: Channel[] = [];
public totalInboundLiquidity = 0; public totalInboundLiquidity = 0;
public totalOutboundLiquidity = 0; public totalOutboundLiquidity = 0;
public operatorCards = [];
public merchantCards = [];
public screenSize = '';
public flgLoading: Array<Boolean | 'error'> = [true, true, true, true, true, true, true, true]; // 0: Info, 1: Fee, 2: Wallet, 3: Channel, 4: Network public flgLoading: Array<Boolean | 'error'> = [true, true, true, true, true, true, true, true]; // 0: Info, 1: Fee, 2: Wallet, 3: Channel, 4: Network
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()]; private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
public operatorCards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
map(({ matches }) => {
if (matches) {
return [
{ id: 'node', title: 'Node Details', cols: 10, rows: 1 },
{ id: 'balance', title: 'Balances', cols: 10, rows: 1 },
{ id: 'fee', title: 'Routing Fee Earned', cols: 10, rows: 1 },
{ id: 'status', title: 'Channel Status', cols: 10, rows: 1 },
{ id: 'capacity', title: 'Channel Capacity', cols: 10, rows: 1 }
];
}
return [ 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.operatorCards = [
{ id: 'node', title: 'Node Details', cols: 10, rows: 1 },
{ id: 'balance', title: 'Balances', cols: 10, rows: 1 },
{ id: 'fee', title: 'Routing Fee Earned', cols: 10, rows: 1 },
{ id: 'status', title: 'Channel Status', cols: 10, rows: 1 },
{ id: 'capacity', title: 'Channel Capacity', cols: 10, rows: 2 }
];
this.merchantCards = [
{ id: 'node', title: 'Node Details', cols: 6, rows: 3 },
{ id: 'balance', title: 'Balances', cols: 6, rows: 3 },
{ id: 'transactions', title: 'Transactions', cols: 6, rows: 4 },
{ id: 'inboundLiq', title: 'In-Bound Liquidity', cols: 6, rows: 8 },
{ id: 'outboundLiq', title: 'Out-Bound Liquidity', cols: 6, rows: 8 }
];
} else if(this.screenSize === ScreenSizeEnum.SM || this.screenSize === ScreenSizeEnum.MD) {
this.operatorCards = [
{ id: 'node', title: 'Node Details', cols: 5, rows: 1 },
{ id: 'balance', title: 'Balances', cols: 5, rows: 1 },
{ id: 'fee', title: 'Routing Fee Earned', cols: 5, rows: 1 },
{ id: 'status', title: 'Channel Status', cols: 5, rows: 1 },
{ id: 'capacity', title: 'Channel Capacity', cols: 10, rows: 2 }
];
this.merchantCards = [
{ id: 'node', title: 'Node Details', cols: 3, rows: 3 },
{ id: 'balance', title: 'Balances', cols: 3, rows: 3 },
{ id: 'transactions', title: 'Transactions', cols: 6, rows: 4 },
{ id: 'inboundLiq', title: 'In-Bound Liquidity', cols: 3, rows: 8 },
{ id: 'outboundLiq', title: 'Out-Bound Liquidity', cols: 3, rows: 8 }
];
} else {
this.operatorCards = [
{ id: 'node', title: 'Node Details', cols: 3, rows: 1 }, { id: 'node', title: 'Node Details', cols: 3, rows: 1 },
{ id: 'balance', title: 'Balances', cols: 3, rows: 1 }, { id: 'balance', title: 'Balances', cols: 3, rows: 1 },
{ id: 'capacity', title: 'Channel Capacity', cols: 4, rows: 2 }, { id: 'capacity', title: 'Channel Capacity', cols: 4, rows: 2 },
{ id: 'fee', title: 'Routing Fee Earned', cols: 3, rows: 1 }, { id: 'fee', title: 'Routing Fee Earned', cols: 3, rows: 1 },
{ id: 'status', title: 'Channel Status', cols: 3, rows: 1 } { id: 'status', title: 'Channel Status', cols: 3, rows: 1 }
]; ];
}) this.merchantCards = [
); { id: 'node', title: 'Node Details', cols: 2, rows: 3 },
{ id: 'inboundLiq', title: 'In-Bound Liquidity', cols: 2, rows: 10 },
public merchantCards = this.breakpointObserver.observe(Breakpoints.Handset).pipe( { id: 'outboundLiq', title: 'Out-Bound Liquidity', cols: 2, rows: 10 },
map(({ matches }) => { { id: 'balance', title: 'Balances', cols: 2, rows: 3 },
if (matches) { { id: 'transactions', title: 'Transactions', cols: 2, rows: 4 }
return [
{ id: 'node', title: 'Node Details', cols: 3, rows: 3 },
{ id: 'balance', title: 'Balances', cols: 3, rows: 3 },
{ id: 'transactions', title: 'Transactions', cols: 3, rows: 4 },
{ id: 'inboundLiq', title: 'In-Bound Liquidity', cols: 3, rows: 8 },
{ id: 'outboundLiq', title: 'Out-Bound Liquidity', cols: 3, rows: 8 }
];
}
return [
{ id: 'node', title: 'Node Details', cols: 1, rows: 3 },
{ id: 'inboundLiq', title: 'In-Bound Liquidity', cols: 1, rows: 10 },
{ id: 'outboundLiq', title: 'Out-Bound Liquidity', cols: 1, rows: 10 },
{ id: 'balance', title: 'Balances', cols: 1, rows: 3 },
{ id: 'transactions', title: 'Transactions', cols: 1, rows: 4 }
]; ];
}) }
); }
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions, private breakpointObserver: BreakpointObserver, private commonService: CommonService) {}
ngOnInit() { ngOnInit() {
this.store.select('lnd') this.store.select('lnd')

@ -2,8 +2,8 @@
<div fxFlex="33"> <div fxFlex="33">
<h4 fxLayoutAlign="start" class="font-bold-500">Alias</h4> <h4 fxLayoutAlign="start" class="font-bold-500">Alias</h4>
<div class="foreground-secondary-text"> <div class="foreground-secondary-text">
<span class="dot" [ngStyle]="{'backgroundColor': information.color}"></span>
{{information.alias}} {{information.alias}}
<span class="dot ml-1" [ngStyle]="{'backgroundColor': information.color}"></span>
</div> </div>
</div> </div>
<div fxFlex="33"> <div fxFlex="33">

@ -1,13 +1,13 @@
<div fxLayout="column"> <div fxLayout="column">
<div fxLayout="row" fxLayoutAlign="space-between end" fxLayoutAlign.gt-sm="start end"> <div fxLayout="row" fxLayoutAlign="space-between end" fxLayoutAlign.gt-sm="start end">
<mat-form-field fxFlex="48" fxFlex.gt-sm="25" fxLayoutAlign="start end"> <mat-form-field fxFlex="48" fxFlex.gt-md="25" fxLayoutAlign="start end">
<mat-select [(ngModel)]="selectedAddressType" placeholder="Address Type" name="address_type" tabindex="1"> <mat-select [(ngModel)]="selectedAddressType" placeholder="Address Type" name="address_type" tabindex="1">
<mat-option *ngFor="let addressType of addressTypes" [value]="addressType"> <mat-option *ngFor="let addressType of addressTypes" [value]="addressType">
{{addressType.addressTp}} {{addressType.addressTp}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div class="mt-2" fxFlex="48" fxFlex.gt-sm="25"> <div class="mt-2" fxFlex="48" fxFlex.gt-md="25">
<button fxFlex="100" fxLayoutAlign="center center" mat-raised-button color="primary" (click)="onGenerateAddress()" [disabled]="undefined === selectedAddressType.addressId" tabindex="2" class="top-minus-15px">Generate Address</button> <button fxFlex="100" fxLayoutAlign="center center" mat-raised-button color="primary" (click)="onGenerateAddress()" [disabled]="undefined === selectedAddressType.addressId" tabindex="2" class="top-minus-15px">Generate Address</button>
</div> </div>
</div> </div>

@ -1,4 +1,4 @@
<div fxLayout="column" fxFlex="98" fxLayout.gt-sm="row wrap" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="space-between start" *ngIf="!sweepAll; else sweepAllBlock;"> <div fxLayout="column" fxFlex="98" fxLayout.gt-sm="row wrap" fxLayoutAlign="start stretch" fxLayoutAlign.gt-sm="space-between start" *ngIf="!sweepAll; else sweepAllBlock;" class="overflow-x-hidden">
<mat-form-field fxFlex.gt-sm="55"> <mat-form-field fxFlex.gt-sm="55">
<input matInput [(ngModel)]="transaction.address" placeholder="Bitcoin Address" tabindex="1" name="address" #address="ngModel"> <input matInput [(ngModel)]="transaction.address" placeholder="Bitcoin Address" tabindex="1" name="address" #address="ngModel">
</mat-form-field> </mat-form-field>
@ -11,7 +11,7 @@
<mat-option *ngFor="let amountUnit of amountUnits" [value]="amountUnit">{{amountUnit}}</mat-option> <mat-option *ngFor="let amountUnit of amountUnits" [value]="amountUnit">{{amountUnit}}</mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div fxLayout="column" fxFlex="100" fxFlex.gt-sm="60" fxLayout.gt-sm="row wrap" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="space-between start"> <div fxLayout="column" fxFlex="100" fxFlex.gt-sm="60" fxLayout.gt-sm="row wrap" fxLayoutAlign="start stretch" fxLayoutAlign.gt-sm="space-between start">
<mat-form-field fxFlex="48"> <mat-form-field fxFlex="48">
<mat-select [(value)]="selTransType" tabindex="4"> <mat-select [(value)]="selTransType" tabindex="4">
<mat-option *ngFor="let transType of transTypes" [value]="transType.id"> <mat-option *ngFor="let transType of transTypes" [value]="transType.id">
@ -40,9 +40,9 @@
</div> </div>
<ng-template #sweepAllBlock> <ng-template #sweepAllBlock>
<div fxLayout="column" fxFlex="100"> <div fxLayout="column" fxFlex="100">
<div fxLayout="column" fxFlex="100" fxLayout.gt-sm="row wrap" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="space-between start"> <div fxLayout="column" fxFlex="98" fxLayout.gt-sm="row wrap" fxLayoutAlign="start stretch" fxLayoutAlign.gt-sm="space-between start" class="overflow-x-hidden">
<mat-form-field fxFlex.gt-sm="55"> <mat-form-field fxFlex.gt-sm="55">
<input matInput [(ngModel)]="transaction.address" placeholder="Bitcoin Address" tabindex="1" name="address" #address="ngModel"> <input matInput [(ngModel)]="transaction.address" placeholder="Bitcoin Address" tabindex="1" name="address" #addressSweep="ngModel">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex.gt-sm="20"> <mat-form-field fxFlex.gt-sm="20">
<mat-select [(value)]="selTransType" tabindex="4"> <mat-select [(value)]="selTransType" tabindex="4">
@ -55,15 +55,15 @@
<input matInput [(ngModel)]="transaction.blocks" placeholder="Number of Blocks" type="number" name="blocks" step="1" min="0" required tabindex="5" #blocks="ngModel"> <input matInput [(ngModel)]="transaction.blocks" placeholder="Number of Blocks" type="number" name="blocks" step="1" min="0" required tabindex="5" #blocks="ngModel">
</mat-form-field> </mat-form-field>
<mat-form-field fxFlex.gt-sm="20" fxLayoutAlign="start end" *ngIf="selTransType=='2'"> <mat-form-field fxFlex.gt-sm="20" fxLayoutAlign="start end" *ngIf="selTransType=='2'">
<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"> <input matInput [(ngModel)]="transaction.fees" placeholder="Fee ({{nodeData?.smaller_currency_unit}}/Byte)" type="number" name="fees" step="1" min="0" required tabindex="6" #feesSweep="ngModel">
</mat-form-field> </mat-form-field>
</div> </div>
<div> <div>
<div fxFlex="30" fxLayout="row wrap" fxLayoutAlign="space-between start"> <div fxFlex="100" fxFlex.gt-sm="30" fxLayout="row wrap" fxLayoutAlign="space-between start">
<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-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()"> <button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" [disabled]="invalidValues" type="submit" tabindex="8" (click)="onSendFunds()">
<p *ngIf="invalidValues && (address.touched || address.dirty); else sendText">Invalid Values</p> <p *ngIf="invalidValues && (addressSweep.touched || addressSweep.dirty); else sendTextSweep">Invalid Values</p>
<ng-template #sendText><p>Send Funds</p></ng-template> <ng-template #sendTextSweep><p>Send Funds</p></ng-template>
</button> </button>
</div> </div>
</div> </div>

@ -118,7 +118,7 @@ export class OnChainSendComponent implements OnInit, OnDestroy {
confirmationMsg[1].push({key: 'fees_per_byte', value: this.transaction.fees, title: 'Fee (' + this.nodeData.smaller_currency_unit + '/Byte)', width: 50, type: DataTypeEnum.NUMBER}); confirmationMsg[1].push({key: 'fees_per_byte', value: this.transaction.fees, title: 'Fee (' + this.nodeData.smaller_currency_unit + '/Byte)', width: 50, type: DataTypeEnum.NUMBER});
} }
if (this.sweepAll && !+this.appConfig.sso.rtlSSO) { if (this.sweepAll && !+this.appConfig.sso.rtlSSO) {
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Confirm Payment', alertTitle: 'Confirm Payment',
titleMessage: 'Please authorize to sweep all funds with login password.', titleMessage: 'Please authorize to sweep all funds with login password.',
@ -129,7 +129,7 @@ export class OnChainSendComponent implements OnInit, OnDestroy {
getInputs: [{placeholder: 'Enter Login Password', inputType: 'password', inputValue: ''}] getInputs: [{placeholder: 'Enter Login Password', inputType: 'password', inputValue: ''}]
}})); }}));
} else { } else {
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Confirm Payment', alertTitle: 'Confirm Payment',
message: confirmationMsg, message: confirmationMsg,

@ -7,10 +7,10 @@ import { faHistory } from '@fortawesome/free-solid-svg-icons';
import { MatTableDataSource, MatSort, MatPaginator, MatPaginatorIntl } from '@angular/material'; import { MatTableDataSource, MatSort, MatPaginator, MatPaginatorIntl } from '@angular/material';
import { Transaction } from '../../../shared/models/lndModels'; import { Transaction } 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 { 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 RTLActions from '../../../store/rtl.actions';
import * as fromRTLReducer from '../../../store/rtl.reducers'; import * as fromRTLReducer from '../../../store/rtl.reducers';
@ -34,25 +34,17 @@ export class OnChainTransactionHistoryComponent implements OnInit, OnDestroy {
public pageSizeOptions = PAGE_SIZE_OPTIONS; public pageSizeOptions = PAGE_SIZE_OPTIONS;
private unsub: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()]; 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) { constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions) {
switch (true) { let ss = this.commonService.getScreenSize();
case (window.innerWidth <= 415): if(ss === ScreenSizeEnum.XS) {
this.displayedColumns = ['time_stamp_str', 'amount', 'actions']; this.flgSticky = false;
break; this.displayedColumns = ['time_stamp_str', 'amount', 'actions'];
case (window.innerWidth > 415 && window.innerWidth <= 730): } else if(ss === ScreenSizeEnum.SM || ss === ScreenSizeEnum.MD) {
this.displayedColumns = ['time_stamp_str', 'amount', 'num_confirmations', 'actions']; this.flgSticky = false;
break; this.displayedColumns = ['time_stamp_str', 'amount', 'num_confirmations', 'actions'];
case (window.innerWidth > 730 && window.innerWidth <= 1024): } else if(ss === ScreenSizeEnum.LG) {
this.displayedColumns = ['time_stamp_str', 'amount', 'num_confirmations', 'actions']; this.flgSticky = true;
break; this.displayedColumns = ['time_stamp_str', 'amount', 'num_confirmations', 'actions'];
case (window.innerWidth > 1024 && window.innerWidth <= 1280):
this.flgSticky = true;
this.displayedColumns = ['time_stamp_str', 'amount', 'num_confirmations', 'actions'];
break;
default:
this.flgSticky = true;
this.displayedColumns = ['time_stamp_str', 'amount', 'num_confirmations', 'actions'];
break;
} }
} }
@ -104,7 +96,7 @@ export class OnChainTransactionHistoryComponent implements OnInit, OnDestroy {
[{key: 'amount', value: selTransaction.amount, title: 'Amount (Sats)', width: 50, type: DataTypeEnum.NUMBER}, [{key: 'amount', value: selTransaction.amount, title: 'Amount (Sats)', width: 50, type: DataTypeEnum.NUMBER},
{key: 'active', value: selTransaction.active, title: 'Active', width: 50, type: DataTypeEnum.BOOLEAN}] {key: 'active', value: selTransaction.active, title: 'Active', width: 50, type: DataTypeEnum.BOOLEAN}]
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '40%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Transaction Information', alertTitle: 'Transaction Information',
message: reorderedTransactions, message: reorderedTransactions,

@ -16,7 +16,7 @@
<div fxLayout="column" class="padding-gap-x"> <div fxLayout="column" class="padding-gap-x">
<mat-card> <mat-card>
<mat-card-content fxLayout="column"> <mat-card-content fxLayout="column">
<mat-tab-group> <mat-tab-group class="lightning-send-tab">
<mat-tab label="Send"> <mat-tab label="Send">
<rtl-on-chain-send [sweepAll]="false"></rtl-on-chain-send> <rtl-on-chain-send [sweepAll]="false"></rtl-on-chain-send>
</mat-tab> </mat-tab>

@ -115,7 +115,7 @@ export class ChannelBackupTableComponent implements OnInit, OnDestroy {
{key: 'pending_htlcs', value: selChannel.pending_htlcs, title: 'Pending HTLCs', width: 30, type: DataTypeEnum.NUMBER}, {key: 'pending_htlcs', value: selChannel.pending_htlcs, title: 'Pending HTLCs', width: 30, type: DataTypeEnum.NUMBER},
{key: 'csv_delay', value: selChannel.csv_delay, title: 'CSV Delay', width: 30, type: DataTypeEnum.NUMBER}] {key: 'csv_delay', value: selChannel.csv_delay, title: 'CSV Delay', width: 30, type: DataTypeEnum.NUMBER}]
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'channel Information', alertTitle: 'channel Information',
message: reorderedChannel message: reorderedChannel

@ -100,7 +100,7 @@ export class ChannelClosedTableComponent implements OnInit, OnDestroy {
{key: 'close_height', value: selChannel.close_height, title: 'Close Height', width: 30, type: DataTypeEnum.NUMBER}], {key: 'close_height', value: selChannel.close_height, title: 'Close Height', width: 30, type: DataTypeEnum.NUMBER}],
[{key: 'closing_tx_hash', value: selChannel.closing_tx_hash, title: 'Closing Transaction Hash', width: 100, type: DataTypeEnum.STRING}] [{key: 'closing_tx_hash', value: selChannel.closing_tx_hash, title: 'Closing Transaction Hash', width: 100, type: DataTypeEnum.STRING}]
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Closed Channel Information', alertTitle: 'Closed Channel Information',
message: reorderedChannel message: reorderedChannel

@ -86,7 +86,7 @@ export class ChannelOpenTableComponent implements OnInit, OnDestroy {
if (channelToUpdate === 'all') { if (channelToUpdate === 'all') {
const titleMsg = 'Updated Values for ALL Channels'; const titleMsg = 'Updated Values for ALL Channels';
const confirmationMsg = []; const confirmationMsg = [];
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Update Channel', alertTitle: 'Update Channel',
titleMessage: titleMsg, titleMessage: titleMsg,
@ -130,7 +130,7 @@ export class ChannelOpenTableComponent implements OnInit, OnDestroy {
this.store.dispatch(new RTLActions.CloseSpinner()); this.store.dispatch(new RTLActions.CloseSpinner());
const titleMsg = 'Update values for channel point: ' + channelToUpdate.channel_point; const titleMsg = 'Update values for channel point: ' + channelToUpdate.channel_point;
const confirmationMsg = []; const confirmationMsg = [];
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Update Channel', alertTitle: 'Update Channel',
titleMessage: titleMsg, titleMessage: titleMsg,
@ -161,7 +161,7 @@ export class ChannelOpenTableComponent implements OnInit, OnDestroy {
} }
onChannelClose(channelToClose: Channel) { onChannelClose(channelToClose: Channel) {
this.store.dispatch(new RTLActions.OpenConfirmation({width: '55%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Close Channel', alertTitle: 'Close Channel',
titleMessage: 'Closing channel: ' + channelToClose.channel_point, titleMessage: 'Closing channel: ' + channelToClose.channel_point,
@ -209,7 +209,7 @@ export class ChannelOpenTableComponent implements OnInit, OnDestroy {
{key: 'pending_htlcs', value: selChannel.pending_htlcs, title: 'Pending HTLCs', width: 30, type: DataTypeEnum.NUMBER}, {key: 'pending_htlcs', value: selChannel.pending_htlcs, title: 'Pending HTLCs', width: 30, type: DataTypeEnum.NUMBER},
{key: 'csv_delay', value: selChannel.csv_delay, title: 'CSV Delay', width: 30, type: DataTypeEnum.NUMBER}] {key: 'csv_delay', value: selChannel.csv_delay, title: 'CSV Delay', width: 30, type: DataTypeEnum.NUMBER}]
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Channel Information', alertTitle: 'Channel Information',
message: reorderedChannel message: reorderedChannel

@ -128,7 +128,7 @@ export class ChannelPendingTableComponent implements OnInit, OnDestroy {
{key: 'commit_weight', value: preOrderedChannel.commit_weight, title: 'Commit Weight', width: 30, type: DataTypeEnum.NUMBER}, {key: 'commit_weight', value: preOrderedChannel.commit_weight, title: 'Commit Weight', width: 30, type: DataTypeEnum.NUMBER},
{key: 'commit_fee', value: preOrderedChannel.commit_fee, title: 'Commit Fee', width: 30, type: DataTypeEnum.NUMBER}] {key: 'commit_fee', value: preOrderedChannel.commit_fee, title: 'Commit Fee', width: 30, type: DataTypeEnum.NUMBER}]
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Opening Channel Information', alertTitle: 'Opening Channel Information',
message: reorderedChannel message: reorderedChannel
@ -155,7 +155,7 @@ export class ChannelPendingTableComponent implements OnInit, OnDestroy {
{key: 'blocks_til_maturity', value: preOrderedChannel.blocks_til_maturity, title: 'Blocks Till Maturity', width: 30, type: DataTypeEnum.NUMBER}, {key: 'blocks_til_maturity', value: preOrderedChannel.blocks_til_maturity, title: 'Blocks Till Maturity', width: 30, type: DataTypeEnum.NUMBER},
{key: 'recovered_balance', value: preOrderedChannel.recovered_balance, title: 'Recovered Balance', width: 30, type: DataTypeEnum.NUMBER}] {key: 'recovered_balance', value: preOrderedChannel.recovered_balance, title: 'Recovered Balance', width: 30, type: DataTypeEnum.NUMBER}]
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Force Closing Channel Information', alertTitle: 'Force Closing Channel Information',
message: reorderedChannel message: reorderedChannel
@ -178,7 +178,7 @@ export class ChannelPendingTableComponent implements OnInit, OnDestroy {
[{key: 'capacity', value: preOrderedChannel.capacity, title: 'Capacity', width: 50, type: DataTypeEnum.NUMBER}, [{key: 'capacity', value: preOrderedChannel.capacity, title: 'Capacity', width: 50, type: DataTypeEnum.NUMBER},
{key: 'closing_txid', value: preOrderedChannel.closing_txid, title: 'Closing Transaction ID', width: 50, type: DataTypeEnum.STRING}] {key: 'closing_txid', value: preOrderedChannel.closing_txid, title: 'Closing Transaction ID', width: 50, type: DataTypeEnum.STRING}]
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Closing Channel Information', alertTitle: 'Closing Channel Information',
message: reorderedChannel message: reorderedChannel
@ -201,7 +201,7 @@ export class ChannelPendingTableComponent implements OnInit, OnDestroy {
[{key: 'capacity', value: preOrderedChannel.capacity, title: 'Capacity', width: 50, type: DataTypeEnum.NUMBER}, [{key: 'capacity', value: preOrderedChannel.capacity, title: 'Capacity', width: 50, type: DataTypeEnum.NUMBER},
{key: 'limbo_balance', value: preOrderedChannel.limbo_balance, title: 'Limbo Balance', width: 50, type: DataTypeEnum.NUMBER}] {key: 'limbo_balance', value: preOrderedChannel.limbo_balance, title: 'Limbo Balance', width: 50, type: DataTypeEnum.NUMBER}]
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Wait Closing Channel Information', alertTitle: 'Wait Closing Channel Information',
message: reorderedChannel message: reorderedChannel

@ -144,7 +144,7 @@ export class PeersComponent implements OnInit, OnDestroy {
[{key: 'sat_sent', value: selPeer.sat_sent, title: 'Satoshis Sent', width: 50, type: DataTypeEnum.NUMBER}, {key: 'sat_recv', value: selPeer.sat_recv, title: 'Satoshis Received', width: 50, type: DataTypeEnum.NUMBER}], [{key: 'sat_sent', value: selPeer.sat_sent, title: 'Satoshis Sent', width: 50, type: DataTypeEnum.NUMBER}, {key: 'sat_recv', value: selPeer.sat_recv, title: 'Satoshis Received', width: 50, type: DataTypeEnum.NUMBER}],
[{key: 'bytes_sent', value: selPeer.bytes_sent, title: 'Bytes Sent', width: 50, type: DataTypeEnum.NUMBER}, {key: 'bytes_recv', value: selPeer.bytes_recv, title: 'Bytes Received', width: 50, type: DataTypeEnum.NUMBER}], [{key: 'bytes_sent', value: selPeer.bytes_sent, title: 'Bytes Sent', width: 50, type: DataTypeEnum.NUMBER}, {key: 'bytes_recv', value: selPeer.bytes_recv, title: 'Bytes Received', width: 50, type: DataTypeEnum.NUMBER}],
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Peer Information', alertTitle: 'Peer Information',
showQRName: 'Public Key', showQRName: 'Public Key',
@ -163,7 +163,7 @@ export class PeersComponent implements OnInit, OnDestroy {
information: this.information, information: this.information,
balance: this.availableBalance balance: this.availableBalance
}; };
this.store.dispatch(new RTLActions.OpenAlert({ width: '50%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
alertTitle: 'Open Channel', alertTitle: 'Open Channel',
message: peerToAddChannelMessage, message: peerToAddChannelMessage,
newlyAdded: false, newlyAdded: false,
@ -173,7 +173,7 @@ export class PeersComponent implements OnInit, OnDestroy {
onPeerDetach(peerToDetach: Peer) { onPeerDetach(peerToDetach: Peer) {
const msg = 'Disconnect peer: ' + ((peerToDetach.alias) ? peerToDetach.alias : peerToDetach.pub_key); const msg = 'Disconnect peer: ' + ((peerToDetach.alias) ? peerToDetach.alias : peerToDetach.pub_key);
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Disconnect Peer', alertTitle: 'Disconnect Peer',
titleMessage: msg, titleMessage: msg,

@ -69,7 +69,7 @@ export class ForwardingHistoryComponent implements OnInit, OnChanges {
{key: 'alias_out', value: selFEvent.alias_out, title: 'Outbound Peer Alias', width: 25, type: DataTypeEnum.STRING}, {key: 'alias_out', value: selFEvent.alias_out, title: 'Outbound Peer Alias', width: 25, type: DataTypeEnum.STRING},
{key: 'chan_id_out', value: selFEvent.chan_id_out, title: 'Outbound Channel ID', width: 25, type: DataTypeEnum.STRING}] {key: 'chan_id_out', value: selFEvent.chan_id_out, title: 'Outbound Channel ID', width: 25, type: DataTypeEnum.STRING}]
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Event Information', alertTitle: 'Event Information',
message: reorderedFHEvent message: reorderedFHEvent

@ -75,7 +75,7 @@ export class RoutingPeersComponent implements OnInit, OnChanges {
[{key: 'events', value: selRPeer.events, title: 'Events', width: 50, type: DataTypeEnum.NUMBER}, [{key: 'events', value: selRPeer.events, title: 'Events', width: 50, type: DataTypeEnum.NUMBER},
{key: 'total_amount', value: selRPeer.total_amount, title: 'Total Amount (Sats)', width: 50, type: DataTypeEnum.NUMBER}] {key: 'total_amount', value: selRPeer.total_amount, title: 'Total Amount (Sats)', width: 50, type: DataTypeEnum.NUMBER}]
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: alertTitle, alertTitle: alertTitle,
message: reorderedRoutingPeer message: reorderedRoutingPeer

@ -164,7 +164,7 @@ export class LNDEffects implements OnDestroy {
map((postRes: any) => { map((postRes: any) => {
this.logger.info(postRes); this.logger.info(postRes);
this.store.dispatch(new RTLActions.CloseSpinner()); this.store.dispatch(new RTLActions.CloseSpinner());
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.SUCCESS, type: AlertTypeEnum.SUCCESS,
alertTitle: 'Peer Disconnected', alertTitle: 'Peer Disconnected',
titleMessage: 'Peer Disconnected Successfully!' titleMessage: 'Peer Disconnected Successfully!'
@ -200,7 +200,7 @@ export class LNDEffects implements OnDestroy {
postRes.creation_date_str = new Date(+postRes.creation_date * 1000).toUTCString().substring(5, 22).replace(' ', '/').replace(' ', '/').toUpperCase(); postRes.creation_date_str = new Date(+postRes.creation_date * 1000).toUTCString().substring(5, 22).replace(' ', '/').replace(' ', '/').toUpperCase();
this.logger.info(postRes); this.logger.info(postRes);
this.store.dispatch(new RTLActions.CloseSpinner()); this.store.dispatch(new RTLActions.CloseSpinner());
this.store.dispatch(new RTLActions.OpenAlert({ width: '58%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
invoice: postRes, invoice: postRes,
newlyAdded: true, newlyAdded: true,
component: InvoiceInformationComponent component: InvoiceInformationComponent
@ -255,7 +255,7 @@ export class LNDEffects implements OnDestroy {
map((postRes: any) => { map((postRes: any) => {
this.logger.info(postRes); this.logger.info(postRes);
this.store.dispatch(new RTLActions.CloseSpinner()); this.store.dispatch(new RTLActions.CloseSpinner());
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { type: AlertTypeEnum.SUCCESS, alertTitle: 'Channel Updated', titleMessage: 'Channel Updated Successfully!' }})); this.store.dispatch(new RTLActions.OpenAlert({ data: { type: AlertTypeEnum.SUCCESS, alertTitle: 'Channel Updated', titleMessage: 'Channel Updated Successfully!' }}));
return { return {
type: RTLActions.FETCH_ALL_CHANNELS type: RTLActions.FETCH_ALL_CHANNELS
}; };
@ -454,12 +454,12 @@ export class LNDEffects implements OnDestroy {
type: RTLActions.SET_ALL_CHANNELS, type: RTLActions.SET_ALL_CHANNELS,
payload: (channels && channels.channels && channels.channels.length > 0) ? channels.channels : [] payload: (channels && channels.channels && channels.channels.length > 0) ? channels.channels : []
}; };
}, }),
catchError((err: any) => { catchError((err: any) => {
this.handleErrorWithoutAlert('FetchChannels/all', err); this.handleErrorWithoutAlert('FetchChannels/all', err);
return of({type: RTLActions.VOID}); return of({type: RTLActions.VOID});
}) })
)); );
} }
)); ));
@ -650,7 +650,7 @@ export class LNDEffects implements OnDestroy {
msg['Total Fee (' + ((undefined === store.nodeData.smaller_currency_unit) ? CurrencyUnitEnum.SATS : store.nodeData.smaller_currency_unit) + ')'] = msg['Total Fee (' + ((undefined === store.nodeData.smaller_currency_unit) ? CurrencyUnitEnum.SATS : store.nodeData.smaller_currency_unit) + ')'] =
(sendRes.payment_route.total_fees_msat / 1000); (sendRes.payment_route.total_fees_msat / 1000);
Object.assign(msg, confirmationMsg); Object.assign(msg, confirmationMsg);
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.SUCCESS, type: AlertTypeEnum.SUCCESS,
alertTitle: 'Payment Sent', alertTitle: 'Payment Sent',
titleMessage: 'Payment Sent Successfully!', titleMessage: 'Payment Sent Successfully!',

@ -120,8 +120,7 @@ export class LightningInvoicesComponent implements OnInit, OnDestroy {
const selInvoice = this.invoices.data.filter(invoice => { const selInvoice = this.invoices.data.filter(invoice => {
return invoice.payment_request === selRow.payment_request; return invoice.payment_request === selRow.payment_request;
})[0]; })[0];
this.store.dispatch(new RTLActions.OpenAlert({ width: '58%', this.store.dispatch(new RTLActions.OpenAlert({ data: {
data: {
invoice: selInvoice, invoice: selInvoice,
newlyAdded: false, newlyAdded: false,
component: InvoiceInformationComponent component: InvoiceInformationComponent

@ -126,7 +126,7 @@ export class LightningPaymentsComponent implements OnInit, OnDestroy {
{key: 'cltv_expiry', value: this.paymentDecoded.cltv_expiry, title: 'CLTV Expiry', width: 30}] {key: 'cltv_expiry', value: this.paymentDecoded.cltv_expiry, title: 'CLTV Expiry', width: 30}]
]; ];
const titleMsg = 'It is an open amount invoice. Enter the amount (Sats) to pay.'; const titleMsg = 'It is an open amount invoice. Enter the amount (Sats) to pay.';
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Enter Amount and Confirm Send Payment', alertTitle: 'Enter Amount and Confirm Send Payment',
titleMessage: titleMsg, titleMessage: titleMsg,
@ -158,7 +158,7 @@ export class LightningPaymentsComponent implements OnInit, OnDestroy {
[{key: 'expiry', value: this.paymentDecoded.expiry, title: 'Expiry', width: 50, type: DataTypeEnum.NUMBER}, [{key: 'expiry', value: this.paymentDecoded.expiry, title: 'Expiry', width: 50, type: DataTypeEnum.NUMBER},
{key: 'cltv_expiry', value: this.paymentDecoded.cltv_expiry, title: 'CLTV Expiry', width: 50}] {key: 'cltv_expiry', value: this.paymentDecoded.cltv_expiry, title: 'CLTV Expiry', width: 50}]
]; ];
this.store.dispatch(new RTLActions.OpenConfirmation({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenConfirmation({ data: {
type: AlertTypeEnum.CONFIRM, type: AlertTypeEnum.CONFIRM,
alertTitle: 'Send Payment', alertTitle: 'Send Payment',
noBtnText: 'Cancel', noBtnText: 'Cancel',
@ -209,7 +209,7 @@ export class LightningPaymentsComponent implements OnInit, OnDestroy {
[{key: 'value_msat', value: selPayment.value_msat, title: 'Value (mSats)', width: 50, type: DataTypeEnum.NUMBER}, [{key: 'value_msat', value: selPayment.value_msat, title: 'Value (mSats)', width: 50, type: DataTypeEnum.NUMBER},
{key: 'value_sat', value: selPayment.value, title: 'Value (Sats)', width: 50, type: DataTypeEnum.NUMBER}] {key: 'value_sat', value: selPayment.value, title: 'Value (Sats)', width: 50, type: DataTypeEnum.NUMBER}]
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Payment Information', alertTitle: 'Payment Information',
message: reorderedPayment message: reorderedPayment

@ -93,7 +93,7 @@ export class QueryRoutesComponent implements OnInit, OnDestroy {
{key: 'chan_id', value: selHop.chan_id, title: 'Channel ID', width: 30, type: DataTypeEnum.STRING}, {key: 'chan_id', value: selHop.chan_id, title: 'Channel ID', width: 30, type: DataTypeEnum.STRING},
{key: 'chan_capacity', value: selHop.chan_capacity, title: 'Channel Capacity', width: 40, type: DataTypeEnum.NUMBER}], {key: 'chan_capacity', value: selHop.chan_capacity, title: 'Channel Capacity', width: 40, type: DataTypeEnum.NUMBER}],
]; ];
this.store.dispatch(new RTLActions.OpenAlert({ width: '55%', data: { this.store.dispatch(new RTLActions.OpenAlert({ data: {
type: AlertTypeEnum.INFORMATION, type: AlertTypeEnum.INFORMATION,
alertTitle: 'Route Information', alertTitle: 'Route Information',
message: reorderedHop message: reorderedHop

@ -5,21 +5,21 @@
<div fxLayout="column" class="padding-gap-x settings-container"> <div fxLayout="column" class="padding-gap-x settings-container">
<mat-card> <mat-card>
<mat-card-content fxLayout="column" class="card-content-gap"> <mat-card-content fxLayout="column" class="card-content-gap">
<div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="center space-between"> <div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start center">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center"> <div fxLayout="column" fxLayout.gt-sm="row wrap" fxFlex="100" fxLayoutAlign="start stretch" class="w-100">
<div fxFlex="25"> <div fxFlex="25">
<div fxFlex.gt-md="50" fxFlex="80"> <div fxFlex.gt-md="50" fxFlex="90">
<h4>User Persona</h4> <h4>User Persona</h4>
<mat-select [(ngModel)]="selNode.settings.userPersona" placeholder="Select User Persona" tabindex="1" required name="userPersona"> <mat-select [(ngModel)]="selNode.settings.userPersona" placeholder="Select User Persona" tabindex="1" required name="userPersona">
<mat-option *ngFor="let userPersona of userPersonas" [value]="userPersona"> <mat-option *ngFor="let userPersona of userPersonas" [value]="userPersona">
{{userPersona}} {{userPersona | titlecase}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</div> </div>
</div> </div>
<div fxFlex="25" *ngIf="appConfig.nodes.length && appConfig.nodes.length > 1"> <div fxFlex="25" *ngIf="appConfig.nodes.length && appConfig.nodes.length > 1">
<div fxFlex.gt-md="50" fxFlex="80"> <div fxFlex.gt-md="70" fxFlex="90">
<h4>Default Selected Node</h4> <h4>Default Node</h4>
<mat-select [(ngModel)]="appConfig.defaultNodeIndex" placeholder="Default Node" tabindex="1" required name="defaultNode"> <mat-select [(ngModel)]="appConfig.defaultNodeIndex" placeholder="Default Node" tabindex="1" required name="defaultNode">
<mat-option *ngFor="let node of appConfig.nodes" [value]="node.index"> <mat-option *ngFor="let node of appConfig.nodes" [value]="node.index">
{{node.lnNode}} ({{node.lnImplementation}}) {{node.lnNode}} ({{node.lnImplementation}})
@ -28,7 +28,7 @@
</div> </div>
</div> </div>
<div fxFlex="25"> <div fxFlex="25">
<div fxFlex.gt-md="30" fxFlex="70"> <div fxFlex.gt-md="50" fxFlex="90">
<h4>Currency Unit</h4> <h4>Currency Unit</h4>
<mat-select [(ngModel)]="selNode.settings.currencyUnit" placeholder="Currency Unit" (selectionChange)="onCurrencyChange($event)" tabindex="1" required name="currencyUnit"> <mat-select [(ngModel)]="selNode.settings.currencyUnit" placeholder="Currency Unit" (selectionChange)="onCurrencyChange($event)" tabindex="1" required name="currencyUnit">
<mat-option *ngFor="let currencyUnit of currencyUnits" [value]="currencyUnit.id"> <mat-option *ngFor="let currencyUnit of currencyUnits" [value]="currencyUnit.id">
@ -38,7 +38,7 @@
</div> </div>
</div> </div>
<div fxFlex="25" *ngIf="selNode.lnImplementation !== 'CLT'"> <div fxFlex="25" *ngIf="selNode.lnImplementation !== 'CLT'">
<div fxFlex="60"> <div fxFlex.gt-md="50" fxFlex="90">
<h4>BTC</h4> <h4>BTC</h4>
<div fxLayoutAlign="start center"> <div fxLayoutAlign="start center">
<span class="slider-text">{{smallerCurrencyUnit}}</span> <span class="slider-text">{{smallerCurrencyUnit}}</span>
@ -57,7 +57,7 @@
</div> </div>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center"> <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
<div fxFlex="50"> <div fxFlex="50">
<div fxFlex="60"> <div fxFlex="70">
<h4>Font Size</h4> <h4>Font Size</h4>
<mat-radio-group color="primary" [(ngModel)]="selectedFontSize" (change)="chooseFontSize()"> <mat-radio-group color="primary" [(ngModel)]="selectedFontSize" (change)="chooseFontSize()">
<mat-radio-button *ngFor="let fontSize of fontSizes" [value]="fontSize">{{fontSize.name}} <mat-radio-button *ngFor="let fontSize of fontSizes" [value]="fontSize">{{fontSize.name}}
@ -78,7 +78,7 @@
<div *ngIf="showSettingOption && selNode?.settings?.menu === 'vertical'" fxFlex="100" fxLayout="row" <div *ngIf="showSettingOption && selNode?.settings?.menu === 'vertical'" fxFlex="100" fxLayout="row"
fxLayoutAlign="space-between center"> fxLayoutAlign="space-between center">
<div fxFlex="50"> <div fxFlex="50">
<div fxFlex="60"> <div fxFlex="70">
<h4>Menu Type</h4> <h4>Menu Type</h4>
<mat-radio-group color="primary" [(ngModel)]="selectedMenuType" (change)="chooseMenuType()"> <mat-radio-group color="primary" [(ngModel)]="selectedMenuType" (change)="chooseMenuType()">
<mat-radio-button *ngFor="let menuType of menuTypes" [value]="menuType">{{menuType.name}}</mat-radio-button> <mat-radio-button *ngFor="let menuType of menuTypes" [value]="menuType">{{menuType.name}}</mat-radio-button>

@ -1,12 +1,12 @@
<div fxLayout="row"> <div fxLayout="row">
<div fxFlex="30" fxLayoutAlign="center start" class="modal-qr-code-container padding-gap-large"> <div fxFlex="30" fxLayoutAlign="center start" class="modal-qr-code-container padding-gap-large">
<qrcode qrdata="{{selInfoType.infoID === 1 ? information.uris[0] : information.identity_pubkey}}" [size]="230" [level]="'L'" [allowEmptyString]="true" class="qr-border"></qrcode> <qrcode qrdata="{{selInfoType.infoID === 1 ? information.uris[0] : information.identity_pubkey}}" [size]="qrWidth" [level]="'L'" [allowEmptyString]="true" class="qr-border"></qrcode>
</div> </div>
<div fxFlex="70" class="padding-gap-large pl-3"> <div fxFlex="70" class="padding-gap-large pl-3">
<mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header mb-2"> <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header mb-2">
<div fxFlex="95" fxLayoutAlign="start start"> <div fxFlex="95" fxLayoutAlign="start start">
<fa-icon [icon]="faReceipt" class="page-title-img mr-1"></fa-icon> <fa-icon [icon]="faReceipt" class="page-title-img mr-1"></fa-icon>
<span class="page-title">Show {{selInfoType.infoKey}}</span> <span class="page-title">{{selInfoType.infoName}}</span>
</div> </div>
<button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" <button tabindex="3" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()"
mat-button>X</button> mat-button>X</button>
@ -14,7 +14,7 @@
<mat-card-content> <mat-card-content>
<div fxLayout="column"> <div fxLayout="column">
<div fxLayout="row" *ngIf="information.uris && information.uris.length > 0"> <div fxLayout="row" *ngIf="information.uris && information.uris.length > 0">
<mat-form-field fxFlex="40" fxLayoutAlign="start end"> <mat-form-field fxFlex="80" fxFlex.gt-sm="40" fxLayoutAlign="start end">
<mat-select tabindex="1" [(value)]="selInfoType"> <mat-select tabindex="1" [(value)]="selInfoType">
<mat-option *ngFor="let infoType of infoTypes" [value]="infoType"> <mat-option *ngFor="let infoType of infoTypes" [value]="infoType">
{{infoType.infoName}} {{infoType.infoName}}
@ -30,7 +30,7 @@
</div> </div>
<mat-divider class="w-100 my-1"></mat-divider> <mat-divider class="w-100 my-1"></mat-divider>
<div class="mt-2" fxLayout="row" fxLayoutAlign="end center"> <div class="mt-2" fxLayout="row" fxLayoutAlign="end center">
<button autoFocus fxFlex="33" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="2" <button autoFocus fxFlex="60" fxFlex.gt-sm="33" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="2"
type="submit" rtlClipboard payload="{{selInfoType.infoID === 1 ? information.uris[0] : information.identity_pubkey}}" (copied)="onCopyPubkey($event)">Copy {{selInfoType.infoKey}}</button> type="submit" rtlClipboard payload="{{selInfoType.infoID === 1 ? information.uris[0] : information.identity_pubkey}}" (copied)="onCopyPubkey($event)">Copy {{selInfoType.infoKey}}</button>
</div> </div>
</div> </div>

@ -4,8 +4,10 @@ import { faReceipt } from '@fortawesome/free-solid-svg-icons';
import { MatSnackBar } from '@angular/material/snack-bar'; import { MatSnackBar } from '@angular/material/snack-bar';
import { LoggerService } from '../../../services/logger.service'; import { LoggerService } from '../../../services/logger.service';
import { CommonService } from '../../../services/common.service';
import { ShowPubkeyData } from '../../../models/alertData'; import { ShowPubkeyData } from '../../../models/alertData';
import { GetInfoRoot } from '../../../models/RTLconfig'; import { GetInfoRoot } from '../../../models/RTLconfig';
import { ScreenSizeEnum } from '../../../services/consts-enums-functions';
@Component({ @Component({
selector: 'rtl-show-pubkey', selector: 'rtl-show-pubkey',
@ -17,11 +19,22 @@ export class ShowPubkeyComponent implements OnInit {
public information: GetInfoRoot; public information: GetInfoRoot;
public infoTypes = [{infoID: 0, infoKey: 'node pubkey', infoName: 'Node pubkey'}, { infoID: 1, infoKey: 'node URI', infoName: 'Node URI'}]; public infoTypes = [{infoID: 0, infoKey: 'node pubkey', infoName: 'Node pubkey'}, { infoID: 1, infoKey: 'node URI', infoName: 'Node URI'}];
public selInfoType = this.infoTypes[0]; public selInfoType = this.infoTypes[0];
public qrWidth = 230;
public screenSize = '';
constructor(public dialogRef: MatDialogRef<ShowPubkeyComponent>, @Inject(MAT_DIALOG_DATA) public data: ShowPubkeyData, private logger: LoggerService, private snackBar: MatSnackBar) { } constructor(public dialogRef: MatDialogRef<ShowPubkeyComponent>, @Inject(MAT_DIALOG_DATA) public data: ShowPubkeyData, private logger: LoggerService, private snackBar: MatSnackBar, private commonService: CommonService) { }
ngOnInit() { ngOnInit() {
this.information = this.data.information; this.information = this.data.information;
this.screenSize = this.commonService.getScreenSize();
if(this.screenSize === ScreenSizeEnum.XS) {
this.qrWidth = 90;
} else if(this.screenSize === ScreenSizeEnum.SM) {
this.qrWidth = 160;
} else if(this.screenSize === ScreenSizeEnum.MD) {
this.qrWidth = 200;
}
} }
onClose() { onClose() {

@ -1,12 +1,12 @@
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center"> <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
<div fxLayoutAlign="start start"> <div fxFlex="70" fxLayoutAlign="start start">
<div *ngFor="let menuNode of menuNodes"> <div *ngFor="let menuNode of menuNodes">
<button mat-button *ngIf="undefined === menuNode.children" fxLayoutAlign="center center" class="horizontal-button" routerLinkActive="h-active-link" [routerLinkActiveOptions]="{exact: true}" routerLink="{{menuNode.link}}" (click)="onClick(menuNode)"> <button mat-button *ngIf="undefined === menuNode.children" fxLayoutAlign="center center" class="horizontal-button" routerLinkActive="h-active-link" [routerLinkActiveOptions]="{exact: true}" routerLink="{{menuNode.link}}" (click)="onClick(menuNode)">
<fa-icon *ngIf="menuNode.iconType === 'FA'" [icon]="menuNode.icon" class="fa-icon-small"></fa-icon> <fa-icon *ngIf="menuNode.iconType === 'FA'" matTooltip="{{menuNode.name}}" [icon]="menuNode.icon" class="fa-icon-small"></fa-icon>
</button> </button>
<div *ngIf="undefined !== menuNode.children" fxLayoutAlign="start start" [matMenuTriggerFor]="childMenu"> <div *ngIf="undefined !== menuNode.children" fxLayoutAlign="start start" [matMenuTriggerFor]="childMenu">
<button mat-button class="horizontal-button" fxLayoutAlign="center center"> <button mat-button class="horizontal-button" fxLayoutAlign="center center">
<fa-icon *ngIf="menuNode.iconType === 'FA'" [icon]="menuNode.icon" class="fa-icon-small"></fa-icon> <fa-icon *ngIf="menuNode.iconType === 'FA'" matTooltip="{{menuNode.name}}" [icon]="menuNode.icon" class="fa-icon-small"></fa-icon>
</button> </button>
<mat-menu #childMenu="matMenu" xPosition="after" overlapTrigger="false" class="child-menu"> <mat-menu #childMenu="matMenu" xPosition="after" overlapTrigger="false" class="child-menu">
<div *ngFor="let childNode of menuNode.children"> <div *ngFor="let childNode of menuNode.children">
@ -18,7 +18,12 @@
</div> </div>
</div> </div>
</div> </div>
<div fxLayoutAlign="end center"> <div fxFlex="30" fxLayoutAlign="end center">
<mat-select fxFlex="40" *ngIf="appConfig.nodes.length > 1" [value]="selNode" (selectionChange)="onNodeSelectionChange($event.value)" class="m-2 multi-node-select">
<mat-option *ngFor="let node of appConfig.nodes" [value]="node" tabindex="19">
{{node.lnNode}} ({{node.lnImplementation}})
</mat-option>
</mat-select>
<button fxLayoutAlign="center center" mat-stroked-button color="primary" class="horizontal-button-show" tabindex="20" (click)="onShowPubkey()">Show Public Key</button> <button fxLayoutAlign="center center" mat-stroked-button color="primary" class="horizontal-button-show" tabindex="20" (click)="onShowPubkey()">Show Public Key</button>
<rtl-top-menu></rtl-top-menu> <rtl-top-menu></rtl-top-menu>
</div> </div>

@ -6,12 +6,11 @@ import { Store } from '@ngrx/store';
import { faEject } from '@fortawesome/free-solid-svg-icons'; import { faEject } from '@fortawesome/free-solid-svg-icons';
import { SessionService } from '../../../services/session.service'; import { SessionService } from '../../../services/session.service';
import { MENU_DATA } from '../../../models/navMenu'; import { MENU_DATA } from '../../../models/navMenu';
import { ShowPubkeyComponent } from '../../data-modal/show-pubkey/show-pubkey.component';
import { RTLEffects } from '../../../../store/rtl.effects'; import { RTLEffects } from '../../../../store/rtl.effects';
import * as RTLActions from '../../../../store/rtl.actions'; import * as RTLActions from '../../../../store/rtl.actions';
import * as fromRTLReducer from '../../../../store/rtl.reducers'; import * as fromRTLReducer from '../../../../store/rtl.reducers';
import { GetInfoRoot } from '../../../models/RTLconfig'; import { GetInfoRoot, LightningNode, RTLConfiguration } from '../../../models/RTLconfig';
import { AlertTypeEnum } from '../../../services/consts-enums-functions'; import { AlertTypeEnum } from '../../../services/consts-enums-functions';
@Component({ @Component({
@ -24,6 +23,8 @@ export class HorizontalNavigationComponent implements OnInit, OnDestroy {
public logoutNode = []; public logoutNode = [];
public showLogout = false; public showLogout = false;
public numPendingChannels = 0; public numPendingChannels = 0;
public appConfig: RTLConfiguration;
public selNode: LightningNode;
public information: GetInfoRoot = {}; public information: GetInfoRoot = {};
private unSubs = [new Subject(), new Subject(), new Subject()]; private unSubs = [new Subject(), new Subject(), new Subject()];
@ -35,8 +36,10 @@ export class HorizontalNavigationComponent implements OnInit, OnDestroy {
.pipe(takeUntil(this.unSubs[0])) .pipe(takeUntil(this.unSubs[0]))
.subscribe((rtlStore) => { .subscribe((rtlStore) => {
this.information = rtlStore.nodeData; this.information = rtlStore.nodeData;
this.appConfig = rtlStore.appConfig;
this.selNode = rtlStore.selNode;
this.numPendingChannels = rtlStore.nodeData.numberOfPendingChannels; this.numPendingChannels = rtlStore.nodeData.numberOfPendingChannels;
if(rtlStore.selNode.lnImplementation.toUpperCase() === 'CLT') { if(this.selNode.lnImplementation.toUpperCase() === 'CLT') {
this.menuNodes = MENU_DATA.CLChildren; this.menuNodes = MENU_DATA.CLChildren;
} else { } else {
this.menuNodes = MENU_DATA.LNDChildren; this.menuNodes = MENU_DATA.LNDChildren;
@ -69,7 +72,7 @@ export class HorizontalNavigationComponent implements OnInit, OnDestroy {
onClick(node) { onClick(node) {
if (node.name === 'Logout') { if (node.name === 'Logout') {
this.store.dispatch(new RTLActions.OpenConfirmation({ this.store.dispatch(new RTLActions.OpenConfirmation({
width: '55%', data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Logout', titleMessage: 'Logout from this device?', noBtnText: 'Cancel', yesBtnText: 'Logout' data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Logout', titleMessage: 'Logout from this device?', noBtnText: 'Cancel', yesBtnText: 'Logout'
}})); }}));
this.rtlEffects.closeConfirm this.rtlEffects.closeConfirm
.pipe(takeUntil(this.unSubs[2])) .pipe(takeUntil(this.unSubs[2]))
@ -86,6 +89,12 @@ export class HorizontalNavigationComponent implements OnInit, OnDestroy {
this.store.dispatch(new RTLActions.ShowPubkey()); this.store.dispatch(new RTLActions.ShowPubkey());
} }
onNodeSelectionChange(selNodeValue: LightningNode) {
this.selNode = selNodeValue;
this.store.dispatch(new RTLActions.OpenSpinner('Updating Selected Node...'));
this.store.dispatch(new RTLActions.SetSelelectedNode({ lnNode: selNodeValue, isInitialSetup: false }));
}
ngOnDestroy() { ngOnDestroy() {
this.unSubs.forEach(completeSub => { this.unSubs.forEach(completeSub => {
completeSub.next(); completeSub.next();

@ -116,7 +116,7 @@ export class SideNavigationComponent implements OnInit, OnDestroy {
onClick(node: MenuChildNode) { onClick(node: MenuChildNode) {
if (node.name === 'Logout') { if (node.name === 'Logout') {
this.store.dispatch(new RTLActions.OpenConfirmation({ this.store.dispatch(new RTLActions.OpenConfirmation({
width: '55%', data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Logout', titleMessage: 'Logout from this device?', noBtnText: 'Cancel', yesBtnText: 'Logout' data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Logout', titleMessage: 'Logout from this device?', noBtnText: 'Cancel', yesBtnText: 'Logout'
}})); }}));
this.rtlEffects.closeConfirm this.rtlEffects.closeConfirm
.pipe(takeUntil(this.unSubs[3])) .pipe(takeUntil(this.unSubs[3]))
@ -142,6 +142,7 @@ export class SideNavigationComponent implements OnInit, OnDestroy {
this.selNode = selNodeValue; this.selNode = selNodeValue;
this.store.dispatch(new RTLActions.OpenSpinner('Updating Selected Node...')); this.store.dispatch(new RTLActions.OpenSpinner('Updating Selected Node...'));
this.store.dispatch(new RTLActions.SetSelelectedNode({ lnNode: selNodeValue, isInitialSetup: false })); this.store.dispatch(new RTLActions.SetSelelectedNode({ lnNode: selNodeValue, isInitialSetup: false }));
this.ChildNavClicked.emit('selectNode');
} }
ngOnDestroy() { ngOnDestroy() {

@ -79,7 +79,7 @@ export class TopMenuComponent implements OnInit, OnDestroy {
onClick() { onClick() {
this.store.dispatch(new RTLActions.OpenConfirmation({ this.store.dispatch(new RTLActions.OpenConfirmation({
width: '55%', data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Logout', titleMessage: 'Logout from this device?', noBtnText: 'Cancel', yesBtnText: 'Logout' data: { type: AlertTypeEnum.CONFIRM, alertTitle: 'Logout', titleMessage: 'Logout from this device?', noBtnText: 'Cancel', yesBtnText: 'Logout'
}})); }}));
this.rtlEffects.closeConfirm this.rtlEffects.closeConfirm
.pipe(takeUntil(this.unSubs[3])) .pipe(takeUntil(this.unSubs[3]))

@ -19,7 +19,7 @@
</form> </form>
<mat-divider *ngIf="configData !== ''" class="my-1"></mat-divider> <mat-divider *ngIf="configData !== ''" class="my-1"></mat-divider>
<div *ngIf="configData !== '' && fileFormat === 'JSON'" class="mt-2 mb-6"> <div *ngIf="configData !== '' && fileFormat === 'JSON'" class="mt-2 mb-6">
<pre>{{configData | json}}</pre> <pre class="pre-wrap">{{configData | json}}</pre>
<mat-divider *ngIf="configData !== ''" class="my-1"></mat-divider> <mat-divider *ngIf="configData !== ''" class="my-1"></mat-divider>
</div> </div>
<div *ngIf="configData !== '' && fileFormat === 'INI'" class="mt-2"> <div *ngIf="configData !== '' && fileFormat === 'INI'" class="mt-2">

@ -65,6 +65,7 @@ export class ServerConfigComponent implements OnInit, OnDestroy {
this.rtlEffects.showLnConfig this.rtlEffects.showLnConfig
.pipe(takeUntil(this.unSubs[1])) .pipe(takeUntil(this.unSubs[1]))
.subscribe((config: any) => { .subscribe((config: any) => {
console.warn(config);
const configFile = config.data; const configFile = config.data;
this.fileFormat = config.format; this.fileFormat = config.format;
if (configFile !== '' && undefined !== configFile && this.fileFormat === 'INI') { if (configFile !== '' && undefined !== configFile && this.fileFormat === 'INI') {

@ -12,7 +12,7 @@
tabindex="1" required> tabindex="1" required>
<mat-hint>{{hintStr}}</mat-hint> <mat-hint>{{hintStr}}</mat-hint>
</mat-form-field> </mat-form-field>
<div fxLayout="column" fxFlex.gt-sm="30" fxLayout.gt-sm="row wrap" fxLayoutAlign="start start" fxLayoutAlign.gt-sm="space-between center" class="mt-2"> <div fxFlex="100" fxFlex.gt-sm="30" fxLayoutAlign="space-between start" fxLayoutAlign.gt-sm="space-between center" class="mt-2">
<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-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> <button fxFlex="48" fxLayoutAlign="center center" mat-raised-button color="primary" tabindex="3" type="submit" [disabled]="!password">Login</button>
</div> </div>

@ -82,6 +82,6 @@ export interface ErrorData {
} }
export interface DialogConfig { export interface DialogConfig {
width: string; width?: string;
data: AlertData | ConfirmationData | ErrorData | OpenChannelAlert | InvoiceInformation | OnChainAddressInformation | ShowPubkeyData; data: AlertData | ConfirmationData | ErrorData | OpenChannelAlert | InvoiceInformation | OnChainAddressInformation | ShowPubkeyData;
} }

@ -3,7 +3,8 @@ import { HttpClient } from '@angular/common/http';
import { Subject, of, Observable } from 'rxjs'; import { Subject, of, Observable } from 'rxjs';
import { take, map } from 'rxjs/operators'; import { take, map } from 'rxjs/operators';
import { CurrencyUnitEnum, TimeUnitEnum } from './consts-enums-functions'; import { CurrencyUnitEnum, TimeUnitEnum, ScreenSizeEnum } from './consts-enums-functions';
import { environment } from '../../../environments/environment';
@Injectable() @Injectable()
export class CommonService implements OnInit, OnDestroy { export class CommonService implements OnInit, OnDestroy {
@ -12,12 +13,22 @@ export class CommonService implements OnInit, OnDestroy {
unitConversionValue = 0; unitConversionValue = 0;
containerWidthChanged = new Subject<string>(); containerWidthChanged = new Subject<string>();
conversionData = { data: null, last_fetched: null }; conversionData = { data: null, last_fetched: null };
private screenSize = ScreenSizeEnum.MD;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject()]; private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
constructor(private httpClient: HttpClient) {} constructor(private httpClient: HttpClient) {}
ngOnInit() {} ngOnInit() {}
getScreenSize() {
return this.screenSize;
}
setScreenSize(screenSize: ScreenSizeEnum) {
this.screenSize = screenSize;
console.warn(this.screenSize);
}
sortDescByKey(array, key) { sortDescByKey(array, key) {
return array.sort(function (a, b) { return array.sort(function (a, b) {
const x = +a[key]; const x = +a[key];
@ -45,7 +56,7 @@ export class CommonService implements OnInit, OnDestroy {
if(this.conversionData.data && this.conversionData.last_fetched && (latest_date < (this.conversionData.last_fetched.valueOf() + 300000))) { if(this.conversionData.data && this.conversionData.last_fetched && (latest_date < (this.conversionData.last_fetched.valueOf() + 300000))) {
return of(this.convert(value, from, otherCurrencyUnit)); return of(this.convert(value, from, otherCurrencyUnit));
} else { } else {
return this.httpClient.get('https://blockchain.info/ticker') return this.httpClient.get(environment.CONF_API + '/rates')
.pipe(take(1), .pipe(take(1),
map(data => { map(data => {
this.conversionData.data = data; this.conversionData.data = data;

@ -26,8 +26,8 @@ export const TRANS_TYPES = [
]; ];
export enum UserPersonaEnum { export enum UserPersonaEnum {
OPERATOR = 'Operator', OPERATOR = 'operator',
MERCHANT = 'Merchant' MERCHANT = 'merchant'
} }
export enum AlertTypeEnum { export enum AlertTypeEnum {
@ -67,3 +67,10 @@ export enum DataTypeEnum {
DATE = 'DATE', DATE = 'DATE',
DATE_TIME = 'DATE_TIME' DATE_TIME = 'DATE_TIME'
} }
export enum ScreenSizeEnum {
XS = 'XS', // < 600 => mobile handsets
SM = 'SM', // 600 - 839 => tab portrait
MD = 'MD', // 840 - 1439 => tab landscape & small laptops
LG = 'LG' // >1440 => big laptops
}

@ -45,7 +45,6 @@ import { AutoFocusDirective } from './directive/auto-focus.directive';
import { RemoveLeadingZerosPipe } from './pipes/app.pipe'; import { RemoveLeadingZerosPipe } from './pipes/app.pipe';
import { OpenChannelComponent } from './components/data-modal/open-channel/open-channel.component'; import { OpenChannelComponent } from './components/data-modal/open-channel/open-channel.component';
import { ShowPubkeyComponent } from './components/data-modal/show-pubkey/show-pubkey.component'; import { ShowPubkeyComponent } from './components/data-modal/show-pubkey/show-pubkey.component';
import { CommonService } from './services/common.service';
import { SocketService } from './services/socket.service'; import { SocketService } from './services/socket.service';
@NgModule({ @NgModule({
@ -183,9 +182,9 @@ import { SocketService } from './services/socket.service';
], ],
providers: [ providers: [
{ provide: PERFECT_SCROLLBAR_CONFIG, useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG }, { provide: PERFECT_SCROLLBAR_CONFIG, useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG },
{ provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: true, autoFocus: true, disableClose: true, role: 'dialog', width: '700px' } }, { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { hasBackdrop: true, autoFocus: true, disableClose: true, role: 'dialog', width: '55%' } },
{ provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 2000, verticalPosition: 'bottom', panelClass: 'rtl-snack-bar' } }, { provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: { duration: 2000, verticalPosition: 'bottom', panelClass: 'rtl-snack-bar' } },
CommonService, DecimalPipe, SocketService DecimalPipe, SocketService
] ]
}) })
export class SharedModule { } export class SharedModule { }

@ -54,7 +54,7 @@ $dark-bright-background: (
background:map_get($dark-grey, 900), background:map_get($dark-grey, 900),
hover: rgba(black, 0.04), hover: rgba(black, 0.04),
card: map_get($dark-grey, 700), card: map_get($dark-grey, 700),
dialog: map_get($dark-grey, 700), dialog: map_get($dark-grey, 600),
disabled-button: map_get($dark-grey, 300), disabled-button: map_get($dark-grey, 300),
raised-button: map_get($dark-grey, 400), raised-button: map_get($dark-grey, 400),
focused-button: $dark-focused, focused-button: $dark-focused,

@ -88,7 +88,16 @@
} }
.chart-legend .legend-label:hover, .chart-legend .legend-label .active .legend-label-text { .chart-legend .legend-label:hover, .chart-legend .legend-label .active .legend-label-text {
color: $foreground-text !important; color: $foreground-text !important;
} }
.cdk-overlay-dark-backdrop {
background: rgba(255, 255, 255, 0.32);
}
.mat-tree {
background: mat-color($background, dialog);
}
.mat-expansion-panel {
border: 1px solid $foreground-secondary-text;
}
} }
&.day { &.day {
@ -152,6 +161,16 @@
.mat-progress-bar-fill::after { .mat-progress-bar-fill::after {
background-color: mat-color($primary, 900); background-color: mat-color($primary, 900);
} }
.modal-qr-code-container {
background: $foreground-divider;
}
.mat-expansion-panel.flat-expansion-panel {
box-shadow: none;
padding: 0;
border: 1px solid $foreground-divider;
border-radius: 4px;
background: none;
}
} }
.mat-progress-bar-buffer { .mat-progress-bar-buffer {
@ -161,6 +180,7 @@
.foreground-secondary-text { .foreground-secondary-text {
color: $foreground-secondary-text !important; color: $foreground-secondary-text !important;
white-space: pre-line; white-space: pre-line;
overflow-wrap: break-word;
} }
.foreground.mat-progress-spinner circle, .foreground.mat-spinner circle { .foreground.mat-progress-spinner circle, .foreground.mat-spinner circle {
@ -298,10 +318,6 @@
} }
} }
.modal-qr-code-container {
background: $foreground-divider;
}
.tab-badge { .tab-badge {
& .mat-badge-content { & .mat-badge-content {
width: $dot-size * 1.5; width: $dot-size * 1.5;
@ -322,14 +338,6 @@
} }
} }
.mat-expansion-panel.flat-expansion-panel {
box-shadow: none;
padding: 0;
border: 1px solid $foreground-divider;
border-radius: 4px;
background: none;
}
.rtl-snack-bar .mat-simple-snackbar { .rtl-snack-bar .mat-simple-snackbar {
justify-content: center; justify-content: center;
align-content: center; align-content: center;

@ -219,7 +219,6 @@ body {
.mat-form-field-wrapper { .mat-form-field-wrapper {
width: 100%; width: 100%;
margin: 0 1.5rem 0 0;
} }
.mat-select { .mat-select {
@ -298,6 +297,10 @@ body {
margin-right: 0 !important; margin-right: 0 !important;
} }
.mr-5px {
margin-right: 0.5rem !important;
}
.mr-1 { .mr-1 {
margin-right: 1rem !important; margin-right: 1rem !important;
} }
@ -506,6 +509,10 @@ body {
overflow-y: hidden !important; overflow-y: hidden !important;
} }
.overflow-x-hidden {
overflow-x: hidden !important;
}
.overflow-auto { .overflow-auto {
overflow: auto; overflow: auto;
} }
@ -845,10 +852,20 @@ table {
font-weight: 900 !important; font-weight: 900 !important;
} }
.pre-wrap {
white-space: pre-wrap !important;
}
.display-none { .display-none {
display: none !important; display: none !important;
} }
.lightning-send-tab {
& .mat-tab-body-content {
padding-left: 0.5rem;
}
}
.ellipsis-child { .ellipsis-child {
flex: 1; flex: 1;
white-space: nowrap; white-space: nowrap;

@ -3,7 +3,7 @@ import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { Store } from '@ngrx/store'; import { Store } from '@ngrx/store';
import { Actions, Effect, ofType } from '@ngrx/effects'; import { Actions, Effect, ofType } from '@ngrx/effects';
import { of, Subject, forkJoin, Observable } from 'rxjs'; import { of, Subject, forkJoin } from 'rxjs';
import { map, mergeMap, catchError, take, withLatestFrom } from 'rxjs/operators'; import { map, mergeMap, catchError, take, withLatestFrom } from 'rxjs/operators';
import { MatDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
@ -12,8 +12,9 @@ import { MatSnackBar } from '@angular/material/snack-bar';
import { environment, API_URL } from '../../environments/environment'; import { environment, API_URL } from '../../environments/environment';
import { LoggerService } from '../shared/services/logger.service'; import { LoggerService } from '../shared/services/logger.service';
import { SessionService } from '../shared/services/session.service'; import { SessionService } from '../shared/services/session.service';
import { CommonService } from '../shared/services/common.service';
import { Settings, RTLConfiguration } from '../shared/models/RTLconfig'; import { Settings, RTLConfiguration } from '../shared/models/RTLconfig';
import { AuthenticateWith, CURRENCY_UNITS, AlertTypeEnum, DataTypeEnum } from '../shared/services/consts-enums-functions'; import { AuthenticateWith, CURRENCY_UNITS, AlertTypeEnum, ScreenSizeEnum } from '../shared/services/consts-enums-functions';
import { SpinnerDialogComponent } from '../shared/components/data-modal/spinner-dialog/spinner-dialog.component'; import { SpinnerDialogComponent } from '../shared/components/data-modal/spinner-dialog/spinner-dialog.component';
import { AlertMessageComponent } from '../shared/components/data-modal/alert-message/alert-message.component'; import { AlertMessageComponent } from '../shared/components/data-modal/alert-message/alert-message.component';
@ -28,6 +29,9 @@ import { ErrorMessageComponent } from '../shared/components/data-modal/error-mes
export class RTLEffects implements OnDestroy { export class RTLEffects implements OnDestroy {
dialogRef: any; dialogRef: any;
CHILD_API_URL = API_URL + '/lnd'; CHILD_API_URL = API_URL + '/lnd';
screenSize = '';
alertWidth = '55%';
confirmWidth = '70%';
private unSubs: Array<Subject<void>> = [new Subject(), new Subject()]; private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
constructor( constructor(
@ -36,9 +40,10 @@ export class RTLEffects implements OnDestroy {
private store: Store<fromRTLReducer.RTLState>, private store: Store<fromRTLReducer.RTLState>,
private logger: LoggerService, private logger: LoggerService,
private sessionService: SessionService, private sessionService: SessionService,
private commonService: CommonService,
public dialog: MatDialog, public dialog: MatDialog,
private snackBar: MatSnackBar, private snackBar: MatSnackBar,
private router: Router) { } private router: Router) {}
@Effect({ dispatch: false }) @Effect({ dispatch: false })
openSpinner = this.actions$.pipe( openSpinner = this.actions$.pipe(
@ -60,6 +65,7 @@ export class RTLEffects implements OnDestroy {
openAlert = this.actions$.pipe( openAlert = this.actions$.pipe(
ofType(RTLActions.OPEN_ALERT), ofType(RTLActions.OPEN_ALERT),
map((action: RTLActions.OpenAlert) => { map((action: RTLActions.OpenAlert) => {
action.payload.width = this.alertWidth;
if(action.payload.data.component) { if(action.payload.data.component) {
this.dialogRef = this.dialog.open(action.payload.data.component, action.payload); this.dialogRef = this.dialog.open(action.payload.data.component, action.payload);
} else { } else {
@ -80,6 +86,7 @@ export class RTLEffects implements OnDestroy {
openConfirm = this.actions$.pipe( openConfirm = this.actions$.pipe(
ofType(RTLActions.OPEN_CONFIRMATION), ofType(RTLActions.OPEN_CONFIRMATION),
map((action: RTLActions.OpenConfirmation) => { map((action: RTLActions.OpenConfirmation) => {
action.payload.width = this.confirmWidth;
this.dialogRef = this.dialog.open(ConfirmationMessageComponent, action.payload); this.dialogRef = this.dialog.open(ConfirmationMessageComponent, action.payload);
}) })
); );
@ -115,6 +122,17 @@ export class RTLEffects implements OnDestroy {
appConfigFetch = this.actions$.pipe( appConfigFetch = this.actions$.pipe(
ofType(RTLActions.FETCH_RTL_CONFIG), ofType(RTLActions.FETCH_RTL_CONFIG),
mergeMap((action: RTLActions.FetchRTLConfig) => { mergeMap((action: RTLActions.FetchRTLConfig) => {
this.screenSize = this.commonService.getScreenSize();
if(this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
this.alertWidth = '95%';
this.confirmWidth = '95%';
} else if(this.screenSize === ScreenSizeEnum.MD) {
this.alertWidth = '80%';
this.confirmWidth = '80%';
} else {
this.alertWidth = '55%';
this.confirmWidth = '70%';
}
this.store.dispatch(new RTLActions.ClearEffectErrorRoot('FetchRTLConfig')); this.store.dispatch(new RTLActions.ClearEffectErrorRoot('FetchRTLConfig'));
return this.httpClient.get(environment.CONF_API + '/rtlconf'); return this.httpClient.get(environment.CONF_API + '/rtlconf');
}), }),

Loading…
Cancel
Save