mirror of
https://github.com/Ombi-app/Ombi.git
synced 2025-08-19 21:03:17 -07:00
Made some UI changes, reworked the Emby and Plex screens to make them more user friendly and no so fugly. #865
Also made the login page placeholder text slightly lighter
This commit is contained in:
Jamie.Rees
parent
ac0f3f3868
commit
e34db987d7
6 changed files with 323 additions and 309 deletions
|
|
@ -8,7 +8,7 @@ $info-colour: #5bc0de;
|
|||
$warning-colour: #f0ad4e;
|
||||
$danger-colour: #d9534f;
|
||||
$success-colour: #5cb85c;
|
||||
$placeholder-colour: #1b1b1b;
|
||||
$placeholder-colour: #3b3b3b;
|
||||
|
||||
body, html {
|
||||
height: 100% !important;
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="name" class="control-label">Server name</label>
|
||||
<div>
|
||||
|
|
@ -56,7 +57,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<!--<div class="form-group">
|
||||
<div class="checkbox">
|
||||
|
||||
|
||||
|
|
@ -64,7 +65,7 @@
|
|||
<label for="EnableTvEpisodeSearching">Enable Episode Searching</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
|
||||
<div class="form-group">
|
||||
|
|
@ -73,21 +74,25 @@
|
|||
<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">
|
||||
<div>
|
||||
<button id="testPlex" type="submit" (click)="test()" class="btn btn-primary-outline">Test Connectivity <div id="spinner"></div></button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ngb-tab>
|
||||
</div>
|
||||
</ngb-tabset>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-1 col-md-push-5">
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
|
@ -4,10 +4,6 @@
|
|||
<legend>Plex Configuration</legend>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-2 col-md-offset-10">
|
||||
<span style="vertical-align: top;">Advanced</span>
|
||||
<p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch>
|
||||
</div>
|
||||
|
||||
<div class="form-group col-md-3">
|
||||
<div class="checkbox">
|
||||
|
|
@ -33,43 +29,8 @@
|
|||
<br />
|
||||
<br />
|
||||
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<div *ngIf="advanced">
|
||||
<div class="col-md-6">
|
||||
<!-- Main Content -->
|
||||
<div class="form-group">
|
||||
<label for="name" class="control-label">Server name</label>
|
||||
<div>
|
||||
|
|
@ -98,7 +59,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<!--<div class="form-group">
|
||||
<div class="checkbox">
|
||||
|
||||
<input type="checkbox" id="EnableTvEpisodeSearching" [(ngModel)]="server.enableEpisodeSearching" [checked]="server.enableEpisodeSearching">
|
||||
|
|
@ -108,7 +69,7 @@
|
|||
If enabled then we will lookup all episodes on your Plex server and store them in the local database. This will stop episode requests that already exist on Plex (that might not be in Sonarr).
|
||||
Please be aware that this is a very resource intensive process and while the Plex Episode Cacher job is running the application may appear slow (Depending on the size of your Plex library).
|
||||
</small>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div class="form-group">
|
||||
<label for="authToken" class="control-label">Plex Authorization Token</label>
|
||||
|
|
@ -124,6 +85,44 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<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>
|
||||
|
|
@ -151,15 +150,19 @@
|
|||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
</ngb-tab>
|
||||
</div>
|
||||
</ngb-tabset>
|
||||
|
||||
<div class="col-md-3">
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
|
@ -24,7 +24,6 @@ export class PlexComponent implements OnInit, OnDestroy {
|
|||
private subscriptions = new Subject<void>();
|
||||
username: string;
|
||||
password: string;
|
||||
advanced = false;
|
||||
serversButton = false;
|
||||
|
||||
ngOnInit(): void {
|
||||
|
|
@ -42,7 +41,7 @@ export class PlexComponent implements OnInit, OnDestroy {
|
|||
this.serversButton = true;
|
||||
this.notificationService.success("Loaded", "Found the servers! Please select one!")
|
||||
} else {
|
||||
this.notificationService.warning("Error When Requesting Plex Servers", x.message);
|
||||
this.notificationService.warning("Error When Requesting Plex Servers", "Please make sure your username and password are correct");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<span style="vertical-align: top;">Advanced</span>
|
||||
<p-inputSwitch id="customInputSwitch" [(ngModel)]="advanced"></p-inputSwitch>
|
||||
</div>
|
||||
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
|
||||
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)" style="padding-top:5%;">
|
||||
<div *ngIf="form.invalid" class="alert alert-danger">
|
||||
<div *ngIf="form.dirty">
|
||||
<div *ngIf="form.get('ip').hasError('required')">The IP/Hostname is required</div>
|
||||
|
|
@ -21,6 +21,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="enable" formControlName="enabled" ng-checked="form.enabled">
|
||||
|
|
@ -33,7 +34,7 @@
|
|||
<div class="form-group">
|
||||
<label for="Ip" class="control-label">Hostname or IP</label>
|
||||
<div class="">
|
||||
<input type="text" class="form-control form-control-custom "id="Ip" name="Ip" placeholder="localhost" formControlName="ip">
|
||||
<input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" formControlName="ip">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -41,7 +42,7 @@
|
|||
<label for="portNumber" class="control-label">Port</label>
|
||||
|
||||
<div class="">
|
||||
<input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber" name="Port" placeholder="Port Number" >
|
||||
<input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber" name="Port" placeholder="Port Number">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -65,6 +66,8 @@
|
|||
<input type="text" class="form-control form-control-custom" formControlName="subDir" id="SubDir" name="SubDir">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<button type="submit" (click)="getProfiles(form)" class="btn btn-primary-outline">Get Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"> </span></button>
|
||||
|
|
@ -74,7 +77,7 @@
|
|||
<label for="select" class="control-label">Quality Profiles</label>
|
||||
<div id="profiles">
|
||||
<select formControlName="defaultQualityProfile" class="form-control form-control-custom" id="select">
|
||||
<option *ngFor='let quality of qualities' value='{{quality.id}}'>{{quality.name}}</option>
|
||||
<option *ngFor="let quality of qualities" value="{{quality.id}}">{{quality.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -90,7 +93,7 @@
|
|||
<label for="rootFolders" class="control-label">Default Root Folders</label>
|
||||
<div id="rootFolders">
|
||||
<select formControlName="defaultRootPath" class="form-control form-control-custom">
|
||||
<option *ngFor='let folder of rootFolders' value='{{folder.path}}'>{{folder.path}}</option>
|
||||
<option *ngFor="let folder of rootFolders" value="{{folder.path}}">{{folder.path}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -99,12 +102,12 @@
|
|||
<label for="rootFolders" class="control-label">Default Minimum Availability</label>
|
||||
<div id="rootFolders">
|
||||
<select formControlName="minimumAvailability" class="form-control form-control-custom">
|
||||
<option *ngFor='let min of minimumAvailabilityOptions' value='{{min.value}}'>{{min.name}}</option>
|
||||
<option *ngFor="let min of minimumAvailabilityOptions" value="{{min.value}}">{{min.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" *ngIf="advanced">
|
||||
<div class="form-group" *ngIf="advanced" style="color:#ff761b">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="addOnly" formControlName="addOnly">
|
||||
<label for="addOnly">Do not search</label>
|
||||
|
|
@ -122,6 +125,7 @@
|
|||
<button type="submit" [disabled]="form.invalid" class="btn btn-primary-outline ">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,10 +19,10 @@
|
|||
<div *ngIf="form.get('rootPath').hasError('required')">A Default Root Path is required</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="enable" formControlName="enabled" >
|
||||
<input type="checkbox" id="enable" formControlName="enabled">
|
||||
<label for="enable">Enable</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="form-group">
|
||||
<label for="Ip" class="control-label">Sonarr Hostname or IP</label>
|
||||
<div class="">
|
||||
<input type="text" class="form-control form-control-custom " formControlName="ip" id="Ip" name="Ip" placeholder="localhost" >
|
||||
<input type="text" class="form-control form-control-custom " formControlName="ip" id="Ip" name="Ip" placeholder="localhost">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
<label for="portNumber" class="control-label">Port</label>
|
||||
|
||||
<div class="">
|
||||
<input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber" name="Port" placeholder="Port Number" >
|
||||
<input type="text" class="form-control form-control-custom " formControlName="port" id="portNumber" name="Port" placeholder="Port Number">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -59,9 +59,11 @@
|
|||
<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" >
|
||||
<input type="text" class="form-control form-control-custom" formControlName="subDir" id="SubDir" name="SubDir">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<button type="button" (click)="getProfiles(form)" class="btn btn-primary-outline">Get Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
|
||||
|
|
@ -71,14 +73,14 @@
|
|||
<label for="select" class="control-label">Quality Profiles</label>
|
||||
<div id="profiles">
|
||||
<select class="form-control form-control-custom" id="select" formControlName="qualityProfile">
|
||||
<option *ngFor='let quality of qualities' value='{{quality.id}}'>{{quality.name}}</option>
|
||||
<option *ngFor="let quality of qualities" value="{{quality.id}}">{{quality.name}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<button type="button" (click)="getRootFolders(form)" class="btn btn-primary-outline">Get Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin" ></span></button>
|
||||
<button type="button" (click)="getRootFolders(form)" class="btn btn-primary-outline">Get Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -87,7 +89,7 @@
|
|||
<label for="rootFolders" class="control-label">Default Root Folders</label>
|
||||
<div id="rootFolders">
|
||||
<select class="form-control form-control-custom" formControlName="rootPath">
|
||||
<option *ngFor='let folder of rootFolders' value='{{folder.id}}'>{{folder.path}}</option>
|
||||
<option *ngFor="let folder of rootFolders" value="{{folder.id}}">{{folder.path}}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,13 +97,13 @@
|
|||
|
||||
<div class="form-group">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="SeasonFolders" name="SeasonFolders"formControlName="seasonFolders">
|
||||
<input type="checkbox" id="SeasonFolders" name="SeasonFolders" formControlName="seasonFolders">
|
||||
<label for="SeasonFolders">Enable season folders</label>
|
||||
</div>
|
||||
<label>Enabled Season Folders to organize seasons into individual folders within a show.</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group" *ngIf="advanced">
|
||||
<div class="form-group" *ngIf="advanced" style="color:#ff761b">
|
||||
<div class="checkbox">
|
||||
<input type="checkbox" id="addOnly" formControlName="addOnly">
|
||||
<label for="addOnly">Do not search</label>
|
||||
|
|
@ -120,6 +122,7 @@
|
|||
<button type="submit" class="btn btn-primary-outline ">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue