Archives
/
RTL
mirror of https://github.com/Ride-The-Lightning/RTL
2
0
Fork 0
Code Issues Releases Wiki Activity

Page Settings Incomplete

Browse Source 
Page Settings Incomplete
pull/1127/head
ShahanaFarooqui 2 years ago
parent 6945d084b4
commit 8c4443a873
7 changed files with 124 additions and 144 deletions
Show Stats Download Patch File Download Diff File

2
src/app/shared/components/node-config/node-config.component.ts
Unescape Escape View File

@ -23,7 +23,7 @@ export class NodeConfigComponent implements OnInit, OnDestroy {
public showLnConfig = false;
public selNode: ConfigSettingsNode | any;
public lnImplementationStr = '';
public links = [{ link: 'applayout', name: 'App Layout' }, { link: 'pglayout', name: 'Page Layout' }, { link: 'services', name: 'Services' }, { link: 'experimental', name: 'Experimental' }, { link: 'lnconfig', name: this.lnImplementationStr }];
public links = [{ link: 'applayout', name: 'Application Layout' }, { link: 'pglayout', name: 'Page Layout' }, { link: 'services', name: 'Services' }, { link: 'experimental', name: 'Experimental' }, { link: 'lnconfig', name: this.lnImplementationStr }];
public activeLink = '';
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];

100
src/app/shared/components/node-config/page-settings/page-settings.component.html
Unescape Escape View File

