@ -2,123 +2,113 @@
< div * ngIf = "form" class = "small-middle-container" >
< div * ngIf = "form" class = "small-middle-container" >
< fieldset >
< fieldset >
< legend > Sonarr Settings< / legend >
< legend > Sonarr Settings< / legend >
< form novalidate [ formGroup ] = " form " ( ngSubmit ) = " onSubmit ( form ) " style = "padding-top:3%;" >
< form novalidate [ formGroup ] = " form " ( ngSubmit ) = " onSubmit ( form ) " >
< div style = "float: right;" >
< div class = "row top-spacing" >
< span style = "vertical-align: top;" > Advanced< / span >
< div class = "col-md-12 col-12 col-sm-12" >
< p-inputSwitch id = "customInputSwitch" [ ( ngModel ) ] = " advanced " [ ngModelOptions ] = " { standalone: true } " > < / p-inputSwitch >
< div >
< / div >
< div class = "md-form-field" >
< mat-slide-toggle formControlName = "v3" > V3< / mat-slide-toggle >
< div class = "col-md-6" style = "display:block;" >
< div class = "col-md-4" >
< div class = "form-group" >
< div class = "checkbox" >
< input type = "checkbox" id = "enable" formControlName = "enabled" >
< label for = "enable" > Enable< / label >
< / div >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "form-group" >
< div class = "checkbox" >
< input type = "checkbox" id = "v3" formControlName = "v3" >
< label for = "v3" > V3< / label >
< / div >
< / div >
< / div >
< / div >
< div >
< div class = "md-form-field" >
< mat-slide-toggle formControlName = "enabled" id = "enable" > Enable< / mat-slide-toggle >
< / div >
< / div >
< div class = "md-form-field" >
< div class = "col-md-4" >
< mat-slide-toggle [ ( ngModel ) ] = " advanced " [ ngModelOptions ] = " { standalone: true } " > Advanced< / mat-slide-toggle >
< div class = "form-group" >
< div class = "checkbox" >
< input type = "checkbox" id = "Ssl" name = "Ssl" formControlName = "ssl" >
< label for = "Ssl" > SSL< / label >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-6" >
< div class = "row" >
< div class = "form-group" >
< div class = "col-md-7 col-8 col-sm-12" >
< label for = "Ip" class = "control-label" > Sonarr Hostname or IP
< label for = "username" class = "control-label" > < h3 > Sonarr Server Configuration< / h3 > < / label >
< div class = "md-form-field" >
< i * ngIf = "form.get('ip').hasError('required')" class = "fa fa-exclamation-circle error-text" pTooltip = "The IP/Hostname is required" > < / i >
< mat-form-field appearance = "outline" floatLabel = always >
< / label >
< mat-label > Sonarr Hostname or IP< / mat-label >
< input matInput id = "Ip" name = "Ip" placeholder = "Example: localhost" formControlName = "ip" >
< input type = "text" class = "form-control form-control-custom " formControlName = "ip" id = "Ip" name = "Ip" placeholder = "localhost" [ ngClass ] = " { ' form-error ' : form . get ( ' ip ' ) . hasError ( ' required ' ) } " >
< mat-error > The IP/Hostname is required< / mat-error >
< / mat-form-field >
< mat-form-field appearance = "outline" floatLabel = always >
< mat-label > Port< / mat-label >
< input matInput id = "port" name = "port" placeholder = "Example: 8989" formControlName = "port" >
< mat-error > The Port is required< / mat-error >
< / mat-form-field >
< mat-slide-toggle formControlName = "ssl" > SSL< / mat-slide-toggle >
< / div >
< / div >
< div class = "md-form-field" >
< div class = "form-group" >
< mat-form-field appearance = "outline" floatLabel = always >
< label for = "portNumber" class = "control-label" > Port
< mat-label > Sonarr API Key< / mat-label >
< input matInput id = "apiKey" name = "apiKey" placeholder = "API Key" formControlName = "apiKey" >
< i * ngIf = "form.get('port').hasError('required')" class = "fa fa-exclamation-circle error-text" pTooltip = "The Port is required" > < / i >
< mat-error > The API Key is required< / mat-error >
< / label >
< / mat-form-field >
< input type = "text" class = "form-control form-control-custom " [ ngClass ] = " { ' form-error ' : form . get ( ' port ' ) . hasError ( ' required ' ) } " formControlName = "port" id = "portNumber" name = "Port" placeholder = "Port Number" >
< / div >
< / div >
< div class = "md-form-field" >
< div class = "form-group" >
< mat-form-field appearance = "outline" floatLabel = always >
< label for = "ApiKey" class = "control-label" > Sonarr API Key
< mat-label > Sonarr Base URL< / mat-label >
< input matInput id = "SubDir" name = "SubDir" placeholder = "Example: /sonarr" formControlName = "subDir" >
< i * ngIf = "form.get('apiKey').hasError('required')" class = "fa fa-exclamation-circle error-text" pTooltip = "The API Key is required" > < / i >
< / mat-form-field >
< / label >
< input type = "text" class = "form-control form-control-custom " [ ngClass ] = " { ' form-error ' : form . get ( ' apiKey ' ) . hasError ( ' required ' ) } " formControlName = "apiKey" id = "ApiKey" name = "ApiKey" >
< / div >
< div class = "form-group" >
< label for = "SubDir" class = "control-label" > Sonarr Base Url< / label >
< div >
< input type = "text" class = "form-control form-control-custom" formControlName = "subDir" id = "SubDir" name = "SubDir" >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-5 ">
< div class = "col-md-5 col-4 col-sm-12" >
< label for = "username" class = "control-label" > < h3 > Sonarr Interface< / h3 > < / label >
< div class = "form-group col-md-12" >
< div class = "form-group col-md-12" >
< label for = "profiles" class = "control-label" > Quality Profiles
< i * ngIf = "form.get('qualityProfile').hasError('required')" class = "fa fa-exclamation-circle error-text" pTooltip = "A Default Quality Profile is required" > < / i >
< / label >
< div id = "profiles" >
< div id = "profiles" >
< select class = "form-control form-control-custom col-md-5 form-half" [ ngClass ] = " { ' form-error ' : form . get ( ' qualityProfile ' ) . hasError ( ' required ' ) } " id = "select" formControlName = "qualityProfile" >
< div class = "md-form-field" style = "display:contents;" >
< option * ngFor = "let quality of qualities" value = "{{quality.id}}" > {{quality.name}}< / option >
< mat-form-field appearance = "outline" >
< / select >
< mat-label > Quality Profiles< / mat-label >
< button type = "button" ( click ) = " getProfiles ( form ) " class = "btn btn-primary-outline col-md-4 col-md-push-1 load" >
< mat-select formControlName = "qualityProfile" >
< mat-option * ngFor = "let quality of qualities" value = "{{quality.id}}" > {{quality.name}} < / mat-option >
< / mat-select >
< mat-error > A Default Quality Profile is required< / mat-error >
< / mat-form-field >
< / div >
< div class = "md-form-field" style = "display:inline;margin-left:20px;" >
< button mat-raised-button id = "profiles" ( click ) = " getProfiles ( form ) " class = "mat-stroked-button load" >
Load Qualities < span * ngIf = "profilesRunning" class = "fa fa-spinner fa-spin" > < / span > < / button >
Load Qualities < span * ngIf = "profilesRunning" class = "fa fa-spinner fa-spin" > < / span > < / button >
< / div >
< / div >
< / div >
< / div >
< div class = "form-group col-md-12" >
< label for = "select" class = "control-label" > Quality Profiles (Anime)< / label >
< div id = "qualityProfileAnime" >
< div id = "qualityProfileAnime" >
< select class = "form-control form-control-custom col-md-5 form-half" id = "qualityProfileAnime" formControlName = "qualityProfileAnime" >
< div class = "md-form-field" style = "display:contents;" >
< option * ngFor = "let quality of qualities" value = "{{quality.id}}" > {{quality.name}}< / option >
< mat-form-field appearance = "outline" >
< / select >
< mat-label > Quality Profiles (Anime)< / mat-label >
< mat-select formControlName = "qualityProfileAnime" >
< mat-option * ngFor = "let quality of qualities" value = "{{quality.id}}" > {{quality.name}} < / mat-option >
< / mat-select >
< mat-error > A Default Quality Profile is required< / mat-error >
< / mat-form-field >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "form-group col-md-12" >
< div class = "form-group col-md-12" >
< label for = "rootFolders" class = "control-label" > Default Root Folders
< i * ngIf = "form.get('rootPath').hasError('required')" class = "fa fa-exclamation-circle error-text" pTooltip = "A Default Root Path is required" > < / i >
< / label >
< div id = "rootFolders" >
< div id = "rootFolders" >
< select class = "form-control form-control-custom col-md-5 form-half" formControlName = "rootPath" [ ngClass ] = " { ' form-error ' : form . get ( ' rootPath ' ) . hasError ( ' required ' ) } " >
< div class = "md-form-field" style = "display:contents;" >
< option * ngFor = "let folder of rootFolders" value = "{{folder.id}}" > {{folder.path}}< / option >
< mat-form-field appearance = "outline" >
< / select >
< mat-label > Default Root Folders< / mat-label >
< button type = "button" ( click ) = " getRootFolders ( form ) " class = "btn btn-primary-outline load col-md-4 col-md-push-1" >
< mat-select formControlName = "rootPath" >
< mat-option * ngFor = "let folder of rootFolders" value = "{{folder.id}}" > {{folder.path}} < / mat-option >
< / mat-select >
< mat-error > A Default Root Folder is required< / mat-error >
< / mat-form-field >
< / div >
< div class = "md-form-field" style = "display:inline;margin-left:20px;" >
< button mat-raised-button id = "rootFolder" ( click ) = " getRootFolders ( form ) " class = "mat-stroked-button load" >
Load Folders < span * ngIf = "rootFoldersRunning" class = "fa fa-spinner fa-spin" > < / span > < / button >
Load Folders < span * ngIf = "rootFoldersRunning" class = "fa fa-spinner fa-spin" > < / span > < / button >
< / div >
< / div >
< / div >
< / div >
< div class = "form-group col-md-12" >
< label for = "rootFoldersAnime" class = "control-label" > Default Root Folders (Anime)< / label >
< div id = "rootFoldersAnime" >
< div id = "rootFoldersAnime" >
< select class = "form-control form-control-custom col-md-5 form-half" formControlName = "rootPathAnime" >
< div class = "md-form-field" style = "display:contents;" >
< option * ngFor = "let folder of rootFoldersAnime" value = "{{folder.id}}" > {{folder.path}}< / option >
< mat-form-field appearance = "outline" >
< / select >
< mat-label > Default Root Folders (Anime)< / mat-label >
< mat-select formControlName = "rootPathAnime" >
< mat-option * ngFor = "let folder of rootFoldersAnime" value = "{{folder.id}}" > {{folder.path}} < / mat-option >
< / mat-select >
< mat-error > A Default Root Folder (Anime) is required< / mat-error >
< / mat-form-field >
< / div >
< / div >
< / div >
< / div >
< / div >
@ -128,45 +118,51 @@
< i * ngIf = "form.get('languageProfile').hasError('required')" class = "fa fa-exclamation-circle error-text" pTooltip = "A Language Profile is required" > < / i >
< i * ngIf = "form.get('languageProfile').hasError('required')" class = "fa fa-exclamation-circle error-text" pTooltip = "A Language Profile is required" > < / i >
< / label >
< / label >
< div id = "langaugeProfile" >
< div id = "langaugeProfile" >
< select formControlName = "languageProfile" class = "form-control form-control-custom col-md-5 form-half" id = "select" [ ngClass ] = " { ' form-error ' : form . get ( ' languageProfile ' ) . hasError ( ' required ' ) } " >
< div class = "md-form-field" style = "display:contents;" >
< option * ngFor = "let lang of languageProfiles" [ ngValue ] = " lang . id " > {{lang.name}}< / option >
< mat-form-field appearance = "outline" >
< / select >
< mat-label > Language Profiles < / mat-label >
< button ( click ) = " getLanguageProfiles ( form ) " type = "button" class = "btn btn-primary-outline col-md-4 col-md-push-1" > Load
< mat-select formControlName = "languageProfile" >
< mat-option * ngFor = "let lang of languageProfiles" value = "lang.id" > {{lang.name}}< / mat-option >
< / mat-select >
< mat-error > A Language Profile is required< / mat-error >
< / mat-form-field >
< / div >
< div class = "md-form-field" style = "display:inline;margin-left:20px;" >
< button mat-raised-button ( click ) = " getLanguageProfiles ( form ) " class = "mat-stroked-button load" > Load
Languages < span * ngIf = "langRunning" class = "fa fa-spinner fa-spin" > < / span > < / button >
Languages < span * ngIf = "langRunning" class = "fa fa-spinner fa-spin" > < / span > < / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "form-group col-md-12" >
< div class = "form-group col-md-12" >
< div class = "checkbox" >
< div class = "checkbox" >
< input type = "checkbox" id = "SeasonFolders" name = "SeasonFolders" formControlName = "seasonFolders" >
< mat-slide-toggle id = "SeasonFolders" name = "SeasonFolders" formControlName = "seasonFolders" > Enable season folders< / mat-slide-toggle >
< label for = "SeasonFolders" > Enable season folders< / label >
< / div >
< / div >
< label > Enabled Season Folders to organize seasons into individual folders within a show.< / label >
< label > Enabled Season Folders to organize seasons into individual folders within a show.< / label >
< / div >
< / div >
< div class = "form-group col-md-12" * ngIf = "advanced" style = "color:#ff761b" >
< div class = "form-group col-md-12" * ngIf = "advanced" style = "color:#ff761b" >
< div class = "checkbox" >
< div class = "checkbox" >
< input type = "checkbox" id = "addOnly" formControlName = "addOnly" >
< mat-slide-toggle id = "addOnly" formControlName = "addOnly" > Do not search< / mat-slide-toggle >
< label for = "addOnly" > Do not search< / label >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "col-md-4" >
< div class = "col-md-4" >
< div class = "form-group col-md-7" >
< div class = "form-group col-md-7" >
< div >
< div >
< button type = "submit" class = " btn btn-primary-outline "> Submit< / button >
< button mat-raised- button type = "submit" class = " mat-stroked-button accent mat-accent "> Submit< / button >
< / div >
< / div >
< / div >
< / div >
< div class = "form-group col-md-7" >
< div class = "form-group col-md-7" >
< div >
< div >
< button type = "button" ( click ) = " test ( form ) " class = " btn btn-primary-outline "> Test Connectivity
< button mat-raised- button type = "button" ( click ) = " test ( form ) " class = " mat-stroked-button "> Test Connectivity
< span id = "spinner" > < / span > < / button >
< span id = "spinner" > < / span > < / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / form >
< / form >
< / fieldset >
< / fieldset >
< / div >
< / div >