github/Ombi
1
0
Fork 0
mirror of https://github.com/Ombi-app/Ombi.git synced 2025-08-14 02:26:55 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
tidusjar 2017-05-31 22:47:11 +01:00
commit 521f7c3ea0
7 changed files with 222 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

21
src/Ombi/Controllers/External/PlexController.cs vendored
View file

@ -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
};
}
}
}
}

11
src/Ombi/Models/External/PlexRequestTokenViewModel.cs vendored Normal file
View file

@ -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; }
}
}

28
src/Ombi/wwwroot/app/interfaces/IPlex.ts
View file

@ -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,
}

8
src/Ombi/wwwroot/app/services/applications/plex.service.ts
View file

@ -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> {

2
src/Ombi/wwwroot/app/settings/emby/emby.component.html
View file

@ -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>

180
src/Ombi/wwwroot/app/settings/plex/plex.component.html
View file

@ -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/>
<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">
<div class="checkbox">
<input type="checkbox" id="EnableTvEpisodeSearching" [(ngModel)]="server.enableEpisodeSearching" ng-checked="server.enableEpisodeSearching">
<label for="EnableTvEpisodeSearching">Enable Episode Searching</label>
</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">
<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>
<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/>
<br />
<div>
<input type="password" class="form-control form-control-custom" id="password" [(ngModel)]="password" placeholder="Password">
</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>
<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="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">
<div class="checkbox">
<input type="checkbox" id="EnableTvEpisodeSearching" [(ngModel)]="server.enableEpisodeSearching" ng-checked="server.enableEpisodeSearching">
<label for="EnableTvEpisodeSearching">Enable Episode Searching</label>
</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">
<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>
<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>

61
src/Ombi/wwwroot/app/settings/plex/plex.component.ts
View file

@ -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();
}
}