@ -4,72 +4,46 @@
<fa-icon [icon]="faPenRuler" class="page-title-img mr-1"></fa-icon>
<span class="page-title">Page Settings</span>
</div>
<!-- <div fxLayout="column" fxLayoutAlign="start stretch" class="mt-1 bordered-box padding-gap-large">
<div fxFlex="100" class="alert alert-warn">
<fa-icon [icon]="faExclamationTriangle" class="mr-1 alert-icon"></fa-icon>
<span>Fiat conversion calls <strong><a href="https://www.blockchain.com/api/exchange_rates_api" target="blank">Blockchain.com</a></strong> API to get conversion rates.</span>
</div>
<div fxLayout="row wrap" fxLayoutAlign="start center">
<mat-slide-toggle tabindex="2" color="primary" [(ngModel)]="selNode.settings.fiatConversion" (change)="selNode.settings.currencyUnit = !$event.checked ? null : selNode.settings.currencyUnit" name="fiatConversion">Enable Fiat Conversion</mat-slide-toggle>
<mat-form-field>
<mat-select autoFocus [(ngModel)]="selNode.settings.currencyUnit" (selectionChange)="onCurrencyChange($event)" placeholder="Fiat Currency" [disabled]="!selNode.settings.fiatConversion" tabindex="3" [required]="selNode.settings.fiatConversion" name="currencyUnit" #currencyUnit="ngModel">
<mat-option *ngFor="let currencyUnit of currencyUnits" [value]="currencyUnit.id">
{{currencyUnit.id}}
</mat-option>
</mat-select>
<mat-error *ngIf="selNode.settings.fiatConversion && !selNode.settings.currencyUnit">Currency unit is required.</mat-error>
</mat-form-field>
</div>
</div>
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch">
<div fxLayout="row wrap" fxLayoutAlign="start start" fxLayout.gt-sm="column" fxFlex="100" fxLayoutAlign.gt-sm="space-between stretch" class="settings-container page-sub-title-container mt-1">
<div class="mt-1">
<fa-icon [icon]="faPaintBrush" class="page-title-img mr-1"></fa-icon>
<span class="page-title">Customization</span>
</div>
<div fxLayout="column" fxLayoutAlign="start stretch" class="mt-1 bordered-box padding-gap-large">
<div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="100">
<div fxLayout="row" fxFlex="100" class="alert alert-info mb-0">
<fa-icon [icon]="faInfoCircle" class="mr-1 alert-icon"></fa-icon>
<span>Dashboard layout will be tailored based on the role selected to better serve its needs.</span>
</div>
<div fxLayout="column" fxLayoutAlign="start start" fxFlex="100">
<h4>Dashboard Layout</h4>
<mat-radio-group color="primary" [(ngModel)]="selNode.settings.userPersona" tabindex="1" name="userPersona">
<mat-radio-button *ngFor="let userPersona of userPersonas" [value]="userPersona" [checked]="selNode.settings.userPersona === userPersona" class="mr-4">
{{userPersona | titlecase}}
</mat-radio-button>
</mat-radio-group>
</div>
</div>
<mat-divider [inset]="true" class="mt-1"></mat-divider>
<div fxLayout="column" fxLayout.gt-xs="row" fxFlex="100" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-xs="start stretch">
<div fxFlex.gt-xs="20" fxFlex.gt-md="15" fxLayout="column" fxLayoutAlign="space-between stretch">
<h4>Mode</h4>
<mat-radio-group color="primary" [(ngModel)]="selectedThemeMode" (change)="chooseThemeMode()" name="themeMode">
<mat-radio-button tabindex="5" *ngFor="let themeMode of themeModes" [value]="themeMode" [ngClass]="{'mr-4': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">{{themeMode.name}}
</mat-radio-button>
</mat-radio-group>
</div>
</div>
<mat-divider [inset]="true" class="mt-1"></mat-divider>
<div fxLayout="column" fxLayout.gt-xs="row" fxFlex="100" fxLayoutAlign="space-between stretch" fxLayoutAlign.gt-xs="start stretch">
<div fxLayout="column" fxFlex.gt-xs="50" fxFlex.gt-md="40" fxLayoutAlign="space-between stretch">
<h4>Themes</h4>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
<span *ngFor="let themeColor of themeColors" fxLayout="row" class="theme-name">
<div tabindex="9" [class]="themeColor.id | lowercase" [ngClass]="{'skin': true, 'selected-color': selectedThemeColor === themeColor.id}" (click)="changeThemeColor(themeColor.id)"></div>
{{themeColor.name}}
</span>
</div>
</div>
</div>
<mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1" expanded="true" *ngFor="let page of pageSettings">
<mat-expansion-panel-header>
<mat-panel-title>{{page.pageId | titlecase}}</mat-panel-title>
</mat-expansion-panel-header>
<div fxLayout="column" fxLayoutAlign="start stretch" *ngFor="let table of page.tables">
<div fxLayout="row" fxLayoutAlign="space-between center" class="mt-1">
<mat-form-field fxFlex="10">
<mat-select [(ngModel)]="table.recordsPerPage" placeholder="Records/Page" name="{{page.pageId}}-page-size-options" tabindex="1">
<mat-option *ngFor="let pageSizeOption of pageSizeOptions" [value]="pageSizeOption">
{{pageSizeOption}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="10">
<mat-select [(ngModel)]="table.sortBy" placeholder="Sort By" name="{{page.pageId}}-sort-by" tabindex="2">
<mat-option *ngFor="let field of table.fieldsDef" [value]="field">
{{field | camelcaseWithReplace:'_'}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="10">
<mat-select [(ngModel)]="table.sortOrder" placeholder="Sort Order" name="{{page.pageId}}-sort-order" tabindex="3">
<mat-option *ngFor="let so of sortOrders" [value]="so">
{{so}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="68">
<mat-select [(ngModel)]="table.showColumns" placeholder="Show Columns" name="{{page.pageId}}-show-columns" tabindex="4" multiple>
<mat-option *ngFor="let field of table.fieldsDef" [value]="field">
{{field | camelcaseWithReplace:'_'}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div> -->
</mat-expansion-panel>
</form>
<div fxLayout="row" class="mt-1">
<button class="mr-1" mat-stroked-button color="primary" (click)="onResetSettings()" tabindex="10">Reset</button>
<button mat-flat-button color="primary" (click)="onUpdateSettings()" tabindex="11">Update</button>
<button class="mr-1" mat-stroked-button color="primary" (click)="onResetPageSettings()" tabindex="10">Reset</button>
<button mat-flat-button color="primary" (click)="onUpdatePageSettings()" tabindex="11">Save</button>
</div>
</div>

99
src/app/shared/components/node-config/page-settings/page-settings.component.ts
Unescape Escape View File

@ -4,16 +4,17 @@ import { takeUntil } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { faPenRuler } from '@fortawesome/free-solid-svg-icons';
import { CURRENCY_UNITS, UserPersonaEnum, ScreenSizeEnum, FIAT_CURRENCY_UNITS, NODE_SETTINGS, UI_MESSAGES } from '../../../services/consts-enums-functions';
import { ConfigSettingsNode, Settings } from '../../../models/RTLconfig';
import { PAGE_SIZE_OPTIONS, ScreenSizeEnum, UI_MESSAGES, SORT_ORDERS } from '../../../services/consts-enums-functions';
import { ConfigSettingsNode } from '../../../models/RTLconfig';
import { LoggerService } from '../../../services/logger.service';
import { CommonService } from '../../../services/common.service';
import { RTLState } from '../../../../store/rtl.state';
import { saveSettings, setSelectedNode } from '../../../../store/rtl.actions';
import { saveSettings } from '../../../../store/rtl.actions';
import { setChildNodeSettingsECL } from '../../../../eclair/store/ecl.actions';
import { setChildNodeSettingsCL } from '../../../../cln/store/cln.actions';
import { setChildNodeSettingsLND } from '../../../../lnd/store/lnd.actions';
import { rootSelectedNode } from '../../../../store/rtl.selector';
import { RTL_PAGE_SETTINGS } from '../../../models/pageSettings';
@Component({
selector: 'rtl-page-settings',
@ -24,18 +25,11 @@ export class PageSettingsComponent implements OnInit, OnDestroy {
public faPenRuler = faPenRuler;
public selNode: ConfigSettingsNode | any;
public userPersonas = [UserPersonaEnum.OPERATOR, UserPersonaEnum.MERCHANT];
public currencyUnits = FIAT_CURRENCY_UNITS;
public themeModes = NODE_SETTINGS.modes;
public themeColors = NODE_SETTINGS.themes;
public selectedThemeMode = NODE_SETTINGS.modes[0];
public selectedThemeColor = NODE_SETTINGS.themes[0].id;
public currencyUnit = 'BTC';
public smallerCurrencyUnit = 'Sats';
public showSettingOption = true;
public previousSettings: Settings;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
public pageSizeOptions = PAGE_SIZE_OPTIONS;
public pageSettings = null;
public sortOrders = SORT_ORDERS;
unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>) {
@ -45,78 +39,25 @@ export class PageSettingsComponent implements OnInit, OnDestroy {
ngOnInit() {
this.store.select(rootSelectedNode).pipe(takeUntil(this.unSubs[0])).subscribe((selNode) => {
this.selNode = selNode;
this.selectedThemeMode = this.themeModes.find((themeMode) => this.selNode.settings.themeMode === themeMode.id) || this.themeModes[0];
this.selectedThemeColor = this.selNode.settings.themeColor;
if (!this.selNode.settings.fiatConversion) {
this.selNode.settings.currencyUnit = '';
}
this.previousSettings = JSON.parse(JSON.stringify(this.selNode.settings));
this.pageSettings = RTL_PAGE_SETTINGS[this.selNode.lnImplementation.toUpperCase()].sort((x, y) => ((x.seq < y.seq) ? -1 : ((x.seq > y.seq) ? 1 : 0)));
this.logger.info(selNode);
this.logger.warn(this.pageSettings);
});
}
onCurrencyChange(event: any) {
this.selNode.settings.currencyUnits = [...CURRENCY_UNITS, event.value];
this.store.dispatch(setChildNodeSettingsLND({
payload: {
userPersona: this.selNode.settings.userPersona, channelBackupPath: this.selNode.settings.channelBackupPath, selCurrencyUnit: event.value, currencyUnits: this.selNode.settings.currencyUnits, fiatConversion: this.selNode.settings.fiatConversion,
lnImplementation: this.selNode.lnImplementation, swapServerUrl: this.selNode.settings.swapServerUrl, boltzServerUrl: this.selNode.settings.boltzServerUrl
}
}));
this.store.dispatch(setChildNodeSettingsCL({
payload: {
userPersona: this.selNode.settings.userPersona, channelBackupPath: this.selNode.settings.channelBackupPath, selCurrencyUnit: event.value, currencyUnits: this.selNode.settings.currencyUnits, fiatConversion: this.selNode.settings.fiatConversion, lnImplementation: this.selNode.lnImplementation, swapServerUrl: this.selNode.settings.swapServerUrl, boltzServerUrl: this.selNode.settings.boltzServerUrl
}
}));
this.store.dispatch(setChildNodeSettingsECL({
payload: {
userPersona: this.selNode.settings.userPersona, channelBackupPath: this.selNode.settings.channelBackupPath, selCurrencyUnit: event.value, currencyUnits: this.selNode.settings.currencyUnits, fiatConversion: this.selNode.settings.fiatConversion, lnImplementation: this.selNode.lnImplementation, swapServerUrl: this.selNode.settings.swapServerUrl, boltzServerUrl: this.selNode.settings.boltzServerUrl
}
}));
onUpdatePageSettings() {
// if (this.selNode.settings.fiatConversion && !this.selNode.settings.currencyUnit) {
// return true;
// }
// this.store.dispatch(setChildNodeSettingsECL({
// payload: {
// userPersona: this.selNode.settings.userPersona, channelBackupPath: this.selNode.settings.channelBackupPath, selCurrencyUnit: this.selNode.settings.currencyUnit, currencyUnits: this.selNode.settings.currencyUnits, fiatConversion: this.selNode.settings.fiatConversion, lnImplementation: this.selNode.lnImplementation, swapServerUrl: this.selNode.settings.swapServerUrl, boltzServerUrl: this.selNode.settings.boltzServerUrl
// }
// }));
}
toggleSettings(toggleField: string, event?: any) {
this.selNode.settings[toggleField] = !this.selNode.settings[toggleField];
}
changeThemeColor(newThemeColor: string) {
this.selectedThemeColor = newThemeColor;
this.selNode.settings.themeColor = newThemeColor;
}
chooseThemeMode() {
this.selNode.settings.themeMode = this.selectedThemeMode.id;
}
onUpdateSettings(): boolean | void {
if (this.selNode.settings.fiatConversion && !this.selNode.settings.currencyUnit) {
return true;
}
this.logger.info(this.selNode.settings);
this.store.dispatch(saveSettings({ payload: { uiMessage: UI_MESSAGES.UPDATE_NODE_SETTINGS, settings: this.selNode.settings } }));
this.store.dispatch(setChildNodeSettingsLND({
payload: {
userPersona: this.selNode.settings.userPersona, channelBackupPath: this.selNode.settings.channelBackupPath, selCurrencyUnit: this.selNode.settings.currencyUnit, currencyUnits: this.selNode.settings.currencyUnits, fiatConversion: this.selNode.settings.fiatConversion, lnImplementation: this.selNode.lnImplementation, swapServerUrl: this.selNode.settings.swapServerUrl, boltzServerUrl: this.selNode.settings.boltzServerUrl
}
}));
this.store.dispatch(setChildNodeSettingsCL({
payload: {
userPersona: this.selNode.settings.userPersona, channelBackupPath: this.selNode.settings.channelBackupPath, selCurrencyUnit: this.selNode.settings.currencyUnit, currencyUnits: this.selNode.settings.currencyUnits, fiatConversion: this.selNode.settings.fiatConversion, lnImplementation: this.selNode.lnImplementation, swapServerUrl: this.selNode.settings.swapServerUrl, boltzServerUrl: this.selNode.settings.boltzServerUrl
}
}));
this.store.dispatch(setChildNodeSettingsECL({
payload: {
userPersona: this.selNode.settings.userPersona, channelBackupPath: this.selNode.settings.channelBackupPath, selCurrencyUnit: this.selNode.settings.currencyUnit, currencyUnits: this.selNode.settings.currencyUnits, fiatConversion: this.selNode.settings.fiatConversion, lnImplementation: this.selNode.lnImplementation, swapServerUrl: this.selNode.settings.swapServerUrl, boltzServerUrl: this.selNode.settings.boltzServerUrl
}
}));
}
onResetSettings() {
const prevIndex = this.selNode.index || -1;
this.selNode.settings = this.previousSettings;
this.selectedThemeMode = this.themeModes.find((themeMode) => themeMode.id === this.previousSettings.themeMode) || this.themeModes[0];
this.selectedThemeColor = this.previousSettings.themeColor;
this.store.dispatch(setSelectedNode({ payload: { uiMessage: UI_MESSAGES.NO_SPINNER, prevLnNodeIndex: +prevIndex, currentLnNode: this.selNode, isInitialSetup: true } }));
onResetPageSettings() {
// this.store.dispatch(setSelectedNode({ payload: { uiMessage: UI_MESSAGES.NO_SPINNER, prevLnNodeIndex: +prevIndex, currentLnNode: this.selNode, isInitialSetup: true } }));
}
ngOnDestroy() {

45
src/app/shared/models/pageSettings.ts
Unescape Escape View File

@ -0,0 +1,45 @@
import { SortOrderEnum } from '../services/consts-enums-functions';
export class TableSetting {
tableId: string;
recordsPerPage?: number;
sortBy?: string;
sortOrder?: SortOrderEnum;
showColumns?: any[];
fieldsDef?: any[];
}
export class NodePageSettings {
seq: number;
pageId: string;
tables: TableSetting[];
}
export class RTLPageSettings {
LND?: NodePageSettings[];
CLN?: NodePageSettings[];
ECL?: NodePageSettings[];
}
export const RTL_PAGE_SETTINGS: RTLPageSettings = {
LND: [],
CLN: [
{ seq: 1, pageId: 'payments', tables: [{
tableId: 'payments', recordsPerPage: 25, sortBy: 'created_at', sortOrder: SortOrderEnum.DESCENDING,
showColumns: ['created_at', 'type', 'payment_hash', 'msatoshi_sent', 'msatoshi'],
fieldsDef: ['created_at', 'type', 'payment_hash', 'msatoshi_sent', 'msatoshi', 'amount_msat', 'amount_sent_msat', 'destination', 'status', 'memo']
}] },
{ seq: 2, pageId: 'invoices', tables: [{
tableId: 'invoices', recordsPerPage: 10, sortBy: 'expires_at', sortOrder: SortOrderEnum.ASCENDING,
showColumns: ['expires_at', 'paid_at', 'type', 'description', 'msatoshi', 'msatoshi_received'],
fieldsDef: ['expires_at', 'paid_at', 'type', 'description', 'msatoshi', 'msatoshi_received', 'label', 'payment_hash', 'amount_msat', 'status', 'amount_received_msat']
}] }
],
ECL: []
};

11
src/app/shared/pipes/app.pipe.ts
Unescape Escape View File

@ -21,3 +21,14 @@ export class CamelCasePipe implements PipeTransform {
}
}
@Pipe({
name: 'camelcaseWithReplace'
})
export class CamelCaseWithReplacePipe implements PipeTransform {
transform(value: string, args?: any): string {
return value?.replace(/\s+/g, '')?.replace(/-/g, ' ').replace(new RegExp(args, 'g'), ' ').replace(/(?:^\w|[A-Z]|\b\w)/g, (word, index) => (word.toUpperCase()));
}
}

7
src/app/shared/services/consts-enums-functions.ts
Unescape Escape View File

@ -659,3 +659,10 @@ export const ECL_CHANNEL_TYPES = [
{ id: 'static_remotekey', placeholder: 'Static Remotekey' },
{ id: 'anchor_outputs_zero_fee_htlc_tx', placeholder: 'Anchor Output' }
];
export enum SortOrderEnum {
ASCENDING = 'Ascending',
DESCENDING = 'Descending'
}
export const SORT_ORDERS = ['Ascending', 'Descending'];

4
src/app/shared/shared.module.ts
Unescape Escape View File

@ -108,7 +108,7 @@ import { AutoFocusDirective } from './directive/auto-focus.directive';
import { MonthlyDateDirective, YearlyDateDirective } from './directive/date-formats.directive';
import { MaxValidator } from './directive/max-amount.directive';
import { MinValidator } from './directive/min-amount.directive';
import { RemoveLeadingZerosPipe, CamelCasePipe } from './pipes/app.pipe';
import { RemoveLeadingZerosPipe, CamelCasePipe, CamelCaseWithReplacePipe } from './pipes/app.pipe';
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: false,
@ -233,6 +233,7 @@ export const DEFAULT_DATE_FORMAT: MatDateFormats = {
YearlyDateDirective,
RemoveLeadingZerosPipe,
CamelCasePipe,
CamelCaseWithReplacePipe,
MaxValidator,
MinValidator,
AppSettingsComponent,
@ -311,6 +312,7 @@ export const DEFAULT_DATE_FORMAT: MatDateFormats = {
MinValidator,
RemoveLeadingZerosPipe,
CamelCasePipe,
CamelCaseWithReplacePipe,
AuthSettingsComponent,
TransactionsReportTableComponent,
OnChainGeneratedAddressComponent,

Write Preview
Loading…
Cancel
Save