WS-113: created form for collecting user input for download capability

apps/web/src/app/workspaces/services/capability-launcher.service.ts

-import { Injectable } from "@angular/core";
-import { HttpClient } from "@angular/common/http";
-import { environment } from "../../../environments/environment";
-import { Observable } from "rxjs";
-import { CapabilityRequest } from "../model/capability-request";
-import { CapabilityExecution } from "../model/capability-execution";
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
+import { Observable } from 'rxjs';
+import { CapabilityRequest } from '../model/capability-request';
+import { CapabilityExecution } from '../model/capability-execution';
 
 @Injectable({
-  providedIn: "root",
+  providedIn: 'root',
 })
 export class CapabilityLauncherService {
-  private endpoint = "capability/";
+  private endpoint = 'capability/';
 
   constructor(private httpClient: HttpClient) {}
 
@@ -26,9 +26,9 @@ export class CapabilityLauncherService {
       environment.workspacesUrl +
       this.endpoint +
       capabilityName +
-      "/request/create";
+      '/request/create';
     const requestParams = JSON.stringify({
-      parameters: parameters,
+      parameters,
     });
     return this.httpClient.post<CapabilityRequest>(url, requestParams);
   }

apps/web/src/app/workspaces/workspaces.component.html

@@ -4,13 +4,30 @@
       <button type="button" class="btn btn-secondary" (click)="nullButtonOnClick()">Launch null capability</button>
     </div>
   </div>
+
+  <br/>
+  <br/>
+
+  <div class="md-form">
+    <label for="splInput" class="">Science Product</label>
+    <input type="text" id="splInput" [value]="splInput" (change)="setSPLInput($event.target.value)" class="form-control">
+  </div>
+
+  <br/>
+
+  <div class="md-form">
+    <label for="userEmail" class="">Email Address</label>
+    <input type="text" id="userEmail" [value]="userEmail" (change)="setUserEmail($event.target.value)" class="form-control">
+  </div>
+
   <div class="row py-2">
     <div class="col">
       <button type="button" class="btn btn-warning" (click)="downloadButtonOnClick()">Launch download capability</button>
     </div>
   </div>
+
 </div>
 <div class="p-2" *ngFor="let request of capabilityRequests; index as i">
   <code>Capability request created: {{request | json}}</code><br>
-  <code *ngIf="capabilityExecutions[i]">Capability execution created: {{capabilityExecutions[i] | json}}</code>
+  <code *ngIf="capabilityExecutions[i]">Capability execution created: {{capabilityExecutions[i] | json}}</code><br/>
 </div>

apps/web/src/app/workspaces/workspaces.component.ts

-import { Component, OnInit } from "@angular/core";
-import { CapabilityLauncherService } from "./services/capability-launcher.service";
-import { CapabilityRequest } from "./model/capability-request";
-import { CapabilityExecution } from "./model/capability-execution";
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { CapabilityLauncherService } from './services/capability-launcher.service';
+import { CapabilityRequest } from './model/capability-request';
+import { CapabilityExecution } from './model/capability-execution';
 
 @Component({
-  selector: "app-workspaces",
-  templateUrl: "./workspaces.component.html",
-  styleUrls: ["./workspaces.component.scss"],
+  selector: 'app-workspaces',
+  templateUrl: './workspaces.component.html',
+  styleUrls: ['./workspaces.component.scss'],
 })
 export class WorkspacesComponent implements OnInit {
   public capabilityRequests: Array<CapabilityRequest> = [];
   public capabilityExecutions: Array<CapabilityExecution> = [];
 
-  constructor(private capabilityLauncher: CapabilityLauncherService) {}
+  public splInput: string;
+  public userEmail: string;
+
+  constructor(private capabilityLauncher: CapabilityLauncherService) {
+    this.splInput = null;
+    this.userEmail = null;
+  }
 
   ngOnInit(): void {}
 
@@ -20,7 +27,7 @@ export class WorkspacesComponent implements OnInit {
    * OnClick method that creates a capability request for the null capability and submits it
    */
   nullButtonOnClick(): void {
-    this.launchCapability("null", "-g");
+    this.launchCapability('null', '-g');
   }
 
   /**
@@ -28,17 +35,35 @@ export class WorkspacesComponent implements OnInit {
    */
   downloadButtonOnClick(): void {
     this.launchCapability(
-      "test_download",
-      "shared/workspaces/test/test_data/spool/724126739/17A-109.sb33151331.eb33786546.57892.65940042824"
+      'test_download',
+      this.splInput,
+      this.userEmail
     );
   }
 
+  /**
+   * method that sets the user input Science Product Locator for the download capability
+   * @param spl the Science Product Locator to download
+   */
+  setSPLInput(spl: string){
+    this.splInput = spl;
+  }
+
+  /**
+   * method to set the user email for notifications
+   * @param email user specified email
+   */
+  setUserEmail(email: string){
+    this.userEmail = email;
+  }
+
   /**
    * Method that uses the capabilityLauncher service to launch a capability
    * @param capabilityName  Name of capability
-   * @param parameters  Parameters of capability request
+   * @param parameters      Parameters of capability request
+   * @param email           User email for notifications (Optional)
    */
-  launchCapability(capabilityName: string, parameters: string): void {
+  launchCapability(capabilityName: string, parameters: string, email?: string): void {
     // Create capability request
     this.capabilityLauncher.createRequest(capabilityName, parameters).subscribe(
       (requestResponse) => {

apps/web/src/app/workspaces/workspaces.module.ts

@@ -2,13 +2,16 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { WorkspacesRoutingModule } from './workspaces-routing.module';
 import { WorkspacesComponent } from './workspaces.component';
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 
 
 @NgModule({
   declarations: [WorkspacesComponent],
   imports: [
     CommonModule,
-    WorkspacesRoutingModule
+    WorkspacesRoutingModule,
+    ReactiveFormsModule,
+    FormsModule
   ]
 })
 export class WorkspacesModule {}