more rework, i think it actually works now

src/Ombi/ClientApp/src/app/settings/plex/components/plex-server-dialog/plex-server-dialog.component.html

@@ -3,15 +3,9 @@
     <h2>Connection</h2>
 
 
-
-
-
-
-
     <mat-form-field appearance="outline" floatLabel=auto>
       <mat-label>Server Name</mat-label>
       <input matInput placeholder="Server Name" name="name" [(ngModel)]="this.data.server.name" value="{{this.data.server.name}}">
-      <mat-hint>Auto populated during discovery of the server if left empty.</mat-hint>
     </mat-form-field>
 
     <div class="row">
@@ -62,6 +56,14 @@
       </mat-hint>
     </mat-form-field>
 
+    <mat-form-field appearance="outline" floatLabel=auto>
+      <mat-label>Episode Batch Size</mat-label>
+      <input matInput placeholder="150" name="MachineIdentifier" [(ngModel)]="this.data.server.episodeBatchSize" value="{{this.data.server.episodeBatchSize}}">
+      <mat-hint>
+        150 by default, you shouldn't need to change this, this sets how many episodes we request from Plex at a single time.
+      </mat-hint>
+    </mat-form-field>
+
     <h2>Libraries</h2>
     <div>
       <button mat-raised-button (click)="loadLibraries()"
@@ -85,13 +87,21 @@
 </mat-dialog-content>
 
 <mat-dialog-actions align=end>
+  <button style="margin: .5em 0 0 .5em;" align-middle mat-stroked-button color="accent"
+    (click)="testPlex()">
+    <span style="display: flex; align-items: baseline; white-space: pre-wrap;">
+      <i class="fas fa-vial"></i>
+      <span> Test</span>
+    </span>
+  </button>
+
   <button style="margin: .5em 0 0 .5em;" align-middle mat-stroked-button color="warn"
   (click)="delete()">
   <span style="display: flex; align-items: baseline; white-space: pre-wrap;">
     <i class="fas fa-trash"></i>
     <span> Delete</span>
   </span>
-  </button>
+</button>
 
   <button style="margin: .5em 0 0 0.5em;" mat-stroked-button color="basic" (click)="cancel()">
     <span style="display: flex; align-items: baseline; white-space: pre-wrap;">
@@ -104,7 +114,7 @@
   <button style="margin: .5em 0 0 .5em;" mat-stroked-button color="accent"
      (click)="save()">
     <span style="display: flex; align-items: baseline; white-space: pre-wrap;">
-      <i style="vertical-align: text-top;" class="fas fa-plus"></i>
+      <i style="vertical-align: text-top;" class="fas fa-check"></i>
       <span> Save</span>
     </span>
   </button>

src/Ombi/ClientApp/src/app/settings/plex/components/plex-server-dialog/plex-server-dialog.component.ts

@@ -7,7 +7,7 @@ import {
   TesterService,
 } from "../../../../services";
 import { take } from "rxjs";
