From a1c903aa162ed436c33a4290189662eedfe5405f Mon Sep 17 00:00:00 2001
From: Jamie <tidusjar@gmail.com>
Date: Wed, 5 Dec 2018 21:06:31 +0000
Subject: [PATCH] Sorted out some of the settings pages, trying to make it
 consistent

---
 .../app/settings/lidarr/lidarr.component.html | 39 +++++---
 .../app/settings/radarr/radarr.component.html | 96 +++++++++++--------
 .../app/settings/settingsmenu.component.html  |  2 +-
 3 files changed, 82 insertions(+), 55 deletions(-)

diff --git a/src/Ombi/ClientApp/app/settings/lidarr/lidarr.component.html b/src/Ombi/ClientApp/app/settings/lidarr/lidarr.component.html
index 50938412f..5e898e719 100644
--- a/src/Ombi/ClientApp/app/settings/lidarr/lidarr.component.html
+++ b/src/Ombi/ClientApp/app/settings/lidarr/lidarr.component.html
@@ -19,25 +19,28 @@
 
 
                 <div class="form-group">
-                    <label for="Ip" class="control-label">Hostname or IP</label>
+                    <label for="Ip" class="control-label">Hostname or IP
+                        
+                        <i *ngIf="form.get('ip').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="IP/Hostname is required"></i>
+                    </label>
 
                         <input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" formControlName="ip"  [ngClass]="{'form-error': form.get('ip').hasError('required')}">
-                        <small *ngIf="form.get('ip').hasError('required')" class="error-text">The IP/Hostname is required</small>
                 </div>
 
                 <div class="form-group">
-                    <label for="portNumber" class="control-label">Port</label>
+                    <label for="portNumber" class="control-label">Port 
+                        <i *ngIf="form.get('port').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Port is required"></i></label>
 
                         <input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber" name="Port" placeholder="Port Number"  [ngClass]="{'form-error': form.get('port').hasError('required')}">
-                        <small *ngIf="form.get('port').hasError('required')" class="error-text">The Port is required</small>
+
                 </div>
 
 
                 <div class="form-group">
-                    <label for="ApiKey" class="control-label">API Key</label>
+                    <label for="ApiKey" class="control-label">API Key <i *ngIf="form.get('apiKey').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="API Key is required"></i></label>
                     
                         <input type="text" class="form-control form-control-custom "  [ngClass]="{'form-error': form.get('apiKey').hasError('required')}" id="ApiKey" name="ApiKey" formControlName="apiKey">
-                        <small *ngIf="form.get('apiKey').hasError('required')" class="error-text">The API Key is required</small>
+
                 </div>
                 <div class="form-group">
                     <div class="checkbox">
@@ -56,19 +59,22 @@
             <div class="col-md-6">
 
                 <div class="form-group">
-                    <label for="select" class="control-label">Quality Profiles</label>
+                    <label for="select" class="control-label">Quality Profiles 
+                        <i *ngIf="form.get('defaultQualityProfile').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Quality Profile is required"></i>
+                    </label>
                     <div id="profiles">
                         <select formControlName="defaultQualityProfile" class="form-control form-control-custom  col-md-5 form-half" id="select"  [ngClass]="{'form-error': form.get('defaultQualityProfile').hasError('required')}">
                             <option *ngFor="let quality of qualities" value="{{quality.id}}">{{quality.name}}</option>
                         </select>
                         <button (click)="getProfiles(form)" type="button" class="btn btn-primary-outline col-md-4 col-md-push-1">Get Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"> </span></button>
-
-                        <small *ngIf="form.get('defaultQualityProfile').hasError('required')" class="error-text">A Default Quality Profile is required</small>
                     </div>
                 </div>
 
                 <div class="form-group">
