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

src/Ombi/Controllers/External/PlexController.cs

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

src/Ombi/Models/External/PlexRequestTokenViewModel.cs

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

src/Ombi/wwwroot/app/interfaces/IPlex.ts

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

src/Ombi/wwwroot/app/services/applications/plex.service.ts

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

src/Ombi/wwwroot/app/settings/emby/emby.component.html

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

src/Ombi/wwwroot/app/settings/plex/plex.component.html

@@ -4,13 +4,19 @@
     <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>
 
@@ -19,14 +25,52 @@
             <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="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="form-group">
                                 <label for="name" class="control-label">Server name</label>
                                 <div>
@@ -84,23 +128,13 @@
                                 </div>
                             </div>
 
-                        <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 class="">
-                                <button id="requestToken" (click)="requestToken()" class="btn btn-primary-outline">Request Token <i class="fa fa-key"></i></button>
-                            </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>

src/Ombi/wwwroot/app/settings/plex/plex.component.ts

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