Massive amount of rework on the plex settings page. It's pretty decent now! #865

pull/1425/head
tidusjar 7 years ago
parent 74ceff80eb
commit 521f7c3ea0

@ -9,6 +9,7 @@ using Ombi.Api.Plex.Models;
using Ombi.Attributes;
using Ombi.Core.Settings;
using Ombi.Core.Settings.Models.External;
using Ombi.Models.External;
namespace Ombi.Controllers.External
{
@ -82,6 +83,26 @@ PlexAuthToken = result.user.authentication_token,
return libs;
}
[HttpPost("servers")]
public async Task<PlexServersViewModel> GetServers([FromBody] UserRequest u)
{
try
{
var signIn = await PlexApi.SignIn(u);
var servers = await PlexApi.GetServer(signIn?.user?.authentication_token);
return new PlexServersViewModel { Servers = servers, Success = true };
}
catch (Exception e)
{
return new PlexServersViewModel
{
Success = false,
Message = e.Message
};
}
}
}
}

@ -0,0 +1,11 @@
using Ombi.Api.Plex.Models.Server;
namespace Ombi.Models.External
{
public class PlexServersViewModel
{
public bool Success { get; set; }
public string Message { get; set; }
public PlexServer Servers { get; set; }
}
}

@ -1,5 +1,4 @@

export interface IPlexAuthentication {
export interface IPlexAuthentication {
user: IPlexUser
}
@ -12,14 +11,35 @@ export interface IPlexUser {
}
export interface IPlexLibraries {
mediaContainer:IMediaContainer;
mediaContainer: IMediaContainer;
}
export interface IMediaContainer {
directory:IDirectory[];
directory: IDirectory[];
}
export interface IDirectory {
key: string,
title: string,
}
export interface IPlexServerViewModel {
success: boolean,
message: string,
servers: IPlexServerResponse;
}
export interface IPlexServerResponse {
accessToken: string,
address: string,
createdAt: string,
home: string,
host: string,
localAddresses: string,
machineIdentifier: string,
name: string,
owned: string,
ownerId: string,
port: string,
scheme: string,
}

@ -6,7 +6,7 @@ import { Observable } from 'rxjs/Rx';
import { ServiceAuthHelpers } from '../service.helpers';
import { IPlexAuthentication, IPlexLibraries } from '../../interfaces/IPlex';
import { IPlexAuthentication, IPlexLibraries, IPlexServerViewModel } from '../../interfaces/IPlex';
import { IPlexServer } from '../../interfaces/ISettings';
@ -17,7 +17,11 @@ export class PlexService extends ServiceAuthHelpers {
}
logIn(login: string, password: string): Observable<IPlexAuthentication> {
return this.regularHttp.post(`${this.url}`, JSON.stringify({ login: login, password:password}), { headers: this.headers }).map(this.extractData);
return this.regularHttp.post(`${this.url}`, JSON.stringify({ login: login, password: password }), { headers: this.headers }).map(this.extractData);
}
getServers(login: string, password: string): Observable<IPlexServerViewModel> {
return this.http.post(`${this.url}servers`, JSON.stringify({ login: login, password: password }), { headers: this.headers }).map(this.extractData);
}
getLibraries(plexSettings: IPlexServer): Observable<IPlexLibraries> {

@ -6,7 +6,7 @@
<div class="form-group">
<div class="checkbox">
<input type="checkbox" [(ngModel)]="settings.enable" ng-checked="settings.enable">
<input type="checkbox" id="enable" [(ngModel)]="settings.enable" ng-checked="settings.enable">
<label for="enable">Enable</label>
</div>
</div>

@ -4,103 +4,137 @@
<fieldset>
<legend>Plex Configuration</legend>
<div class="form-group">
<div class="checkbox col-md-2 " style="float: right;">
<input type="checkbox" id="advanced" [(ngModel)]="advanced" ng-checked="advanced">
<label for="advanced">Advanced</label>
</div>
<div class="form-group col-md-3">
<div class="checkbox">
<input type="checkbox" [(ngModel)]="settings.enable" ng-checked="settings.enable">
<input type="checkbox" id="enable" [(ngModel)]="settings.enable" ng-checked="settings.enable">
<label for="enable">Enable</label>
</div>
</div>
<div style="float: right;">
<div style="float: right;" class="col-md-12 col-md-push-10">
<button type="submit" (click)="addTab()" class="btn btn-success-outline">Add Server</button>
</div>
<ngb-tabset>
<div *ngFor="let server of settings.servers">
<ngb-tab [id]="server.id" [title]="server.name">
<ng-template ngbTabContent>
<br/>
<br/>
<div style="float: right;">
<br />
<br />
<div class="col-md-12 col-md-push-10" style="float: right;">
<button type="submit" (click)="removeServer(server)" class="btn btn-danger-outline">Remove Server</button>
</div>
<br/>
<br/>
<br />
<br />
<div class="form-group">
<label for="name" class="control-label">Server name</label>
<label for="username" class="control-label">Username and Password</label>
<div>
<input type="text" class="form-control form-control-custom " id="name" name="name" placeholder="Server" [(ngModel)]="server.name" value="{{server.name}}">
<input type="text" class="form-control form-control-custom" id="username" [(ngModel)]="username" placeholder="username">
</div>
</div>
<div class="form-group">
<label for="Ip" class="control-label">Hostname or IP</label>
<br />
<div>
<input type="text" class="form-control form-control-custom " id="Ip" name="Ip" placeholder="localhost" [(ngModel)]="server.ip" value="{{server.ip}}">
<input type="password" class="form-control form-control-custom" id="password" [(ngModel)]="password" placeholder="Password">
</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}}">
<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">
<div class="checkbox">
<input type="checkbox" id="ssl" [(ngModel)]="server.ssl" ng-checked="server.ssl">
<label for="ssl">SSL</label>
</div>
<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 class="form-group">
<div class="checkbox">
<div *ngIf="advanced">
<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>
<input type="checkbox" id="EnableTvEpisodeSearching" [(ngModel)]="server.enableEpisodeSearching" ng-checked="server.enableEpisodeSearching">
<label for="EnableTvEpisodeSearching">Enable Episode Searching</label>
<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>
<small>
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 class="form-group">
<div class="checkbox">
<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>
<input type="checkbox" id="EnableTvEpisodeSearching" [(ngModel)]="server.enableEpisodeSearching" ng-checked="server.enableEpisodeSearching">
<label for="EnableTvEpisodeSearching">Enable Episode Searching</label>
<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>
<small>
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>
<br/>
<div>
<input type="password" class="form-control form-control-custom" id="password" [(ngModel)]="password" placeholder="Password">
<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>
<div class="form-group">
<div class="">
<button id="requestToken" (click)="requestToken()" class="btn btn-primary-outline">Request Token <i class="fa fa-key"></i></button>
<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>
<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>
@ -128,12 +162,12 @@
</div>
</ng-template>
</ngb-tab>
</div>
</div>
</ngb-tabset>
<div class="form-group">
<div>
<button (click)="save()" type="submit" id="save" class="btn btn-primary-outline">Submit</button>

