Merge pull request #3604 from tidusjar/settings-changes

Settings changes
pull/3632/head
Jamie 4 years ago committed by GitHub
commit 636de044ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -61,7 +61,7 @@
}*/ }*/
// changed bottom to 10px so when you overlay a link it won't get blocked by URL // changed bottom to 10px so when you overlay a link it won't get blocked by URL
.bottom-nav-link { #bottom-nav-link {
bottom: 10px; bottom: 10px;
position: absolute !important; position: absolute !important;
//background-color:#E84C3D; //background-color:#E84C3D;

@ -29,4 +29,8 @@ $ombi-accent: #258a6d;
.search-bar:focus { .search-bar:focus {
background-color: white; background-color: white;
}
::ng-deep .mat-form-field-underline{
bottom:0.5em;
} }

@ -4,98 +4,81 @@
<div *ngIf="form"> <div *ngIf="form">
<fieldset> <fieldset>
<legend>CouchPotato Settings</legend> <legend>CouchPotato Settings</legend>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;"> <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
<div class="col-md-6" style="display:block;"> <div class="row">
<div class="col-md-4"> <div class="col-md-12 col-12 col-sm-12 top-spacing">
<div class="form-group"> <div class="md-form-field">
<div class="checkbox"> <mat-slide-toggle formControlName="enabled" id="enable">Enable</mat-slide-toggle>
<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="Ssl" name="Ssl" formControlName="ssl">
<label for="Ssl">SSL</label>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="row">
<div class="form-group"> <div class="col-md-5 col-7 col-sm-12">
<label for="Ip" class="control-label">Hostname or IP</label> <label for="username" class="control-label"><h3>Server Configuration</h3></label>
<div class=""> <div class="md-form-field">
<input type="text" class="form-control form-control-custom" [ngClass]="{'form-error': form.get('ip').hasError('required')}" <mat-form-field appearance="outline" >
id="Ip" name="Ip" placeholder="localhost" formControlName="ip"> <mat-label>Hostname or IP</mat-label>
<small *ngIf="form.get('ip').hasError('required')" class="error-text">The IP/Hostname is required</small> <input matInput id="Ip" name="Ip" formControlName="ip" >
<mat-error>The IP/Hostname is required</mat-error>
</mat-form-field>
</div> </div>
</div> <div class="md-form-field">
<mat-form-field appearance="outline" >
<div class="form-group"> <mat-label>API Key</mat-label>
<label for="portNumber" class="control-label">Port</label> <input matInput id="apiKey" name="apiKey" formControlName="apiKey">
<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"> <mat-error>The API Key is required</mat-error>
</mat-form-field>
<small *ngIf="form.get('port').hasError('required')" class="error-text">The Port is required</small> </div>
</div> <div class="md-form-field">
<mat-form-field appearance="outline" >
<mat-label>Port</mat-label>
<div class="form-group"> <input matInput id="port" name="port" formControlName="port">
<label for="ApiKey" class="control-label">API Key</label> <mat-error>The Port is required</mat-error>
</mat-form-field>
<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="md-form-field">
<small *ngIf="form.get('apiKey').hasError('required')" class="error-text">The API Key is required</small> <mat-slide-toggle formControlName="ssl">SSL</mat-slide-toggle>
</div>
<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">
</div> </div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="username" class="control-label">Username</label>
<input type="text" class="form-control form-control-custom " formControlName="username" name="username">
</div>
<div class="form-group">
<label for="password" class="control-label">Password</label>
<input type="password" class="form-control form-control-custom " formControlName="password" name="password">
</div>
<div class="form-group">
<button type="button" class="btn btn-primary-outline" (click)="requestToken(form)">Request Api Key <i class="fa fa-key"></i></button>
</div>
<div class="form-group"> <div class="md-form-field">
<div> <mat-form-field appearance="outline" >
<button type="submit" (click)="getProfiles(form)" class="btn btn-primary-outline">Get Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"> </span></button> <mat-label>Base URL</mat-label>
<input matInput id="SubDir" name="SubDir" formControlName="subDir">
</mat-form-field>
</div> </div>
</div> </div>
<div class="form-group"> <div class="col-md-5 col-4 col-sm-12">
<label for="select" class="control-label">Quality Profiles</label> <label for="username" class="control-label"><h3>Interface</h3></label>
<div id="profiles"> <div class="form-group col-md-12">
<select formControlName="defaultProfileId" class="form-control form-control-custom" id="select"> <div id="profiles">
<option *ngFor="let profile of profiles?.list" value="{{profile._id}}">{{profile.label}}</option> <div class="md-form-field" style="display:contents;">
</select> <mat-form-field appearance="outline">
<mat-label>Quality Profiles</mat-label>
<mat-select formControlName="defaultProfileId">
<mat-option *ngFor="let profile of profiles" value="{{profile._id}}">{{profile.label}}</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 Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
</div>
</div>
</div> </div>
</div> </div>
<div class="col-md-12" style="margin-top:2em;">
<div class="form-group">
<div>
<button mat-raised-button [disabled]="form.invalid" (click)="test(form)" class="mat-focus-indicator mat-stroked-button mat-button-base">Test Connectivity <span id="spinner"></span></button>
<div class="form-group"> </div>
<div>
<button [disabled]="form.invalid" (click)="test(form)" class="btn btn-primary-outline">Test Connectivity <span id="spinner"></span></button>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<div> <div>
<button type="submit" [disabled]="form.invalid" class="btn btn-primary-outline ">Submit</button> <button mat-raised-button [disabled]="form.invalid" class="mat-focus-indicator mat-stroked-button mat-button-base mat-accent">Submit</button>
</div>
</div> </div>
</div> </div>
</div> </div>

@ -1,27 +1,6 @@
@import "~styles/shared.scss";
.small-middle-container { .small-middle-container {
margin: auto; margin: auto;
width: 95%; width: 95%;
margin-top: 10px; margin-top: 10px;
} }
::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;
}
.col-md-6 {
display: contents;
}
.col-md-4 {
display: contents;
}
@media (min-width:1440px) {
.col-md-6 {
display: inline-table;
}
.col-md-4 {
display: inline-table;
}
}

