UX fixes
pull/260/head
Shahana Farooqui 4 years ago
parent 893d5e5c30
commit 1092db21a0

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.eada08346e92ee5fb050.css"></head>
<link rel="stylesheet" href="styles.b99c718d4d27fdf4c414.css"></head>
<body>
<rtl-app></rtl-app>
<script src="runtime.565b0291008b32f52746.js" defer></script><script src="polyfills-es5.b8e32dec482ae69710a2.js" nomodule defer></script><script src="polyfills.ebf9033c33aa4a5af12a.js" defer></script><script src="main.5ee3e0bcee6a426b2412.js" defer></script></body>
<script src="runtime.92f94c9cf2c2cf371c41.js" defer></script><script src="polyfills-es5.b8e32dec482ae69710a2.js" nomodule defer></script><script src="polyfills.ebf9033c33aa4a5af12a.js" defer></script><script src="main.7966aa0a302b936d3da3.js" defer></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,a,i=r[0],c=r[1],f=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&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:"df8a42ae5fabe34ad893",6:"ce201f8313431c83a606",7:"f0a3f44d200d9238d4bc"}[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],l=r[2],p=0,s=[];p<i.length;p++)a=i[p],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);s.length;)s.shift()();return u.push.apply(u,l||[]),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:"3de0a26964d460363d96",6:"42170a37bd5aeec6fdbd",7:"cbb064eabe7f028412c2"}[e]+".js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);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 l=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 l=0;l<i.length;l++)r(i[l]);var f=c;t()}([]);

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -113,15 +113,15 @@ exports.updateUISettings = (req, res, next) => {
config.nodes.find(node => {
if(node.index == common.selectedNode.index) {
node.Settings.userPersona = req.body.updatedSettings.userPersona;
node.Settings.flgSidenavOpened = req.body.updatedSettings.flgSidenavOpened;
node.Settings.flgSidenavPinned = req.body.updatedSettings.flgSidenavPinned;
node.Settings.menu = req.body.updatedSettings.menu;
node.Settings.menuType = req.body.updatedSettings.menuType;
node.Settings.fontSize = req.body.updatedSettings.fontSize;
node.Settings.themeMode = req.body.updatedSettings.themeMode;
node.Settings.themeColor = req.body.updatedSettings.themeColor;
node.Settings.satsToBTC = req.body.updatedSettings.satsToBTC;
node.Settings.currencyUnit = req.body.updatedSettings.currencyUnit;
node.Settings.flgSidenavOpened = true; // req.body.updatedSettings.flgSidenavOpened;
node.Settings.flgSidenavPinned = true; // req.body.updatedSettings.flgSidenavPinned;
node.Settings.menu = 'vertical'; // req.body.updatedSettings.menu;
node.Settings.menuType = 'regular'; // req.body.updatedSettings.menuType;
node.Settings.fontSize = 'regular-font'; // req.body.updatedSettings.fontSize;
node.Settings.satsToBTC = false; // req.body.updatedSettings.satsToBTC;
}
});
try {
@ -141,15 +141,15 @@ exports.updateUISettings = (req, res, next) => {
var config = ini.parse(fs.readFileSync(RTLConfFile, 'utf-8'));
const settingsTemp = config.Settings;
settingsTemp.userPersona = req.body.updatedSettings.userPersona;
settingsTemp.flgSidenavOpened = req.body.updatedSettings.flgSidenavOpened;
settingsTemp.flgSidenavPinned = req.body.updatedSettings.flgSidenavPinned;
settingsTemp.menu = req.body.updatedSettings.menu;
settingsTemp.menuType = req.body.updatedSettings.menuType;
settingsTemp.fontSize = req.body.updatedSettings.fontSize;
settingsTemp.themeMode = req.body.updatedSettings.themeMode;
settingsTemp.themeColor = req.body.updatedSettings.themeColor;
settingsTemp.satsToBTC = req.body.updatedSettings.satsToBTC;
settingsTemp.currencyUnit = req.body.updatedSettings.currencyUnit;
settingsTemp.flgSidenavOpened = true; // req.body.updatedSettings.flgSidenavOpened;
settingsTemp.flgSidenavPinned = true; // req.body.updatedSettings.flgSidenavPinned;
settingsTemp.menu = 'vertical'; // req.body.updatedSettings.menu;
settingsTemp.menuType = 'regular'; // req.body.updatedSettings.menuType;
settingsTemp.fontSize = 'regular-font'; // req.body.updatedSettings.fontSize;
settingsTemp.satsToBTC = false; // req.body.updatedSettings.satsToBTC;
delete config.Settings;
fs.writeFileSync(RTLConfFile, ini.stringify(config));
fs.appendFile(RTLConfFile, ini.stringify(settingsTemp, { section: 'Settings' }), function(err) {

@ -1,6 +1,6 @@
<div fxLayout="column" id="rtl-container" class="rtl-container" [ngClass]="[settings.themeColor, settings.themeMode, settings.fontSize]" [class.horizontal]="settings.menu === 'horizontal'" [class.compact]="settings.menuType === 'compact'" [class.mini]="settings.menuType === 'mini'">
<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>
<button *ngIf="settings.menu === 'vertical'" class="top-toolbar-icon" mat-icon-button (click)="sideNavToggle()">
<mat-icon class="mr-5px">menu</mat-icon>
</button>
@ -23,7 +23,11 @@
</svg>
</button>
</div>
<div fxLayoutAlign="space-between center">
<div>
<span *ngIf="xSmallScreen">RTL</span>
<span *ngIf="!xSmallScreen">Ride The Lightning</span>
</div>
<div>
<rtl-top-menu></rtl-top-menu>
</div>
</mat-toolbar>

@ -32,6 +32,7 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
public flgCopied = false;
public appConfig: RTLConfiguration;
public accessKey = '';
public xSmallScreen = false;
public smallScreen = false;
unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
@ -44,15 +45,19 @@ export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
.subscribe((matches) => {
if(matches.breakpoints[Breakpoints.XSmall]) {
this.commonService.setScreenSize(ScreenSizeEnum.XS);
this.xSmallScreen = true;
this.smallScreen = true;
} else if(matches.breakpoints[Breakpoints.TabletPortrait]) {
this.commonService.setScreenSize(ScreenSizeEnum.SM);
this.xSmallScreen = false;
this.smallScreen = true;
} else if(matches.breakpoints[Breakpoints.Small] || matches.breakpoints[Breakpoints.Medium]) {
this.commonService.setScreenSize(ScreenSizeEnum.MD);
this.xSmallScreen = false;
this.smallScreen = false;
} else {
this.commonService.setScreenSize(ScreenSizeEnum.LG);
this.xSmallScreen = false;
this.smallScreen = false;
}
});

@ -1,11 +1,11 @@
<div fxLayout="column">
<div fxLayout="column" fxLayoutAlign="space-between stretch" fxLayout.gt-sm="row wrap">
<div fxFlex="100" class="alert alert-warn">
<fa-icon [icon]="faExclamationTriangle" class="mr-1"></fa-icon>
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
<span>Save your backup files in a redundant location.</span>
</div>
<div fxFlex="100" class="alert alert-info">
<fa-icon [icon]="faServer" class="mr-1"></fa-icon>
<fa-icon [icon]="faInfoCircle" class="mr-1 alert-icon"></fa-icon>
<span><strong>Backup Folder Location: </strong>{{selNode.channelBackupPath}}.</span>
</div>
<div fxLayout="row" fxFlex="100" fxFlex.gt-sm="30" fxLayoutAlign="space-between stretch" class="mt-2">

@ -3,7 +3,7 @@ import { Subject } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { Actions } from '@ngrx/effects';
import { faServer, faExclamationTriangle, faArchive } from '@fortawesome/free-solid-svg-icons';
import { faInfoCircle, faExclamationTriangle, faArchive } from '@fortawesome/free-solid-svg-icons';
import { MatTableDataSource, MatSort, MatPaginator, MatPaginatorIntl } from '@angular/material';
import { SelNodeChild } from '../../../shared/models/RTLconfig';
@ -26,7 +26,7 @@ import * as fromRTLReducer from '../../../store/rtl.reducers';
export class ChannelBackupTableComponent implements OnInit, OnDestroy {
@ViewChild(MatSort, { static: true }) sort: MatSort;
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
public faServer = faServer;
public faInfoCircle = faInfoCircle;
public faExclamationTriangle = faExclamationTriangle;
public faArchive = faArchive;
public pageSize = PAGE_SIZE;

@ -1,16 +1,16 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Lightning</h4>
<div class="dashboard-info-value">{{balances.lightning | number}} Sats</div>
<div class="overflow-wrap dashboard-info-value">{{balances.lightning | number}} Sats</div>
<mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.lightning/balances.total*100}}"></mat-progress-bar>
</div>
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">On-chain</h4>
<div class="dashboard-info-value">{{balances.onchain | number}} Sats</div>
<div class="overflow-wrap dashboard-info-value">{{balances.onchain | number}} Sats</div>
<mat-progress-bar class="dashboard-progress-bar" mode="determinate" value="{{balances.onchain/balances.total*100}}"></mat-progress-bar>
</div>
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Total</h4>
<div class="dashboard-info-value">{{balances.total | number}} Sats</div>
<div class="overflow-wrap dashboard-info-value">{{balances.total | number}} Sats</div>
</div>
</div>

@ -1,36 +1,36 @@
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Active</h4>
<div class="dashboard-info-value"><span class="dot tiny-dot green"></span>{{(channelsStatus.active.channels || 0) | number}}</div>
<div class="overflow-wrap dashboard-info-value"><span class="dot tiny-dot green"></span>{{(channelsStatus.active.channels || 0) | number}}</div>
</div>
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Pending</h4>
<div class="dashboard-info-value"><span class="dot tiny-dot yellow"></span>{{(channelsStatus.pending.channels || 0) | number}}</div>
<div class="overflow-wrap dashboard-info-value"><span class="dot tiny-dot yellow"></span>{{(channelsStatus.pending.channels || 0) | number}}</div>
</div>
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Inactive</h4>
<div class="dashboard-info-value"><span class="dot tiny-dot grey"></span>{{(channelsStatus.inactive.channels || 0) | number}}</div>
<div class="overflow-wrap dashboard-info-value"><span class="dot tiny-dot grey"></span>{{(channelsStatus.inactive.channels || 0) | number}}</div>
</div>
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Closing</h4>
<div class="dashboard-info-value"><span class="dot tiny-dot red"></span>{{(channelsStatus.closing.channels || 0) | number}}</div>
<div class="overflow-wrap dashboard-info-value"><span class="dot tiny-dot red"></span>{{(channelsStatus.closing.channels || 0) | number}}</div>
</div>
</div>
<div fxLayout="column" fxFlex="50" fxLayoutAlign="space-between stretch">
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Capacity</h4>
<div class="dashboard-info-value">{{(channelsStatus.active.capacity || 0) | number}} Sats</div>
<div class="overflow-wrap dashboard-info-value">{{(channelsStatus.active.capacity || 0) | number}} Sats</div>
</div>
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Capacity</h4>
<div class="dashboard-info-value">{{(channelsStatus.pending.capacity || 0) | number}} Sats</div>
<div class="overflow-wrap dashboard-info-value">{{(channelsStatus.pending.capacity || 0) | number}} Sats</div>
</div>
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Capacity</h4>
<div class="dashboard-info-value">{{(channelsStatus.inactive.capacity || 0) | number}} Sats</div>
<div class="overflow-wrap dashboard-info-value">{{(channelsStatus.inactive.capacity || 0) | number}} Sats</div>
</div>
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Capacity</h4>
<div class="dashboard-info-value">{{(channelsStatus.closing.capacity || 0) | number}} Sats</div>
<div class="overflow-wrap dashboard-info-value">{{(channelsStatus.closing.capacity || 0) | number}} Sats</div>
</div>
</div>

@ -1,14 +1,18 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Daily</h4>
<div class="dashboard-info-value">{{fees?.day_fee_sum | number}} Sats</div>
<div class="overflow-wrap dashboard-info-value">{{fees?.day_fee_sum | number}} Sats</div>
</div>
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Weekly</h4>
<div class="dashboard-info-value">{{fees?.week_fee_sum | number}} Sats</div>
<div class="overflow-wrap dashboard-info-value">{{fees?.week_fee_sum | number}} Sats</div>
</div>
<div>
<h4 fxLayoutAlign="start" class="dashboard-info-title">Monthly</h4>
<div class="dashboard-info-value">{{fees?.month_fee_sum | number}} Sats</div>
<div class="overflow-wrap dashboard-info-value">{{fees?.month_fee_sum | number}} Sats</div>
</div>
<div fxFlex="20">
<h4 class="dashboard-info-title"></h4>
<span class="overflow-wrap dashboard-info-value"></span>
</div>
</div>

@ -21,7 +21,7 @@
</mat-card-header>
<mat-card-content class="dashboard-card-content w-100" fxFlex="95">
<div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
<rtl-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [ngClass]="{'error-border': flgLoading[0]==='error'}"></rtl-node-info>
<rtl-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [showColorFieldSeparately]="false" [ngClass]="{'error-border': flgLoading[0]==='error'}"></rtl-node-info>
<rtl-balances-info fxFlex="100" *ngSwitchCase="'balance'" [balances]="balances" [ngClass]="{'error-border': flgLoading[2]==='error' || flgLoading[5]==='error'}"></rtl-balances-info>
<rtl-channel-capacity-info fxFlex="100" *ngSwitchCase="'capacity'" [sortBy]="sortField" [channelBalances]="channelBalances" [allChannels]="allChannelsCapacity" [ngClass]="{'error-border': flgLoading[5]==='error'}"></rtl-channel-capacity-info>
<rtl-fee-info fxFlex="100" *ngSwitchCase="'fee'" [fees]="fees" [ngClass]="{'error-border': flgLoading[1]==='error'}"></rtl-fee-info>

@ -1,14 +1,21 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
<div>
<h4 class="dashboard-info-title">Alias</h4>
<div class="dashboard-info-value">
<div class="overflow-wrap dashboard-info-value">
{{information.alias}}
<span class="dashboard-node-dot dot" [ngStyle]="{'backgroundColor': information.color}"></span>
<span *ngIf="!showColorFieldSeparately" class="dashboard-node-dot dot" [ngStyle]="{'backgroundColor': information.color}"></span>
</div>
</div>
<div *ngIf="showColorFieldSeparately">
<h4 class="dashboard-info-title">Color</h4>
<div class="overflow-wrap dashboard-info-value">
<span class="dashboard-node-square" [ngStyle]="{'backgroundColor': information.color}"></span>
{{information.color | uppercase}}
</div>
</div>
<div>
<h4 class="dashboard-info-title">Implementation</h4>
<div class="dashboard-info-value">{{(information.lnImplementation || information.version) ? information.lnImplementation + ' v' + information.version : ''}}</div>
<div class="overflow-wrap dashboard-info-value">{{(information.lnImplementation || information.version) ? information.lnImplementation + ' v' + information.version : ''}}</div>
</div>
<div>
<h4 class="dashboard-info-title">Chain</h4>

@ -9,6 +9,7 @@ import { CommonService } from '../../../shared/services/common.service';
})
export class NodeInfoComponent implements OnChanges {
@Input() information: GetInfo;
@Input() showColorFieldSeparately: false;
public chains: Array<string> = [''];
constructor(private commonService: CommonService) { }

@ -12,9 +12,9 @@
<mat-card fxLayout="row" fxFlex="95" fxLayoutAlign="start stretch" class="dashboard-card p-24 w-96 h-93">
<mat-card-content fxFlex="100" class="dashboard-card-content">
<div [ngSwitch]="card.id" fxLayout="column" fxFlex="100">
<rtl-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [ngClass]="{'error-border': flgLoading[0]==='error'}"></rtl-node-info>
<rtl-fee-info fxFlex="100" *ngSwitchCase="'fee'" [fees]="fees" [ngClass]="{'error-border': flgLoading[2]==='error'}"></rtl-fee-info>
<rtl-node-info fxFlex="100" *ngSwitchCase="'node'" [information]="information" [showColorFieldSeparately]="true" [ngClass]="{'error-border': flgLoading[0]==='error'}"></rtl-node-info>
<rtl-channel-status-info fxFlex="100" *ngSwitchCase="'status'" [channelsStatus]="channelsStatus" [ngClass]="{'error-border': flgLoading[3]==='error' || flgLoading[4]==='error'}"></rtl-channel-status-info>
<rtl-fee-info fxFlex="100" *ngSwitchCase="'fee'" [fees]="fees" [ngClass]="{'error-border': flgLoading[2]==='error'}"></rtl-fee-info>
</div>
</mat-card-content>
</mat-card>
@ -45,11 +45,11 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between">
<div>
<h4 class="dashboard-info-title">Network Capacity</h4>
<div class="dashboard-info-value">{{networkInfo.total_network_capacity | number}} Sats</div>
<div class="overflow-wrap dashboard-info-value">{{networkInfo.total_network_capacity | number}} Sats</div>
</div>
<div>
<h4 class="dashboard-info-title">Number of Nodes</h4>
<div class="dashboard-info-value">{{networkInfo.num_nodes | number}}</div>
<div class="overflow-wrap dashboard-info-value">{{networkInfo.num_nodes | number}}</div>
</div>
<div>
<h4 class="dashboard-info-title">Number of Channels</h4>
@ -61,11 +61,11 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between">
<div>
<h4 class="dashboard-info-title">Max Channel Size</h4>
<div class="dashboard-info-value">{{networkInfo.max_channel_size | number}}</div>
<div class="overflow-wrap dashboard-info-value">{{networkInfo.max_channel_size | number}}</div>
</div>
<div>
<h4 class="dashboard-info-title">Avg Channel Size</h4>
<div class="dashboard-info-value">{{networkInfo.avg_channel_size | number}}</div>
<div class="overflow-wrap dashboard-info-value">{{networkInfo.avg_channel_size | number}}</div>
</div>
<div>
<h4 class="dashboard-info-title">Min Channel Size</h4>
@ -77,11 +77,11 @@
<div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between">
<div>
<h4 class="dashboard-info-title">Max Out Degree</h4>
<div class="dashboard-info-value">{{networkInfo.max_out_degree | number}}</div>
<div class="overflow-wrap dashboard-info-value">{{networkInfo.max_out_degree | number}}</div>
</div>
<div>
<h4 class="dashboard-info-title">Avg Out Degree</h4>
<div class="dashboard-info-value">{{networkInfo.avg_out_degree | number:'1.0-2'}}</div>
<div class="overflow-wrap dashboard-info-value">{{networkInfo.avg_out_degree | number:'1.0-2'}}</div>
</div>
<div fxFlex="20">
<h4 class="dashboard-info-title"></h4>

@ -45,8 +45,8 @@ export class NetworkInfoComponent implements OnInit, OnDestroy {
];
this.nodeCards = [
{ id: 'node', icon: this.faServer, title: 'Node Information', cols: 3, rows: 1 },
{ id: 'fee', icon: this.faBolt, title: 'Routing Fee Report', cols: 3, rows: 1 },
{ id: 'status', icon: this.faNetworkWired, title: 'Channels', cols: 3, rows: 1 }
{ id: 'status', icon: this.faNetworkWired, title: 'Channels', cols: 3, rows: 1 },
{ id: 'fee', icon: this.faBolt, title: 'Routing Fee Report', cols: 3, rows: 1 }
];
} else {
this.networkCards = [
@ -56,8 +56,8 @@ export class NetworkInfoComponent implements OnInit, OnDestroy {
];
this.nodeCards = [
{ id: 'node', icon: this.faServer, title: 'Node Information', cols: 1, rows: 1 },
{ id: 'fee', icon: this.faBolt, title: 'Routing Fee Report', cols: 1, rows: 1 },
{ id: 'status', icon: this.faNetworkWired, title: 'Channels', cols: 1, rows: 1 }
{ id: 'status', icon: this.faNetworkWired, title: 'Channels', cols: 1, rows: 1 },
{ id: 'fee', icon: this.faBolt, title: 'Routing Fee Report', cols: 1, rows: 1 }
];
}
}

@ -27,19 +27,18 @@
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.remote_balance | number}} </span></td>
</ng-container>
<ng-container matColumnDef="total_satoshis_sent">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sent ({{information?.smaller_currency_unit}}) </th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sats Sent </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.total_satoshis_sent | number}} </span></td>
</ng-container>
<ng-container matColumnDef="total_satoshis_received">
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Received ({{information?.smaller_currency_unit}}) </th>
<th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Sats Received </th>
<td mat-cell *matCellDef="let channel"><span fxLayoutAlign="end center">{{channel.total_satoshis_received | number}} </span></td>
</ng-container>
<ng-container matColumnDef="capacity">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-3">Capacity</th>
<ng-container matColumnDef="balancedness">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-3">Balance Score </th>
<td mat-cell *matCellDef="let channel" class="pl-3">
<div fxLayout="row">
<mat-hint fxFlex="50" fxLayoutAlign="start center" class="font-size-80"><strong class="font-weight-900">Local: </strong>{{channel.local_balance || 0 | number}} {{information?.smaller_currency_unit}}</mat-hint>
<mat-hint fxFlex="50" fxLayoutAlign="end center" class="font-size-80"><strong class="font-weight-900">Remote: </strong>{{channel.remote_balance || 0 | number}} {{information?.smaller_currency_unit}}</mat-hint>
<mat-hint fxFlex="100" fxLayoutAlign="center center" class="font-size-80">{{channel.balancedness * 100}}</mat-hint>
</div>
<mat-progress-bar mode="determinate" value="{{channel.balancedness * 100}}"></mat-progress-bar>
</td>

