settings.component.html

<h3 class="mat-h3 page-header">{{'PAGES.SETTINGS.TITLE' | translate}}</h3>
<mat-divider class="divider"></mat-divider>
<div class="tab-group-header">
  <mat-tab-group #tabGroup id="tabGroup" [(selectedIndex)]="selectedIndex">
    <mat-tab #stash id="stash" class="active" [disabled]="!sessionId">
      <ng-template mat-tab-label>
        <mat-icon class="tab-icon">format_list_numbered</mat-icon>
        &nbsp;Stashtabs
      </ng-template>
    </mat-tab>
    <mat-tab #general id="keybinds">
      <ng-template mat-tab-label>
        <mat-icon class="tab-icon">keyboard</mat-icon>
        &nbsp;Keybinds
      </ng-template>
    </mat-tab>
    <mat-tab #window id="window">
      <ng-template mat-tab-label>
        <mat-icon class="tab-icon">laptop</mat-icon>
        &nbsp;Window
      </ng-template>
    </mat-tab>
    <mat-tab #networth id="networth">
      <ng-template mat-tab-label>
        <mat-icon class="tab-icon">attach_money</mat-icon>
        &nbsp;Net worth
      </ng-template>
    </mat-tab>
    <mat-tab #general settings id="general">
      <ng-template mat-tab-label>
        <mat-icon class="tab-icon">info</mat-icon>
        &nbsp;Tutorials
      </ng-template>
    </mat-tab>
    <mat-tab #general settings id="debug">
      <ng-template mat-tab-label>
        <mat-icon class="tab-icon">help</mat-icon>
        &nbsp;Help
      </ng-template>
    </mat-tab>
  </mat-tab-group>
</div>

<div [hidden]="selectedIndex != 0">
  <h3 class="mat-h3">
    {{'PAGES.SETTINGS.STASHTAB_LIST_HEADER' | translate}}
  </h3>
  <div class="table-outer-wrapper">
    <div class="search-form-wrapper">
      <form class="form search-form" [formGroup]="form">
        <mat-form-field>
          <input matInput formControlName="searchText" placeholder="{{'STASH.SEARCH' | translate}}" class="search-text-input"
            (ngModelChange)="search()">
        </mat-form-field>
      </form>
    </div>
    <div class="stash-table-wrapper">
      <app-stashtab-list #table [validated]="sessionIdValid || sessionId == undefined"></app-stashtab-list>
    </div>
  </div>
</div>