@ -4,48 +4,61 @@
<fieldset *ngIf="settings"> <fieldset *ngIf="settings">
<legend>Customization</legend> <legend>Customization</legend>
<div class="col-12"> <div class="col-md-12 col-12 col-sm-12">
<mat-form-field> <div class="md-form-field">
<input matInput placeholder="Application Name" [(ngModel)]="settings.applicationName"> <mat-form-field appearance="outline" floatLabel=always>
</mat-form-field> <mat-label>Application Name</mat-label>
<input matInput placeholder="Application Name" [(ngModel)]="settings.applicationName">
<mat-form-field> </mat-form-field>
<input matInput placeholder="Application URL" [(ngModel)]="settings.applicationUrl"> </div>
</mat-form-field> <div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-form-field> <mat-label>Application URL</mat-label>
<input matInput placeholder="Custom Logo" type="url"[(ngModel)]="settings.logo"> <input matInput placeholder="Application URL" [(ngModel)]="settings.applicationUrl">
</mat-form-field> </mat-form-field>
</div>
<div *ngIf="settings.logo" class="form-group"> <div class="md-form-field">
<label for="logo" class="control-label">Logo Preview:</label> <mat-form-field appearance="outline" floatLabel=always>
<div> <mat-label>Custom Logo</mat-label>
<img [src]="settings.logo" style="width: 300px" /> <input matInput placeholder="Custom Logo" type="url"[(ngModel)]="settings.logo">
</mat-form-field>
</div>
<div class="md-form-field">
<div *ngIf="settings.logo" class="form-group">
<label for="logo" class="control-label">Logo Preview:</label>
<div>
<img [src]="settings.logo" style="width: 300px" />
</div>
</div> </div>
</div> </div>
<div class="md-form-field">
<mat-checkbox [(ngModel)]="settings.enableCustomDonations" matTooltip="Enable to show a custom donation link in the navigation bar"> <mat-checkbox [(ngModel)]="settings.enableCustomDonations" matTooltip="Enable to show a custom donation link in the navigation bar">
Enable Custom Donation Link Enable Custom Donation Link
</mat-checkbox> </mat-checkbox>
</div>
<div class="md-form-field">
<mat-form-field *ngIf="settings.enableCustomDonations"> <mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline" floatLabel=always>
<input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.customDonationUrl" matTooltip="A link to a Paypal address, or your custom donation url."> <mat-label>Custom Donation URL</mat-label>
</mat-form-field> <input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.customDonationUrl" matTooltip="A link to a Paypal address, or your custom donation url.">
<mat-form-field *ngIf="settings.enableCustomDonations"> </mat-form-field>
<input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.enableCustomDonations" matTooltip="Set a custom message to be displayed in the navigation bar."> </div>
</mat-form-field> <div class="md-form-field">
<mat-form-field *ngIf="settings.enableCustomDonations" appearance="outline" floatLabel=always>
<mat-label>Custom Donation URL</mat-label>
<mat-checkbox [(ngModel)]="settings.useCustomPage" matTooltip="Enabled a custom page where you can fully edit. You will need the Edit Custom Page role."> <input matInput placeholder="Custom Donation URL" [(ngModel)]="settings.enableCustomDonations" matTooltip="Set a custom message to be displayed in the navigation bar.">
Enable Custom Page </mat-form-field>
</mat-checkbox> </div>
<div class="md-form-field">
<mat-checkbox [(ngModel)]="settings.useCustomPage" matTooltip="Enabled a custom page where you can fully edit. You will need the Edit Custom Page role.">
Enable Custom Page
<mat-form-field> </mat-checkbox>
<textarea matInput [(ngModel)]="settings.customCss" placeholder="Custom CSS"></textarea> </div>
</mat-form-field> <div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Custom CSS</mat-label>
<textarea matInput [(ngModel)]="settings.customCss" placeholder="Custom CSS"></textarea>
</mat-form-field>
</div>
<div class="form-group"> <div class="form-group">
<button mat-raised-button (click)="save()" type="submit" type="submit" id="save" color="accent">Submit</button> <button mat-raised-button (click)="save()" type="submit" type="submit" id="save" color="accent">Submit</button>
</div> </div>

@ -1,37 +1,16 @@
@import "~styles/shared.scss"; @import "~styles/shared.scss";
.col-12 {
display: grid;
}
textarea {
min-height: 100px;
height: auto;
max-height: 800px;
}
.small-middle-container { .small-middle-container {
margin: auto; margin: auto;
width: 95%; width: 95%;
margin-top: 10px; margin-top: 10px;
} }
.control-label { textarea {
font-weight: 400; min-height: 100px;
height: auto;
max-height: 800px;
} }
.row { .row {
display: block; display: block;
}
.btn-danger-outline {
background-color: #E84C3D;
}
.btn-success-outline {
background-color: #1b9d1b;
}
::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;
} }

@ -1,53 +1,45 @@
<settings-menu> <settings-menu>
</settings-menu> </settings-menu>
<div class="small-middle-container"> <div>
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/DogNzb-Settings'"></wiki> <wiki [url]="'https://github.com/tidusjar/Ombi/wiki/DogNzb-Settings'"></wiki>
<div *ngIf="form"> <div *ngIf="form" class="small-middle-container">
<fieldset> <fieldset>
<legend>DogNzb Settings</legend> <legend>DogNzb Settings</legend>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:2%;"> <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:2%;">
<div class="col-md-6"> <div class="row">
<div class="form-group"> <div class="col-md-12 col-12 col-sm-12">
<div class="checkbox"> <div class="md-form-field">
<input type="checkbox" id="enable" formControlName="enabled" ng-checked="form.enabled"> <mat-slide-toggle formControlName="enabled">Enabled</mat-slide-toggle>
<label for="enable">Enable</label> </div>
</div>
</div> </div>
</div>
<div class="row">
<div class="col-md-7 col-8 col-sm-12">
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>DogNzb API Key</mat-label>
<input matInput id="apiKey" name="apiKey" placeholder="API Key" formControlName="apiKey">
<mat-error>The API Key is required</mat-error>
</mat-form-field>
</div>
<div class="md-form-field">
<mat-slide-toggle id="movies" formControlName="movies">Movies</mat-slide-toggle>
<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>
</div>
<div class="form-group">
<div>
<button type="submit" [disabled]="form.invalid" class="btn btn-primary-outline ">Submit</button>
</div> </div>
</div> <div class="md-form-field">
</div> <mat-slide-toggle id="tvShows" formControlName="tvShows">TV Shows</mat-slide-toggle>
<div class="col-md-6">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="movies" formControlName="movies" ng-checked="form.movies">
<label for="movies">Enable for Movies</label>
</div> </div>
</div> </div>
</div>
<div class="form-group"> <div class="row">
<div class="checkbox"> <div class="col-md-7 col-8 col-sm-12">
<input type="checkbox" id="tvShows" formControlName="tvShows" ng-checked="form.tvShows"> <div class="md-form-field">
<label for="tvShows">Enable for Tv Shows</label> <div>
<br />
<button mat-raised-button type="submit" [disabled]="form.invalid" class="mat-stroked-button accent mat-accent" placeholder="API key">Submit</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</fieldset> </fieldset>

@ -1,110 +0,0 @@

