rdt-client/client/src/app/settings/settings.component.html

<div class="tabs">
  <ul>
    <li [ngClass]="{ 'is-active': activeTab === 0 }" (click)="activeTab = 0">
      <a>General</a>
    </li>
    <li [ngClass]="{ 'is-active': activeTab === 1 }" (click)="activeTab = 1">
      <a>Download Client</a>
    </li>
    <li [ngClass]="{ 'is-active': activeTab === 2 }" (click)="activeTab = 2">
      <a>Radarr/Sonarr</a>
    </li>
    <li [ngClass]="{ 'is-active': activeTab === 3 }" (click)="activeTab = 3">
      <a>Tests</a>
    </li>
  </ul>
</div>

<div *ngIf="activeTab === 0">
  <div class="field">
    <label class="label">Real-Debrid API Key</label>
    <div class="control">
      <input class="input" type="text" maxlength="100" [(ngModel)]="settingRealDebridApiKey" />
    </div>
    <p class="help">
      You can find your API key here:
      <a href="https://real-debrid.com/apitoken" target="_blank" rel="noopener">https://real-debrid.com/apitoken</a>.
    </p>
  </div>

  <div class="field">
    <label class="label">Log level</label>
    <div class="control select is-fullwidth">
      <select [(ngModel)]="settingLogLevel">
        <option value="Verbose">Verbose</option>
        <option value="Debug">Debug</option>
        <option value="Information">Information</option>
        <option value="Warning">Warning</option>
        <option value="Error">Error</option>
        <option value="Fatal">Fatal</option>
      </select>
    </div>
    <p class="help">Recommended level is Warning, set to Debug to get the most info.</p>
  </div>
  <div class="field">
    <label class="label">Download path</label>
    <div class="control">
      <input class="input" type="text" maxlength="1000" [(ngModel)]="settingDownloadPath" />
    </div>
    <p class="help">Path in the docker container to download files to (i.e. /data/downloads).</p>
  </div>
  <div class="field">
    <label class="label">Mapped path</label>
    <div class="control">
      <input class="input" type="text" maxlength="1000" [(ngModel)]="settingMappedPath" />
    </div>
    <p class="help">
      Path where files are downloaded to on your host (i.e. D:\Downloads). This path is used for Radarr and Sonarr to
      find your downloads.
    </p>
  </div>

  <div class="field">
    <label class="label">Maximum unpack processes</label>
    <div class="control">
      <input class="input" type="number" max="100" min="1" [(ngModel)]="settingUnpackLimit" />
    </div>
    <p class="help">Maximum amount of downloads that get unpacked on your host at the same time.</p>
  </div>
</div>

<div *ngIf="activeTab === 1">
  <div class="field">
    <label class="label">Download client</label>
    <div class="control select is-fullwidth">
      <select [(ngModel)]="settingDownloadClient">
        <option value="Simple">Simple Downloader</option>
        <option value="MultiPart">Multi Part Downloader</option>
      </select>
    </div>
    <p class="help">
      Select which download client to use, see the
      <a href="https://github.com/rogerfar/rdt-client/" target="_blank">README</a> for the various options.
    </p>
  </div>

  <div class="field" *ngIf="settingDownloadClient === 'MultiPart'">
    <label class="label">Temp Download path</label>
    <div class="control">
      <input class="input" type="text" maxlength="1000" [(ngModel)]="settingTempPath" />
    </div>
    <p class="help">
      Path in the docker container to temporarily download to (i.e. /data/temp). Make sure the docker container has
      enough disk space if using a path inside the container.
    </p>
  </div>

  <div class="field">
    <label class="label">Maximum parallel downloads</label>
    <div class="control">
      <input class="input" type="number" max="100" min="1" [(ngModel)]="settingDownloadLimit" />
    </div>
    <p class="help">Maximum amount of torrents that get downloaded to your host at the same time.</p>
  </div>

  <div class="field" *ngIf="settingDownloadClient === 'MultiPart'">
    <label class="label">Parallel connections per download</label>
    <div class="control">
      <input class="input" type="number" max="100" min="0" [(ngModel)]="settingDownloadChunkCount" />
    </div>
    <p class="help">
      Maximum amount of parallel threads that are used to download a single torrent to your host. If set to 1 no
      parallel downloading will be done.
    </p>
  </div>
  <div class="field" *ngIf="settingDownloadClient === 'MultiPart'">
    <label class="label">Download speed (in MB/s)</label>
    <div class="control">
      <input class="input" type="number" max="1000" min="0" [(ngModel)]="settingDownloadMaxSpeed" />
    </div>
    <p class="help">Maximum download speed in Megabytes per second. When set to 0 unlimited speed is used.</p>
  </div>
  <div class="field" *ngIf="settingDownloadClient === 'MultiPart'">
    <label class="label">Proxy Server</label>
    <div class="control">
      <input class="input" type="text" maxlength="1000" [(ngModel)]="settingProxyServer" />
    </div>
    <p class="help">Address of a proxy server.</p>
  </div>
