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

<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 id="serverName" placeholder="Server Name" name="name" [(ngModel)]="this.data.server.name" value="{{this.data.server.name}}" autocomplete="off">
    </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 id="ip" placeholder="Hostname or IP" name="ip" [(ngModel)]="this.data.server.ip" value="{{this.data.server.ip}}"
           #serverHostnameIpControl="ngModel" required autocomplete="off">
        <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 id="port" matInput placeholder="Port" name="port" [(ngModel)]="this.data.server.port" value="{{this.data.server.port}}"
           #serverPortControl="ngModel" required pattern="^[0-9]*$" autocomplete="off">
        <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 id="ssl" 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 id="authToken" matInput placeholder="Plex Authorization Token" name="authToken" [(ngModel)]="this.data.server.plexAuthToken" value="{{this.data.server.plexAuthToken}}"
         #serverApiKeyControl="ngModel" required autocomplete="off">
      <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 id="machineId" matInput placeholder="Machine Identifier" name="MachineIdentifier" [(ngModel)]="this.data.server.machineIdentifier" value="{{this.data.server.machineIdentifier}}"
         #serverApiKeyControl="ngModel" required autocomplete="off">
      <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 id="externalHostname" matInput placeholder="e.g. https://emby.this.data.server.com/" name="serverHostname" name="hostname"
        [(ngModel)]="this.data.server.serverHostname" value="{{this.data.server.serverHostname}}" autocomplete="off">
      <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 id="batchSize" matInput placeholder="150" name="MachineIdentifier" [(ngModel)]="this.data.server.episodeBatchSize" value="{{this.data.server.episodeBatchSize}}" autocomplete="off">
      <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 id="loadLibs" 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; let i = index">
          <div class="md-form-field">
              <div class="checkbox">
                  <mat-slide-toggle id="lib-{{i}}" [(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 id="testPlexButton" 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 id="deleteServer" 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 id="cancel" 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 id="saveServer" 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>