functions for combined upload progress bars

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -9,6 +9,7 @@
 
       </ngx-file-drop>
     </form>
+    <p>Uploading {{getStatusUploading().length}} files...</p>
     <div *ngFor="let status of getStatus()">
       <p>{{status.filename}}: {{status.message}}</p>
       <ngb-progressbar [value]="status.getProgress()" [max]="1" [striped]="true" [animated]="!isFinished(status)" [type]="getType(status)">

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.ts

@@ -18,7 +18,23 @@ export class UploadFileWidgetComponent implements OnInit {
   ) { }
 
   getStatus() {
-    return this.consumerStatusService.consumerStatus
+    return this.consumerStatusService.getConsumerStatus()
+  }
+
+  getStatusUploading() {
+    return this.consumerStatusService.getConsumerStatus(FileStatusPhase.UPLOADING)
+  }
+
+  getTotalUploadProgress() {
+    let current = 0
+    let max = 0
+
+    this.getStatusUploading().forEach(status => {
+      current += status.currentPhaseProgress
+      max += status.currentPhaseMaxProgress
+    })
+
+    return current / Math.max(max, 1)
   }
 
   isFinished(status: FileStatus) {
@@ -58,14 +74,17 @@ export class UploadFileWidgetComponent implements OnInit {
         fileEntry.file((file: File) => {
           let formData = new FormData()
           formData.append('document', file, file.name)
-          let status = this.consumerStatusService.newFileUpload()
+          let status = this.consumerStatusService.newFileUpload(file.name)
-          status.filename = file.name
+          
+          status.message = "Connecting..."
 
           this.documentService.uploadDocument(formData).subscribe(event => {
             if (event.type == HttpEventType.UploadProgress) {
               status.updateProgress(FileStatusPhase.UPLOADING, event.loaded, event.total)
+              status.message = "Uploading..."
             } else if (event.type == HttpEventType.Response) {
               status.taskId = event.body["task_id"]
+              status.message = "Upload complete."
             }
 
           }, error => {

src-ui/src/app/services/consumer-status.service.ts

@@ -63,7 +63,9 @@ export class ConsumerStatusService {
 
   private statusWebSocked: WebSocket
 
-  consumerStatus: FileStatus[] = []
+  private consumerStatus: FileStatus[] = []
+
+
   private documentConsumptionFinishedSubject = new Subject<FileStatus>()
   private documentConsumptionFailedSubject = new Subject<FileStatus>()
 
@@ -78,12 +80,21 @@ export class ConsumerStatusService {
     return status
   }
 
-  newFileUpload(): FileStatus {
+  newFileUpload(filename: string): FileStatus {
     let status = new FileStatus()
+    status.filename = filename
     this.consumerStatus.push(status)
     return status
   }
 
+  getConsumerStatus(phase?: FileStatusPhase) {
+    if (phase) {
+      return this.consumerStatus.filter(s => s.phase == phase)
+    } else {
+      return this.consumerStatus
+    }
+  }
+
   connect() {
     this.disconnect()
     this.statusWebSocked = new WebSocket("ws://localhost:8000/ws/status/");