Add the configuration screen for Guggy

web/app/admin/neb/config/config-context.ts

@@ -1,6 +1,6 @@
 import { BSModalContext } from "ngx-modialog/plugins/bootstrap";
-import { FE_Integration } from "../../../shared/models/integration";
 import { FE_NebConfiguration } from "../../../shared/models/admin-responses";
+import { FE_Integration } from "../../../shared/models/integration";
 
 export class NebBotConfigurationDialogContext extends BSModalContext {
     public integration: FE_Integration;

web/app/admin/neb/config/guggy/guggy.component.html

@@ -0,0 +1,25 @@
+<div class="dialog">
+    <div class="dialog-header">
+        <h4>Guggy Configuration</h4>
+    </div>
+    <div class="dialog-content" *ngIf="isLoading">
+        <my-spinner></my-spinner>
+    </div>
+    <div class="dialog-content" *ngIf="!isLoading">
+        <label class="label-block">
+            Api Key
+            <span class="text-muted ">The API key for <a href="http://docs.guggy.com/" target="_blank">Guggy's API</a>.</span>
+            <input type="text" class="form-control"
+                   placeholder="your_api_key_here"
+                   [(ngModel)]="config.api_key" [disabled]="isUpdating"/>
+        </label>
+    </div>
+    <div class="dialog-footer" *ngIf="!isLoading">
+        <button type="button" (click)="save()" title="save" class="btn btn-primary btn-sm">
+            <i class="far fa-save"></i> Save
+        </button>
+        <button type="button" (click)="dialog.close()" title="close" class="btn btn-secondary btn-sm">
+            <i class="far fa-times-circle"></i> Cancel
+        </button>
+    </div>
+</div>

web/app/admin/neb/config/guggy/guggy.component.ts

@@ -0,0 +1,53 @@
+import { Component, OnInit } from "@angular/core";
+import { ToasterService } from "angular2-toaster";
+import { DialogRef, ModalComponent } from "ngx-modialog";
+import { NebBotConfigurationDialogContext } from "../config-context";
+import { AdminNebApiService } from "../../../../shared/services/admin/admin-neb-api.service";
+import { FE_NebConfiguration } from "../../../../shared/models/admin-responses";
+import { FE_Integration } from "../../../../shared/models/integration";
+
+interface GuggyConfig {
+    api_key: string;
+}
+
+@Component({
+    templateUrl: "./guggy.component.html",
+    styleUrls: ["./guggy.component.scss", "../config-dialog.scss"],
+})
+export class AdminNebGuggyConfigComponent implements ModalComponent<NebBotConfigurationDialogContext>, OnInit {
+
+    public isLoading = true;
+    public isUpdating = false;
+    public config: GuggyConfig;
+    public integration: FE_Integration;
+    public neb: FE_NebConfiguration;
+
+    constructor(public dialog: DialogRef<NebBotConfigurationDialogContext>,
+                private adminNebApi: AdminNebApiService,
+                private toaster: ToasterService) {
+        this.neb = dialog.context.neb;
+        this.integration = dialog.context.integration;
+    }
+
+    public ngOnInit() {
+        this.adminNebApi.getIntegrationConfiguration(this.neb.id, this.integration.type).then(config => {
+            this.config = config;
+            this.isLoading = false;
+        }).catch(err => {
+            console.error(err);
+            this.toaster.pop("error", "Error loading configuration");
+        });
+    }
+
+    public save() {
+        this.isUpdating = true;
+        this.adminNebApi.setIntegrationConfiguration(this.neb.id, this.integration.type, this.config).then(() => {
+            this.toaster.pop("success", "Configuration updated");
+            this.dialog.close();
+        }).catch(err => {
+            this.isUpdating = false;
+            console.error(err);
+            this.toaster.pop("error", "Error updating integration");
+        });
+    }
+}

web/app/admin/neb/edit/edit.component.ts

@@ -8,6 +8,8 @@ import { NEB_HAS_CONFIG } from "../../../shared/models/neb";
 import { Modal, overlayConfigFactory } from "ngx-modialog";
 import { AdminNebGiphyConfigComponent } from "../config/giphy/giphy.component";
 import { NebBotConfigurationDialogContext } from "../config/config-context";
+import { ContainerContent } from "ngx-modialog/src/models/tokens";
+import { AdminNebGuggyConfigComponent } from "../config/guggy/guggy.component";
 
 
 @Component({
@@ -81,7 +83,12 @@ export class AdminEditNebComponent implements OnInit, OnDestroy {
     }
 
     public editBot(bot: FE_Integration) {
-        this.modal.open(AdminNebGiphyConfigComponent, overlayConfigFactory({
+        let component: ContainerContent;
+
+        if (bot.type === "giphy") component = AdminNebGiphyConfigComponent;
+        if (bot.type === "guggy") component = AdminNebGuggyConfigComponent;
+
+        this.modal.open(component, overlayConfigFactory({
             neb: this.nebConfig,
             integration: bot,
 

web/app/app.module.ts

@@ -55,6 +55,7 @@ import { AdminEditNebComponent } from "./admin/neb/edit/edit.component";
 import { AdminAddSelfhostedNebComponent } from "./admin/neb/add-selfhosted/add-selfhosted.component";
 import { AdminNebAppserviceConfigComponent } from "./admin/neb/appservice-config/appservice-config.component";
 import { AdminNebGiphyConfigComponent } from "./admin/neb/config/giphy/giphy.component";
+import { AdminNebGuggyConfigComponent } from "./admin/neb/config/guggy/guggy.component";
 
 @NgModule({
     imports: [
@@ -104,6 +105,7 @@ import { AdminNebGiphyConfigComponent } from "./admin/neb/config/giphy/giphy.com
         AdminAddSelfhostedNebComponent,
         AdminNebAppserviceConfigComponent,
         AdminNebGiphyConfigComponent,
+        AdminNebGuggyConfigComponent,
 
         // Vendor
     ],
@@ -128,6 +130,7 @@ import { AdminNebGiphyConfigComponent } from "./admin/neb/config/giphy/giphy.com
         AdminWidgetJitsiConfigComponent,
         AdminNebAppserviceConfigComponent,
         AdminNebGiphyConfigComponent,
+        AdminNebGuggyConfigComponent,
     ]
 })
 export class AppModule {

web/app/configs/widget/config-screen/config-screen.widget.component.ts

@@ -3,7 +3,7 @@ import { Component, ContentChild, Input, TemplateRef } from "@angular/core";
 
 @Component({
     selector: "my-widget-config",
-    templateUrl: "config-screen.component.html",
+    templateUrl: "config-screen.widget.component.html",
     styleUrls: ["config-screen.widget.component.scss"],
 })
 export class ConfigScreenWidgetComponent {