I have resolved image progress bar and undefined event issue

This commit is contained in:
Rajnikant 2022-06-06 13:43:39 +05:30
parent b430ab9a1c
commit ecf729fc56
5 changed files with 101 additions and 62 deletions

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"angular.enable-strict-mode-prompt": false
}

View File

@ -10,33 +10,40 @@
</div> </div>
</div> </div>
<div mat-dialog-content> <div mat-dialog-content>
<mat-radio-group name="install_appliances" class="choose-instal-appliance" [value]="install_appliance" (change)="selectInstallApplianceOption($event)"> <mat-radio-group
<mat-radio-button value="true" class="instal-appliances-button" [checked]="install_appliance"> name="install_appliances"
Yes class="choose-instal-appliance"
</mat-radio-button> [value]="install_appliance"
<mat-radio-button value="false" class="instal-appliances-button" [checked]="!install_appliance"> (change)="selectInstallApplianceOption($event)"
No >
</mat-radio-button> <mat-radio-button value="true" class="instal-appliances-button" [checked]="install_appliance">
Yes
</mat-radio-button>
<mat-radio-button value="false" class="instal-appliances-button" [checked]="!install_appliance">
No
</mat-radio-button>
</mat-radio-group> </mat-radio-group>
</div>
<div mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="isInstallAppliance = !isInstallAppliance">Next</button>
</div>
</div> </div>
<div mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="isInstallAppliance =!isInstallAppliance">Next</button>
</div>
</div>
<div *ngIf="!isExistImage && isInstallAppliance"> <div *ngIf="!isExistImage && isInstallAppliance">
<div class="row" style="display: flex;"> <div class="row" style="display: flex">
<div class="col-md-6"> <div class="col-md-6">
<h5>Please Select image</h5> <h5>Please Select image</h5>
</div> </div>
<div class="col-md-4 txt-align"> <div class="col-md-4 txt-align">
<input type="file" accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp" multiple #file class="non-visible" <input
(change)="uploadImageFile($event)" /> type="file"
accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp"
multiple
#file
class="non-visible"
(change)="uploadImageFile($event)"
/>
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button> <button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
</div> </div>
<div class="col-md-2 txt-align"> <div class="col-md-2 txt-align">
@ -46,25 +53,23 @@
</div> </div>
</div> </div>
<div class="row" *ngFor="let img of selectFile; let i = index"> <div class="row" *ngFor="let img of selectFile; let i = index">
<mat-title> {{i+1}}. {{img?.name}} </mat-title> <mat-title> {{ i + 1 }}. {{ img?.name }} </mat-title>
</div>
<div class="row">
<div class="col-md-12">
<div *ngIf="uploadedFile">
<mat-progress-bar mode="determinate" [value]="uploadProgress" aria-valuemin="0" aria-valuemax="100">
</mat-progress-bar>
</div>
</div>
</div> </div>
</div> </div>
<div *ngIf="isExistImage"> <div *ngIf="isExistImage">
<div mat-dialog-content> <div mat-dialog-content>
<div *ngIf="uploadFileMessage.length > 0"> <div *ngIf="uploadFileMessage.length > 0">
<p class="uploaded-text">Uploaded image details</p> <p class="uploaded-text">Uploaded image details</p>
<p *ngFor="let uploadFile of uploadFileMessage; let i = index" [ngClass]="{'uploaded-error-text': uploadFile?.error?.message}">{{i+1}}. {{uploadFile?.filename ?? uploadFile?.error?.message}}</p> <p
*ngFor="let uploadFile of uploadFileMessage; let i = index"
[ngClass]="{ 'uploaded-error-text': uploadFile?.error?.message }"
>
{{ i + 1 }}. {{ uploadFile?.filename ?? uploadFile?.error?.message }}
</p>
</div> </div>
</div>
<div mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="dialogRef.close(false)">Close</button>
</div>
</div> </div>
<div mat-dialog-actions align="end">
<button mat-raised-button color="primary" (click)="dialogRef.close(false)">Close</button>
</div>
</div>

View File

