From f4534d72a4da6436f697fb4d6e77a340061b2a18 Mon Sep 17 00:00:00 2001 From: tidusjar Date: Fri, 7 Oct 2022 21:20:21 +0100 Subject: [PATCH] refactor: reworked plex settings page --- .../form-field/plex-form-field.component.ts | 43 ++++ .../plex/components/models/PlexCreds.ts | 4 + .../settings/plex/components/models/index.ts | 3 +- .../plex-form/plex-form.component.html | 220 ++++++++---------- .../plex-form/plex-form.component.scss | 8 + .../plex-form/plex-form.component.stories.ts | 37 --- .../plex-form/plex-form.component.ts | 4 +- .../src/app/settings/plex/plex.component.html | 38 ++- .../src/app/settings/plex/plex.component.scss | 4 + .../src/app/settings/plex/plex.component.ts | 8 +- .../src/app/settings/settings.module.ts | 2 + 11 files changed, 181 insertions(+), 190 deletions(-) create mode 100644 src/Ombi/ClientApp/src/app/settings/plex/components/form-field/plex-form-field.component.ts create mode 100644 src/Ombi/ClientApp/src/app/settings/plex/components/models/PlexCreds.ts delete mode 100644 src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.stories.ts diff --git a/src/Ombi/ClientApp/src/app/settings/plex/components/form-field/plex-form-field.component.ts b/src/Ombi/ClientApp/src/app/settings/plex/components/form-field/plex-form-field.component.ts new file mode 100644 index 000000000..46518b0d0 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/settings/plex/components/form-field/plex-form-field.component.ts @@ -0,0 +1,43 @@ +import { Component, EventEmitter, Input, Output } from "@angular/core"; + +@Component({ + selector: "settings-plex-form-field", + template: ` +
+
+ {{label}} + +
+ + +
+
+ + + + + + + +
+ +
+ +
+
+ ` +}) +export class PlexFormFieldComponent { + + @Input() public label: string; + @Input() public value: any; + @Output() public valueChange = new EventEmitter(); + @Input() public id: string; + @Input() public placeholder: string; + @Input() public type: "input" | "checkbox" | "password" = "input" + + public change(newValue: string) { + this.value = newValue; + this.valueChange.emit(newValue); + } +} diff --git a/src/Ombi/ClientApp/src/app/settings/plex/components/models/PlexCreds.ts b/src/Ombi/ClientApp/src/app/settings/plex/components/models/PlexCreds.ts new file mode 100644 index 000000000..9847bc7e0 --- /dev/null +++ b/src/Ombi/ClientApp/src/app/settings/plex/components/models/PlexCreds.ts @@ -0,0 +1,4 @@ +export interface PlexCreds { + username: string; + password: string; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/settings/plex/components/models/index.ts b/src/Ombi/ClientApp/src/app/settings/plex/components/models/index.ts index 0b787b38d..1569393f8 100644 --- a/src/Ombi/ClientApp/src/app/settings/plex/components/models/index.ts +++ b/src/Ombi/ClientApp/src/app/settings/plex/components/models/index.ts @@ -1 +1,2 @@ -export * from './PlexSyncType'; \ No newline at end of file +export * from './PlexSyncType'; +export * from './PlexCreds'; \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.html b/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.html index ff1b7d41c..9adac40f8 100644 --- a/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.html +++ b/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.html @@ -1,75 +1,41 @@ -
- - -
- - Server Name - - -
+
- - Hostname or IP - - - - - Port - - - - - SSL - +
-
- - Plex Authorization Token - - - - Machine Identifier - - -
+ + +
- - Externally Facing Hostname - - - - Current URL: "{{server.serverHostname}}/web/app#!/server/{{server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334" - Current URL: "https://app.plex.tv/web/app#!/server/{{server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334" - -
-
-
- - Episode Batch Size - - +
+
-
- -
-
-
+ +
+
+ Please select the server: +
+
+
+ + + +
+ +
- Server - + {{s.name}} @@ -78,28 +44,72 @@
- -
- Note: if nothing is selected, we will monitor all libraries -
-
- + +
+
+
+ +
-
-
-
-
-
-
- {{lib.title}} + +
+ Please select the libraries you want Ombi to monitor +
+ Note: if nothing is selected, we will monitor all libraries +
+
+
+
+
+
+ {{lib.title}} +
+
+ + +
+ + + + + + + + + + + + This will be the external address that users will navigate to when they press the 'View On Plex' button + + Current URL: "{{server.serverHostname}}/web/app#!/server/{{server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334" + Current URL: "https://app.plex.tv/web/app#!/server/{{server.machineIdentifier}}/details?key=%2flibrary%2Fmetadata%2F53334" + + + + + This is used when we cache the episodes, we cache in batches of 150 by default, you can configure how many we do at a time here + + + +
+
+
@@ -109,66 +119,36 @@ -
-
- -
- - Username - - -
-
- - Password - - -
-
-
-
- -
-
+
+
-
-
+
-
+

-
+
+ class="mat-focus-indicator mat-stroked-button mat-button-base">Partial Sync
-
+
-
+
-
\ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.scss b/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.scss index e69de29bb..20d3aa559 100644 --- a/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.scss +++ b/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.scss @@ -0,0 +1,8 @@ +.hr-margin { + margin-bottom: 2rem; + margin-top: 2rem; +} + +.right { + text-align: right; +} \ No newline at end of file diff --git a/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.stories.ts b/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.stories.ts deleted file mode 100644 index e7e3af237..000000000 --- a/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.stories.ts +++ /dev/null @@ -1,37 +0,0 @@ -// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1 -import { APP_BASE_HREF, CommonModule } from '@angular/common'; -import { Story, Meta, moduleMetadata } from '@storybook/angular'; -import { SharedModule } from '../../../../shared/shared.module'; -import { PlexFormComponent } from './plex-form.component'; - - - -// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export -export default { - title: 'Plex Form Component', - component: PlexFormComponent, - decorators: [ - moduleMetadata({ - providers: [ - { - provide: APP_BASE_HREF, - useValue: "" - }, - ], - imports: [ - CommonModule, - SharedModule - ] - }) - ] -} as Meta; - -// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args -const Template: Story = (args: PlexFormComponent) => ({ - props: args, -}); - -export const Default = Template.bind({}); -Default.args = { -}; - diff --git a/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.ts b/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.ts index b9e8c7edc..2f2f4317a 100644 --- a/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.ts +++ b/src/Ombi/ClientApp/src/app/settings/plex/components/plex-form/plex-form.component.ts @@ -1,6 +1,6 @@ import { Component, EventEmitter, Input, Output } from "@angular/core"; import { IPlexServer, IPlexServerResponse, IPlexServerViewModel } from "app/interfaces"; -import { PlexSyncType } from "../models"; +import { PlexCreds, PlexSyncType } from "../models"; @Component({ templateUrl: "./plex-form.component.html", @@ -14,7 +14,7 @@ export class PlexFormComponent { @Input() public loadedServers: IPlexServerViewModel; @Output() public loadLibraries = new EventEmitter(); - @Output() public loadServers = new EventEmitter(); + @Output() public loadServers = new EventEmitter(); @Output() public selectServer = new EventEmitter(); @Output() public test = new EventEmitter(); @Output() public runSync = new EventEmitter(); diff --git a/src/Ombi/ClientApp/src/app/settings/plex/plex.component.html b/src/Ombi/ClientApp/src/app/settings/plex/plex.component.html index 0c50d6ea5..53b0eed29 100644 --- a/src/Ombi/ClientApp/src/app/settings/plex/plex.component.html +++ b/src/Ombi/ClientApp/src/app/settings/plex/plex.component.html @@ -2,30 +2,16 @@
Plex Configuration -
-
-
- Enable - -
-
- Enable User Watchlist Requests - -

When a Plex User adds something to their watchlist in Plex, it will turn up in Ombi as a Request if enabled. This only applies to users that are logging in with their Plex Account

-

Request limits if set are all still applied etc.

-
-
- Advanced -
- -
-
-
- -
- -
-
+ + + + + When a Plex User adds something to their watchlist in Plex, it will turn up in Ombi as a Request if enabled. This only applies to users that are logging in with their Plex Account +
Request limits if set are all still applied + + + +
@@ -43,8 +29,10 @@ { if (x.success) { diff --git a/src/Ombi/ClientApp/src/app/settings/settings.module.ts b/src/Ombi/ClientApp/src/app/settings/settings.module.ts index b872b53ee..a1b530f11 100644 --- a/src/Ombi/ClientApp/src/app/settings/settings.module.ts +++ b/src/Ombi/ClientApp/src/app/settings/settings.module.ts @@ -85,6 +85,7 @@ import { WhatsAppComponent } from "./notifications/twilio/whatsapp.component"; import { WikiComponent } from "./wiki.component"; import { PlexWatchlistComponent } from "./plex/components/watchlist/plex-watchlist.component"; import { PlexFormComponent } from "./plex/components/plex-form/plex-form.component"; +import { PlexFormFieldComponent } from "./plex/components/form-field/plex-form-field.component"; const routes: Routes = [ { path: "Ombi", component: OmbiComponent, canActivate: [AuthGuard] }, @@ -193,6 +194,7 @@ const routes: Routes = [ UpdateDialogComponent, PlexWatchlistComponent, PlexFormComponent, + PlexFormFieldComponent, ], exports: [ RouterModule,