-import { IPlexLibrariesSettings, IPlexServer } from "../../../../interfaces";
+import { IPlexLibrariesSettings } from "../../../../interfaces";
 import { PlexServerDialogData } from "../models";
 
 @Component({

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

@@ -2,7 +2,12 @@
 <div class="small-middle-container" *ngIf="settings">
     <fieldset style="width:100%;">
         <legend>Plex Configuration</legend>
+        <div class="col-12">
+            <div class="md-form-field align-right">
+                <button (click)="openWatchlistUserLog()" type="button" class="mat-focus-indicator mat-flat-button mat-button-base mat-accent">Watchlist User Errors</button>
+            </div>
 
+        </div>
         <settings-plex-form-field [label]="'Enable'" [type]="'checkbox'" [id]="'enable'" [(value)]="settings.enable"></settings-plex-form-field>
 
         <settings-plex-form-field [label]="'Enable User Watchlist Requests'" [type]="'checkbox'" [id]="'enable'" [(value)]="settings.enableWatchlistImport">
@@ -11,10 +16,70 @@
             </small>
         </settings-plex-form-field>            
         
-        <settings-plex-form-field [label]="'Advanced Options'" [type]="'checkbox'" [id]="'advanced'" [(value)]="advanced"></settings-plex-form-field>
+
 
         <hr>
         
+<div class="row">
+<div class="col-md-7">
+        <h2 style="margin: 1em 0 0 0;">Servers</h2>
+        <mat-list style="display:flex; flex-flow: wrap;">
+            <mat-card class="server-card" *ngFor="let server of settings.servers">
+                <button mat-button (click)="edit(server)">
+                    <h3>{{server.name}}</h3>
+                </button>
+            </mat-card>
+
+            <mat-card class="server-card new-server-card">
+                <button mat-button (click)="newServer()">
+                    <i class="fas fa-plus fa-xl"></i>
+                    <h3>Manually Add Server</h3>
+                </button>
+            </mat-card>
+        </mat-list>
+
+
+<div class="row">
+
+    <br />
+        <div class="form-group col-2">
+            <button mat-raised-button (click)="runSync(PlexSyncType.Full)" type="button" id="fullSync"
+                class="mat-focus-indicator mat-stroked-button mat-button-base">Full
+                Sync</button><br />
+        </div>
+        <div class="form-group col-2">
+            <button mat-raised-button (click)="runSync(PlexSyncType.RecentlyAdded)" type="button" id="recentlyAddedSync"
+                class="mat-focus-indicator mat-stroked-button mat-button-base">Partial Sync</button>
+        </div>
+        <div class="form-group col-2">
+            <button mat-raised-button (click)="runSync(PlexSyncType.ClearAndReSync)" type="button" id="clearData"
+                class="mat-focus-indicator mat-stroked-button mat-button-base">
+                Clear Data And Resync
+            </button>
+        </div>
+        <div class="form-group col-12">
+            <button mat-raised-button (click)="runSync(PlexSyncType.WatchlistImport)" type="button" id="watchlistImport"
+                class="mat-focus-indicator mat-stroked-button mat-button-base">
+                Run Watchlist Import
+            </button>
+        </div>
+</div>
+
+        <div class="row">
+
+            <div class="col-md-2">
+                <div class="form-group">
+                    <div>
+                        <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 class="col-md-5">
         <div class="md-form-field">
             <label for="username" class="control-label">
                 <h3>Plex Credentials</h3>
@@ -59,62 +124,9 @@
                 </div>
             </div>
         </div>
-
-
-        <h2 style="margin: 1em 0 0 0;">Servers</h2>
-        <mat-list style="display:flex; flex-flow: wrap;">
-            <mat-card class="server-card" *ngFor="let server of settings.servers">
-                <button mat-button (click)="edit(server)">
-                    <h3>{{server.name}}</h3>
-                </button>
-            </mat-card>
-
-            <mat-card class="server-card new-server-card">
-                <button mat-button (click)="newServer()">
-                    <i class="fas fa-plus fa-xl"></i>
-                    <h3>Manually Add Server</h3>
-                </button>
-            </mat-card>
-        </mat-list>
-
-
-<div class="row">
-
-    <br />
-        <div class="form-group col-1">
-            <button mat-raised-button (click)="runSync(PlexSyncType.Full)" type="button" id="fullSync"
-                class="mat-focus-indicator mat-stroked-button mat-button-base">Full
-                Sync</button><br />
-        </div>
-        <div class="form-group col-1">
-            <button mat-raised-button (click)="runSync(PlexSyncType.RecentlyAdded)" type="button" id="recentlyAddedSync"
-                class="mat-focus-indicator mat-stroked-button mat-button-base">Partial Sync</button>
-        </div>
-        <div class="form-group col-1">
-            <button mat-raised-button (click)="runSync(PlexSyncType.ClearAndReSync)" type="button" id="clearData"
-                class="mat-focus-indicator mat-stroked-button mat-button-base">
-                Clear Data And Resync
-            </button>
-        </div>
-        <div class="form-group col-12">
-            <button mat-raised-button (click)="runSync(PlexSyncType.WatchlistImport)" type="button" id="watchlistImport"
-                class="mat-focus-indicator mat-stroked-button mat-button-base">
-                Run Watchlist Import
-            </button>
     </div>
 </div>
 
-        <div class="row">
-
-            <div class="col-md-2">
-                <div class="form-group">
-                    <div>
-                        <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>
     </fieldset>
 </div>
 <!--(){{settings|json}}-->

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

@@ -1,15 +1,14 @@
-import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
+import { Component, OnDestroy, OnInit } from "@angular/core";
-import { Subject } from "rxjs";
+import { EMPTY, Subject } from "rxjs";
-import { takeUntil } from "rxjs/operators";
+import { catchError, takeUntil } from "rxjs/operators";
 
-import { IPlexLibrariesSettings, IPlexServer, IPlexServerResponse, IPlexServerViewModel, IPlexSettings } from "../../interfaces";
+import { IPlexServer, IPlexServerResponse, IPlexServerViewModel, IPlexSettings } from "../../interfaces";
-import { JobService, NotificationService, PlexService, SettingsService, TesterService } from "../../services";
+import { JobService, NotificationService, PlexService, SettingsService } from "../../services";
-import { MatTabChangeEvent, MatTabGroup } from "@angular/material/tabs";
 import {UntypedFormControl} from '@angular/forms';
 import { MatDialog } from "@angular/material/dialog";
 import { PlexWatchlistComponent } from "./components/watchlist/plex-watchlist.component";
 import { PlexServerDialogComponent } from "./components/plex-server-dialog/plex-server-dialog.component";
-import { PlexCreds, PlexServerDialogData, PlexSyncType } from "./components/models";
+import { PlexServerDialogData, PlexSyncType } from "./components/models";
 
 @Component({
     templateUrl: "./plex.component.html",
@@ -20,14 +19,10 @@ export class PlexComponent implements OnInit, OnDestroy {
     public loadedServers: IPlexServerViewModel; // This comes from the api call for the user to select a server
     public serversButton = false;
     selected = new UntypedFormControl(0);
-    @ViewChild("tabGroup", {static: false}) public tagGroup: MatTabGroup;
-
 
     public username: string;
     public password: string;
 
-    public advanced = false;
-
     private subscriptions = new Subject<void>();
     public PlexSyncType = PlexSyncType;
 
@@ -35,7 +30,6 @@ export class PlexComponent implements OnInit, OnDestroy {
         private settingsService: SettingsService,
         private notificationService: NotificationService,
         private plexService: PlexService,
-        private testerService: TesterService,
         private jobService: JobService,
         private dialog: MatDialog) { }
 
@@ -48,6 +42,10 @@ export class PlexComponent implements OnInit, OnDestroy {
     public requestServers() {
         this.plexService.getServers(this.username, this.password).pipe(
             takeUntil(this.subscriptions),
+            catchError(() => {
+                this.notificationService.error("There was an issue. Please make sure your username and password are correct");
+                return EMPTY;
+            })
         ).subscribe(x => {
             if (x.success) {
                 this.loadedServers = x;
@@ -79,61 +77,6 @@ export class PlexComponent implements OnInit, OnDestroy {
         this.newServer(server);
     }
 
-    public testPlex(server: IPlexServer) {
-        this.testerService.plexTest(server).subscribe(x => {
-            if (x === true) {
-                this.notificationService.success(`Successfully connected to the Plex server ${server.name}!`);
-            } else {
-                this.notificationService.error(`We could not connect to the Plex server  ${server.name}!`);
-            }
-        });
-    }
-
-    public addTab(event: MatTabChangeEvent) {
-        const tabName = event.tab.textLabel;
-        if (tabName == "Add Server"){ 
-
-            if (this.settings.servers == null) {
-            this.settings.servers = [];
-            }
-            this.settings.servers.push(<IPlexServer> { name: "New" + this.settings.servers.length + "*", id: Math.floor(Math.random() * (99999 - 0 + 1) + 1) });
-
-            //this.tagGroup.selectedIndex = (0);
-            this.selected.setValue(this.settings.servers.length - 1);
-            }
-    }
-
-    public removeServer(server: IPlexServer) {
-        const index = this.settings.servers.indexOf(server, 0);
-        if (index > -1) {
-            this.settings.servers.splice(index, 1);
-            this.selected.setValue(this.settings.servers.length - 1);
-        }
-    }
-
-    public loadLibraries(server: IPlexServer) {
-        if (server.ip == null) {
-            this.notificationService.error("Plex is not yet configured correctly");
-            return;
-        }
-        this.plexService.getLibraries(server).subscribe(x => {
-            server.plexSelectedLibraries = [];
-            if (x.successful) {
-                x.data.mediaContainer.directory.forEach((item) => {
-                    const lib: IPlexLibrariesSettings = {
-                        key: item.key,
-                        title: item.title,
-                        enabled: false,
-                    };
-                    server.plexSelectedLibraries.push(lib);
-                });
-            } else {
-                this.notificationService.error(x.message);
-            }
-        },
-            err => { this.notificationService.error(err); });
-    }
-
     public save() {
         const filtered = this.settings.servers.filter(x => x.name !== "");
         this.settings.servers = filtered;
@@ -186,7 +129,18 @@ export class PlexComponent implements OnInit, OnDestroy {
             panelClass: "modal-panel",
           });
           dialog.afterClosed().subscribe((x) => {
-            console.log(x);
+            if (x.deleted) {
+                this.removeServer(server);
+            }
+            if (x.server) {
+                console.log(x.server);
+                var idx = this.settings.servers.findIndex(server => server.id === x.server.id);
+                if (idx >= 0) {
+                    this.settings.servers[idx] = x.server;
+                } else {
+                    this.settings.servers.push(x.server);
+                }
+            }
           });
     }
 
@@ -200,10 +154,20 @@ export class PlexComponent implements OnInit, OnDestroy {
             panelClass: "modal-panel",
           });
           dialog.afterClosed().subscribe((x) => {
-            console.log(x);
+            if (x.server) {
+                this.settings.servers.push(x.server);
+            }
           });
     }
 
+    private removeServer(server: IPlexServer) {
+        const index = this.settings.servers.indexOf(server, 0);
+        if (index > -1) {
+            this.settings.servers.splice(index, 1);
+            this.selected.setValue(this.settings.servers.length - 1);
+        }
+    }
+
     private runCacher(): void {
         this.jobService.runPlexCacher().subscribe(x => {
             if (x) {