functions for combined upload progress bars

This commit is contained in:
jonaswinkler 2021-01-26 01:10:39 +01:00
parent ede3bd1391
commit b581e42216
3 changed files with 36 additions and 5 deletions

View File

@ -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)">

View File

@ -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()
status.filename = file.name
let status = this.consumerStatusService.newFileUpload(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 => {

View File

@ -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/");