@ -6,7 +6,7 @@
}
}
.mat-column-capacity {
.mat-column-balancedness {
padding-left: 3rem;
flex: 0 0 25%;
width: 25%;

@ -48,13 +48,13 @@ export class ChannelOpenTableComponent implements OnInit, OnDestroy {
this.displayedColumns = [ 'remote_alias', 'actions'];
} else if(this.screenSize === ScreenSizeEnum.SM) {
this.flgSticky = false;
this.displayedColumns = ['remote_alias', 'total_satoshis_sent', 'total_satoshis_received', 'actions'];
this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'actions'];
} else if(this.screenSize === ScreenSizeEnum.MD) {
this.flgSticky = false;
this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'actions'];
} else {
this.flgSticky = true;
this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'total_satoshis_sent', 'total_satoshis_received', 'capacity', 'actions'];
this.displayedColumns = ['remote_alias', 'total_satoshis_sent', 'total_satoshis_received', 'local_balance', 'remote_balance', 'balancedness', 'actions'];
}
}

@ -2,19 +2,19 @@
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<span matBadge="{{openChannels}}" matBadgeColor="primary" matBadgeOverlap="false" class="tab-badge">Open</span>
<span matBadge="{{openChannels}}" matBadgeOverlap="false" class="tab-badge">Open</span>
</ng-template>
<rtl-channel-open-table></rtl-channel-open-table>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span matBadge="{{pendingChannels}}" matBadgeColor="primary" matBadgeOverlap="false" class="tab-badge">Pending</span>
<span matBadge="{{pendingChannels}}" matBadgeOverlap="false" class="tab-badge">Pending</span>
</ng-template>
<rtl-channel-pending-table></rtl-channel-pending-table>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span matBadge="{{closedChannels}}" matBadgeColor="primary" matBadgeOverlap="false" class="tab-badge">Closed</span>
<span matBadge="{{closedChannels}}" matBadgeOverlap="false" class="tab-badge">Closed</span>
</ng-template>
<rtl-channel-closed-table></rtl-channel-closed-table>
</mat-tab>

