You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
6.3 KiB
HTML
100 lines
6.3 KiB
HTML
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" [perfectScrollbar]>
|
|
<form #form="ngForm" fxLayout="column" fxLayoutAlign="start stretch" class="settings-container page-sub-title-container">
|
|
<mat-accordion displayMode="flat" multi="false">
|
|
<mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
<fa-icon class="page-title-img mr-1" [icon]="faEyeSlash" />
|
|
<span class="page-title">Open Unannounced Channels</span>
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div fxLayout="column" fxLayoutAlign="start stretch">
|
|
<div fxLayout="row" fxFlex="100" class="alert alert-info mb-1">
|
|
<fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle" />
|
|
<span>Use this control to toggle setting which defaults to opening unannounced channels only.</span>
|
|
</div>
|
|
<div fxLayout="row wrap" fxLayoutAlign="start center">
|
|
<mat-slide-toggle tabindex="1" color="primary" name="unannouncedChannels" [(ngModel)]="selNode.settings.unannouncedChannels" (change)="!selNode.settings.unannouncedChannels">Open Unannounced Channels</mat-slide-toggle>
|
|
</div>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
<mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
<fa-icon class="page-title-img mr-1" [icon]="faMoneyBillAlt" />
|
|
<span class="page-title">Balance Display</span>
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div fxLayout="column" fxLayoutAlign="start stretch">
|
|
<div fxFlex="100" class="alert alert-warn">
|
|
<fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
|
|
<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" name="fiatConversion" class="mr-2" [(ngModel)]="selNode.settings.fiatConversion" (change)="!selNode.settings.currencyUnit">Enable Fiat Conversion</mat-slide-toggle>
|
|
<mat-form-field fxFlex="25">
|
|
<mat-label>Fiat Currency</mat-label>
|
|
<mat-select #currencyUnit="ngModel" autoFocus tabindex="3" name="currencyUnit" [disabled]="!selNode.settings.fiatConversion" [required]="selNode.settings.fiatConversion" [(ngModel)]="selNode.settings.currencyUnit" (selectionChange)="onCurrencyChange($event)">
|
|
<mat-option *ngFor="let currencyUnit of currencyUnits" [value]="currencyUnit.id">
|
|
<span *ngIf="currencyUnit && currencyUnit.iconType === 'FA'" class="mr-1"><fa-icon [icon]="currencyUnit.symbol" /></span>
|
|
<span *ngIf="currencyUnit && currencyUnit.iconType === 'SVG'" class="mr-1"><span fxLayoutAlign="center center" [innerHTML]="currencyUnit.symbol"></span></span>
|
|
{{currencyUnit.name}} ({{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>
|
|
</mat-expansion-panel>
|
|
<mat-expansion-panel fxLayout="column" class="flat-expansion-panel mt-1">
|
|
<mat-expansion-panel-header>
|
|
<mat-panel-title>
|
|
<fa-icon class="page-title-img mr-1" [icon]="faPaintBrush" />
|
|
<span class="page-title">Customization</span>
|
|
</mat-panel-title>
|
|
</mat-expansion-panel-header>
|
|
<div fxLayout="column" fxLayoutAlign="start stretch">
|
|
<div fxLayout="row" fxFlex="100" class="alert alert-info mb-0">
|
|
<fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle" />
|
|
<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 class="radio-group" color="primary" tabindex="1" name="userPersona" [(ngModel)]="selNode.settings.userPersona">
|
|
<mat-radio-button *ngFor="let userPersona of userPersonas" class="radio-text mr-4" [value]="userPersona" [checked]="selNode.settings.userPersona === userPersona">
|
|
{{userPersona | titlecase}}
|
|
</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
<mat-divider class="mt-1" />
|
|
<div fxLayout="column" fxFlex="100" fxLayoutAlign="start start">
|
|
<h4>Mode</h4>
|
|
<mat-radio-group class="radio-group" color="primary" name="themeMode" [(ngModel)]="selectedThemeMode" (change)="chooseThemeMode()">
|
|
<mat-radio-button *ngFor="let themeMode of themeModes" tabindex="5" class="radio-text mr-4" [value]="themeMode">{{themeMode.name}}
|
|
</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
<mat-divider class="mt-1" />
|
|
<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>
|
|
</div>
|
|
</mat-expansion-panel>
|
|
</mat-accordion>
|
|
</form>
|
|
<div fxLayout="column" fxLayoutAlign="start start" class="mt-1">
|
|
<div fxLayout="row">
|
|
<button class="mr-1" mat-stroked-button color="primary" tabindex="10" (click)="onResetSettings()">Reset</button>
|
|
<button mat-flat-button color="primary" tabindex="11" (click)="onUpdateNodeSettings()">Update</button>
|
|
</div>
|
|
</div>
|
|
</div>
|