<settings-menu></settings-menu>
<div class="small-middle-container">
<div *ngIf="settings">
<fieldset>
<legend>
Emby/Jellyfin Configuration
</legend>
<div class="row">
<div class="form-group col-md-3">
<div class="checkbox">
<input type="checkbox" id="enable" [(ngModel)]="settings.enable" [checked]="settings.enable">
<label for="enable">Enable</label>
</div>
</div>
<div class="col-md-2 col-md-push-7">
<button type="button" (click)="addTab()" class="btn btn-success-outline">Add Server</button>
</div>
</div>
<ngb-tabset>
<div *ngFor="let server of settings.servers">
<ngb-tab [id]="server.id" [title]="server.name">
<ng-template ngbTabContent>
<br />
<br />
<div class="col-md-2" style="float: right;">
<button type="button" (click)="removeServer(server)" class="btn btn-danger-outline">Remove Server</button>
</div>
<br />
<br />
<div class="col-md-6">
<div class="form-group">
<label for="name" class="control-label">Server name</label>
<div>
<input type="text" class="form-control form-control-custom " id="name" name="name" placeholder="Server" [(ngModel)]="server.name" value="{{server.name}}">
</div>
</div>
<div class="form-group">
<label for="Ip" class="control-label">Hostname or IP</label>
<div>
<input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" [(ngModel)]="server.ip" value="{{server.ip}}">
</div>
</div>
<div class="form-group">
<label for="portNumber" class="control-label">Port</label>
<div>
<input type="text" [(ngModel)]="server.port" class="form-control form-control-custom " id="portNumber" name="Port" placeholder="Port Number" value="{{server.port}}">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="ssl" [(ngModel)]="server.ssl" ng-checked="server.ssl">
<label for="ssl">SSL</label>
</div>
</div>
<div class="form-group">
<label for="authToken" class="control-label">Emby Api Key</label>
<div class="">
<input type="text" class="form-control-custom form-control" id="authToken" [(ngModel)]="server.apiKey" placeholder="Emby Api Key" value="{{server.apiKey}}">
</div>
</div>
<div class="form-group">
<label for="authToken" class="control-label">Externally Facing Hostname
<i class="fa fa-question-circle"
pTooltip="This will be the external address that users will navigate to when they press the 'View On Emby' button"></i>
</label>
<div>
<input type="text" class="form-control-custom form-control" id="authToken" [(ngModel)]="server.serverHostname" placeholder="e.g. https://jellyfin.server.com/" value="{{server.serverHostname}}">
<small><span *ngIf="server.serverHostname">Current URL: "{{server.serverHostname}}/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1"</span>
<span *ngIf="!server.serverHostname">Current URL: "https://app.emby.media/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1</span></small>
</div>
</div>
<div class="form-group">
<div>
<button id="testEmby" type="button" (click)="test(server)" class="btn btn-primary-outline">Test Connectivity <div id="spinner"></div></button>
</div>
</div>
<div class="form-group">
<div>
<button id="discover" type="button" (click)="discoverServerInfo(server)" class="btn btn-primary-outline">Discover Server Information <div id="spinner"></div></button>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
</div>
</ngb-tabset>
<div class="col-md-1">
<div class="form-group">
<div>
<button [disabled]="!hasDiscovered" (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
</div>
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<div>
<button (click)="runCacher()" type="button" id="save" class="btn btn-primary-outline">Manually Run Cacher</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>

@ -8,69 +8,77 @@
</legend> </legend>
<div class="row"> <div class="row">
<div class="form-group col-md-3"> <div class="col-md-6 col-6 col-sm-6">
<div> <div style="float:right;text-align:left;">
<mat-checkbox [(ngModel)]="settings.enable" [checked]="settings.enable"> <div class="md-form-field">
Enable</mat-checkbox> <mat-slide-toggle [(ngModel)]="settings.enable" [checked]="settings.enable">Enable</mat-slide-toggle>
</div>
</div> </div>
</div> </div>
</div> </div>
<mat-tab-group #tabGroup [selectedIndex]="selected.value" (selectedTabChange)="addTab($event)" (selectedIndexChange)="selected.setValue($event)" animationDuration="0ms" style="display:block;">
<mat-tab-group #tabGroup [selectedIndex]="selected.value" (selectedTabChange)="addTab($event)" (selectedIndexChange)="selected.setValue($event)" animationDuration="0ms">
<mat-tab *ngFor="let server of settings.servers" [label]="server.name"> <mat-tab *ngFor="let server of settings.servers" [label]="server.name">
<div class="col-md-2" style="float: right;"> <div class="col-md-6 col-6 col-sm-6" style="float: right; width:100%; text-align:right;">
<button type="button" (click)="removeServer(server)" class="btn btn-danger-outline">Remove Server</button> <button type="button" (click)="removeServer(server)" class="mat-focus-indicator mat-flat-button mat-button-base mat-warn">Remove Server</button>
</div> </div>
<br /> <br />
<br /> <br />
<div class="col-md-10"> <div class="col-md-10 col-10 col-sm-12">
<mat-form-field class="full"> <div class="md-form-field">
<input matInput placeholder="Server Name" [(ngModel)]="server.name" value="{{server.name}}"> <mat-form-field appearance="outline" floatLabel=auto>
</mat-form-field> <mat-label>Server Name</mat-label>
<input matInput placeholder="Server Name" [(ngModel)]="server.name" value="{{server.name}}">
</mat-form-field>
</div>
<mat-form-field class="full"> <div class="md-form-field">
<input matInput placeholder="Hostname or IP" [(ngModel)]="server.ip" value="{{server.ip}}"> <mat-form-field appearance="outline" floatLabel=auto>
</mat-form-field> <mat-label>Hostname / IP</mat-label>
<input matInput placeholder="Hostname or IP" [(ngModel)]="server.ip" value="{{server.ip}}">
</mat-form-field>
<mat-form-field class="full">
<input matInput placeholder="Port" [(ngModel)]="server.port" value="{{server.port}}">
</mat-form-field> <mat-form-field appearance="outline" floatLabel=auto>
<mat-label>Port</mat-label>
<mat-checkbox [(ngModel)]="server.ssl" [checked]="server.ssl"> <input matInput placeholder="Port" [(ngModel)]="server.port" value="{{server.port}}">
SSL</mat-checkbox> </mat-form-field>
<mat-slide-toggle id="ssl" [(ngModel)]="server.ssl" [checked]="server.ssl">
<mat-form-field class="full"> SSL
<input matInput placeholder="Api Key" [(ngModel)]="server.apiKey" value="{{server.apiKey}}"> </mat-slide-toggle>
</mat-form-field> </div>
<div class="md-form-field">
<mat-form-field class="full"> <mat-form-field appearance="outline" floatLabel=auto>
<input matInput placeholder="Base Url" [(ngModel)]="server.subDir" value="{{server.subDir}}"> <mat-label>API Key</mat-label>
</mat-form-field> <input matInput placeholder="Api Key" [(ngModel)]="server.apiKey" value="{{server.apiKey}}">
</mat-form-field>
<label> Externally Facing Hostname </div>
<i class="fa fa-question-circle" <div class="md-form-field">
matTooltip="This will be the external address that users will navigate to when they press the 'View On Emby' button"></i> <mat-form-field appearance="outline" floatLabel=auto>
</label> <mat-label>Base URL</mat-label>
<mat-form-field class="full"> <input matInput placeholder="Base Url" [(ngModel)]="server.subDir" value="{{server.subDir}}">
<input matInput placeholder="e.g. https://jellyfin.server.com/" [(ngModel)]="server.serverHostname" value="{{server.serverHostname}}"> </mat-form-field>
</mat-form-field> </div>
<small> <div class="md-form-field">
<span *ngIf="server.serverHostname">Current URL: "{{server.serverHostname}}/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1"</span> <mat-form-field appearance="outline" floatLabel=auto>
<span *ngIf="!server.serverHostname">Current URL: "https://app.emby.media/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1</span> <mat-label>Externally Facing Hostname</mat-label>
</small> <input matInput placeholder="e.g. https://jellyfin.server.com/" [(ngModel)]="server.serverHostname" value="{{server.serverHostname}}" matTooltip="This will be the external address that users will navigate to when they press the 'View On Emby' button">
</mat-form-field>
<small>
<span *ngIf="server.serverHostname">Current URL: "{{server.serverHostname}}/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1"</span>
<span *ngIf="!server.serverHostname">Current URL: "https://app.emby.media/#!/{{settings.isJellyfin ? ("itemdetails"): ("item/item")}}.html?id=1</span>
</small>
</div>
<div class="form-group"> <div class="form-group">
<div> <div>
<button mat-raised-button id="testEmby" type="button" (click)="test(server)" color="primary">Test Connectivity <div id="spinner"></div></button> <button mat-raised-button id="testEmby" type="button" (click)="test(server)" class="mat-focus-indicator mat-stroked-button mat-button-base">Test Connectivity <div id="spinner"></div></button>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<div> <div>
<button mat-raised-button id="discover" type="button" (click)="discoverServerInfo(server)" color="accent">Discover Server Information <div id="spinner"></div></button> <button mat-raised-button id="discover" type="button" (click)="discoverServerInfo(server)" class="mat-focus-indicator mat-stroked-button mat-button-base">Discover Server Information <div id="spinner"></div></button>
</div> </div>
</div> </div>
</div> </div>
@ -82,14 +90,14 @@
<div class="col-md-2"> <div class="col-md-2">
<div class="form-group"> <div class="form-group">
<div> <div>
<button mat-raised-button [disabled]="!hasDiscovered" (click)="save()" type="submit" id="save" color="accent">Submit</button> <button mat-raised-button [disabled]="!hasDiscovered" (click)="save()" type="submit" id="save" class="mat-focus-indicator mat-raised-button mat-button-base mat-accent">Submit</button>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<div class="form-group"> <div class="form-group">
<div> <div>
<button mat-raised-button (click)="runCacher()" type="button" id="save" color="primary">Manually Run Cacher</button> <button mat-raised-button (click)="runCacher()" type="button" id="save" class="mat-focus-indicator mat-stroked-button mat-button-base">Manually Run Cacher</button>
</div> </div>
</div> </div>
</div> </div>

@ -51,7 +51,7 @@
<div class="form-group"> <div class="form-group">
<div> <div>
<button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button> <button mat-raised-button (click)="save()" type="submit" id="save" class="mat-stroked-button accent mat-accent">Submit</button>
</div> </div>
</div> </div>
</div> </div>

@ -1,34 +1,31 @@
<settings-menu></settings-menu> <settings-menu></settings-menu>
<div class="small-middle-container"> <div class="small-middle-container">
<wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Ombi-Settings'"></wiki> <wiki [url]="'https://github.com/tidusjar/Ombi/wiki/Ombi-Settings'"></wiki>
<fieldset *ngIf="form" class="container"> <fieldset *ngIf="form">
<legend>Ombi Configuration</legend> <legend>Ombi Configuration</legend>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)"> <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
<div class="col-md-12 col-12 col-sm-12">
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Base URL</mat-label>
<input matInput placeholder="Base Url" formControlName="baseUrl">
</mat-form-field>
</div>
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Api Key</mat-label>
<input matInput id="ApiKey" name="ApiKey" placeholder="Api Key" formControlName="apiKey" readonly="readonly">
<button type="button" matSuffix (click)="refreshApiKey()" style="display:inline-block;">
<mat-icon class="fa fa-refresh"></mat-icon>
</button>
<!-- THIS IS NOT WORKING
<button type="button" mat-icon-button matSuffix [cdkCopyToClipboard]="apiKey" style="display:inline-block">
<mat-icon class="fa fa-clipboard"></mat-icon>
</button> -->
<div class="col-12"> </mat-form-field>
<mat-form-field>
<input matInput placeholder="Base Url" formControlName="baseUrl">
</mat-form-field>
<div class="form-group">
<label for="ApiKey" class="control-label">Api Key</label>
<div class="input-group">
<input type="text" class="form-control form-control-custom" id="ApiKey" name="ApiKey" formControlName="apiKey" readonly="readonly" #apiKey>
<div class="input-group-addon">
<div (click)="refreshApiKey()" id="refreshKey" class="fa fa-refresh" title="Reset API Key" pTooltip="This will invalidate the old API key"></div>
</div>
<div class="input-group-addon">
<div ngxClipboard [ngxClipboard]="apiKey" class="fa fa-clipboard" (cbOnSuccess)="successfullyCopied()"></div>
</div>
</div>
</div> </div>
<br />
<div> <div>
<mat-checkbox formControlName="doNotSendNotificationsForAutoApprove"> <mat-checkbox formControlName="doNotSendNotificationsForAutoApprove">
Do not send Notifications if a User has the Auto Approve permission</mat-checkbox> Do not send Notifications if a User has the Auto Approve permission</mat-checkbox>
@ -66,10 +63,10 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<div> <div>
<button mat-raised-button [disabled]="form.invalid" type="submit" id="save" color="accent">Submit</button> <button mat-raised-button [disabled]="form.invalid" type="submit" id="save" class="mat-stroked-button accent mat-accent">Submit</button>
</div> </div>
</div> </div>
</div> </div>
</form> </form>
</fieldset> </fieldset>
</div> </div>

