feat(plex): Rework the Plex Settings page

src/Ombi/ClientApp/src/app/settings/plex/components/models/PlexServerDialogData.ts

@@ -0,0 +1,7 @@
+import { IPlexServer } from "../../../../interfaces";
+
+export interface PlexServerDialogData {
+    server: IPlexServer;
+    deleted?: boolean;
+    closed?: boolean;
+}

src/Ombi/ClientApp/src/app/settings/plex/components/models/index.ts

@@ -1,2 +1,3 @@
 export * from './PlexSyncType';
-export * from './PlexCreds';
+export * from './PlexCreds';
+export * from './PlexServerDialogData';

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

@@ -0,0 +1,121 @@
+<h1 mat-dialog-title>Server Configuration</h1>
+<mat-dialog-content>
+    <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-form-field>
+
+    <div class="row">
+      <mat-form-field class="col-md-6 col-12" appearance="outline" floatLabel=auto>
+        <mat-label>Hostname / IP</mat-label>
+        <input matInput placeholder="Hostname or IP" name="ip" [(ngModel)]="this.data.server.ip" value="{{this.data.server.ip}}"
+           #serverHostnameIpControl="ngModel" required>
+        <mat-error *ngIf="serverHostnameIpControl.hasError('required')">Must be specified.</mat-error>
+      </mat-form-field>
+
+      <mat-form-field class="col-md-4 col-7" appearance="outline" floatLabel=auto>
+        <mat-label>Port</mat-label>
+        <input matInput placeholder="Port" name="port" [(ngModel)]="this.data.server.port" value="{{this.data.server.port}}"
+           #serverPortControl="ngModel" required pattern="^[0-9]*$">
+        <mat-error *ngIf="serverPortControl.hasError('required')">Must be specified.</mat-error>
+        <mat-error *ngIf="serverPortControl.hasError('pattern')">Must be a number.</mat-error>
+      </mat-form-field>
+
+      <mat-slide-toggle class="col-md-2 col-5 mt-3" id="ssl" name="ssl" [(ngModel)]="this.data.server.ssl" [checked]="this.data.server.ssl">
+        SSL
+      </mat-slide-toggle>
+    </div>
+
+    <mat-form-field appearance="outline" floatLabel=auto>
+      <mat-label>Plex Authorization Token</mat-label>
+      <input matInput placeholder="Plex Authorization Token" name="authToken" [(ngModel)]="this.data.server.plexAuthToken" value="{{this.data.server.plexAuthToken}}"
+         #serverApiKeyControl="ngModel" required>
+      <mat-error *ngIf="serverApiKeyControl.hasError('required')">Must be specified.</mat-error>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" floatLabel=auto>
+      <mat-label>Machine Identifier</mat-label>
+      <input matInput placeholder="Machine Identifier" name="MachineIdentifier" [(ngModel)]="this.data.server.machineIdentifier" value="{{this.data.server.machineIdentifier}}"
+         #serverApiKeyControl="ngModel" required>
+      <mat-error *ngIf="serverApiKeyControl.hasError('required')">Must be specified.</mat-error>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" floatLabel=auto>
+      <mat-label>Externally Facing Hostname</mat-label>
+      <input matInput placeholder="e.g. https://emby.this.data.server.com/" name="serverHostname" name="hostname"
+        [(ngModel)]="this.data.server.serverHostname" value="{{this.data.server.serverHostname}}" >
+      <mat-hint>
+        This will be the external address that users will navigate to when they press the 'View On Plex' button
+<br>
+            <span *ngIf="this.data.server.serverHostname">Current URL: "{{this.data.server.serverHostname}}/web/app#!/server/{{this.data.server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334"</span>
+            <span *ngIf="!this.data.server.serverHostname">Current URL: "https://app.plex.tv/web/app#!/server/{{this.data.server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334"</span>
+
+      </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()"
+          class="mat-focus-indicator mat-stroked-button mat-button-base">Load Libraries
+          <i class="fas fa-film"></i>
+      </button>
+  </div>
+    <div *ngIf="this.data.server.plexSelectedLibraries && this.data.server.plexSelectedLibraries.length > 0">
+      <label>Please select the libraries for Ombi to monitor. If nothing is selected, Ombi will monitor all
+        libraries.</label>
+        <div *ngFor="let lib of this.data.server.plexSelectedLibraries">
+          <div class="md-form-field">
+              <div class="checkbox">
+                  <mat-slide-toggle [(ngModel)]="lib.enabled" [checked]="lib.enabled"
+                      for="{{lib.title}}">{{lib.title}}</mat-slide-toggle>
+              </div>
+          </div>
+      </div>
+    </div>
+
+</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 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;">
+      <i class="fas fa-times"></i>
+      <span> Cancel</span>
+    </span>
+  </button>
+
+
+  <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-check"></i>
+      <span> Save</span>
+    </span>
+  </button>
+</mat-dialog-actions>

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