</div>

<div *ngIf="activeTab === 2">
  <h3 class="subtitle">
    The following settings only apply when a torrent gets added through the qbittorrent API, usually Radarr or Sonarr.
  </h3>
  <div class="field">
    <label class="label">Minimum file size to download</label>
    <div class="control">
      <div class="field has-addons" style="margin-bottom: 0">
        <div class="control is-expanded">
          <input class="input" type="number" max="1000" min="0" [(ngModel)]="settingMinFileSize" />
        </div>
        <div class="control">
          <a class="button is-static">MB</a>
        </div>
      </div>
      <div class="help">
        Files that are smaller than this setting are skipped and not downloaded. When set to 0 all files are downloaded.
        When downloading from Radarr or Sonarr it's recommended to keep this setting at atleast a few MB to avoid
        Real-Debrid having to re-download the torrent.
      </div>
    </div>
  </div>

  <div class="field">
    <div class="control">
      <label class="checkbox">
        <input type="checkbox" [(ngModel)]="settingOnlyDownloadAvailableFiles" />
        Only download available files on Real-Debrid
      </label>
      <div class="help">
        When selected, it will only download files in the torrent that have been download by Real-Debrid. You can use
        this in combination with the Min File size setting above.
      </div>
    </div>
  </div>
</div>

<div *ngIf="activeTab === 3">
  <div class="field">
    <label class="label">Test download path permissions</label>
    <div class="control">
      <button
        class="button is-warning"
        (click)="testDownloadPath()"
        [disabled]="saving"
        [ngClass]="{ 'is-loading': saving }"
        *ngIf="!testPathError && !testPathSuccess"
      >
        Test permissions
      </button>
      <div class="notification is-danger is-light" *ngIf="testPathError">
        Could not test your download path<br />
        {{ testPathError }}
      </div>

      <div class="notification is-success is-light" *ngIf="testPathSuccess">Your download path looks good!</div>
    </div>
    <div class="help">This will check if the download folder has write permissions.</div>
  </div>

  <div class="field">
    <label class="label">Test Real-Debrid download speed</label>
    <div class="control">
      <button
        class="button is-warning"
        (click)="testDownloadSpeed()"
        [disabled]="saving"
        [ngClass]="{ 'is-loading': saving }"
        *ngIf="!testDownloadSpeedError && !testDownloadSpeedSuccess"
      >
        Test download speed
      </button>
      <div class="notification is-danger is-light" *ngIf="testDownloadSpeedError">
        Could not test your download speed<br />
        {{ testDownloadSpeedError }}
      </div>

      <div class="notification is-success is-light" *ngIf="testDownloadSpeedSuccess">
        Download speed {{ testDownloadSpeedSuccess | filesize }}/s
      </div>
    </div>
    <div class="help">
      This will attempt to download a 10GB file from Real-Debrid. When 50MB has been downloaded the test will stop.
    </div>
  </div>

  <div class="field">
    <label class="label">Test download folder write speed</label>
    <div class="control">
      <button
        class="button is-warning"
        (click)="testWriteSpeed()"
        [disabled]="saving"
        [ngClass]="{ 'is-loading': saving }"
        *ngIf="!testWriteSpeedError && !testWriteSpeedSuccess"
      >
        Test write speed
      </button>
      <div class="notification is-danger is-light" *ngIf="testWriteSpeedError">
        Could not test your download speed<br />
        {{ testWriteSpeedError }}
      </div>

      <div class="notification is-success is-light" *ngIf="testWriteSpeedSuccess">
        Write speed {{ testWriteSpeedSuccess | filesize }}/s
      </div>
    </div>
    <div class="help">This will write a small file to your download folder to see how fast it can write to it.</div>
  </div>
</div>

<div class="field">
  <div class="control">
    <div class="notification is-danger is-light" *ngIf="error?.length > 0">Error saving settings: {{ error }}</div>
  </div>
</div>

<div class="field" *ngIf="activeTab != 3">
  <div class="control">
    <button class="button is-success" (click)="ok()" [disabled]="saving" [ngClass]="{ 'is-loading': saving }">
      Save Settings
    </button>
  </div>
</div>