@ -1,21 +1,27 @@
.col-12 { @import "~styles/shared.scss";
display:grid; .small-middle-container {
margin: auto;
width: 95%;
margin-top: 10px;
} }
textarea { textarea {
min-height:100px; min-height: 100px;
height: auto; height: auto;
max-height:800px; max-height: 800px;
} }
.small-middle-container{ .row {
margin: auto; display: block;
width: 85%;
margin-top:10px;
} }
@media (min-width: 1600px) { button, [type="button"]{
.container { padding: 0;
max-width: 1500px; border: none;
} background: transparent;
color: white;
}
::ng-deep .mat-form-field-suffix .mat-icon{
font-size:120%;
} }

@ -1,198 +0,0 @@
<settings-menu></settings-menu>
<div class="small-middle-container">
<div class="row">
<div class="col-md-2 col-md-push-10" style="float:right;">
<span style="vertical-align: top;">Advanced</span>
<p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch>
</div>
</div>
<div *ngIf="settings">
<fieldset>
<legend>Plex Configuration</legend>
<div class="row">
<div class="form-group col-md-3">
<div class="checkbox">
<input type="checkbox" id="enable" [(ngModel)]="settings.enable" [checked]="settings.enable">
<label for="enable">Enable</label>
</div>
</div>
<div class="col-md-2 col-md-push-7" style="float:right;">
<button type="button" (click)="addTab()" class="btn btn-success-outline">Add Server</button>
</div>
</div>
<ngb-tabset>
<div *ngFor="let server of settings.servers">
<ngb-tab [id]="server.id" [title]="server.name">
<ng-template ngbTabContent>
<br />
<br />
<div class="col-md-2 " style="float: right;">
<button type="button" (click)="removeServer(server)" class="btn btn-danger-outline">Remove Server</button>
</div>
<br />
<br />
<div class="col-md-6">
<!-- Main Content -->
<div class="form-group">
<label for="name" class="control-label">Server name</label>
<div>
<input type="text" class="form-control form-control-custom " id="name" name="name" placeholder="Server" [(ngModel)]="server.name"
value="{{server.name}}">
</div>
</div>
<div class="form-group">
<label for="Ip" class="control-label">Hostname or IP</label>
<div>
<input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" [(ngModel)]="server.ip"
value="{{server.ip}}">
</div>
</div>
<div class="form-group">
<label for="portNumber" class="control-label">Port</label>
<div>
<input type="text" [(ngModel)]="server.port" class="form-control form-control-custom " id="portNumber" name="Port" placeholder="Port Number"
value="{{server.port}}">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="ssl" [(ngModel)]="server.ssl" [checked]="server.ssl">
<label for="ssl">SSL</label>
</div>
</div>
<div class="form-group">
<label for="authToken" class="control-label">Plex Authorization Token</label>
<div class="">
<input type="text" class="form-control-custom form-control" id="authToken" [(ngModel)]="server.plexAuthToken" placeholder="Plex Auth Token"
value="{{server.plexAuthToken}}">
</div>
</div>
<div class="form-group">
<label for="MachineIdentifier" class="control-label">Machine Identifier</label>
<div class="">
<input type="text" class="form-control-custom form-control" id="MachineIdentifier" name="MachineIdentifier" [(ngModel)]="server.machineIdentifier"
value="{{server.machineIdentifier}}">
</div>
</div>
</div>
<div class="col-md-5" style="float:right;">
<div class="form-group">
<label for="username" class="control-label">Username and Password</label>
<div>
<input type="text" class="form-control form-control-custom" id="username" [(ngModel)]="username" placeholder="username">
</div>
<br />
<div>
<input type="password" class="form-control form-control-custom" id="password" [(ngModel)]="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div>
<button id="requestToken" (click)="requestServers(server)" class="btn btn-primary-outline">Load Servers
<i class="fa fa-key"></i>
</button>
</div>
</div>
<br />
<br />
<div class="form-group" *ngIf="loadedServers">
<label for="username" class="control-label">Please select the server</label>
<br />
<div class="btn-group">
<div class="btn-group">
<a [attr.disabled]="!serversButton ? true : null" href="#" class="btn btn-info-outline dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
Servers
<span class="caret"></span>
</a>
<ul *ngIf="loadedServers" class="dropdown-menu">
<li *ngFor="let s of loadedServers.servers.server">
<a (click)="selectServer(s,server)">{{s.name}}</a>
</li>
</ul>
</div>
</div>
</div>
<hr/>
<label>Please select the libraries you want Ombi to look in for content</label>
<br />
<small>Note: if nothing is selected, we will monitor all libraries</small>
<div class="form-group">
<div>
<button (click)="loadLibraries(server)" class="btn btn-primary-outline">Load Libraries
<i class="fa fa-film"></i>
</button>
</div>
</div>
<div *ngIf="server.plexSelectedLibraries">
<div *ngFor="let lib of server.plexSelectedLibraries">
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="{{lib.title}}" [(ngModel)]="lib.enabled" [checked]="lib.enabled">
<label for="{{lib.title}}">{{lib.title}}</label>
</div>
</div>
</div>
</div>
<div class="form-group" *ngIf="advanced">
<label for="episodeBatchSize" class="control-label">Episode Batch Size</label>
<div>
<input type="number" class="form-control-custom form-small form-control" id="episodeBatchSize" name="episodeBatchSize" [(ngModel)]="server.episodeBatchSize"
value="{{server.episodeBatchSize}}" tooltipPosition="top" pTooltip="This is used when we cache the episodes, we cache in batches of 50 by default, you can configure how many we do at a time here">
</div>
</div>
<div class="form-group">
<div>
<button id="testPlex" type="button" (click)="testPlex(server)" class="btn btn-primary-outline">
Test Connectivity
<div id="spinner"></div>
</button>
</div>
</div>
</div>
</ng-template>
</ngb-tab>
</div>
</ngb-tabset>
<div class="col-md-2">
<div class="form-group">
<div>
<button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div>
<button (click)="runCacher()" type="button" id="save" class="btn btn-primary-outline">Manually Run Full Sync</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div>
<button (click)="runRecentlyAddedCacher()" type="button" id="save" class="btn btn-primary-outline">Manually Run Recently Added Sync</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>