@ -1,11 +1,15 @@
import { Component, DoCheck, Inject, OnInit } from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations'; import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, DoCheck, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { Server } from '../../../models/server'; import { MatSnackBar } from '@angular/material/snack-bar';
import { ImageManagerService } from '../../../services/image-manager.service'; import { ToasterService } from '@services/toaster.service';
import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service';
import { UploadingProcessbarComponent } from 'app/common/uploading-processbar/uploading-processbar.component';
import { Observable, of } from 'rxjs'; import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators'; import { catchError } from 'rxjs/operators';
import { ImageData } from '../../../models/images'; import { ImageData } from '../../../models/images';
import { Server } from '../../../models/server';
import { ImageManagerService } from '../../../services/image-manager.service';
@Component({ @Component({
selector: 'app-add-image-dialog', selector: 'app-add-image-dialog',
@ -19,58 +23,84 @@ import { ImageData } from '../../../models/images';
]), ]),
], ],
}) })
export class AddImageDialogComponent implements OnInit, DoCheck {
export class AddImageDialogComponent implements OnInit,DoCheck {
server: Server; server: Server;
uploadedFile: boolean = false; uploadedFile: boolean = false;
isExistImage: boolean = false; isExistImage: boolean = false;
isInstallAppliance: boolean = false isInstallAppliance: boolean = false;
install_appliance: boolean = false install_appliance: boolean = false;
selectFile: any = []; selectFile: any = [];
uploadFileMessage: ImageData = [] uploadFileMessage: ImageData = [];
uploadProgress:number = 0 uploadProgress: number = 0;
cancelRequsts = new Map();
constructor( constructor(
@Inject(MAT_DIALOG_DATA) public data: any, @Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<AddImageDialogComponent>, public dialogRef: MatDialogRef<AddImageDialogComponent>,
private imageService: ImageManagerService, private imageService: ImageManagerService,
public snackBar: MatSnackBar,
) { } private uploadServiceService: UploadServiceService,
private toasterService: ToasterService
) {}
public ngOnInit(): void { public ngOnInit(): void {
this.server = this.data this.server = this.data;
this.uploadServiceService.currentCancelItemDetails.subscribe((isCancel) => {
if (isCancel) {
this.cancelUploading();
}
});
} }
selectInstallApplianceOption(ev) { selectInstallApplianceOption(ev) {
this.install_appliance = ev.value this.install_appliance = ev.value;
} }
async uploadImageFile(event) { async uploadImageFile(event) {
for (let imgFile of event.target.files) { for (let imgFile of event.target.files) {
this.selectFile.push(imgFile) this.selectFile.push(imgFile);
} }
await this.upload() await this.upload();
} }
// files uploading // files uploading
upload() { upload() {
const calls = [];
this.uploadedFile = true; this.uploadedFile = true;
this.selectFile.forEach(imgElement => { this.snackBar.openFromComponent(UploadingProcessbarComponent, {
calls.push(this.imageService.uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement).pipe(catchError(error => of(error)))) panelClass: 'uplaoding-file-snackabar',
}); });
this.uploadProgress = calls.length this.selectFile.forEach((imgElement) => {
Observable.forkJoin(calls).subscribe(responses => { const object = this.imageService
this.uploadFileMessage = responses .uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement)
.pipe(catchError((error) => of(error)))
.subscribe();
this.cancelRequsts.set(imgElement.name, object);
});
this.uploadProgress = this.cancelRequsts.size;
Observable.forkJoin(this.cancelRequsts.values).subscribe((responses) => {
this.uploadFileMessage = responses;
this.uploadServiceService.processBarCount(100);
this.uploadedFile = false; this.uploadedFile = false;
this.isExistImage = true; this.isExistImage = true;
}); });
} }
ngDoCheck(){
ngDoCheck() {
setTimeout(() => { setTimeout(() => {
if(this.uploadProgress < 95){ if (this.uploadProgress < 95) {
this.uploadProgress = this.uploadProgress + 1 this.uploadProgress = this.uploadProgress + 1;
this.uploadServiceService.processBarCount(this.uploadProgress);
} }
}, 100000); }, 10000);
}
cancelUploading() {
this.cancelRequsts.forEach((obj) => {
obj.unsubscribe();
});
this.dialogRef.close();
this.uploadServiceService.processBarCount(100);
this.toasterService.warning('Image upload cancelled');
this.uploadServiceService.cancelFileUploading(false);
} }
} }

View File

@ -370,7 +370,7 @@
type="file" type="file"
class="non-visible" class="non-visible"
#file2 #file2
(change)="importImage($, image.filename)" (change)="importImage($event, image.filename)"
ng2FileSelect ng2FileSelect
[uploader]="uploaderImage" [uploader]="uploaderImage"
/> />

View File

@ -185,7 +185,7 @@ export class NewTemplateDialogComponent implements OnInit {
status: number, status: number,
headers: ParsedResponseHeaders headers: ParsedResponseHeaders
) => { ) => {
this.toasterService.error('An error has occured'); this.toasterService.error('An error has occured because image already exists');
this.progressService.deactivate(); this.progressService.deactivate();
this.uploaderImage.clearQueue(); this.uploaderImage.clearQueue();
}; };
@ -374,6 +374,7 @@ export class NewTemplateDialogComponent implements OnInit {
importImage(event, imageName) { importImage(event, imageName) {
debugger
this.computeChecksumMd5(event.target.files[0], false).then((output) => { this.computeChecksumMd5(event.target.files[0], false).then((output) => {
let imageToInstall = this.applianceToInstall.images.filter((n) => n.filename === imageName)[0]; let imageToInstall = this.applianceToInstall.images.filter((n) => n.filename === imageName)[0];