Added nodes list in the side nav

Added nodes list in the side nav
pull/260/head
Shahana Farooqui 5 years ago
parent 470ec25fe5
commit 8f92611ebb

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="16x16" href="assets/images/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/images/favicon/site.webmanifest">
<link rel="stylesheet" href="styles.4e596b7e78bd09404984.css"></head>
<link rel="stylesheet" href="styles.5123c011b428e0af4a77.css"></head>
<body>
<rtl-app></rtl-app>
<script src="runtime.86a778115957b36fdd25.js"></script><script src="polyfills-es5.92f4069201c83f4833ef.js" nomodule></script><script src="polyfills.5ddcccdb990eb395f306.js"></script><script src="main.5276f974859f4c9d4d06.js"></script></body>
<script src="runtime.9b2fce285f8c03dde3ad.js"></script><script src="polyfills-es5.92f4069201c83f4833ef.js" nomodule></script><script src="polyfills.5ddcccdb990eb395f306.js"></script><script src="main.831294c4c8228a1dbac5.js"></script></body>
</html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -4,29 +4,24 @@
<button *ngIf="settings.menu === 'vertical'" class="top-toolbar-icon" mat-icon-button (click)="sideNavToggle()">
<mat-icon>menu</mat-icon>
</button>
<button *ngIf="settings.fontSize === 'small-font' && settings.menu === 'vertical' && settings.menuType !== 'mini' && !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">
<path fill="currentColor" *ngIf="!settings.flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
<path fill="currentColor" *ngIf="settings.flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
</svg>
</button>
<button *ngIf="settings.fontSize === 'regular-font' && settings.menu === 'vertical' && settings.menuType !== 'mini' && !smallScreen" mat-icon-button (click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
<button *ngIf="settings.fontSize === 'regular-font' && settings.menu === 'vertical' && !smallScreen" mat-icon-button (click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
<svg class="top-toolbar-icon icon-pinned" viewBox="0 0 32 32">
<path fill="currentColor" *ngIf="!settings.flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
<path fill="currentColor" *ngIf="settings.flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
</svg>
</button>
<button *ngIf="settings.fontSize === 'large-font' && settings.menu === 'vertical' && settings.menuType !== 'mini' && !smallScreen" mat-icon-button (click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
<button *ngIf="settings.fontSize === 'large-font' && settings.menu === 'vertical' && !smallScreen" mat-icon-button (click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
<svg class="top-toolbar-icon icon-pinned" viewBox="0 0 24 24">
<path fill="currentColor" *ngIf="!settings.flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
<path fill="currentColor" *ngIf="settings.flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
</svg>
</button>
<div *ngIf="appConfig.nodes.length > 1" fxLayout="row" fxLayoutAlign="space-between center" [ngClass]="{'ml-1': settings.fontSize !== 'large-font', 'ml-2': settings.fontSize === 'large-font'}">
<div *ngFor="let node of appConfig.nodes" tabindex="1" fxFlex="100">
<button [ngClass]="{'selected-node':node.index === selNode.index, 'app-config-nodes': true}" (click)="onSelectionChange(node)" fxLayoutAlign="center center" mat-button type="button">{{node.lnNode}} ({{node.lnImplementation}})</button>
</div>
</div>
</div>
<div fxLayoutAlign="space-between center">
<rtl-top-menu></rtl-top-menu>

@ -1,5 +1,5 @@
import { Component, OnInit, AfterViewInit, OnDestroy, ViewChild, HostListener } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators';
@ -9,6 +9,7 @@ import { UserIdleService } from 'angular-user-idle';
import * as sha256 from 'sha256';
import { LoggerService } from './shared/services/logger.service';
import { CommonService } from './shared/services/common.service';
import { SessionService } from './shared/services/session.service';
import { RTLConfiguration, Settings, LightningNode, GetInfoRoot } from './shared/models/RTLconfig';
@ -22,7 +23,6 @@ import * as fromRTLReducer from './store/rtl.reducers';
})
export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('sideNavigation', { static: false }) sideNavigation: any;
@ViewChild('settingSidenav', { static: true }) settingSidenav: any;
public selNode: LightningNode;
public settings: Settings;
public information: GetInfoRoot = {};
@ -31,9 +31,9 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
public appConfig: RTLConfiguration;
public accessKey = '';
public smallScreen = false;
unsubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
unsubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions,
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>, private actions$: Actions,
private userIdle: UserIdleService, private router: Router, private sessionService: SessionService) {}
ngOnInit() {
@ -60,7 +60,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
this.flgLoading[0] = false;
}
});
this.actions$.pipe(takeUntil(this.unsubs[1]),
filter((action) => action.type === RTLActions.SET_RTL_CONFIG))
.subscribe((action: (RTLActions.SetRTLConfig)) => {
@ -76,14 +75,14 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
this.settings.menu === 'horizontal' ||
this.settings.menuType === 'compact' ||
this.settings.menuType === 'mini') {
this.settingSidenav.toggle(); // To dynamically update the width to 100% after side nav is closed
setTimeout(() => { this.settingSidenav.toggle(); }, 100);
}
this.sideNavigation.toggle(); // To dynamically update the width to 100% after side nav is closed
setTimeout(() => { this.sideNavigation.toggle(); }, 100);
}
}
});
this.userIdle.startWatching();
this.userIdle.onTimerStart().subscribe(count => {});
this.userIdle.onTimeout().subscribe(() => {
this.userIdle.onTimerStart().pipe(takeUntil(this.unsubs[2])).subscribe(count => {});
this.userIdle.onTimeout().pipe(takeUntil(this.unsubs[3])).subscribe(() => {
if (this.sessionService.getItem('token')) {
this.logger.warn('Time limit exceeded for session inactivity! Logging out!');
this.store.dispatch(new RTLActions.OpenAlert({ width: '75%', data: {
@ -94,6 +93,15 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
this.userIdle.resetTimer();
}
});
this.commonService.containerWidthChanged.pipe(takeUntil(this.unsubs[4]))
.subscribe((fieldType: string) => {
if(fieldType !== 'menuType') {
this.sideNavToggle();
} else {
this.sideNavigation.toggle(); // To dynamically update the width to 100% after side nav is closed
setTimeout(() => { this.sideNavigation.toggle(); }, 0);
}
});
}
private readAccessKey() {
@ -102,13 +110,11 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
}
ngAfterViewInit() {
if (!this.settings.flgSidenavPinned) {
if (this.settings.menuType.toLowerCase() !== 'regular' || !this.settings.flgSidenavPinned) {
this.sideNavigation.close();
this.settingSidenav.toggle();
}
if (window.innerWidth <= 768) {
this.sideNavigation.close();
this.settingSidenav.toggle();
}
}
@ -138,12 +144,6 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
this.logger.info('Copied Text: ' + payload);
}
onSelectionChange(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() {
this.unsubs.forEach(unsub => {
unsub.next();

@ -18,7 +18,6 @@ import { CLPaymentsComponent } from './payments/send-receive/payments.component'
import { CLPeersComponent } from './peers/peers.component';
import { CLForwardingHistoryComponent } from './forwarding-history/forwarding-history.component';
import { CommonService } from '../shared/services/common.service';
import { LoggerService, ConsoleLoggerService } from '../shared/services/logger.service';
import { CLUnlockedGuard } from '../shared/services/auth.guard';
@ -45,8 +44,7 @@ import { CLUnlockedGuard } from '../shared/services/auth.guard';
],
providers: [
{ provide: LoggerService, useClass: ConsoleLoggerService },
CLUnlockedGuard,
CommonService
CLUnlockedGuard
],
bootstrap: [CLRootComponent]
})

@ -24,7 +24,6 @@ import { ChannelBackupComponent } from './channels/channel-backup/channel-backup
import { ChannelRestoreComponent } from './channels/channel-restore/channel-restore.component';
import { QueryRoutesComponent } from './payments/query-routes/query-routes.component';
import { CommonService } from '../shared/services/common.service';
import { LoggerService, ConsoleLoggerService } from '../shared/services/logger.service';
import { LNDUnlockedGuard } from '../shared/services/auth.guard';
@ -57,8 +56,7 @@ import { LNDUnlockedGuard } from '../shared/services/auth.guard';
],
providers: [
{ provide: LoggerService, useClass: ConsoleLoggerService },
LNDUnlockedGuard,
CommonService
LNDUnlockedGuard
],
bootstrap: [LNDRootComponent]
})

@ -7,6 +7,7 @@ import { faTools } from '@fortawesome/free-solid-svg-icons';
import { LightningNode, Settings, RTLConfiguration, GetInfoRoot } from '../../models/RTLconfig';
import { LoggerService } from '../../services/logger.service';
import { CommonService } from '../../services/common.service';
import * as RTLActions from '../../../store/rtl.actions';
import * as fromRTLReducer from '../../../store/rtl.reducers';
@ -31,7 +32,7 @@ export class AppSettingsComponent implements OnInit, OnDestroy {
public selectedThemeMode = {id: 'day', name: 'Day'};
public selectedThemeColor = 'blue';
public currencyUnit = 'BTC';
public smallerCurrencyUnit = 'SATS';
public smallerCurrencyUnit = 'Sats';
public showSettingOption = true;
public appConfig: RTLConfiguration;
public previousSettings: Settings;
@ -39,7 +40,7 @@ export class AppSettingsComponent implements OnInit, OnDestroy {
unsubs: Array<Subject<void>> = [new Subject(), new Subject()];
@Output('done') done: EventEmitter<void> = new EventEmitter();
constructor(private logger: LoggerService, private store: Store<fromRTLReducer.RTLState>) {}
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<fromRTLReducer.RTLState>) {}
ngOnInit() {
this.store.select('root')
@ -59,7 +60,7 @@ export class AppSettingsComponent implements OnInit, OnDestroy {
this.showSettingOption = false;
}
this.information = rtlStore.nodeData;
this.smallerCurrencyUnit = (undefined !== this.information && undefined !== this.information.smaller_currency_unit) ? this.information.smaller_currency_unit : 'SATS';
this.smallerCurrencyUnit = (undefined !== this.information && undefined !== this.information.smaller_currency_unit) ? this.information.smaller_currency_unit : 'Sats';
this.currencyUnit = (undefined !== this.information && undefined !== this.information.currency_unit) ? this.information.currency_unit : 'BTC';
this.previousSettings = JSON.parse(JSON.stringify(this.selNode.settings));
this.logger.info(rtlStore);
@ -68,6 +69,7 @@ export class AppSettingsComponent implements OnInit, OnDestroy {
public chooseMenuType() {
this.selNode.settings.menuType = this.selectedMenuType.id;
this.commonService.changeContainerWidth('menuType');
}
public chooseFontSize() {
@ -86,6 +88,9 @@ export class AppSettingsComponent implements OnInit, OnDestroy {
}, 10);
} else {
this.selNode.settings[toggleField] = !this.selNode.settings[toggleField];
if(toggleField === 'flgSidenavOpened' || toggleField === 'flgSidenavPinned') {
this.commonService.changeContainerWidth(toggleField);
}
}
}

@ -36,6 +36,13 @@ export class HorizontalNavigationComponent implements OnInit, OnDestroy {
} else {
this.menuNodes = MENU_DATA.LNDChildren;
}
if(this.sessionService.getItem('token') && this.menuNodes[this.menuNodes.length - 1].id !== 200) {
this.menuNodes.push({id: 200, parentId: 0, name: 'Logout', iconType: 'FA', icon: faEject});
} else {
if(this.menuNodes[this.menuNodes.length - 1].id === 200) {
this.menuNodes.pop();
}
}
});
this.sessionService.watchSession()
.pipe(takeUntil(this.unSubs[1]))
@ -43,7 +50,9 @@ export class HorizontalNavigationComponent implements OnInit, OnDestroy {
if(session.token) {
this.menuNodes.push({id: 200, parentId: 0, name: 'Logout', iconType: 'FA', icon: faEject});
} else {
this.menuNodes.pop();
if(this.menuNodes[this.menuNodes.length - 1].id === 200) {
this.menuNodes.pop();
}
}
});
}