@ -1,6 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import "rxjs/add/operator/takeUntil";
import { IPlexSettings, IPlexLibraries, IPlexServer } from '../../interfaces/ISettings'
import { IPlexSettings, IPlexLibraries, IPlexServer } from '../../interfaces/ISettings';
import { IPlexServerResponse, IPlexServerViewModel } from '../../interfaces/IPlex'
import { SettingsService } from '../../services/settings.service';
@ -12,13 +15,18 @@ import { NotificationService } from "../../services/notification.service";
moduleId: module.id,
templateUrl: './plex.component.html',
})
export class PlexComponent implements OnInit {
export class PlexComponent implements OnInit, OnDestroy {
constructor(private settingsService: SettingsService, private notificationService: NotificationService, private plexService: PlexService) { }
settings: IPlexSettings;
loadedServers: IPlexServerViewModel; // This comes from the api call for the user to select a server
private subscriptions = new Subject<void>();
username: string;
password: string;
advanced = false;
serversButton = false;
ngOnInit(): void {
this.settingsService.getPlex().subscribe(x => {
@ -27,8 +35,30 @@ export class PlexComponent implements OnInit {
);
}
requestToken() {
// TODO Plex Service
requestServers(server: IPlexServer): void {
this.plexService.getServers(this.username, this.password)
.takeUntil(this.subscriptions)
.subscribe(x => {
if (x.success) {
this.loadedServers = x;
this.serversButton = true;
this.notificationService.success("Loaded", "Found the servers! Please select one!")
} else {
this.notificationService.warning("Error When Requesting Plex Servers", x.message);
}
});
}
selectServer(selectedServer: IPlexServerResponse, server : IPlexServer)
{
server.ip = selectedServer.localAddresses.split(',')[0];
server.name = selectedServer.name;
server.machineIdentifier = selectedServer.machineIdentifier;
server.plexAuthToken = selectedServer.accessToken;
server.port = parseInt(selectedServer.port);
server.ssl = selectedServer.scheme === "http" ? false : true;
this.notificationService.success("Success", `Selected ${server.name}!`)
}
testPlex() {
@ -36,9 +66,12 @@ export class PlexComponent implements OnInit {
}
addTab() {
//this.settings.servers.push(<IPlexServer>{ name: "New*", id: Math.floor(Math.random() * (99999 - 0 + 1) + 1) });
this.notificationService.warning("Disabled", "This feature is currently disabled");
if (this.settings.servers == null) {
this.settings.servers = [];
this.settings.servers.push(<IPlexServer>{ name: "New*", id: Math.floor(Math.random() * (99999 - 0 + 1) + 1) });
} else {
this.notificationService.warning("Disabled", "Support for multiple servers is not available yet");
}
}
removeServer(server: IPlexServer) {
@ -50,7 +83,12 @@ export class PlexComponent implements OnInit {
//}
}
loadLibraries(server:IPlexServer) {
loadLibraries(server: IPlexServer) {
if (server.ip == null)
{
this.notificationService.error("Not Configured", "Plex is not yet configured correctly")
return;
}
this.plexService.getLibraries(server).subscribe(x => {
server.plexSelectedLibraries = [];
@ -77,4 +115,9 @@ export class PlexComponent implements OnInit {
}
});
}
ngOnDestroy(): void {
this.subscriptions.next();
this.subscriptions.complete();
}
}
Loading…
Cancel
Save