Reorganize settings in separate tabs.

This commit is contained in:
Roger Far 2021-07-18 14:38:49 -06:00
parent 3e832cc416
commit 4daa5ba4dc
3 changed files with 232 additions and 191 deletions

View file

@ -6,218 +6,251 @@
<button class="delete" aria-label="close" (click)="cancel()"></button>
</header>
<section class="modal-card-body">
<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 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 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 *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>
<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 *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>
<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">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 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 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="100" min="1" [(ngModel)]="settingMinFileSize" />
<div *ngIf="activeTab === 2">
<div class="field">
<h3 class="subtitle">
The following settings only apply when a torrent gets added through the qbittorrent API, usually Radarr or
Sonarr.
</h3>
<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="100" min="1" [(ngModel)]="settingMinFileSize" />
</div>
<div class="control">
<a class="button is-static">MB</a>
</div>
</div>
<div class="control">
<a class="button is-static">MB</a>
<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 RealDebrid 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 RealDebrid
</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 class="help">When selecting files in the torrent, skip files smaller than this setting.</div>
</div>
</div>
<div class="field">
<div class="control">
<label class="checkbox">
<input type="checkbox" [(ngModel)]="settingOnlyDownloadAvailableFiles" />
Only download available files on RealDebrid
</label>
<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 RealDebrid 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">
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.
This will attempt to download a 10GB file from Real Debrid. When 50MB has been downloaded the test will
stop.
</div>
</div>
</div>
<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 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="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 RealDebrid 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 class="help">
This will write a small file to your download folder to see how fast it can write to it.
</div>
</div>
<div class="help">
This will download a 10GB test file from RealDebrid. Hit cancel when you have seen enough.
</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 class="notification is-danger is-light" *ngIf="error?.length > 0">Error saving settings: {{ error }}</div>

View file

@ -21,6 +21,8 @@ export class SettingsComponent implements OnInit {
@Output()
public openChange = new EventEmitter<boolean>();
public activeTab = 0;
public isActive = false;
public saving = false;

View file

@ -20,6 +20,12 @@ namespace RdtClient.Data.Models.Data
public DateTimeOffset Added { get; set; }
public DateTimeOffset? Completed { get; set; }
public Boolean DownloadOnlyAvailableFiles { get; set; }
public String DownloadFiles { get; set; }
public Int32 MinimumFileSize { get; set; }
public Boolean AutoDelete { get; set; }
public String FileOrMagnet { get; set; }