added progress spinner in PD to show file upload

added progress spinner in PD to show file upload progress

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

diff --git a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html
index 74c503a..bfe281b 100644 (file)
--- a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html
+++ b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.html
@@ -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.
@@ -19,10 +20,14 @@ limitations under the License.
 
 ECOMP is a trademark and service mark of AT&T Intellectual Property.
 ============LICENSE_END============================================
-*/
 -->
 
 <simple-notifications [options]="options"></simple-notifications>
+<ngx-spinner bdColor="rgba(51,51,51,0.8)"
+  size="large"
+  color="orange"
+  loadingText="Uploading PD file..."
+  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>
 <div class="card" style="    margin-bottom: 23px;">
     <img class="card-img-top" data-src="holder.js/100%x180/" alt="">

diff --git a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts
index 8725c3c..6c8be91 100644 (file)
--- a/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts
+++ b/src/app/vnfs/build-artifacts/parameter-definitions/parameter.component.ts
@@ -34,6 +34,7 @@ import { NotificationsService } from 'angular2-notifications';
 import { ParameterDefinitionService } from './parameter-definition.service';
 import 'rxjs/add/operator/map';
 import { NgProgress } from 'ngx-progressbar';
+import { NgxSpinnerService } from 'ngx-spinner';
 
 let YAML = require('yamljs');
 
@@ -197,7 +198,8 @@ export class ParameterComponent implements OnInit {
         private httpUtil: HttpUtilService,
         private utilService: UtilityService,
         private nService: NotificationsService,
-        private ngProgress: NgProgress) {
+        private ngProgress: NgProgress,
+        private spinner: NgxSpinnerService) {
     }
 
     ngOnInit() {
@@ -349,6 +351,7 @@ export class ParameterComponent implements OnInit {
     //This is called when the user selects new files from the upload button
     public fileChange(input, uploadType) {
         if (input.files && input.files[0]) {
+            this.spinner.show();
             // Create the file reader
             let reader = new FileReader();
             this.readFile(input.files[0], reader, (result) => {
@@ -357,7 +360,10 @@ export class ParameterComponent implements OnInit {
                     this.displayParamObjects = this.parameterDefinitionService.processPDfile(this.myPdFileName, result);
                 }
             });
-            
+            setTimeout(() => {
+                        /** spinner ends after 3.5 seconds */
+                        this.spinner.hide();
+          }, 3500);
         }
     }