@@ -0,0 +1,27 @@
+@media (max-width: 978px) {
+  ::ng-deep .mat-dialog-container {
+    overflow: unset;
+    display: flex;
+    flex-direction: column;
+
+    .mat-dialog-content{
+        max-height: unset;
+    }
+
+    .mat-dialog-actions{
+        min-height: unset;
+    }
+
+    emby-server-dialog-component {
+      display: flex;
+      flex-direction: column;
+      min-height: 1px;
+    }
+  }
+}
+
+::ng-deep mat-form-field .mat-form-field {
+  &-subscript-wrapper {
+    position: static;
+  }
+}

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

@@ -0,0 +1,79 @@
+import { Component, Inject } from "@angular/core";
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+
+import {
+  PlexService,
+  NotificationService,
+  TesterService,
+} from "../../../../services";
+import { take } from "rxjs";
+import { IPlexLibrariesSettings } from "../../../../interfaces";
+import { PlexServerDialogData } from "../models";
+
+@Component({
+  selector: "plex-server-dialog-component",
+  templateUrl: "plex-server-dialog.component.html",
+  styleUrls: ["plex-server-dialog.component.scss"],
+})
+export class PlexServerDialogComponent {
+
+
+    public password: string;
+    public username: string;
+
+  constructor(
+    private dialogRef: MatDialogRef<PlexServerDialogData>,
+    @Inject(MAT_DIALOG_DATA) public data: PlexServerDialogData,
+    private notificationService: NotificationService,
+    private testerService: TesterService,
+    private plexService: PlexService
+  ) {
+  }
+
+
+  public cancel() {
+    this.dialogRef.close({closed: true});
+  }
+
+  public testPlex() {
+    this.testerService.plexTest(this.data.server).pipe(take(1))
+        .subscribe(x => {
+        if (x === true) {
+            this.notificationService.success(`Successfully connected to the Plex server ${this.data.server.name}!`);
+        } else {
+            this.notificationService.error(`We could not connect to the Plex server  ${this.data.server.name}!`);
+        }
+    });
+}
+
+  public delete() {
+    this.dialogRef.close({deleted: true});
+  }
+
+  public save() {
+    this.dialogRef.close({server: this.data.server});
+  }
+
+  public loadLibraries() {
+        if (this.data.server.ip == null) {
+            this.notificationService.error("Plex is not yet configured correctly");
+            return;
+        }
+        this.plexService.getLibraries(this.data.server).subscribe(x => {
+            this.data.server.plexSelectedLibraries = [];
+            if (x.successful) {
+                x.data.mediaContainer.directory.forEach((item) => {
+                    const lib: IPlexLibrariesSettings = {
+                        key: item.key,
+                        title: item.title,
+                        enabled: false,
+                    };
+                    this.data.server.plexSelectedLibraries.push(lib);
+                });
+            } else {
+                this.notificationService.error(x.message);
+            }
+        });
+    }
+
+}