@ -1,109 +1,109 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between space-between">
<div>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" class="mt-2"
*ngIf="settings.menuType !== 'compact' && settings.menuType !== 'mini'">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}">
<div (click)="onChildNavClicked(node)">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4"></fa-icon>
<span *ngIf="settings.menuType !== 'compact' && settings.menuType !== 'mini'">{{node.name}}</span><span
*ngIf="node.name === 'Peers/Channels'" [matBadgeHidden]="numPendingChannels<1"
matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="primary"></span>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start start">
<mat-select *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="1">
{{node.lnNode}} ({{node.lnImplementation}})
</mat-option>
</mat-select>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" *ngIf="settings.menuType !== 'compact' && settings.menuType !== 'mini'">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}">
<div (click)="onChildNavClicked(node)">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4"></fa-icon>
<span *ngIf="settings.menuType !== 'compact' && settings.menuType !== 'mini'">{{node.name}}</span><span
*ngIf="node.name === 'Peers/Channels'" [matBadgeHidden]="numPendingChannels<1"
matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="primary"></span>
</div>
</mat-tree-node>
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<div fxFlex="89" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4"></fa-icon>
<span>{{node.name}}</span>
</div>
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name"
fxLayoutAlign="end center">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
</div>
</mat-tree-node>
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<div fxFlex="89" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4"></fa-icon>
<span>{{node.name}}</span>
</div>
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-nested-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout"
*ngIf="settings.menuType !== 'compact' && settings.menuType !== 'mini' && showLogout" class="mt-minus-1">
<mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
<span>{{node.name}}</span>
</mat-tree-node>
</mat-tree>
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name"
fxLayoutAlign="end center">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
</div>
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-nested-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout"
*ngIf="settings.menuType !== 'compact' && settings.menuType !== 'mini' && showLogout">
<mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-4" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
<span>{{node.name}}</span>
</mat-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" class="mt-2"
*ngIf="settings.menuType === 'compact'">
<mat-tree-node fxLayout="row" matTreeNodeToggle fxLayoutAlign="start center" *matTreeNodeDef="let node"
(click)="onChildNavClicked(node)" routerLinkActive="active-link" routerLink="{{node.link}}">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
<span>{{node.name}}<span *ngIf="node.name === 'Peers/Channels'" [matBadgeHidden]="numPendingChannels<1"
matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="primary"></span></span>
</mat-tree-node>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" *ngIf="settings.menuType === 'compact'">
<mat-tree-node fxLayout="row" matTreeNodeToggle fxLayoutAlign="start center" *matTreeNodeDef="let node"
(click)="onChildNavClicked(node)" routerLinkActive="active-link" routerLink="{{node.link}}">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
<span>{{node.name}}<span *ngIf="node.name === 'Peers/Channels'" [matBadgeHidden]="numPendingChannels<1"
matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="primary"></span></span>
</mat-tree-node>
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<div fxFlex="89" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
<span>{{node.name}}</span>
</div>
<button fxFlex="11" mat-icon-button [attr.aria-label]="'toggle ' + node.name" fxLayoutAlign="end center">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
</div>
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
<ng-container matTreeNodeOutlet></ng-container>
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<div fxFlex="89" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
<span>{{node.name}}</span>
</div>
</mat-nested-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout"
*ngIf="settings.menuType === 'compact' && showLogout" class="mt-minus-1">
<mat-tree-node fxLayout="row" fxLayoutAlign="start center" *matTreeNodeDef="let node"
(click)="onClick(node)">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
<span>{{node.name}}</span>
</mat-tree-node>
</mat-tree>
<button fxFlex="11" mat-icon-button [attr.aria-label]="'toggle ' + node.name" fxLayoutAlign="end center">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
</div>
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-nested-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout"
*ngIf="settings.menuType === 'compact' && showLogout">
<mat-tree-node fxLayout="row" fxLayoutAlign="start center" *matTreeNodeDef="let node"
(click)="onClick(node)">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-small mr-1"></fa-icon>
<span>{{node.name}}</span>
</mat-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" class="mt-2"
*ngIf="settings.menuType === 'mini'">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}">
<div (click)="onChildNavClicked(node)">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"><span
*ngIf="node.name === 'Peers/Channels'"
[matBadgeHidden]="numPendingChannels<1" matBadge="{{numPendingChannels}}" matBadgeOverlap="false"
matBadgeColor="primary"></span></fa-icon>
</div>
</div>
</mat-tree-node>
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<div fxFlex="89" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
</div>
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name"
fxLayoutAlign="end center">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControlNested" *ngIf="settings.menuType === 'mini'">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle routerLinkActive="active-link" routerLink="{{node.link}}">
<div (click)="onChildNavClicked(node)">
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"><span
*ngIf="node.name === 'Peers/Channels'"
[matBadgeHidden]="numPendingChannels<1" matBadge="{{numPendingChannels}}" matBadgeOverlap="false"
matBadgeColor="primary"></span></fa-icon>
</div>
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-tree-node>
<mat-nested-tree-node fxLayout="column" *matTreeNodeDef="let node; when: hasChild" matTreeNodeToggle>
<div fxLayout="row" fxLayoutAlign="start center" class="mat-nested-tree-node-parent">
<div fxFlex="89" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
</div>
</mat-nested-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout"
*ngIf="settings.menuType === 'mini' && showLogout" class="mt-minus-1">
<mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
</mat-tree-node>
</mat-tree>
</div>
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button [attr.aria-label]="'toggle ' + node.name"
fxLayoutAlign="end center">
<mat-icon class="mat-icon-rtl-mirror">
{{treeControlNested.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
</div>
<div [class.tree-children-invisible]="!treeControlNested.isExpanded(node)" class="mat-nested-tree-node-child">
<ng-container matTreeNodeOutlet></ng-container>
</div>
</mat-nested-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout"
*ngIf="settings.menuType === 'mini' && showLogout">
<mat-tree-node *matTreeNodeDef="let node" (click)="onClick(node)" fxLayoutAlign="start center">
<fa-icon *ngIf="node.iconType === 'FA'" [icon]="node.icon" class="fa-icon-regular" matTooltip="{{node.name}}" matTooltipPosition="right"></fa-icon>
</mat-tree-node>
</mat-tree>
</div>

@ -10,7 +10,7 @@ import { NestedTreeControl } from '@angular/cdk/tree';
import { MatTreeNestedDataSource } from '@angular/material/tree';
import { faEject } from '@fortawesome/free-solid-svg-icons';
import { LightningNode, Settings, GetInfoRoot } from '../../../models/RTLconfig';
import { RTLConfiguration, LightningNode, Settings, GetInfoRoot } from '../../../models/RTLconfig';
import { LoggerService } from '../../../services/logger.service';
import { SessionService } from '../../../services/session.service';
import { GetInfoChain } from '../../../models/lndModels';
@ -28,6 +28,7 @@ import * as fromRTLReducer from '../../../../store/rtl.reducers';
export class SideNavigationComponent implements OnInit, OnDestroy {
@Output() ChildNavClicked = new EventEmitter<any>();
faEject = faEject;
public appConfig: RTLConfiguration;
public selNode: LightningNode;
public settings: Settings;
public version = '';
@ -55,9 +56,13 @@ export class SideNavigationComponent implements OnInit, OnDestroy {
}
ngOnInit() {
let token = this.sessionService.getItem('token');
this.showLogout = token ? true : false;
this.flgLoading = token ? true : false;
this.store.select('root')
.pipe(takeUntil(this.unSubs[0]))
.subscribe(rtlStore => {
this.appConfig = rtlStore.appConfig;
this.selNode = rtlStore.selNode;
this.settings = this.selNode.settings;
this.information = rtlStore.nodeData;
@ -124,6 +129,12 @@ export class SideNavigationComponent implements OnInit, OnDestroy {
this.ChildNavClicked.emit(node);
}
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() {
this.unSubs.forEach(completeSub => {
completeSub.next();

@ -1,7 +1,9 @@
import { Injectable } from '@angular/core';
import { Injectable, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable()
export class CommonService {
export class CommonService implements OnDestroy {
containerWidthChanged = new Subject<string>();
sortDescByKey(array, key) {
return array.sort(function (a, b) {
@ -17,4 +19,12 @@ export class CommonService {
}).replace(/\s+/g, '');
}
changeContainerWidth(fieldType: string) {
this.containerWidthChanged.next(fieldType);
}
ngOnDestroy() {
this.containerWidthChanged.next();
this.containerWidthChanged.complete();
}
}

@ -29,6 +29,7 @@ import { ServerConfigComponent } from './components/server-config/server-config.
import { ErrorComponent } from './components/error/error.component';
import { ClipboardDirective } from './directive/clipboard.directive';
import { RemoveLeadingZerosPipe } from './pipes/remove-leading-zero.pipe';
import { CommonService } from './services/common.service';
@NgModule({
imports: [
@ -141,7 +142,8 @@ import { RemoveLeadingZerosPipe } from './pipes/remove-leading-zero.pipe';
ConfirmationMessageComponent
],
providers: [
{ 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: '700px' } },
CommonService
]
})
export class SharedModule { }

@ -208,7 +208,7 @@
color: mat-color($primary);
}
.active-link, .active-link .sidenav-img svg {
.active-link, .active-link .fa-icon-small {
color: mat-color($primary);
font-weight: 500;
cursor: pointer;
@ -232,19 +232,6 @@
fill: $foreground-color;
}
// .mat-menu-panel {
// background-color: mat-color($primary);
// }
.mat-button.app-config-nodes {
border-radius: 0;
border-bottom: 2px solid mat-color($primary);
}
.mat-button.app-config-nodes.selected-node {
border-bottom: 2px solid mat-color($accent);
}
.h-active-link {
border-bottom: 2px solid mat-color($accent);
}
@ -257,10 +244,6 @@
}
}
.mat-primary .mat-select, .mat-primary .mat-select-trigger, .mat-primary .mat-select-value, .mat-primary .mat-select-arrow {
// color: white !important;
}
.mat-primary .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple),
.mat-primary .mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
background: none;
@ -327,7 +310,6 @@
background: mat-color($primary, lighter);
border-radius: 12rem;
&:hover {
// background: mat-color($primary, darker);
background: mat-color($accent);
color: mat-color($primary, darker);
}

@ -35,7 +35,7 @@ body {
font-size: 1.8rem;
line-height: 2rem;
}
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-option, .mat-select, .mat-selection-list .mat-list-item {
font-size: 1.2rem !important;
}
.logo {
@ -67,7 +67,7 @@ body {
.material-icons {
font-size: 2.8rem;
}
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-option, .mat-select, .mat-selection-list .mat-list-item {
font-size: 1.4rem !important;
}
.logo {
@ -99,7 +99,7 @@ body {
.material-icons {
font-size: 3.8rem;
}
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-selection-list .mat-list-item {
.mat-expansion-panel-header, .mat-menu-item, .mat-list .mat-list-item, .mat-nav-list .mat-list-item, .mat-option, .mat-select, .mat-selection-list .mat-list-item {
font-size: 1.6rem !important;
}
.logo {
@ -134,8 +134,14 @@ body {
.inner-sidenav-content {
top: $gap;
}
.mat-sidenav-container .mat-drawer-content.mat-sidenav-content {
margin-left: 0;
}
}
&.compact {
.mat-sidenav-container .mat-sidenav-content {
margin-left: $compact-sidenav-width;
}
.sidenav{
width: $compact-sidenav-width;
}
@ -149,9 +155,15 @@ body {
}
}
&.mini {
.mat-sidenav-container .mat-sidenav-content {
margin-left: $mini-sidenav-width;
}
.sidenav {
width: $mini-sidenav-width;
}
.mat-select.multi-node-select {
width: 84%;
}
.mat-tree-node, .mat-nested-tree-node-parent {
min-height: 5.4rem;
height: 5.4rem;
@ -793,3 +805,7 @@ tr.mat-row:hover {
width: $icon-size !important;
height: $icon-size !important;
}
.mat-select.multi-node-select {
width: 87%;
}
Loading…
Cancel
Save