diff --git a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html index e18b42fd1..6e3dc6720 100644 --- a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html +++ b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html @@ -2,168 +2,171 @@
Sonarr Settings -
-
- Advanced - -
- -
-
-
-
- - + +
+
+
+
+ V3
-
-
- -
-
-
- - +
+ SSL
-
- -
-
-
- - +
+
+ Enable +
+
+ Advanced
-
-
- - - -
- -
- - - -
- - -
- - - -
-
- -
- +
+
+
+ + Sonarr Hostname or IP + + The IP/Hostname is required +
-
-
-
- -
- -
- - +
+ + Port + + The Port is required +
-
- - -
- -
- +
+ + Sonarr API Key + + The API Key is required +
-
- -
- -
- - +
+ + Sonarr Base URL + +
- -
- -
- +
+ +
+
+
+ + Quality Profiles + + {{quality.name}} + + A Default Quality Profile is required + +
+
+ +
+
+
+
+ + Quality Profiles (Anime) + + {{quality.name}} + + A Default Quality Profile is required + +
+
-
-
- -
- - +
+
+
+ + Default Root Folders + + {{folder.path}} + + A Default Root Folder is required + +
+
+ +
+
+
+
+ + Default Root Folders (Anime) + + {{folder.path}} + + A Default Root Folder (Anime) is required + +
+
-
+ +
+ +
+
+ + Language Profiles + + {{lang.name}} + + A Language Profile is required + +
+
+ +
+
+
-
-
- - +
+
+ + +
+
- -
-
-
- - +
+
+ + +
-
-
-
-
- +
+
+
+ +
-
-
-
- +
+
+ +
diff --git a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.scss b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.scss index 2d51f1403..dd9ab640e 100644 --- a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.scss +++ b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.scss @@ -5,29 +5,11 @@ margin-top: 10px; } -.col-md-6 { - display: contents; +.col-8 { + display: inline-table; } - .col-md-5 { - display: contents; -} - -.col-md-4 { - display: contents; -} - -.control-label { - font-weight: 400; -} - -.row { - display: block; -} - -::ng-deep .dark .btn:hover { - box-shadow: 0 5px 11px 0 rgba(255, 255, 255, 0.18), 0 4px 15px 0 rgba(255, 255, 255, 0.15); - color: inherit; + display: inline-table; } ::ng-deep .load { @@ -35,15 +17,3 @@ margin-left: 3em; padding: 0.5rem 1.14rem; } - -@media (min-width:1440px) { - .col-md-6 { - display: inline-table; - } - .col-md-5 { - display: inline-table; - } - .col-md-4 { - display: inline-table; - } -} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.ts b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.ts index ec044d9e3..c4cb0d920 100644 --- a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.ts +++ b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from "@angular/core"; -import { FormBuilder, FormGroup, Validators } from "@angular/forms"; +import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms"; import { ILanguageProfiles, ISonarrProfile, ISonarrRootFolder } from "../../interfaces"; @@ -28,12 +28,32 @@ export class SonarrComponent implements OnInit { public langRunning: boolean; public form: FormGroup; public advanced = false; + formErrors: any; constructor(private settingsService: SettingsService, private sonarrService: SonarrService, private notificationService: NotificationService, private testerService: TesterService, - private fb: FormBuilder) { } + private fb: FormBuilder){} + + onFormValuesChanged() + { + for ( const field in this.formErrors ) + { + if ( !this.formErrors.hasOwnProperty(field) ) + { + continue; + } + // Clear previous errors + this.formErrors[field] = {}; + // Get the control + const control = this.form.get(field); + if ( control && control.dirty && !control.valid && control.value === "Please Select") + { + this.formErrors[field] = control.errors; + } + } + } public ngOnInit() { this.settingsService.getSonarr() @@ -41,8 +61,8 @@ export class SonarrComponent implements OnInit { this.form = this.fb.group({ enabled: [x.enabled], apiKey: [x.apiKey, [Validators.required]], - qualityProfile: [x.qualityProfile, [Validators.required]], - rootPath: [x.rootPath, [Validators.required]], + qualityProfile: [x.qualityProfile, [Validators.required, validateProfile]], + rootPath: [x.rootPath, [Validators.required, validateProfile]], qualityProfileAnime: [x.qualityProfileAnime], rootPathAnime: [x.rootPathAnime], ssl: [x.ssl], @@ -67,6 +87,16 @@ export class SonarrComponent implements OnInit { if(x.v3) { this.form.controls.languageProfile.setValidators([Validators.required]); } + + this.formErrors ={ + apiKey: {}, + qualityProfile: {}, + rootPath: {}, + ip: {}, + port: {}, + + }; + this.onFormValuesChanged(); }); this.rootFolders = []; this.qualities = []; @@ -81,9 +111,8 @@ export class SonarrComponent implements OnInit { this.sonarrService.getQualityProfiles(form.value) .subscribe(x => { this.qualities = x; - this.qualities.unshift({ name: "Please Select", id: -1 }); this.qualitiesAnime = x; - + this.qualities.unshift({ name: "Please Select", id: -1 }); this.profilesRunning = false; this.notificationService.success("Successfully retrieved the Quality Profiles"); }); @@ -155,3 +184,10 @@ export class SonarrComponent implements OnInit { }); } } +function validateProfile(qualityProfile): { [key: string]:boolean } | null { + + if (qualityProfile.value !== undefined && (isNaN(qualityProfile.value) || qualityProfile.value == -1)) { + return { 'profileValidation': true }; + } + return null; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/styles/shared.scss b/src/Ombi/ClientApp/src/styles/shared.scss index 01bc723ff..c5ba4ee07 100644 --- a/src/Ombi/ClientApp/src/styles/shared.scss +++ b/src/Ombi/ClientApp/src/styles/shared.scss @@ -104,4 +104,12 @@ table { ::ng-deep .mat-toolbar.mat-primary{ margin-bottom: 0.5em; +} + +::ng-deep .dark .mat-form-field.mat-focused .mat-form-field-label{ + color: $accent-dark; +} + +::ng-deep .mat-form-field.mat-focused .mat-form-field-label{ + color: $accent; } \ No newline at end of file