From d6b5b85ba2a08d479846da4e2318d34d29639629 Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Sun, 13 Feb 2022 21:36:40 +0000
Subject: [PATCH] feat: added feature update to the frontend

---
 .../src/app/services/feature.service.ts       |  4 ++++
 .../settings/features/features.component.html | 23 +++++++++++++++++++
 .../settings/features/features.component.ts   | 23 +++++++++++++++++++
 .../src/app/settings/settings.module.ts       |  3 +++
 .../app/state/features/features.actions.ts    |  7 ++++++
 .../src/app/state/features/features.facade.ts |  5 +++-
 .../src/app/state/features/features.state.ts  |  9 +++++++-
 7 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 src/Ombi/ClientApp/src/app/settings/features/features.component.html
 create mode 100644 src/Ombi/ClientApp/src/app/settings/features/features.component.ts

diff --git a/src/Ombi/ClientApp/src/app/services/feature.service.ts b/src/Ombi/ClientApp/src/app/services/feature.service.ts
index 0ea285b46..f4d0bf9a0 100644
--- a/src/Ombi/ClientApp/src/app/services/feature.service.ts
+++ b/src/Ombi/ClientApp/src/app/services/feature.service.ts
@@ -16,4 +16,8 @@ export class FeatureService extends ServiceHelpers {
     public getFeatures(): Observable<IFeatureEnablement[]> {
         return this.http.get<IFeatureEnablement[]>(this.url, {headers: this.headers});
     }
+
+    public update(feature: IFeatureEnablement): Observable<IFeatureEnablement[]> {
+        return this.http.post<IFeatureEnablement[]>(this.url, JSON.stringify(feature), {headers: this.headers});
+    }
 }
diff --git a/src/Ombi/ClientApp/src/app/settings/features/features.component.html b/src/Ombi/ClientApp/src/app/settings/features/features.component.html
new file mode 100644
index 000000000..b3abde1c1
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/settings/features/features.component.html
@@ -0,0 +1,23 @@
+<settings-menu></settings-menu>
+
+<div class="small-middle-container">
+  <legend>Features</legend>
+
+<div class="row">
+  <div class="col-md-8">
+    <div class="mat-table">
+      <div class="mat-row" *ngFor="let feature of features">
+        <div class="mat-cell">{{feature.name}}</div>
+        <div class="mat-cell">
+          <span *ngIf="feature.enabled">
+            <i class="fas fa-check-circle" style="color:green;"></i>
+          </span>
+          <span *ngIf="!feature.enabled">
+            <i class="fas fa-times-circle" style="color:red;"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/features/features.component.ts b/src/Ombi/ClientApp/src/app/settings/features/features.component.ts
new file mode 100644
index 000000000..ca13d5805
--- /dev/null
+++ b/src/Ombi/ClientApp/src/app/settings/features/features.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit } from "@angular/core";
+
+import { FeaturesFacade } from "../../state/features";
+import { IFeatureEnablement } from "../../interfaces";
+import { firstValueFrom } from "rxjs";
+
+@Component({
+    templateUrl: "./features.component.html"
+})
+export class FeaturesComponent implements OnInit {
+
+    public features: IFeatureEnablement[];
+
+    constructor(private readonly featuresFacade: FeaturesFacade) { }
+
+    public async ngOnInit() {
+        this.featuresFacade.features$().subscribe(x => this.features = x);
+    }
+
+    public enableFeature(feature: IFeatureEnablement) {
+        firstValueFrom(this.featuresFacade.update(feature));
+    }
+}
diff --git a/src/Ombi/ClientApp/src/app/settings/settings.module.ts b/src/Ombi/ClientApp/src/app/settings/settings.module.ts
index 333fcbe95..144322194 100644
--- a/src/Ombi/ClientApp/src/app/settings/settings.module.ts
+++ b/src/Ombi/ClientApp/src/app/settings/settings.module.ts
@@ -38,6 +38,7 @@ import { DogNzbComponent } from "./dognzb/dognzb.component";
 import { EmailNotificationComponent } from "./notifications/emailnotification.component";
 import { EmbyComponent } from "./emby/emby.component";
 import { FailedRequestsComponent } from "./failedrequests/failedrequests.component";