-                    <label for="rootFolders" class="control-label">Default Root Folders</label>
+                    <label for="rootFolders" class="control-label">Default Root Folders 
+                        
+                        <i *ngIf="form.get('defaultRootPath').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Root Path is required"></i>
+                    </label>
                     <div id="rootFolders">
                         <select formControlName="defaultRootPath" class="form-control form-control-custom col-md-5 form-half"  [ngClass]="{'form-error': form.get('defaultRootPath').hasError('required')}">
                             <option *ngFor="let folder of rootFolders" value="{{folder.path}}" >{{folder.path}}</option>
@@ -76,12 +82,14 @@
                         <button (click)="getRootFolders(form)" type="button" class="btn btn-primary-outline col-md-4 col-md-push-1">Get Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
 
                     </div>                    
-                    <small *ngIf="form.get('defaultRootPath').hasError('required')" class="error-text">A Default Root Path is required</small>
                 </div>
 
 
                 <div class="form-group">
-                    <label for="languageProfileId" class="control-label">Language Profile</label>
+                    <label for="languageProfileId" class="control-label">Language Profile
+                        
+                        <i *ngIf="form.get('languageProfileId').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Language Profile is required"></i>
+                    </label>
                     <div id="languageProfileId">
                         <select formControlName="languageProfileId" class="form-control form-control-custom col-md-5 form-half"  [ngClass]="{'form-error': form.get('languageProfileId').hasError('required')}">
                             <option *ngFor="let folder of languageProfiles" value="{{folder.id}}" >{{folder.name}}</option>
@@ -89,12 +97,14 @@
                         <button (click)="getLanguageProfiles(form)" type="button" class="btn btn-primary-outline col-md-4 col-md-push-1">Get Languages <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
 
                     </div>                    
-                    <small *ngIf="form.get('languageProfileId').hasError('required')" class="error-text">A Language profile is required</small>
                 </div>
 
 
                 <div class="form-group">
-                    <label for="metadataProfileId" class="control-label">Metadata Profile</label>
+                    <label for="metadataProfileId" class="control-label">Metadata Profile
+                         
+                        <i *ngIf="form.get('metadataProfileId').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Metadata Profile is required"></i>
+                    </label>
                     <div id="metadataProfileId">
                         
                         <select formControlName="metadataProfileId" class="form-control form-control-custom col-md-5 form-half"  [ngClass]="{'form-error': form.get('metadataProfileId').hasError('required')}">
@@ -102,7 +112,6 @@
                         </select>
                         <button (click)="getMetadataProfiles(form)" type="button" class="btn btn-primary-outline col-md-4  col-md-push-1">Get Metadata <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
 
-                        <small *ngIf="form.get('metadataProfileId').hasError('required')" class="error-text">A Metadata profile is required</small>
                     </div>                     
                     
                 </div>
diff --git a/src/Ombi/ClientApp/app/settings/radarr/radarr.component.html b/src/Ombi/ClientApp/app/settings/radarr/radarr.component.html
index 909a64226..08a8035c2 100644
--- a/src/Ombi/ClientApp/app/settings/radarr/radarr.component.html
+++ b/src/Ombi/ClientApp/app/settings/radarr/radarr.component.html
@@ -1,5 +1,4 @@
-
-<settings-menu></settings-menu>
+<settings-menu></settings-menu>
 <div *ngIf="form">
     <fieldset>
         <legend>Radarr Settings</legend>
@@ -19,25 +18,34 @@
 
 
                 <div class="form-group">
-                    <label for="Ip" class="control-label">Hostname or IP</label>
+                    <label for="Ip" class="control-label">Hostname or IP
+                            <i *ngIf="form.get('ip').hasError('required')" class="fa fa-exclamation-circle error-text"
+                            pTooltip="IP/Hostname is required"></i>
+                    </label>
 
-                        <input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" formControlName="ip"  [ngClass]="{'form-error': form.get('ip').hasError('required')}">
-                        <small *ngIf="form.get('ip').hasError('required')" class="error-text">The IP/Hostname is required</small>
+                    <input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost"
+                        formControlName="ip" [ngClass]="{'form-error': form.get('ip').hasError('required')}">
                 </div>
 
                 <div class="form-group">