<div [hidden]="selectedIndex != 1">
  <div class="keybinds-info-text">
    <p class="mat-body-1">
      This page lets you select custom keybindings for functions in the app, e.g reporting the current gain for your
      group.
      <br /> These keybinds will only be active when either Path of Exile or Exilence is in focus.
    </p>
    <p class="mat-body-1">
      To avoid any conflicts with the keybinds, make sure the combination you select does not interfere with other
      macros or in-game
      binds.
    </p>
  </div>
  <div class="setting-tab-content">
    <mat-grid-list cols="9" rowHeight="50px">
      <!-- col-headers -->
      <mat-grid-tile [colspan]="3" [rowspan]="1" class="grid-header">
        <span class="grid-header-title">
          Event name
        </span>
      </mat-grid-tile>
      <mat-grid-tile [colspan]="2" [rowspan]="1" class="grid-header">
        <span class="grid-header-title">
          Modifier-key
        </span>
      </mat-grid-tile>
      <mat-grid-tile [colspan]="2" [rowspan]="1" class="grid-header">
        <span class="grid-header-title">
          Trigger-key
        </span>
      </mat-grid-tile>
      <mat-grid-tile [colspan]="2" [rowspan]="1" class="grid-header">
        <span class="grid-header-title">
          Enabled
        </span>
      </mat-grid-tile>
      <!-- keybinds -->
      <ng-container *ngFor="let keybind of keybinds">
        <mat-grid-tile [colspan]="3" [rowspan]="1">
          {{keybind.title}}
        </mat-grid-tile>
        <mat-grid-tile [colspan]="2" [rowspan]="1">
          <mat-form-field>
            <mat-select [(value)]="keybind.modifierKeyCode" [disabled]="!keybind.enabled">
              <mat-option value="None">None</mat-option>
              <mat-option *ngFor="let key of modifierKeys" value="{{key.name}}">{{key.name}}</mat-option>
            </mat-select>
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile [colspan]="2" [rowspan]="1">
          <mat-form-field>
            <mat-select [(value)]="keybind.triggerKeyCode" [disabled]="!keybind.enabled">
              <!-- <mat-option>None</mat-option> -->
              <mat-option *ngFor="let key of triggerKeys" value="{{key.name}}">{{key.name}}</mat-option>
            </mat-select>
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile [colspan]="2" [rowspan]="1">
          <mat-checkbox [(ngModel)]="keybind.enabled"></mat-checkbox>
        </mat-grid-tile>
      </ng-container>
    </mat-grid-list>
    <mat-divider class="divider btn-area-divider"></mat-divider>
    <div class="flex-area">
      <div class="right-aligned">
        <button mat-raised-button color="primary" (click)="resetKeybinds()" type="button">{{'KEYBINDS.RESET' |
          translate}}</button>
        <button mat-raised-button color="primary" (click)="saveKeybinds()" type="button">{{'KEYBINDS.SAVE' |
          translate}}</button>
      </div>
    </div>

  </div>
</div>

<div [hidden]="selectedIndex != 2">
  <div class="setting-tab-content">
    <h3 class="mat-h4 page-header">Misc</h3>
    <mat-divider class="divider"></mat-divider>
    <div class="setting-inner-content">
      <p class="setting-desc-text">
        Check this setting if you want Exilence to be on top at all times
      </p>
      <mat-checkbox class="setting-checkbox" [(ngModel)]="alwaysOnTop" (ngModelChange)="toggleAlwaysOnTop()">Set window
        always on top</mat-checkbox>
      <p class="setting-desc-text">
        Check this setting if you want Exilence to be resizable
      </p>
      <mat-checkbox class="setting-checkbox" [(ngModel)]="isResizable" (ngModelChange)="toggleResizable()">Enable
        resize of window</mat-checkbox>
    </div>
  </div>
</div>

<div [hidden]="selectedIndex != 3">
  <div class="setting-tab-content">
    <h3 class="mat-h4 page-header">Pricing</h3>
    <mat-divider class="divider"></mat-divider>
    <div class="setting-inner-content">
      <p class="setting-desc-text">
        Check this setting to include low confidence prices
      </p>
      <mat-checkbox class="setting-checkbox" [(ngModel)]="lowConfidencePricing" (ngModelChange)="toggleLowConfidencePricing()">Low
        confidence pricing</mat-checkbox>
      <p class="setting-desc-text">
        Check this setting to include the inventory and equipment for net worth
      </p>
      <mat-checkbox class="setting-checkbox" [(ngModel)]="characterPricing" (ngModelChange)="toggleCharacterPricing()">Character-specific
        pricing</mat-checkbox>
    </div>
    <h3 class="mat-h4 page-header new-section">Calculations</h3>
    <mat-divider class="divider"></mat-divider>
    <p class="setting-desc-text">
    </p>
    <mat-form-field>
      <mat-label>Item value treshold</mat-label>
      <mat-select #fontSize value="{{itemValueTreshold}}" (selectionChange)="toggleItemValueTreshold($event)">
        <mat-option value="0">Include all items</mat-option>
        <mat-option value="1">>= 1c</mat-option>
        <mat-option value="2">>= 2c</mat-option>
        <mat-option value="3">>= 3c</mat-option>
        <mat-option value="5">>= 5c</mat-option>
        <mat-option value="10">>= 10c</mat-option>
      </mat-select>
    </mat-form-field>
    <p class="setting-desc-text">
      Choose how many hours back in history that should be used for "Gain per hour"
    </p>
    <mat-form-field>
      <mat-label>Calculate gain over past</mat-label>
      <mat-select #fontSize value="{{gainHours}}" (selectionChange)="toggleGainHours($event)">
        <mat-option value="1">1 hour</mat-option>
        <mat-option value="2">2 hours</mat-option>
        <mat-option value="3">3 hours</mat-option>
        <mat-option value="5">5 hours</mat-option>
        <mat-option value="10">10 hours</mat-option>
        <mat-option value="24">24 hours</mat-option>
      </mat-select>
    </mat-form-field>
    <h3 class="mat-h4 page-header new-section">History</h3>
    <mat-divider class="divider"></mat-divider>
    <p class="setting-desc-text">
      Choose how much days back in history the "Net worth graph" shows
    </p>
    <mat-form-field>
      <mat-label>Net worth history for</mat-label>
      <mat-select #fontSize value="{{netWorthHistoryDays}}" (selectionChange)="toggleNetWorthHistoryDays($event)">
        <mat-option value="1">1 day</mat-option>
        <mat-option value="2">2 days</mat-option>
        <mat-option value="3">3 days</mat-option>
        <mat-option value="7">7 days</mat-option>
        <mat-option value="14">14 days</mat-option>
      </mat-select>
    </mat-form-field>
  </div>