@ -1,189 +1,188 @@
<settings-menu></settings-menu> <settings-menu></settings-menu>
<div class="small-middle-container"> <div class="small-middle-container">
<div class="row"> <fieldset style="width:100%;">
<div class="col-md-2 col-md-push-10" style="float:right;">
<span style="vertical-align: top;">Advanced</span>
<p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch>
</div>
</div>
<div *ngIf="settings">
<fieldset>
<legend>Plex Configuration</legend> <legend>Plex Configuration</legend>
<div class="row"> <div class="row">
<div class="col-md-6 col-6 col-sm-6">
<div class="form-group col-md-3"> <div class="md-form-field">
<div class="checkbox"> <mat-slide-toggle [(ngModel)]="settings.enable" [checked]="settings.enable">Enable
<input type="checkbox" id="enable" [(ngModel)]="settings.enable" [checked]="settings.enable"> </mat-slide-toggle>
<label for="enable">Enable</label> </div>
<div class="md-form-field">
<mat-slide-toggle [(ngModel)]="advanced">Advanced</mat-slide-toggle>
</div> </div>
</div> </div>
</div> </div>
<mat-tab-group #tabGroup [selectedIndex]="selected.value" (selectedTabChange)="addTab($event)" (selectedIndexChange)="selected.setValue($event)" animationDuration="0ms"> <div class="row">
<mat-tab *ngFor="let server of settings.servers" [label]="server.name"> <mat-tab-group #tabGroup [selectedIndex]="selected.value" (selectedTabChange)="addTab($event)"
<div class="col-md-2 " style="float: right;"> (selectedIndexChange)="selected.setValue($event)" animationDuration="0ms" style="width:100%;">
<button type="button" (click)="removeServer(server)" class="btn btn-danger-outline">Remove Server</button> <mat-tab *ngFor="let server of settings.servers" [label]="server.name">
<div class="col-md-6 col-6 col-sm-6" style="float: right; width:100%; text-align:right;">
<button type="button" (click)="removeServer(server)"
class="mat-focus-indicator mat-flat-button mat-button-base mat-warn">Remove Server</button>
</div> </div>
<br /> <br />
<br /> <br />
<div class="col-md-7 col-8 col-sm-12">
<div class="col-md-6">
<!-- Main Content --> <!-- Main Content -->
<div class="form-group"> <label for="username" class="control-label">
<label for="name" class="control-label">Server name</label> <h3>Plex Server Configuration</h3>
<div> </label>
<input type="text" class="form-control form-control-custom " id="name" name="name" placeholder="Server" [(ngModel)]="server.name" <div class="md-form-field">
value="{{server.name}}"> <mat-form-field appearance="outline" floatLabel=auto>
</div> <mat-label>Server Name</mat-label>
<input matInput id="name" name="name"
[(ngModel)]="server.name" value="{{server.name}}">
</mat-form-field>
</div> </div>
<div class="form-group"> <div class="md-form-field">
<label for="Ip" class="control-label">Hostname or IP</label> <mat-form-field appearance="outline" floatLabel=auto>
<div> <mat-label>Hostname or IP</mat-label>
<input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" [(ngModel)]="server.ip" <input matInput id="Ip" name="Ip" [(ngModel)]="server.ip"
value="{{server.ip}}"> value="{{server.ip}}">
</div> </mat-form-field>
</div>
<div class="form-group"> <mat-form-field appearance="outline" floatLabel=auto>
<label for="portNumber" class="control-label">Port</label> <mat-label>Port</mat-label>
<div> <input matInput id="portNumber" name="Port"
<input type="text" [(ngModel)]="server.port" class="form-control form-control-custom " id="portNumber" name="Port" placeholder="Port Number" [(ngModel)]="server.port" value="{{server.port}}">
value="{{server.port}}"> </mat-form-field>
</div>
</div>
<div class="form-group"> <mat-slide-toggle id="ssl" [(ngModel)]="server.ssl" [checked]="server.ssl">
<div class="checkbox"> SSL
<input type="checkbox" id="ssl" [(ngModel)]="server.ssl" [checked]="server.ssl"> </mat-slide-toggle>
<label for="ssl">SSL</label>
</div>
</div> </div>
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=auto>
<mat-label>Plex Authorization Token</mat-label>
<input matInput id="authToken"
[(ngModel)]="server.plexAuthToken" value="{{server.plexAuthToken}}">
</mat-form-field>
<mat-form-field appearance="outline" floatLabel=auto>
<div class="form-group"> <mat-label>Machine Identifier</mat-label>
<label for="authToken" class="control-label">Plex Authorization Token</label> <input matInput id="MachineIdentifier" name="MachineIdentifier"
<div class=""> [(ngModel)]="server.machineIdentifier" value="{{server.machineIdentifier}}">
<input type="text" class="form-control-custom form-control" id="authToken" [(ngModel)]="server.plexAuthToken" placeholder="Plex Auth Token" </mat-form-field>
value="{{server.plexAuthToken}}">
</div>
</div> </div>
<div class="md-form-field">
<div class="form-group"> <div class="md-form-field" *ngIf="advanced">
<label for="MachineIdentifier" class="control-label">Machine Identifier</label> <mat-form-field appearance="outline" floatLabel=auto>
<div class=""> <mat-label for="episodeBatchSize" class="control-label">Episode Batch Size</mat-label>
<input type="text" class="form-control-custom form-control" id="MachineIdentifier" name="MachineIdentifier" [(ngModel)]="server.machineIdentifier" <input matInput type="number" id="episodeBatchSize" name="episodeBatchSize"
value="{{server.machineIdentifier}}"> [(ngModel)]="server.episodeBatchSize" value="{{server.episodeBatchSize}}"
</div> matTooltip="This is used when we cache the episodes, we cache in batches of 50 by default, you can configure how many we do at a time here"
</div> matTooltipPosition="right">
</div> </mat-form-field>
<div class="col-md-4" style="float:right;">
<div class="form-group">
<label for="username" class="control-label">Username and Password</label>
<div>
<input type="text" class="form-control form-control-custom" id="username" [(ngModel)]="username" placeholder="username">
</div>
<br />
<div>
<input type="password" class="form-control form-control-custom" id="password" [(ngModel)]="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<div>
<button id="requestToken" (click)="requestServers(server)" class="btn btn-primary-outline">Load Servers
<i class="fa fa-key"></i>
</button>
</div> </div>
</div> </div>
<br /> <div class="md-form-field" *ngIf="loadedServers">
<br />
<div class="form-group" *ngIf="loadedServers">
<label for="username" class="control-label">Please select the server</label> <label for="username" class="control-label">Please select the server</label>
<br /> <br />
<div class="btn-group"> <div class="btn-group">
<div class="btn-group"> <div class="btn-group">
<a [attr.disabled]="!serversButton ? true : null" href="#" class="btn btn-info-outline dropdown-toggle" data-toggle="dropdown" <mat-form-field appearance="outline">
aria-expanded="false"> <mat-label>Server</mat-label>
Servers <mat-select>
<span class="caret"></span> <mat-option (click)="selectServer(s,server)"
</a> *ngFor="let s of loadedServers.servers.server" [value]="s.server">
{{s.name}}</mat-option>
<ul *ngIf="loadedServers" class="dropdown-menu"> </mat-select>
<li *ngFor="let s of loadedServers.servers.server"> </mat-form-field>
<a (click)="selectServer(s,server)">{{s.name}}</a>
</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
<hr/>
<label>Please select the libraries you want Ombi to look in for content</label> <label>Please select the libraries you want Ombi to look in for content</label>
<br /> <br />
<small>Note: if nothing is selected, we will monitor all libraries</small> <small>Note: if nothing is selected, we will monitor all libraries</small>
<div class="form-group"> <div class="md-form-field">
<div> <div>
<button (click)="loadLibraries(server)" class="btn btn-primary-outline">Load Libraries <button mat-raised-button (click)="loadLibraries(server)"
class="mat-focus-indicator mat-stroked-button mat-button-base">Load Libraries
<i class="fa fa-film"></i> <i class="fa fa-film"></i>
</button> </button>
</div> </div>
</div> </div>
<br />
<div *ngIf="server.plexSelectedLibraries"> <div *ngIf="server.plexSelectedLibraries">
<div *ngFor="let lib of server.plexSelectedLibraries"> <div *ngFor="let lib of server.plexSelectedLibraries">
<div class="form-group"> <div class="md-form-field">
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="{{lib.title}}" [(ngModel)]="lib.enabled" [checked]="lib.enabled"> <mat-slide-toggle [(ngModel)]="lib.enabled" [checked]="lib.enabled"
<label for="{{lib.title}}">{{lib.title}}</label> for="{{lib.title}}">{{lib.title}}</mat-slide-toggle>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="form-group" *ngIf="advanced"> <div class="col-md-5 col-4 col-sm-12">
<label for="episodeBatchSize" class="control-label">Episode Batch Size</label> <div class="md-form-field">
<label for="username" class="control-label">
<h3>Plex Credentials</h3>
<small>These fields are optional to automatically fill in your Plex server settings</small>
</label>
<div> <div>
<input type="number" class="form-control-custom form-small form-control" id="episodeBatchSize" name="episodeBatchSize" [(ngModel)]="server.episodeBatchSize" <mat-form-field appearance="outline" floatLabel=auto>
value="{{server.episodeBatchSize}}" tooltipPosition="top" pTooltip="This is used when we cache the episodes, we cache in batches of 50 by default, you can configure how many we do at a time here"> <mat-label>Username</mat-label>
<input matInput id="username" [(ngModel)]="username"
value="{{username}}">
</mat-form-field>
</div>
<div>
<mat-form-field appearance="outline" floatLabel=auto>
<mat-label>Password</mat-label>
<input matInput type="password" id="password"
[(ngModel)]="password" value="{{password}}">
</mat-form-field>
</div>
</div>
<div class="md-form-field">
<div>
<button mat-raised-button id="requestToken" (click)="requestServers(server)"
class="mat-stroked-button">Load Servers
<i class="fa fa-key"></i>
</button>
</div> </div>
</div> </div>
<br />
<div class="form-group"> <div class="form-group">
<div> <div class="form-group">
<button id="testPlex" type="button" (click)="testPlex(server)" class="btn btn-primary-outline"> <button mat-raised-button id="testPlex" type="button" (click)="testPlex(server)"
class="mat-focus-indicator mat-stroked-button mat-button-base">
Test Connectivity Test Connectivity
<div id="spinner"></div> <div id="spinner"></div>
</button> </button>
</div> </div>
<div class="form-group">
<button mat-raised-button (click)="runCacher()" type="button" id="save"
class="mat-focus-indicator mat-stroked-button mat-button-base">Manually Run Full
Sync</button><br />
</div>
<div class="form-group">
<button mat-raised-button (click)="runRecentlyAddedCacher()" type="button" id="save"
class="mat-focus-indicator mat-stroked-button mat-button-base">Manually Run Recently
Added Sync</button>
</div>
</div> </div>
</div> </div>
</mat-tab> </mat-tab>
<mat-tab label="" disabled=true> </mat-tab> <mat-tab label="" disabled=true> </mat-tab>
<mat-tab label="Add Server" position=100> </mat-tab> <mat-tab label="Add Server" position=100> </mat-tab>
</mat-tab-group> </mat-tab-group>
<div class="col-md-2"> <div class="col-md-2">
<div class="form-group">
<div>
<button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<div>
<button (click)="runCacher()" type="button" id="save" class="btn btn-primary-outline">Manually Run Full Sync</button>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group"> <div class="form-group">
<div> <div>
<button (click)="runRecentlyAddedCacher()" type="button" id="save" class="btn btn-primary-outline">Manually Run Recently Added Sync</button> <button mat-raised-button (click)="save()" type="submit" id="save"
class="mat-focus-indicator mat-raised-button mat-button-base mat-accent">Submit</button>
</div> </div>
</div> </div>
</div> </div>
</div>
</fieldset> </fieldset>
</div> </div>
</div> <!--(){{settings|json}}-->