-                    <label for="portNumber" class="control-label">Port</label>
+                    <label for="portNumber" class="control-label">Port 
+                            <i *ngIf="form.get('port').hasError('required')" class="fa fa-exclamation-circle error-text"
+                            pTooltip="Port is required"></i>
+                    </label>
 
-                        <input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber" name="Port" placeholder="Port Number"  [ngClass]="{'form-error': form.get('port').hasError('required')}">
-                        <small *ngIf="form.get('port').hasError('required')" class="error-text">The Port is required</small>
+                    <input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber"
+                        name="Port" placeholder="Port Number" [ngClass]="{'form-error': form.get('port').hasError('required')}">
                 </div>
 
 
                 <div class="form-group">
-                    <label for="ApiKey" class="control-label">API Key</label>
-                    
-                        <input type="text" class="form-control form-control-custom "  [ngClass]="{'form-error': form.get('apiKey').hasError('required')}" id="ApiKey" name="ApiKey" formControlName="apiKey">
-                        <small *ngIf="form.get('apiKey').hasError('required')" class="error-text">The API Key is required</small>
+                    <label for="ApiKey" class="control-label">API Key 
+                            <i *ngIf="form.get('apiKey').hasError('required')" class="fa fa-exclamation-circle error-text"
+                            pTooltip="Api Key is required"></i>
+                    </label>
+
+                    <input type="text" class="form-control form-control-custom " [ngClass]="{'form-error': form.get('apiKey').hasError('required')}"
+                        id="ApiKey" name="ApiKey" formControlName="apiKey">
                 </div>
                 <div class="form-group">
                     <div class="checkbox">
@@ -49,63 +57,73 @@
                 <div class="form-group">
                     <label for="SubDir" class="control-label">Base Url</label>
                     <div>
-                        <input type="text" class="form-control form-control-custom" formControlName="subDir" id="SubDir" name="SubDir">
+                        <input type="text" class="form-control form-control-custom" formControlName="subDir" id="SubDir"
+                            name="SubDir">
                     </div>
                 </div>
             </div>
             <div class="col-md-6">
+
                 <div class="form-group">
-                    <div>
-                        <button (click)="getProfiles(form)" type="button" class="btn btn-primary-outline">Get Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"> </span></button>
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="select" class="control-label">Quality Profiles</label>
+                    <label for="select" class="control-label">Quality Profiles
+                        <i *ngIf="form.get('defaultQualityProfile').hasError('required')" class="fa fa-exclamation-circle error-text"
+                            pTooltip="Quality Profile is required"></i>
+                    </label>
                     <div id="profiles">
-                        <select formControlName="defaultQualityProfile" class="form-control form-control-custom" id="select"  [ngClass]="{'form-error': form.get('defaultQualityProfile').hasError('required')}">
+                        <select formControlName="defaultQualityProfile" class="form-control form-control-custom  col-md-5 form-half"
+                            id="select" [ngClass]="{'form-error': form.get('defaultQualityProfile').hasError('required')}">
                             <option *ngFor="let quality of qualities" value="{{quality.id}}">{{quality.name}}</option>
                         </select>
+                        <button (click)="getProfiles(form)" type="button" class="btn btn-primary-outline col-md-4 col-md-push-1">Get
+                            Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"> </span></button>
                     </div>
-                    <small *ngIf="form.get('defaultQualityProfile').hasError('required')" class="error-text">A Default Quality Profile is required</small>
                 </div>
 
-                <div class="form-group">
-                    <div>
-                        <button (click)="getRootFolders(form)" type="button" class="btn btn-primary-outline">Get Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
-
-                    </div>
 
-                </div>
                 <div class="form-group">