</div>

<div [hidden]="selectedIndex != 4">
  <div class="setting-tab-content">
    <h3 class="mat-h4 page-header">Visibility</h3>
    <mat-divider class="divider"></mat-divider>
    <div class="setting-inner-content">
      <p class="setting-desc-text">
        Press this button to restore all tutorial tooltips to their original state
      </p>
      <button mat-raised-button color="primary" (click)="resetDialogs()" type="button">{{'SETTINGS.RESET_DIALOGS' |
        translate}}</button>
      <br /><br />
      <p class="setting-desc-text">
        Check this setting if you want to ignore all helpful tooltips
      </p>
      <mat-checkbox class="setting-checkbox" [(ngModel)]="hideTooltips" (ngModelChange)="toggleHideTooltips()">Hide
        tooltips</mat-checkbox>
    </div>
  </div>
</div>

<div [hidden]="selectedIndex != 5">
  <div class="setting-tab-content">
    <h3 class="mat-h4 page-header">
      This page is aimed to help you resolve any problems you might have with Exilence.
      Know that you can always contact us on <a class="inline-link" (click)="openLink('https://discord.gg/ymr3VnA')">Discord</a>
      if you have any questions or problems using Exilence.
    </h3>
    <mat-divider class="divider"></mat-divider>
    <div class="setting-inner-content">
      <mat-accordion>
        <mat-expansion-panel [expanded]="true">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <b>Step 1: </b>&nbsp; Clear all settings and saved data.
            </mat-panel-title>
          </mat-expansion-panel-header>
          <p class="setting-desc-text">
            This will clear all your saved data and settings including areas and networth.
          </p>
          <button mat-raised-button color="primary" (click)="clearSettings()" type="button">{{'SETTINGS.CLEAR_SETINGS_RELAUNCH'
            | translate}}</button>
        </mat-expansion-panel>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-title>
              <b>Step 2: </b>&nbsp; Upload settings and log to Exilence server.
            </mat-panel-title>
          </mat-expansion-panel-header>
          <p class="setting-desc-text">
            This will upload all your saved data and settings to the Exilence server. Only do this if step 1 didn't
            help you and make sure to ping us on Discord after so we can investigate your issue.
          </p>
          <button mat-raised-button color="primary" (click)="upload()" [disabled]="uploaded" type="button">{{'SETTINGS.UPLOAD_FILE'
            | translate}}</button>
        </mat-expansion-panel>
      </mat-accordion>

    </div>
  </div>