@ -5,40 +5,13 @@
margin-top: 10px; margin-top: 10px;
} }
.col-md-6 { .col-8 {
display: contents; display: inline-table;
} }
.col-md-5 { .col-md-5 {
display: contents; display: inline-table;
}
.control-label {
font-weight: 400;
} }
.row { .row {
display: block; display: block;
} }
.btn-danger-outline {
background-color: #E84C3D;
}
.btn-success-outline {
background-color: #1b9d1b;
}
::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;
}
@media (min-width:1440px) {
.col-md-6 {
display: inline-table;
}
.col-md-5 {
display: inline-table;
}
}

@ -2,53 +2,52 @@
<div *ngIf="form" class="small-middle-container"> <div *ngIf="form" class="small-middle-container">
<fieldset> <fieldset>
<legend>Radarr Settings</legend> <legend>Radarr Settings</legend>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:2%;"> <div class="row">
<div style="float: right;"> <div class="col-md-12 col-12 col-sm-12">
<div class="md-form-field"> <div >
<mat-slide-toggle formControlName="enabled">Enable</mat-slide-toggle> <div class="md-form-field">
</div> <mat-slide-toggle formControlName="enabled" id="enable">Enable</mat-slide-toggle>
<div class="md-form-field"> </div>
<mat-slide-toggle [(ngModel)]="advanced" [ngModelOptions]="{standalone: true}">Advanced</mat-slide-toggle> <div class="md-form-field">
<mat-slide-toggle [(ngModel)]="advanced" [ngModelOptions]="{standalone: true}">Advanced</mat-slide-toggle>
</div>
</div>
</div> </div>
</div> </div>
<div class="col-md-12"> <div class="row">
<div class="col-md-5"> <div class="col-md-7 col-8 col-sm-12">
<label for="username" class="control-label"><h3>Server Configuration</h3></label>
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field> <mat-form-field appearance="outline" >
<input matInput placeholder="Hostname or IP" formControlName="ip"> <mat-label>Hostname or IP</mat-label>
<input matInput formControlName="ip">
</mat-form-field> </mat-form-field>
</div> <mat-form-field appearance="outline" >
<mat-label>Port</mat-label>
<div class="md-form-field"> <input matInput formControlName="port">
<mat-form-field>
<input matInput placeholder="Port" formControlName="port">
</mat-form-field> </mat-form-field>
<mat-slide-toggle formControlName="ssl">
SSL
</mat-slide-toggle>
</div> </div>
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field> <mat-form-field appearance="outline" >
<input matInput placeholder="API Key" formControlName="apiKey"> <mat-label>API key</mat-label>
<input matInput formControlName="apiKey">
</mat-form-field> </mat-form-field>
</div> </div>
<div>
<mat-slide-toggle formControlName="ssl">
Enable SSL
</mat-slide-toggle>
</div>
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field> <mat-form-field appearance="outline" >
<input matInput placeholder="Base Url" formControlName="subDir"> <mat-label>Base URL</mat-label>
<input matInput formControlName="subDir">
</mat-form-field> </mat-form-field>
</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>Interface</h3></label>
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field> <mat-form-field appearance="outline" >
<mat-label>Quality Profiles</mat-label> <mat-label>Quality Profiles</mat-label>
<mat-select formControlName="defaultQualityProfile" required> <mat-select formControlName="defaultQualityProfile" required>
<mat-option *ngFor="let quality of qualities" [value]="quality.id"> <mat-option *ngFor="let quality of qualities" [value]="quality.id">
@ -56,12 +55,12 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div><button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span <div class="md-form-field" style="display:inline;margin-left:20px;">
*ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button></div> <button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
</div>
</div> </div>
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field> <mat-form-field appearance="outline" >
<mat-label>Default Root Folder</mat-label> <mat-label>Default Root Folder</mat-label>
<mat-select formControlName="defaultRootPath" required> <mat-select formControlName="defaultRootPath" required>
<mat-option *ngFor="let folder of rootFolders" [value]="folder.path"> <mat-option *ngFor="let folder of rootFolders" [value]="folder.path">
@ -69,12 +68,12 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<div><button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span <div class="md-form-field" style="display:inline;margin-left:20px;">
*ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button></div> <button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
</div>
</div> </div>
<div class="md-form-field"> <div class="md-form-field">
<mat-form-field> <mat-form-field appearance="outline" >
<mat-label>Default Minimum Availability</mat-label> <mat-label>Default Minimum Availability</mat-label>
<mat-select formControlName="minimumAvailability" required> <mat-select formControlName="minimumAvailability" required>
<mat-option *ngFor="let min of minimumAvailabilityOptions" [value]="min.value"> <mat-option *ngFor="let min of minimumAvailabilityOptions" [value]="min.value">
@ -88,27 +87,20 @@
Do not search Do not search
</mat-slide-toggle> </mat-slide-toggle>
</div> </div>
</div> </div>
<div class="col"> </div>
<div class="row">
<div class="col-12">
<div class="md-form-field"> <div class="md-form-field">
<div> <div>
<button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test <button mat-raised-button type="button" [disabled]="form.invalid" (click)="test(form)">Test Connectivity <span id="spinner"></span></button>
Connectivity <span id="spinner"></span></button>
</div> </div>
</div> </div>
<div class="md-form-field" style="margin-top:1em;">
<div class="md-form-field">
<div> <div>
<button mat-raised-button type="submit" color="primary" [disabled]="form.invalid">Submit</button> <button mat-raised-button type="submit" color="primary" [disabled]="form.invalid">Submit</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</form> </form>