-                    <label for="rootFolders" class="control-label">Default Root Folders</label>
+                    <label for="rootFolders" class="control-label">Default Root Folders
+
+                        <i *ngIf="form.get('defaultRootPath').hasError('required')" class="fa fa-exclamation-circle error-text"
+                            pTooltip="Root Path is required"></i>
+                    </label>
                     <div id="rootFolders">
-                        <select formControlName="defaultRootPath" class="form-control form-control-custom"  [ngClass]="{'form-error': form.get('defaultRootPath').hasError('required')}">
-                            <option *ngFor="let folder of rootFolders" value="{{folder.path}}" >{{folder.path}}</option>
+                        <select formControlName="defaultRootPath" class="form-control form-control-custom col-md-5 form-half"
+                            [ngClass]="{'form-error': form.get('defaultRootPath').hasError('required')}">
+                            <option *ngFor="let folder of rootFolders" value="{{folder.path}}">{{folder.path}}</option>
                         </select>
-                    </div>                    
-                    <small *ngIf="form.get('defaultRootPath').hasError('required')" class="error-text">A Default Root Path is required</small>
+                        <button (click)="getRootFolders(form)" type="button" class="btn btn-primary-outline col-md-4 col-md-push-1">Get
+                            Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
+
+                    </div>
                 </div>
 
+
+
                 <div class="form-group">
-                    <label for="rootFolders" class="control-label">Default Minimum Availability</label>
+                    <label for="rootFolders" class="control-label">Default Minimum Availability
+                        <i *ngIf="form.get('minimumAvailability').hasError('required')" class="fa fa-exclamation-circle error-text"
+                            pTooltip="Minimum Availability is required"></i>
+                    </label>
                     <div id="rootFolders">
-                        <select formControlName="minimumAvailability" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('minimumAvailability').hasError('required')}">
+                        <select formControlName="minimumAvailability" class="form-control form-control-custom col-md-5 form-half"
+                            [ngClass]="{'form-error': form.get('minimumAvailability').hasError('required')}">
                             <option *ngFor="let min of minimumAvailabilityOptions" value="{{min.value}}">{{min.name}}</option>
                         </select>
                     </div>
-                    
-                    <small *ngIf="form.get('minimumAvailability').hasError('required')" type="button" class="error-text">A Default Minimum Availability is required</small>
                 </div>
-
+            </div>
+<div class="col-md-6">
                 <div class="form-group" *ngIf="advanced" style="color:#ff761b">
                     <div class="checkbox">
                         <input type="checkbox" id="addOnly" formControlName="addOnly">
                         <label for="addOnly">Do not search</label>
                     </div>
                 </div>
+
                 <div class="form-group">
                     <div>
-                        <button type="button" [disabled]="form.invalid" (click)="test(form)" class="btn btn-primary-outline">Test Connectivity <span id="spinner"></span></button>
+                        <button type="button" [disabled]="form.invalid" (click)="test(form)" class="btn btn-primary-outline">Test
+                            Connectivity <span id="spinner"></span></button>
                     </div>
                 </div>
 
@@ -118,4 +136,4 @@
             </div>
         </form>
     </fieldset>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/app/settings/settingsmenu.component.html b/src/Ombi/ClientApp/app/settings/settingsmenu.component.html
index 59ce35c32..f77e77501 100644
--- a/src/Ombi/ClientApp/app/settings/settingsmenu.component.html
+++ b/src/Ombi/ClientApp/app/settings/settingsmenu.component.html
@@ -54,7 +54,7 @@
             <i class="fa fa-music" aria-hidden="true"></i> Music <span class="caret"></span>
         </a>
         <ul class="dropdown-menu">
-            <li [routerLinkActive]="['active']"><a [routerLink]="['/Settings/Lidarr']">Lidarr (beta)</a></li>
+            <li [routerLinkActive]="['active']"><a [routerLink]="['/Settings/Lidarr']">Lidarr</a></li>
         </ul>
     </li>