RTL/src/app/shared/components/app-settings/app-settings.component.html

<div fxLayout="row" fxLayoutAlign="start center" class="padding-gap-x page-title-container">
  <fa-icon [icon]="faTools" class="page-title-img mr-1"></fa-icon>
  <span class="page-title">Application Settings</span>
</div>
<div fxLayout="column" class="padding-gap-x settings-container">
  <mat-card>
    <mat-card-content fxLayout="column" class="card-content-gap">
      <div fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="center space-between">
        <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
          <div fxFlex="25">
            <div fxFlex.gt-md="50" fxFlex="80">
              <h4>User Persona</h4>
              <mat-select [(ngModel)]="selNode.settings.userPersona" placeholder="Select User Persona" tabindex="1" required name="userPersona">
                <mat-option *ngFor="let userPersona of userPersonas" [value]="userPersona">
                  {{userPersona}}
                </mat-option>
              </mat-select>
            </div>
          </div>
          <div fxFlex="25" *ngIf="appConfig.nodes.length && appConfig.nodes.length > 1">
            <div fxFlex.gt-md="50" fxFlex="80">
              <h4>Default Selected Node</h4>
              <mat-select [(ngModel)]="appConfig.defaultNodeIndex" placeholder="Default Node" tabindex="1" required name="defaultNode">
                <mat-option *ngFor="let node of appConfig.nodes" [value]="node.index">
                  {{node.lnNode}} ({{node.lnImplementation}})
                </mat-option>
              </mat-select>
            </div>
          </div>
          <div fxFlex="25">
            <div fxFlex.gt-md="30" fxFlex="70">
              <h4>Currency Unit</h4>
              <mat-select [(ngModel)]="selNode.settings.currencyUnit" placeholder="Currency Unit" (selectionChange)="onCurrencyChange($event)" tabindex="1" required name="currencyUnit">
                <mat-option *ngFor="let currencyUnit of currencyUnits" [value]="currencyUnit.id">
                  {{currencyUnit.id}}
                </mat-option>
              </mat-select>
            </div>
          </div>
          <div fxFlex="25" *ngIf="selNode.lnImplementation !== 'CLT'">
            <div fxFlex="60">
              <h4>BTC</h4>
              <div fxLayoutAlign="start center">
                <span class="slider-text">{{smallerCurrencyUnit}}</span>
                <mat-slide-toggle color="primary" [checked]="selNode?.settings?.satsToBTC"
                  (change)="toggleSettings('satsToBTC')" labelPosition="before"></mat-slide-toggle>
                <span class="slider-text">{{currencyUnit}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div *ngIf="showSettingOption" fxLayout="column" fxLayout.gt-sm="row wrap"
        fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="center space-between" class="mt-4">
        <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
          <mat-divider class="mb-2"></mat-divider>
        </div>
        <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
          <div fxFlex="50">
            <div fxFlex="60">
              <h4>Font Size</h4>
              <mat-radio-group color="primary" [(ngModel)]="selectedFontSize" (change)="chooseFontSize()">
                <mat-radio-button *ngFor="let fontSize of fontSizes" [value]="fontSize">{{fontSize.name}}
                </mat-radio-button>
              </mat-radio-group>
            </div>
          </div>
          <div fxFlex="50">
            <h4>Menu</h4>
            <div fxLayoutAlign="start center">
              <span class="slider-text">Horizontal</span>
              <mat-slide-toggle color="primary" [checked]="selNode?.settings?.menu === 'vertical'"
                (change)="toggleSettings('menu', $event)" labelPosition="before"></mat-slide-toggle>
              <span class="slider-text">Vertical</span>
            </div>
          </div>
        </div>
        <div *ngIf="showSettingOption && selNode?.settings?.menu === 'vertical'" fxFlex="100" fxLayout="row"
          fxLayoutAlign="space-between center">
          <div fxFlex="50">
            <div fxFlex="60">
              <h4>Menu Type</h4>
              <mat-radio-group color="primary" [(ngModel)]="selectedMenuType" (change)="chooseMenuType()">
                <mat-radio-button *ngFor="let menuType of menuTypes" [value]="menuType">{{menuType.name}}</mat-radio-button>
              </mat-radio-group>
            </div>
          </div>
          <div fxFlex="25">
            <h4>Side Navigation</h4>
            <div fxLayoutAlign="start center">
              <span class="slider-text">Closed</span>
              <mat-slide-toggle color="primary" [checked]="selNode?.settings?.flgSidenavOpened"
                (change)="toggleSettings('flgSidenavOpened')" labelPosition="before"></mat-slide-toggle>
              <span class="slider-text">Open</span>
            </div>
          </div>
          <div fxFlex="25">
            <h4>Side Navigation</h4>
            <div fxLayoutAlign="start center">
              <span class="slider-text">Unpinned</span>
              <mat-slide-toggle color="primary" [checked]="selNode?.settings?.flgSidenavPinned"
                (change)="toggleSettings('flgSidenavPinned')" labelPosition="before"></mat-slide-toggle>
              <span class="slider-text">Pinned</span>
            </div>
          </div>
        </div>
      </div>
      <div *ngIf="showSettingOption" fxLayout="column" fxLayoutAlign="start space-between" class="mt-4">
        <mat-divider class="mb-2"></mat-divider>
        <div fxLayout="row" fxLayoutAlign="space-between start">
          <div fxFlex="50">
            <div fxFlex="40">
              <h4>Mode</h4>
              <mat-radio-group color="primary" [(ngModel)]="selectedThemeMode" (change)="chooseThemeMode()">
                <mat-radio-button *ngFor="let themeMode of themeModes" [value]="themeMode">{{themeMode.name}}
                </mat-radio-button>
              </mat-radio-group>
            </div>
          </div>
          <div fxLayout="column" fxFlex="50">
            <h4>Skins</h4>
            <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between start">
              <span *ngFor="let themeColor of themeColors">
                <div [class]="themeColor" [ngClass]="{'skin': true, 'selected-color': selectedThemeColor === themeColor}" (click)="changeThemeColor(themeColor)"></div>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div fxLayout="row" fxLayoutAlign="start start" class="mt-4">
        <mat-divider class="mb-2"></mat-divider>
        <div class="mt-2">
          <button fxFlex="10" fxLayoutAlign="center center" mat-stroked-button color="primary" (click)="onResetSettings()" tabindex="12" class="mr-2">Reset</button>
          <button fxFlex="10" fxLayoutAlign="center center" mat-raised-button color="primary" (click)="onUpdateSettings()" tabindex="13">Update</button>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</div>