added progress spinner for spreadsheet upload

added progress spinner for spreadsheet upload in test.component,ts

Issue-ID: APPC-1102
Change-Id: I9d030da990eae2e8efe5ae82cd1afd3c675aa286
Signed-off-by: Sandeep J <sandeejh@in.ibm.com>

3 files changed, 31 insertions, 8 deletions

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2be6544..fcff1d5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -5,7 +5,8 @@ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
 
 Copyright (C) 2018 IBM Intellectual Property. All rights reserved.
 ===================================================================
-
+Copyright (C) 2018 IBM.
+===================================================================
 Unless otherwise specified, all software contained herein is licensed
 under the Apache License, Version 2.0 (the License);
 you may not use this software except in compliance with the License.
@@ -39,11 +40,12 @@ import { AboutUsComponent } from './about-us/aboutus.component';
 import { NgProgressModule } from 'ngx-progressbar';
 import { LoginGuardService } from './vnfs/LoginGuardService/Login-guard-service';
 import { ConfirmComponent } from './shared/confirmModal/confirm.component';
+import { NgxSpinnerModule } from 'ngx-spinner';
 
 @NgModule({
     declarations: [AppComponent, TestComponent, AboutUsComponent, ConfirmComponent],
     imports: [BrowserModule, FormsModule, HomeModule, SharedModule.forRoot(),
-        NgbModule.forRoot(), NoopAnimationsModule, AppRoutingModule, SimpleNotificationsModule, NgProgressModule, BootstrapModalModule],
+        NgbModule.forRoot(), NoopAnimationsModule, AppRoutingModule, SimpleNotificationsModule, NgProgressModule, BootstrapModalModule, NgxSpinnerModule],
     exports: [RouterModule],
     providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }, LoginGuardService],
     entryComponents: [ConfirmComponent],
diff --git a/src/app/test/test.component.html b/src/app/test/test.component.html
index 5e65435..8147f05 100644
--- a/src/app/test/test.component.html
+++ b/src/app/test/test.component.html
@@ -20,6 +20,11 @@ limitations under the License.
 ============LICENSE_END============================================
 -->
 <simple-notifications [options]="options"></simple-notifications>
+<ngx-spinner bdColor="rgba(51,51,51,0.8)"
+  size="large"
+  color="orange"
+  loadingText="Uploading test spreadsheet..."
+  type="ball-scale-multiple"></ngx-spinner>
 <ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1" [speed]="200" [showSpinner]="false" [direction]="'leftToRightIncreased'" [color]="'#6ab344'"
     [trickleSpeed]="250" [thick]="true" [ease]="'linear'"></ng-progress>
 
diff --git a/src/app/test/test.component.ts b/src/app/test/test.component.ts
index 7560e7b..52b5d8a 100644
--- a/src/app/test/test.component.ts
+++ b/src/app/test/test.component.ts
@@ -3,7 +3,8 @@
 ===================================================================
 Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
 ===================================================================
-
+Copyright (C) 2018 IBM.
+===================================================================
 Unless otherwise specified, all software contained herein is licensed
 under the Apache License, Version 2.0 (the License);
 you may not use this software except in compliance with the License.
@@ -20,7 +21,7 @@ limitations under the License.
 */
 
 import { Component, OnInit } from '@angular/core';
-
+import { NgxSpinnerService } from 'ngx-spinner';
 import { saveAs } from 'file-saver';
 import { Location } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -90,7 +91,7 @@ export class TestComponent implements OnInit {
     public outputTimeStamp;
     public status;
     public statusReason;
-    public errorResponse;
+    public errorResponse; 
     public timer;
     public subscribe;
     public enableTestButton: boolean = false;
@@ -101,8 +102,19 @@ export class TestComponent implements OnInit {
     public enableCounterDiv: boolean = false;
     public enableDownload: boolean = false;
     private userId = localStorage['userId'];
-    constructor (private location: Location, private activeRoutes: ActivatedRoute, private notificationService: NotificationService, private nService: NotificationsService, private router: Router, private paramShareService: ParamShareService, private mappingEditorService: MappingEditorService, private httpUtil: HttpUtilService,
-        private utiltiy: UtilityService, private ngProgress: NgProgress) {
+    constructor (
+    private location: Location, 
+    private activeRoutes: ActivatedRoute, 
+    private notificationService: NotificationService, 
+    private nService: NotificationsService, 
+    private router: Router, 
+    private paramShareService: ParamShareService, 
+    private mappingEditorService: MappingEditorService, 
+    private httpUtil: HttpUtilService,
+    private utiltiy: UtilityService, 
+    private ngProgress: NgProgress,
+    private spinner: NgxSpinnerService
+    ) {
 
     }
 
@@ -168,6 +180,7 @@ export class TestComponent implements OnInit {
             throw new Error('Cannot upload multiple files on the entry');
         }
         if (fileExtension.toUpperCase() === 'XLS' || fileExtension.toUpperCase() === 'XLSX') {
+            this.spinner.show();
             const reader = new FileReader();
             reader.onload = (e: any) => {
                 /* read workbook */
@@ -210,7 +223,10 @@ export class TestComponent implements OnInit {
             };
 
             reader.readAsBinaryString(target.files[0]);
-
+            setTimeout(() => {
+                        /** spinner ends after 2.5 seconds */
+                        this.spinner.hide();
+          }, 2500);
 
         }
         else {