@ -5,45 +5,13 @@
margin-top: 10px; margin-top: 10px;
} }
.col-md-6 { .col-8 {
display: contents; display: inline-table;
} }
.col-md-5 { .col-md-5 {
display: contents; display: inline-table;
}
.col-md-4 {
display: contents;
}
.control-label {
font-weight: 400;
} }
.row { .row {
display: block; 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;
}
::ng-deep .load {
max-width: fit-content;
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;
}
} }

@ -3,73 +3,81 @@
<div *ngIf="form" class="small-middle-container"> <div *ngIf="form" class="small-middle-container">
<fieldset> <fieldset>
<legend>SickRage Settings</legend> <legend>SickRage Settings</legend>
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;"> <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
<div class="row">
<div class="col-md-6"> <div class="col-md-12 col-12 col-sm-12">
<div class="form-group"> <div style="float:right;text-align:left;">
<div class="checkbox"> <div class="md-form-field">
<input type="checkbox" id="enable" formControlName="enabled"> <mat-slide-toggle id="enable" formControlName="enabled">Enable</mat-slide-toggle>
<label for="enable">Enable</label> </div>
<div class="md-form-field">
<mat-slide-toggle formControlName="ssl">SSL</mat-slide-toggle>
</div>
</div> </div>
</div> </div>
</div>
<div class="row">
<div class="col-md-7 col-8 col-sm-12">
<label for="select" class="control-label"><h3>SickRage Server Configuration</h3></label>
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>SickRage Hostname or IP</mat-label>
<input matInput id="Ip" name="Ip" placeholder="Example: localhost" formControlName="ip">
<mat-error>The IP/Hostname is required</mat-error>
</mat-form-field>
</div>
<div class="form-group"> <div class="md-form-field">
<label for="Ip" class="control-label">Hostname or IP</label> <mat-form-field appearance="outline" floatLabel=always>
<mat-label>Port</mat-label>
<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')}"> <input matInput id="port" name="port" placeholder="Example: 8081" formControlName="port">
<small *ngIf="form.get('ip').hasError('required')" class="error-text">The IP/Hostname is required</small> <mat-error>The Port is required</mat-error>
</div> </mat-form-field>
</div>
<div class="form-group">
<label for="portNumber" class="control-label">Port</label>
<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">
<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>
<input type="text" class="form-control form-control-custom " [ngClass]="{'form-error': form.get('apiKey').hasError('required')}" formControlName="apiKey" id="ApiKey" name="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">
<input type="checkbox" id="Ssl" name="Ssl" formControlName="ssl"><label for="Ssl">SSL</label>
<div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>SickRage API Key</mat-label>
<input matInput id="apiKey" name="apiKey" placeholder="API Key" formControlName="apiKey">
<mat-error>The API Key is required</mat-error>
</mat-form-field>
</div> </div>
</div>
<div class="form-group"> <div class="md-form-field">
<label for="SubDir" class="control-label">Base Url</label> <mat-form-field appearance="outline" floatLabel=always>
<div> <mat-label>SickRage Base URL</mat-label>
<input type="text" class="form-control form-control-custom" formControlName="subDir" id="SubDir" name="SubDir"> <input matInput id="SubDir" name="SubDir" placeholder="Example: /sickrage" formControlName="subDir">
</mat-form-field>
</div> </div>
</div> </div>
</div> <div class="col-md-5 col-4 col-sm-12">
<div class="col-md-6"> <div class="form-group">
<div class="form-group"> <label for="select" class="control-label"><h3>SickRage Quality Profiles</h3></label>
<label for="select" class="control-label">Quality Profiles</label> <div id="profiles">
<div id="profiles"> <div class="md-form-field" style="display:contents;">
<select class="form-control form-control-custom" [ngClass]="{'form-error': form.get('qualityProfile').hasError('required')}" id="select" formControlName="qualityProfile"> <mat-form-field appearance="outline">
<option *ngFor="let quality of qualities" value="{{quality.value}}" >{{quality.display}}</option> <mat-label>Quality Profiles</mat-label>
</select> <mat-select formControlName="qualityProfile">
<mat-option *ngFor="let quality of qualities" value="{{quality.value}}">{{quality.display}} </mat-option>
</mat-select>
<mat-error>A Default Quality Profile is required</mat-error>
</mat-form-field>
</div>
</div>
</div> </div>
<small *ngIf="form.get('qualityProfile').hasError('required')" class="error-text">A Default Quality Profile is required</small>
</div>
<div class="form-group"> <div class="form-group">
<div> <div>
<button type="button" (click)="test(form)" class="btn btn-primary-outline">Test Connectivity <span id="spinner"> </span></button> <button mat-raised-button type="button" (click)="test(form)" class="mat-stroked-button">Test Connectivity
<span id="spinner"> </span></button>
</div>
</div> </div>
</div>
<div class="form-group"> <div class="form-group">
<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>
</div> </div>