@ -19,13 +19,13 @@
<mat-tab-group>
<mat-tab>
<ng-template mat-tab-label>
<span matBadge="{{activeChannels}}" matBadgeColor="primary" matBadgeOverlap="false" class="tab-badge">Channels</span>
<span matBadge="{{activeChannels}}" matBadgeOverlap="false" class="tab-badge">Channels</span>
</ng-template>
<rtl-channel-manage></rtl-channel-manage>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span matBadge="{{activePeers}}" matBadgeColor="primary" matBadgeOverlap="false" class="tab-badge">Peers</span>
<span matBadge="{{activePeers}}" matBadgeOverlap="false" class="tab-badge">Peers</span>
</ng-template>
<rtl-peers></rtl-peers>
</mat-tab>

@ -17,6 +17,7 @@ import { LNDEffects } from '../../store/lnd.effects';
import { RTLEffects } from '../../../store/rtl.effects';
import * as RTLActions from '../../../store/rtl.actions';
import * as fromRTLReducer from '../../../store/rtl.reducers';
import { ErrorMessageComponent } from '../../../shared/components/data-modal/error-message/error-message.component';
@Component({
selector: 'rtl-peers',
@ -98,6 +99,11 @@ export class PeersComponent implements OnInit, OnDestroy {
}
onConnectPeer() {
// if(!this.peerAddress) {
// // this.store.dispatch(new RTLActions.OpenAlert({ data: { type: AlertTypeEnum.ERROR, alertTitle: 'Error', message: { code: 'Invalid values', message: 'invalid or empty address.' }, component: ErrorMessageComponent}}));
// this.store.dispatch(new RTLActions.OpenSnackBar('Error: invalid or empty address.'));
// return true;
// }
this.flgAnimate = true;
const pattern = '^([a-zA-Z0-9]){1,66}@(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):[0-9]+$';
const deviderIndex = this.peerAddress.search('@');

@ -4,17 +4,16 @@
<span class="page-title">Help</span>
</div>
<div fxLayout="row" fxFlex="100" class="padding-gap-x" fxLayoutAlign="start start">
<mat-card fxLayout="column" fxFlex="100">
<mat-card-content fxFlex="100" *ngFor="let helpTopic of helpTopics">
<mat-expansion-panel>
<div fxLayout="column" fxFlex="100">
<div fxFlex="100" *ngFor="let helpTopic of helpTopics">
<mat-expansion-panel class="flat-expansion-panel help-expansion mb-2px">
<mat-expansion-panel-header>
<mat-panel-title>{{helpTopic.question}}</mat-panel-title>
</mat-expansion-panel-header>
<mat-panel-description><pre class="pre-wrap">{{helpTopic.answer}}</pre></mat-panel-description>
<mat-panel-description><span class="pre-wrap">{{helpTopic.answer}}</span></mat-panel-description>
</mat-expansion-panel>
<div class="divider"></div>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</div>

@ -18,7 +18,7 @@ import { MenuChildNode, MENU_DATA } from '../../../models/navMenu';
import { RTLEffects } from '../../../../store/rtl.effects';
import * as RTLActions from '../../../../store/rtl.actions';
import * as fromRTLReducer from '../../../../store/rtl.reducers';
import { AlertTypeEnum } from '../../../services/consts-enums-functions';
import { AlertTypeEnum, UserPersonaEnum } from '../../../services/consts-enums-functions';
@Component({
selector: 'rtl-side-navigation',
@ -42,6 +42,7 @@ export class SideNavigationComponent implements OnInit, OnDestroy {
public numPendingChannels = 0;
public smallScreen = false;
public childRootRoute = '';
public userPersonaEnum = UserPersonaEnum;
private unSubs = [new Subject(), new Subject(), new Subject(), new Subject()];
treeControlNested = new NestedTreeControl<MenuChildNode>(node => node.children);
treeControlLogout = new NestedTreeControl<MenuChildNode>(node => node.children);
@ -71,7 +72,6 @@ export class SideNavigationComponent implements OnInit, OnDestroy {
this.selNode = rtlStore.selNode;
this.settings = this.selNode.settings;
this.information = rtlStore.nodeData;
if (undefined !== this.information.identity_pubkey) {
if (undefined !== this.information.chains && typeof this.information.chains[0] === 'string') {
this.informationChain.chain = this.information.chains[0].toString();
@ -91,9 +91,9 @@ export class SideNavigationComponent implements OnInit, OnDestroy {
this.smallScreen = true;
}
if(this.selNode && this.selNode.lnImplementation && this.selNode.lnImplementation.toUpperCase() === 'CLT') {
this.navMenus.data = MENU_DATA.CLChildren;
this.navMenus.data = MENU_DATA.CLChildren.filter(navMenuData => navMenuData.userPersona === UserPersonaEnum.ALL || navMenuData.userPersona === this.settings.userPersona );
} else {
this.navMenus.data = MENU_DATA.LNDChildren;
this.navMenus.data = MENU_DATA.LNDChildren.filter(navMenuData => navMenuData.userPersona === UserPersonaEnum.ALL || navMenuData.userPersona === this.settings.userPersona );
}
this.logger.info(rtlStore);
});

@ -5,7 +5,7 @@
<span class="page-title">Node Layout</span>
</div>
<div fxFlex="100" class="alert alert-info">
<fa-icon [icon]="faServer" class="mr-1"></fa-icon>
<fa-icon [icon]="faInfoCircle" class="mr-1 alert-icon"></fa-icon>
<span>Application layout will be tailored based upon user persona.</span>
</div>
<div fxLayout="column" fxLayout.gt-sm="row" fxFlex="100" fxLayoutAlign="space-between stretch">

@ -2,7 +2,7 @@ import { Component, OnInit, OnDestroy, Output, EventEmitter } from '@angular/cor
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { faWrench, faPaintBrush, faServer } from '@fortawesome/free-solid-svg-icons';
import { faWrench, faPaintBrush, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
import { CURRENCY_UNITS, UserPersonaEnum, ScreenSizeEnum, FIAT_CURRENCY_UNITS, NODE_SETTINGS } from '../../../services/consts-enums-functions';
import { LightningNode, Settings, RTLConfiguration, GetInfoRoot } from '../../../models/RTLconfig';
@ -20,7 +20,7 @@ import * as fromRTLReducer from '../../../../store/rtl.reducers';
export class AppSettingsComponent implements OnInit, OnDestroy {
public faWrench = faWrench;
public faPaintBrush = faPaintBrush;
public faServer = faServer;
public faInfoCircle = faInfoCircle;
public selNode: LightningNode;
public information: GetInfoRoot = {};
public userPersonas = [UserPersonaEnum.OPERATOR, UserPersonaEnum.MERCHANT];

@ -1,35 +1,37 @@
import { faTachometerAlt, faLink, faBolt, faExchangeAlt, faUsers, faMapSigns, faQuestion, faSearch, faTools, faProjectDiagram, faDownload } from '@fortawesome/free-solid-svg-icons';
import { faTachometerAlt, faLink, faBolt, faExchangeAlt, faUsers, faMapSigns, faQuestion, faSearch, faTools, faProjectDiagram, faDownload, faServer } from '@fortawesome/free-solid-svg-icons';
import { UserPersonaEnum } from '../services/consts-enums-functions';
export const MENU_DATA: MenuRootNode = {
LNDChildren: [
{id: 1, parentId: 0, name: 'Dashboard', iconType: 'FA', icon: faTachometerAlt, link: '/lnd/home'},
{id: 2, parentId: 0, name: 'On-chain', iconType: 'FA', icon: faLink, link: '/lnd/onchain'},
{id: 3, parentId: 0, name: 'Lightning', iconType: 'FA', icon: faBolt, link: '/lnd/peerschannels', children: [
{id: 31, parentId: 3, name: 'Peers/Channels', iconType: 'FA', icon: faUsers, link: '/lnd/peerschannels'},
{id: 32, parentId: 3, name: 'Transactions', iconType: 'FA', icon: faExchangeAlt, link: '/lnd/transactions'},
{id: 33, parentId: 3, name: 'Backup', iconType: 'FA', icon: faDownload, link: '/lnd/backup'},
{id: 34, parentId: 3, name: 'Routing', iconType: 'FA', icon: faMapSigns, link: '/lnd/routing'},
{id: 35, parentId: 3, name: 'Graph Lookup', iconType: 'FA', icon: faSearch, link: '/lnd/lookups'}
{id: 1, parentId: 0, name: 'Dashboard', iconType: 'FA', icon: faTachometerAlt, link: '/lnd/home', userPersona: UserPersonaEnum.ALL},
{id: 2, parentId: 0, name: 'On-chain', iconType: 'FA', icon: faLink, link: '/lnd/onchain', userPersona: UserPersonaEnum.ALL},
{id: 3, parentId: 0, name: 'Lightning', iconType: 'FA', icon: faBolt, link: '/lnd/peerschannels', userPersona: UserPersonaEnum.ALL, children: [
{id: 31, parentId: 3, name: 'Peers/Channels', iconType: 'FA', icon: faUsers, link: '/lnd/peerschannels', userPersona: UserPersonaEnum.ALL},
{id: 32, parentId: 3, name: 'Transactions', iconType: 'FA', icon: faExchangeAlt, link: '/lnd/transactions', userPersona: UserPersonaEnum.ALL},
{id: 33, parentId: 3, name: 'Backup', iconType: 'FA', icon: faDownload, link: '/lnd/backup', userPersona: UserPersonaEnum.ALL},
{id: 34, parentId: 3, name: 'Routing', iconType: 'FA', icon: faMapSigns, link: '/lnd/routing', userPersona: UserPersonaEnum.ALL},
{id: 35, parentId: 3, name: 'Graph Lookup', iconType: 'FA', icon: faSearch, link: '/lnd/lookups', userPersona: UserPersonaEnum.ALL}
]},
{id: 5, parentId: 0, name: 'Network', iconType: 'FA', icon: faProjectDiagram, link: '/lnd/network'},
{id: 6, parentId: 0, name: 'Settings', iconType: 'FA', icon: faTools, link: '/settings'},
{id: 7, parentId: 0, name: 'Help', iconType: 'FA', icon: faQuestion, link: '/help'}
{id: 5, parentId: 0, name: 'Network', iconType: 'FA', icon: faProjectDiagram, link: '/lnd/network', userPersona: UserPersonaEnum.OPERATOR},
{id: 6, parentId: 0, name: 'Node/Network', iconType: 'FA', icon: faServer, link: '/lnd/network', userPersona: UserPersonaEnum.MERCHANT},
{id: 7, parentId: 0, name: 'Settings', iconType: 'FA', icon: faTools, link: '/settings', userPersona: UserPersonaEnum.ALL},
{id: 8, parentId: 0, name: 'Help', iconType: 'FA', icon: faQuestion, link: '/help', userPersona: UserPersonaEnum.ALL}
],
CLChildren: [
{id: 1, parentId: 0, name: 'Home', icon: 'home', link: '/cl/home'},
{id: 2, parentId: 0, name: 'On Chain', icon: 'account_balance_wallet', link: '/cl/onchain'},
{id: 3, parentId: 0, name: 'Peers', icon: 'group', link: '/cl/peers'},
{id: 4, parentId: 0, name: 'Channels', icon: 'settings_ethernet', link: '/cl/chnlmanage'},
{id: 5, parentId: 0, name: 'Payments', icon: 'payment', link: '/cl/paymentsend', children: [
{id: 51, parentId: 5, name: 'Send', icon: 'send', link: '/cl/paymentsend'},
{id: 52, parentId: 5, name: 'Query Routes', icon: 'explore', link: '/cl/queryroutes'}
{id: 1, parentId: 0, name: 'Home', icon: 'home', link: '/cl/home', userPersona: UserPersonaEnum.ALL},
{id: 2, parentId: 0, name: 'On Chain', icon: 'account_balance_wallet', link: '/cl/onchain', userPersona: UserPersonaEnum.ALL},
{id: 3, parentId: 0, name: 'Peers', icon: 'group', link: '/cl/peers', userPersona: UserPersonaEnum.ALL},
{id: 4, parentId: 0, name: 'Channels', icon: 'settings_ethernet', link: '/cl/chnlmanage', userPersona: UserPersonaEnum.ALL},
{id: 5, parentId: 0, name: 'Payments', icon: 'payment', link: '/cl/paymentsend', userPersona: UserPersonaEnum.ALL, children: [
{id: 51, parentId: 5, name: 'Send', icon: 'send', link: '/cl/paymentsend', userPersona: UserPersonaEnum.ALL},
{id: 52, parentId: 5, name: 'Query Routes', icon: 'explore', link: '/cl/queryroutes', userPersona: UserPersonaEnum.ALL}
]},
{id: 6, parentId: 0, name: 'Invoices', icon: 'receipt', link: '/cl/invoices'},
{id: 7, parentId: 0, name: 'Forwarding History', icon: 'timeline', link: '/cl/forwardinghistory'},
{id: 9, parentId: 0, name: 'Lookups', icon: 'search', link: '/cl/lookups'},
{id: 10, parentId: 0, name: 'Node Config', icon: 'perm_data_setting', link: '/advanced'},
{id: 11, parentId: 0, name: 'Settings', icon: 'settings', link: '/settings'},
{id: 12, parentId: 0, name: 'Help', icon: 'help', link: '/help'}
{id: 6, parentId: 0, name: 'Invoices', icon: 'receipt', link: '/cl/invoices', userPersona: UserPersonaEnum.ALL},
{id: 7, parentId: 0, name: 'Forwarding History', icon: 'timeline', link: '/cl/forwardinghistory', userPersona: UserPersonaEnum.ALL},
{id: 9, parentId: 0, name: 'Lookups', icon: 'search', link: '/cl/lookups', userPersona: UserPersonaEnum.ALL},
{id: 10, parentId: 0, name: 'Node Config', icon: 'perm_data_setting', link: '/advanced', userPersona: UserPersonaEnum.ALL},
{id: 11, parentId: 0, name: 'Settings', icon: 'settings', link: '/settings', userPersona: UserPersonaEnum.ALL},
{id: 12, parentId: 0, name: 'Help', icon: 'help', link: '/help', userPersona: UserPersonaEnum.ALL}
]
};
@ -45,5 +47,6 @@ export class MenuChildNode {
iconType?: string;
icon?: any | string;
link?: any;
userPersona?: string;
children?: MenuChildNode[];
}

@ -38,7 +38,7 @@ export const TRANS_TYPES = [
export const NODE_SETTINGS = {
themes: [
{id: 'purple', name: 'Diogo'},
{id: 'teal', name: 'Sauby'},
{id: 'teal', name: 'Suheb'},
{id: 'indigo', name: 'RTL'},
{id: 'pink', name: 'BK'}
],
@ -50,7 +50,8 @@ export const NODE_SETTINGS = {
export enum UserPersonaEnum {
OPERATOR = 'operator',
MERCHANT = 'merchant'
MERCHANT = 'merchant',
ALL = 'all'
}
export enum AlertTypeEnum {

@ -186,7 +186,7 @@ import { SocketService } from './services/socket.service';
providers: [
{ provide: PERFECT_SCROLLBAR_CONFIG, useValue: DEFAULT_PERFECT_SCROLLBAR_CONFIG },
{ 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: 20000, verticalPosition: 'bottom', panelClass: 'rtl-snack-bar' } },
DecimalPipe, SocketService
]
})

@ -36,8 +36,17 @@
.rtl-top-toolbar {
border-bottom: 1px solid $background-color;
}
.mat-tab-label.mat-tab-label-active {
color: $primary-darker;
.mat-tab-label {
&.mat-tab-label-active {
color: $primary-darker;
& .tab-badge .mat-badge-content {
background: $primary-darker;
}
}
& .tab-badge .mat-badge-content {
color: mat-color($background, dialog);
background: $foreground-secondary-text;
}
}
.cc-data-block .cc-data-title {
color: $primary-darker;
@ -80,9 +89,6 @@
.selected-color {
border-color: $primary-lighter;
}
.rtl-snack-bar {
background: $primary-color;
}
.mat-progress-bar-fill::after {
background-color: mat-color($primary, 600);
}
@ -102,56 +108,29 @@
color: $foreground-secondary-text;
}
.dashboard-card .mat-card-header .mat-card-title {
font-size: 180%;
color: $foreground-text;
& .ng-fa-icon {
color: $foreground-text;
}
}
& .dashboard-info-title {
color: $primary-darker;
}
& .dashboard-info-value {
font-weight: 700;
color: $foreground-text;
}
& .dashboard-capacity-header {
color: $foreground-text;
}
.alert.alert-info {
border: 1px solid $primary-darker;
background-color: $hover-background-white;
color: $primary-darker;
& .ng-fa-icon {
fill: $primary-darker;
color: $primary-darker;
}
}
.alert.alert-warn {
border: 1px solid #856404;
background-color: #fff3cd;
color: #856404;
& .ng-fa-icon {
fill: #856404;
color: #856404;
}
}
.alert.alert-danger {
border: 1px solid $warn-color;
background-color: mat-color($warn, 50);
color: $warn-color;
& .ng-fa-icon {
fill: $warn-color;
color: $warn-color;
}
}
.mat-progress-bar.this-channel-bar .mat-progress-bar-fill::after {
background-color: mat-color($accent, A200);
}
.mat-progress-bar.this-channel-bar .mat-progress-bar-buffer {
background-color: mat-color($accent, 400);
}
.color-primary {
color: $primary-darker !important;
}
}
&.day {
@ -164,8 +143,16 @@
.rtl-top-toolbar {
border-bottom: 1px solid white;
}
.mat-tab-label.mat-tab-label-active {
color: $primary-color;
.mat-tab-label {
&.mat-tab-label-active {
color: $primary-color;
& .tab-badge .mat-badge-content {
background: $primary-color;
}
}
& .tab-badge .mat-badge-content {
background: $foreground-secondary-text;
}
}
.ng-fa-icon, .mat-nested-tree-node-parent .mat-icon, .mat-form-field-suffix {
color: $foreground-secondary-text;
@ -215,9 +202,6 @@
.page-title-container .page-title-img, svg.top-icon-small {
fill: $foreground-text;
}
.rtl-snack-bar {
background: $primary-color;
}
.mat-progress-bar-fill::after {
background-color: mat-color($primary, 900);
}
@ -239,20 +223,20 @@
border: 1px solid $foreground-divider;
}
.dashboard-card .mat-card-header .mat-card-title {
font-size: 180%;
color: $foreground-disabled;
& .ng-fa-icon {
color: $foreground-disabled;
}
}
& .dashboard-info-title {
color: $primary-color;
}
& .dashboard-info-value {
font-weight: 700;
color: $foreground-secondary-text;
}
}
.color-primary {
color: $primary-color !important;
.color-primary {
color: $primary-color !important;
}
}
.mat-progress-bar-buffer {
@ -432,11 +416,17 @@
}
}
.rtl-snack-bar .mat-simple-snackbar {
justify-content: center;
align-content: center;
align-items: center;
}
// .rtl-snack-bar {
// &.mat-snack-bar-container {
// background-color: $warn-color;
// }
// & .mat-simple-snackbar {
// justify-content: center;
// align-content: center;
// align-items: center;
// background-color: $warn-color;
// }
// }
.mat-select-panel .mat-option.mat-active {
background: none;
@ -528,24 +518,28 @@
.dashboard-card {
& .dashboard-divider {
// margin: 1.5rem 0;
border-top-width: 2px;
}
& .mat-card-header .mat-card-title {
font-size: 180%;
margin-bottom: 2.4rem;
}
& .dashboard-info-value {
font-weight: 700;
}
& .dashboard-info-title {
font-weight: 500;
color: $primary-color;
}
& .dashboard-node-dot {
margin: 0 0 -2px 1rem;
border: 1px solid $foreground-secondary-text;
}
& .dashboard-node-square {
display: inline-flex;
width: $dot-size;
height: $dot-size;
margin-right: 1rem;
}
& .dashboard-capacity-header {
font-size: 130%;
font-weight: 700;
@ -554,36 +548,53 @@
font-size: 120%;
}
}
}
.alert.alert-info {
border: 1px solid $primary-color;
background-color: mat-color($primary, 50);
color: $primary-color;
& .ng-fa-icon {
fill: $primary-color;
color: $primary-color;
.alert {
&.alert-info {
border: 1px solid $blue-color;
background-color: $blue-background-color;
color: $blue-color;
& .alert-icon.ng-fa-icon {
color: $blue-color;
}
}
}
.alert.alert-warn {
border: 1px solid #856404;
background-color: #fff3cd;
color: #856404;
& .ng-fa-icon {
fill: #856404;
color: #856404;
&.alert-warn {
border: 1px solid $yellow-alert-color;
background-color: $yellow-background-color;
color: $yellow-alert-color;
& .alert-icon.ng-fa-icon {
color: $yellow-alert-color;
}
}
&.alert-danger {
border: 1px solid $red-color;
background-color: $red-background-color;
color: $red-color;
& .alert-icon.ng-fa-icon {
color: $red-color;
}
}
&.alert-success {
border: 1px solid $green-color;
background-color: $green-background-color;
color: $green-color;
& .alert-icon.ng-fa-icon {
color: $green-color;
}
}
}
.alert.alert-danger {
border: 1px solid $warn-color;
background-color: mat-color($warn, 50);
color: $warn-color;
& .ng-fa-icon {
fill: $warn-color;
color: $warn-color;
.help-expansion {
& .mat-expansion-panel-header, & .mat-expansion-panel-header-title {
font-weight: 500;
color: $foreground-secondary-text;
}
}
& .mat-expansion-indicator::after, & .mat-expansion-panel-content, & .mat-expansion-panel-header-description {
color: $foreground-secondary-text;
}
}
}

@ -22,8 +22,14 @@ $fa-icon-small-size: 2rem;
$fa-icon-regular-size: 4rem;
$yellow-color: #ffbd2e;
$yellow-alert-color: #856404;
$yellow-background-color: #fff3cd;
$green-color: #28ca43;
$green-background-color: #d4edda;;
$red-color: #c62828;
$red-background-color: #f8d7da;
$blue-color: #004085;
$blue-background-color: #cce5ff;
$grey-color: #AAAAAA;
$tiny-dot-size: 0.8rem;
$dot-size: 1.2rem;

@ -274,6 +274,10 @@ body {
margin-bottom: 0 !important;
}
.mb-2px {
margin-bottom: 2px !important;
}
.mb-1 {
margin-bottom: 1rem !important;
}
@ -943,4 +947,4 @@ table {
.node-grid-tile.mat-grid-tile .mat-figure {
align-items: start;
}
}

@ -14,7 +14,7 @@ import { LoggerService } from '../shared/services/logger.service';
import { SessionService } from '../shared/services/session.service';
import { CommonService } from '../shared/services/common.service';
import { Settings, RTLConfiguration, LightningNode } from '../shared/models/RTLconfig';
import { AuthenticateWith, CURRENCY_UNITS, AlertTypeEnum, ScreenSizeEnum } from '../shared/services/consts-enums-functions';
import { AuthenticateWith, CURRENCY_UNITS, ScreenSizeEnum } from '../shared/services/consts-enums-functions';
import { SpinnerDialogComponent } from '../shared/components/data-modal/spinner-dialog/spinner-dialog.component';
import { AlertMessageComponent } from '../shared/components/data-modal/alert-message/alert-message.component';

Loading…
Cancel
Save