+import { FeaturesComponent } from "./features/features.component";
 import { GotifyComponent } from "./notifications/gotify.component";
 import { HubService } from "../services/hub.service";
 import {InputSwitchModule} from "primeng/inputswitch";
@@ -120,6 +121,7 @@ const routes: Routes = [
     { path: "FailedRequests", component: FailedRequestsComponent, canActivate: [AuthGuard] },
     { path: "Logs", component: LogsComponent, canActivate: [AuthGuard] },
     { path: "CloudMobile", component: CloudMobileComponent, canActivate: [AuthGuard] },
+    { path: "Features", component: FeaturesComponent, canActivate: [AuthGuard] },
 ];
 
 @NgModule({
@@ -184,6 +186,7 @@ const routes: Routes = [
         LogsComponent,
         TwilioComponent,
         WhatsAppComponent,
+        FeaturesComponent,
         CloudMobileComponent,
         UpdateDialogComponent,
     ],
diff --git a/src/Ombi/ClientApp/src/app/state/features/features.actions.ts b/src/Ombi/ClientApp/src/app/state/features/features.actions.ts
index 87f050354..beb40c55a 100644
--- a/src/Ombi/ClientApp/src/app/state/features/features.actions.ts
+++ b/src/Ombi/ClientApp/src/app/state/features/features.actions.ts
@@ -1,3 +1,10 @@
+import { IFeatureEnablement } from "../../interfaces";
+
 export class LoadFeatures {
 	public static readonly type = '[Features] LoadAll';
 }
+export class UpdateFeature {
+	public static readonly type = '[Features] Update';
+
+	constructor(public feature: IFeatureEnablement) { }
+}
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/state/features/features.facade.ts b/src/Ombi/ClientApp/src/app/state/features/features.facade.ts
index bd6e4edbb..ff0bf9465 100644
--- a/src/Ombi/ClientApp/src/app/state/features/features.facade.ts
+++ b/src/Ombi/ClientApp/src/app/state/features/features.facade.ts
@@ -1,7 +1,8 @@
+import { LoadFeatures, UpdateFeature } from "./features.actions";
+
 import { FeaturesSelectors } from "./features.selectors";
 import { IFeatureEnablement } from "../../interfaces";
 import { Injectable } from "@angular/core";
-import { LoadFeatures } from "./features.actions";
 import { Observable } from "rxjs";
 import { Store } from "@ngxs/store";
 
@@ -14,6 +15,8 @@ export class FeaturesFacade {
 
 	public features$ = (): Observable<IFeatureEnablement[]> => this.store.select(FeaturesSelectors.features);
 
+    public update = (feature: IFeatureEnablement): Observable<unknown> => this.store.dispatch(new UpdateFeature(feature));
+
     public loadFeatures = (): Observable<unknown> => this.store.dispatch(new LoadFeatures());
 
     public is4kEnabled = (): boolean => this.store.selectSnapshot(FeaturesSelectors.is4kEnabled);
diff --git a/src/Ombi/ClientApp/src/app/state/features/features.state.ts b/src/Ombi/ClientApp/src/app/state/features/features.state.ts
index 741523c6b..42e6c7a65 100644
--- a/src/Ombi/ClientApp/src/app/state/features/features.state.ts
+++ b/src/Ombi/ClientApp/src/app/state/features/features.state.ts
@@ -1,10 +1,10 @@
 import { Action, State, StateContext } from "@ngxs/store";
+import { LoadFeatures, UpdateFeature } from "./features.actions";
 
 import { FEATURES_STATE_TOKEN } from "./types";
 import { FeatureService } from "../../services/feature.service";
 import { IFeatureEnablement } from "../../interfaces";
 import { Injectable } from "@angular/core";
-import { LoadFeatures } from "./features.actions";
 import { Observable } from "rxjs";
 import { tap } from "rxjs/operators";
 
@@ -23,4 +23,11 @@ export class FeatureState {
                 )
         );
     }
+
+    @Action(UpdateFeature)
+    public update({ setState }: StateContext<IFeatureEnablement[]>, { feature }: UpdateFeature): Observable<IFeatureEnablement[]> {
+        return this.featuresService.update(feature).pipe(
+            tap((result) => setState(result))
+        );
+    }
 }
\ No newline at end of file