@ -2,168 +2,164 @@
<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>
</div> <div >
<div class="md-form-field">
<div class="col-md-4"> <mat-slide-toggle formControlName="enabled" id="enable">Enable</mat-slide-toggle>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="v3" formControlName="v3">
<label for="v3">V3</label>
</div> </div>
</div> <div class="md-form-field">
</div> <mat-slide-toggle [(ngModel)]="advanced" [ngModelOptions]="{standalone: true}">Advanced</mat-slide-toggle>
<div class="col-md-4">
<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>
</div> </mat-form-field>
<mat-form-field appearance="outline" floatLabel=always>
<div class="form-group"> <mat-label>Port</mat-label>
<label for="portNumber" class="control-label">Port <input matInput id="port" name="port" placeholder="Example: 8989" formControlName="port">
<mat-error>The Port is required</mat-error>
<i *ngIf="form.get('port').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="The Port is required"></i> </mat-form-field>
</label> <mat-slide-toggle formControlName="ssl">SSL</mat-slide-toggle>
<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 class="form-group">
<label for="ApiKey" class="control-label">Sonarr API Key
<i *ngIf="form.get('apiKey').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="The API Key is required"></i>
</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 class="md-form-field">
</div> <mat-form-field appearance="outline" floatLabel=always>
<div class="col-md-5"> <mat-label>Sonarr API Key</mat-label>
<input matInput id="apiKey" name="apiKey" placeholder="API Key" formControlName="apiKey">
<div class="form-group col-md-12"> <mat-error>The API Key is required</mat-error>
<label for="profiles" class="control-label">Quality Profiles </mat-form-field>
<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">
<select class="form-control form-control-custom col-md-5 form-half" [ngClass]="{'form-error': form.get('qualityProfile').hasError('required')}" id="select" formControlName="qualityProfile">
<option *ngFor="let quality of qualities" value="{{quality.id}}">{{quality.name}}</option>
</select>
<button type="button" (click)="getProfiles(form)" class="btn btn-primary-outline col-md-4 col-md-push-1 load">
Load Qualities <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
</div> </div>
</div> <div class="md-form-field">
<mat-form-field appearance="outline" floatLabel=always>
<mat-label>Sonarr Base URL</mat-label>
<div class="form-group col-md-12"> <input matInput id="SubDir" name="SubDir" placeholder="Example: /sonarr" formControlName="subDir">
<label for="select" class="control-label">Quality Profiles (Anime)</label> </mat-form-field>
<div id="qualityProfileAnime">
<select class="form-control form-control-custom col-md-5 form-half" id="qualityProfileAnime" formControlName="qualityProfileAnime">
<option *ngFor="let quality of qualities" value="{{quality.id}}">{{quality.name}}</option>
</select>
</div> </div>
</div> </div>
<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="rootFolders" class="control-label">Default Root Folders <div id="profiles">
<div class="md-form-field" style="display:contents;">
<i *ngIf="form.get('rootPath').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="A Default Root Path is required"></i> <mat-form-field appearance="outline">
</label> <mat-label>Quality Profiles</mat-label>
<div id="rootFolders"> <mat-select formControlName="qualityProfile">
<select class="form-control form-control-custom col-md-5 form-half" formControlName="rootPath" [ngClass]="{'form-error': form.get('rootPath').hasError('required')}"> <mat-option *ngFor="let quality of qualities" value="{{quality.id}}">{{quality.name}} </mat-option>
<option *ngFor="let folder of rootFolders" value="{{folder.id}}">{{folder.path}}</option> </mat-select>
</select> <mat-error>A Default Quality Profile is required</mat-error>
<button type="button" (click)="getRootFolders(form)" class="btn btn-primary-outline load col-md-4 col-md-push-1"> </mat-form-field>
Load Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button> </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>
</div>
</div>
<div id="qualityProfileAnime">
<div class="md-form-field" style="display:contents;">
<mat-form-field appearance="outline">
<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">
<label for="rootFoldersAnime" class="control-label">Default Root Folders (Anime)</label>
<div id="rootFoldersAnime">
<select class="form-control form-control-custom col-md-5 form-half" formControlName="rootPathAnime">
<option *ngFor="let folder of rootFoldersAnime" value="{{folder.id}}">{{folder.path}}</option>
</select>
</div>
</div> <div class="form-group col-md-12">
<div id="rootFolders">
<div class="md-form-field" style="display:contents;">
<mat-form-field appearance="outline">
<mat-label>Default Root Folders</mat-label>
<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>
</div>
</div>
<div id="rootFoldersAnime">
<div class="md-form-field" style="display:contents;">
<mat-form-field appearance="outline">
<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 class="form-group col-md-12" *ngIf="form.controls.v3.value"> </div>
<label for="select" class="control-label">Language Profiles
<i *ngIf="form.get('languageProfile').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="A Language Profile is required"></i>
</label>
<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')}">
<option *ngFor="let lang of languageProfiles" [ngValue]="lang.id">{{lang.name}}</option>
</select>
<button (click)="getLanguageProfiles(form)" type="button" class="btn btn-primary-outline col-md-4 col-md-push-1">Load
Languages <span *ngIf="langRunning" class="fa fa-spinner fa-spin"> </span></button>
<div class="form-group col-md-12" *ngIf="form.controls.v3.value">
<label for="select" class="control-label">Language Profiles
<i *ngIf="form.get('languageProfile').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="A Language Profile is required"></i>
</label>
<div id="langaugeProfile">
<div class="md-form-field" style="display:contents;">
<mat-form-field appearance="outline">
<mat-label>Language Profiles </mat-label>
<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>
</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>
<label>Enabled Season Folders to organize seasons into individual folders within a show.</label>
</div> </div>
<label>Enabled Season Folders to organize seasons into individual folders within a show.</label>
</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 mat-raised-button type="submit" class="mat-stroked-button accent mat-accent">Submit</button>
<button type="submit" class="btn btn-primary-outline ">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>

@ -5,29 +5,11 @@
margin-top: 10px; margin-top: 10px;
} }
.col-md-6 { .col-8 {
display: contents; display: inline-table;
} }
.col-md-5 { .col-md-5 {
display: contents; display: inline-table;
}
.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;
} }
::ng-deep .load { ::ng-deep .load {
@ -35,15 +17,3 @@
margin-left: 3em; margin-left: 3em;
padding: 0.5rem 1.14rem; 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;
}
}

@ -1,5 +1,5 @@
import { Component, OnInit } from "@angular/core"; 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"; import { ILanguageProfiles, ISonarrProfile, ISonarrRootFolder } from "../../interfaces";
@ -28,12 +28,32 @@ export class SonarrComponent implements OnInit {
public langRunning: boolean; public langRunning: boolean;
public form: FormGroup; public form: FormGroup;
public advanced = false; public advanced = false;
formErrors: any;
constructor(private settingsService: SettingsService, constructor(private settingsService: SettingsService,
private sonarrService: SonarrService, private sonarrService: SonarrService,
private notificationService: NotificationService, private notificationService: NotificationService,
private testerService: TesterService, 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() { public ngOnInit() {
this.settingsService.getSonarr() this.settingsService.getSonarr()
@ -41,8 +61,8 @@ export class SonarrComponent implements OnInit {
this.form = this.fb.group({ this.form = this.fb.group({
enabled: [x.enabled], enabled: [x.enabled],
apiKey: [x.apiKey, [Validators.required]], apiKey: [x.apiKey, [Validators.required]],
qualityProfile: [x.qualityProfile, [Validators.required]], qualityProfile: [x.qualityProfile, [Validators.required, validateProfile]],
rootPath: [x.rootPath, [Validators.required]], rootPath: [x.rootPath, [Validators.required, validateProfile]],
qualityProfileAnime: [x.qualityProfileAnime], qualityProfileAnime: [x.qualityProfileAnime],
rootPathAnime: [x.rootPathAnime], rootPathAnime: [x.rootPathAnime],
ssl: [x.ssl], ssl: [x.ssl],
@ -67,6 +87,16 @@ export class SonarrComponent implements OnInit {
if(x.v3) { if(x.v3) {
this.form.controls.languageProfile.setValidators([Validators.required]); this.form.controls.languageProfile.setValidators([Validators.required]);
} }
this.formErrors ={
apiKey: {},
qualityProfile: {},
rootPath: {},
ip: {},
port: {},
};
this.onFormValuesChanged();
}); });
this.rootFolders = []; this.rootFolders = [];
this.qualities = []; this.qualities = [];
@ -81,9 +111,8 @@ export class SonarrComponent implements OnInit {
this.sonarrService.getQualityProfiles(form.value) this.sonarrService.getQualityProfiles(form.value)
.subscribe(x => { .subscribe(x => {
this.qualities = x; this.qualities = x;
this.qualities.unshift({ name: "Please Select", id: -1 });
this.qualitiesAnime = x; this.qualitiesAnime = x;
this.qualities.unshift({ name: "Please Select", id: -1 });
this.profilesRunning = false; this.profilesRunning = false;
this.notificationService.success("Successfully retrieved the Quality Profiles"); 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;
}

@ -1,5 +1,5 @@
@import "~styles/variables.scss"; @import "~styles/variables.scss";
@media (max-width: 978px) { /*@media (max-width: 978px) {
.top-spacing { .top-spacing {
padding-top: 2%; padding-top: 2%;
} }
@ -14,7 +14,7 @@
.top-spacing { .top-spacing {
padding-top: 2%; padding-top: 2%;
} }
} }*/
html, html,
body { body {
@ -100,4 +100,20 @@ table {
background-color: rgba(0, 0, 0, 0.18); background-color: rgba(0, 0, 0, 0.18);
color:#fff; color:#fff;
border: 1px solid rgba(0, 0, 0, 0.18); border: 1px solid rgba(0, 0, 0, 0.18);
} }
::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;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-wrapper{
margin:0.5em;
}

Loading…
Cancel
Save