@ -2,157 +2,187 @@
< div class = "small-middle-container" >
< fieldset style = "width:100%;" >
< legend > Plex Configuration< / legend >
< div class = "row" >
< div class = "col-md-6 col-6 col-sm-6" style = "float: right; width:100%; text-align:right;" >
< div style = "float:right;text-align:left;" >
< div class = "row" >
< div class = "col-md-6 col-6 col-sm-6" >
< div class = "md-form-field" >
< mat-slide-toggle [ ( ngModel ) ] = " settings . enable " [ checked ] = " settings . enable " > Enable
< / mat-slide-toggle >
< / div >
< div class = "md-form-field" >
< mat-slide-toggle [ ( ngModel ) ] = " advanced " > Advanced< / mat-slide-toggle >
< / div >
< / div >
< / div >
< div class = "row" >
< mat-tab-group # tabGroup [ selectedIndex ] = " selected . value " ( selectedTabChange ) = " addTab ( $ event ) "
(selectedIndexChange)="selected.setValue($event)" animationDuration="0ms" style="width:100%;">
< mat-tab * ngFor = "let server of settings.servers" [ label ] = " server . name " >
< div class = "col-md-6 col-6 col-sm-6" style = "float: right; width:100%; text-align:right;" >
< button type = "button" ( click ) = " removeServer ( server ) "
class="mat-focus-indicator mat-flat-button mat-button-base mat-warn">Remove Server< / button >
< / div >
< br / >
< br / >
< div class = "col-md-7 col-8 col-sm-12" >
<!-- Main Content -->
< label for = "username" class = "control-label" >
< h3 > Plex Server Configuration< / h3 >
< / label >
< div class = "md-form-field" >
< mat-slide-toggle [ ( ngModel ) ] = " settings . enable " [ checked ] = " settings . enable " > Enable< / mat-slide-toggle >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Server Name< / mat-label >
< input matInput id = "name" name = "name"
[(ngModel)]="server.name" value="{{server.name}}">
< / mat-form-field >
< / div >
< div class = "md-form-field" >
< mat-slide-toggle [ ( ngModel ) ] = " advanced " > Advanced< / mat-slide-toggle >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Hostname or IP< / mat-label >
< input matInput id = "Ip" name = "Ip" [ ( ngModel ) ] = " server . ip "
value="{{server.ip}}">
< / mat-form-field >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Port< / mat-label >
< input matInput id = "portNumber" name = "Port"
[(ngModel)]="server.port" value="{{server.port}}">
< / mat-form-field >
< mat-slide-toggle id = "ssl" [ ( ngModel ) ] = " server . ssl " [ checked ] = " server . ssl " >
SSL
< / mat-slide-toggle >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
< mat-tab-group # tabGroup [ selectedIndex ] = " selected . value " ( selectedTabChange ) = " addTab ( $ event ) " ( selectedIndexChange ) = " selected . setValue ( $ event ) " animationDuration = "0ms" style = "width:100%;" >
< mat-tab * ngFor = "let server of settings.servers" [ label ] = " server . name " >
< div class = "col-md-6 col-6 col-sm-6" style = "float: right; width:100%; text-align:right;" >
< button type = "button" ( click ) = " removeServer ( server ) " class = "mat-focus-indicator mat-flat-button mat-button-base mat-warn" > Remove Server< / button >
< div class = "md-form-field" >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Plex Authorization Token< / mat-label >
< input matInput id = "authToken"
[(ngModel)]="server.plexAuthToken" value="{{server.plexAuthToken}}">
< / mat-form-field >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Machine Identifier< / mat-label >
< input matInput id = "MachineIdentifier" name = "MachineIdentifier"
[(ngModel)]="server.machineIdentifier" value="{{server.machineIdentifier}}">
< / mat-form-field >
< / div >
< br / >
< br / >
< div class = "col-md-7 col-8 col-sm-12" >
<!-- Main Content -->
< label for = "username" class = "control-label" > < h3 > Plex Server Configuration< / h3 > < / label >
< div class = "md-form-field" >
< div class = "md-form-field" >
< div class = "md-form-field" * ngIf = "advanced" >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Server Name< / mat-label >
< input matInput id = "name" name = "name" placeholder = "Server Name" [ ( ngModel ) ] = " server . name " value = "{{server.name}}" >
< mat-label for = "episodeBatchSize" class = "control-label" > Episode Batch Size< / mat-label >
< input matInput type = "number" id = "episodeBatchSize" name = "episodeBatchSize"
[(ngModel)]="server.episodeBatchSize" value="{{server.episodeBatchSize}}"
matTooltip="This is used when we cache the episodes, we cache in batches of 50 by default, you can configure how many we do at a time here"
matTooltipPosition="right">
< / mat-form-field >
< / div >
< div class = "md-form-field" >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Hostname or IP< / mat-label >
< input matInput id = "Ip" name = "Ip" placeholder = "localhost" [ ( ngModel ) ] = " server . ip " value = "{{server.ip}}" >
< / mat-form-field >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Port< / mat-label >
< input matInput id = "portNumber" name = "Port" placeholder = "Port Number" [ ( ngModel ) ] = " server . port " value = "{{server.port}}" >
< / mat-form-field >
< mat-slide-toggle id = "ssl" [ ( ngModel ) ] = " server . ssl " [ checked ] = " server . ssl " >
SSL
< / mat-slide-toggle >
< / div >
< div class = "md-form-field" >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Plex Authorization Token< / mat-label >
< input matInput id = "authToken" placeholder = "Plex Auth Token" [ ( ngModel ) ] = " server . plexAuthToken " value = "{{server.plexAuthToken}}" >
< / mat-form-field >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Machine Identifier< / mat-label >
< input matInput id = "MachineIdentifier" name = "MachineIdentifier" [ ( ngModel ) ] = " server . machineIdentifier " value = "{{server.machineIdentifier}}" >
< / div >
< div class = "md-form-field" * ngIf = "loadedServers" >
< label for = "username" class = "control-label" > Please select the server< / label >
< br / >
< div class = "btn-group" >
< div class = "btn-group" >
< mat-form-field appearance = "outline" >
< mat-label > Server< / mat-label >
< mat-select >
< mat-option ( click ) = " selectServer ( s , server ) "
*ngFor="let s of loadedServers.servers.server" [value]="s.server">
{{s.name}}< / mat-option >
< / mat-select >
< / mat-form-field >
< / div >
< div class = "md-form-field" >
< label for = "username" class = "control-label" > < h3 > Plex Credentials< / h3 > < / label >
< div >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Username< / mat-label >
< input matInput id = "username" placeholder = "username" [ ( ngModel ) ] = " username " value = "{{username}}" >
< / mat-form-field >
< / div >
< div >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Password< / mat-label >
< input matInput type = "password" id = "password" placeholder = "Password" [ ( ngModel ) ] = " password " value = "{{password}}" >
< / mat-form-field >
< / div >
< / div >
< / div >
< div class = "col-md-5 col-4 col-sm-12" >
< label for = "username" class = "control-label" > < h3 > Plex Interface< / h3 > < / label >
< div class = "md-form-field" >
< div >
< button mat-raised-button id = "requestToken" ( click ) = " requestServers ( server ) " class = "mat-stroked-button" > Load Servers
< i class = "fa fa-key" > < / i >
< / button >
< / div >
< / div >
< br / >
< div class = "md-form-field" * ngIf = "loadedServers" >
< label for = "username" class = "control-label" > Please select the server< / label >
< br / >
< div class = "btn-group" >
< div class = "btn-group" >
< mat-form-field appearance = "outline" >
< mat-label > Server< / mat-label >
< mat-select >
< mat-option ( click ) = " selectServer ( s , server ) " * ngFor = "let s of loadedServers.servers.server" [ value ] = " s . server " > {{s.name}}< / mat-option >
< / mat-select >
< / mat-form-field >
< / 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 >
< 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 = "md-form-field" >
< div >
< button mat-raised-button ( click ) = " loadLibraries ( server ) "
class="mat-focus-indicator mat-stroked-button mat-button-base">Load Libraries
< i class = "fa fa-film" > < / i >
< / button >
< / div >
< / div >
< br / >
< div * ngIf = "server.plexSelectedLibraries" >
< div * ngFor = "let lib of server.plexSelectedLibraries" >
< div class = "md-form-field" >
< div >
< button mat-raised-button ( click ) = " loadLibraries ( server ) " class = "mat-focus-indicator mat-stroked-button mat-button-base" > Load Libraries
< i class = "fa fa-film" > < / i >
< / button >
< / div >
< / div >
< br / >
< div * ngIf = "server.plexSelectedLibraries" >
< div * ngFor = "let lib of 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 >
< br / >
< div class = "md-form-field" * ngIf = "advanced" >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label for = "episodeBatchSize" class = "control-label" > Episode Batch Size< / mat-label >
< input matInput type = "number" id = "episodeBatchSize" name = "episodeBatchSize" [ ( ngModel ) ] = " server . episodeBatchSize "
value="{{server.episodeBatchSize}}" matTooltip ="This is used when we cache the episodes, we cache in batches of 50 by default, you can configure how many we do at a time here" matTooltipPosition="right">
< / mat-form-field >
< / div >
< div class = "form-group" >
< div class = "form-group" >
< button mat-raised-button id = "testPlex" type = "button" ( click ) = " testPlex ( server ) " class = "mat-focus-indicator mat-stroked-button mat-button-base" >
Test Connectivity
< div id = "spinner" > < / div >
< / button >
< / div >
< div class = "form-group" >
< button mat-raised-button ( click ) = " runCacher ( ) " type = "button" id = "save" class = "mat-focus-indicator mat-stroked-button mat-button-base" > Manually Run Full Sync< / button > < br / >
< / div >
< div class = "form-group" >
< button mat-raised-button ( click ) = " runRecentlyAddedCacher ( ) " type = "button" id = "save" class = "mat-focus-indicator mat-stroked-button mat-button-base" > Manually Run Recently Added Sync< / button >
< div class = "checkbox" >
< mat-slide-toggle [ ( ngModel ) ] = " lib . enabled " [ checked ] = " lib . enabled "
for="{{lib.title}}">{{lib.title}}< / mat-slide-toggle >
< / div >
< / div >
< / div >
< / mat-tab >
< mat-tab label = "" disabled = true > < / mat-tab >
< mat-tab label = "Add Server" position = 100 > < / mat-tab >
< / mat-tab-group >
< 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 class = "col-md-5 col-4 col-sm-12" >
< div class = "md-form-field" >
< label for = "username" class = "control-label" >
< h3 > Plex Credentials< / h3 >
< small > These fields are optional to automatically fill in your Plex server settings< / small >
< / label >
< div >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Username< / mat-label >
< input matInput id = "username" [ ( ngModel ) ] = " username "
value="{{username}}">
< / mat-form-field >
< / div >
< div >
< mat-form-field appearance = "outline" floatLabel = auto >
< mat-label > Password< / mat-label >
< input matInput type = "password" id = "password"
[(ngModel)]="password" value="{{password}}">
< / mat-form-field >
< / div >
< / div >
< div class = "md-form-field" >
< div >
< button mat-raised-button id = "requestToken" ( click ) = " requestServers ( server ) "
class="mat-stroked-button">Load Servers
< i class = "fa fa-key" > < / i >
< / button >
< / div >
< / div >
< br / >
< div class = "form-group" >
< div class = "form-group" >
< button mat-raised-button id = "testPlex" type = "button" ( click ) = " testPlex ( server ) "
class="mat-focus-indicator mat-stroked-button mat-button-base">
Test Connectivity
< div id = "spinner" > < / div >
< / button >
< / div >
< div class = "form-group" >
< button mat-raised-button ( click ) = " runCacher ( ) " type = "button" id = "save"
class="mat-focus-indicator mat-stroked-button mat-button-base">Manually Run Full
Sync< / button > < br / >
< / div >
< div class = "form-group" >
< button mat-raised-button ( click ) = " runRecentlyAddedCacher ( ) " type = "button" id = "save"
class="mat-focus-indicator mat-stroked-button mat-button-base">Manually Run Recently
Added Sync< / button >
< / div >
< / div >
< / div >
< / mat-tab >
< mat-tab label = "" disabled = true > < / mat-tab >
< mat-tab label = "Add Server" position = 100 > < / mat-tab >
< / mat-tab-group >
< 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}} -->
< / div >
<!-- (){{settings|json}} -->