mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2025-01-19 19:29:03 +00:00
Merge pull request #1326 from GNS3/bugfix/imageProgressBar
Bugfix/image progress bar
This commit is contained in:
Jeremy Grossmann
GitHub
commit
7d706a39f1
3
.vscode/settings.json
vendored
Normal file
3
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"angular.enable-strict-mode-prompt": false
|
||||
}
|
||||
473
angular.json
473
angular.json
@ -1,246 +1,231 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"gns3-web-ui": {
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"allowedCommonJsDependencies": [
|
||||
"rxjs",
|
||||
"rxjs-compat",
|
||||
"uuid",
|
||||
"css-tree",
|
||||
"save-svg-as-png",
|
||||
"angular-draggable-droppable",
|
||||
"dom-set",
|
||||
"dom-plane",
|
||||
"mousetrap",
|
||||
"@mattlewis92/dom-autoscroller",
|
||||
"rxjs/Rx",
|
||||
"rxjs/add/operator/map",
|
||||
"rxjs-compat/add/operator/map",
|
||||
"classnames",
|
||||
"stylenames"
|
||||
],
|
||||
"outputPath": "dist",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico",
|
||||
"src/ReleaseNotes.txt"
|
||||
],
|
||||
"styles": [
|
||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"node_modules/notosans-fontface/css/notosans-fontface.min.css",
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"buildOptimizer": true,
|
||||
"sourceMap": true,
|
||||
"optimization": false,
|
||||
"namedChunks": true,
|
||||
"aot": true
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": {
|
||||
"hidden": true,
|
||||
"scripts": true,
|
||||
"styles": false
|
||||
},
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
]
|
||||
},
|
||||
"electronProd": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.electron.prod.ts"
|
||||
}
|
||||
]
|
||||
},
|
||||
"electronDev": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.electron.ts"
|
||||
}
|
||||
]
|
||||
},
|
||||
"githubProd": {
|
||||
"budgets": [
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.github.prod.ts"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "gns3-web-ui:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "gns3-web-ui:build:production"
|
||||
},
|
||||
"electronProd": {
|
||||
"browserTarget": "gns3-web-ui:build:electronProd"
|
||||
},
|
||||
"electronDev": {
|
||||
"browserTarget": "gns3-web-ui:build:electronDev"
|
||||
},
|
||||
"githubProd": {
|
||||
"browserTarget": "gns3-web-ui:build:githubProd"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "gns3-web-ui:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"karmaConfig": "./karma.conf.js",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.spec.json",
|
||||
"scripts": [],
|
||||
"styles": [
|
||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"node_modules/notosans-fontface/css/notosans-fontface.min.css",
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"sourceMap": false,
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
}
|
||||
}
|
||||
},
|
||||
"gns3-web-ui-e2e": {
|
||||
"root": "e2e",
|
||||
"sourceRoot": "e2e",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "./protractor.conf.js",
|
||||
"devServerTarget": "gns3-web-ui:serve"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"e2e/tsconfig.e2e.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "gns3-web-ui",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"prefix": "app",
|
||||
"style": "scss"
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"prefix": "app"
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"gns3-web-ui": {
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"allowedCommonJsDependencies": [
|
||||
"rxjs",
|
||||
"rxjs-compat",
|
||||
"uuid",
|
||||
"css-tree",
|
||||
"save-svg-as-png",
|
||||
"angular-draggable-droppable",
|
||||
"dom-set",
|
||||
"dom-plane",
|
||||
"mousetrap",
|
||||
"@mattlewis92/dom-autoscroller",
|
||||
"rxjs/Rx",
|
||||
"rxjs/add/operator/map",
|
||||
"rxjs-compat/add/operator/map",
|
||||
"classnames",
|
||||
"stylenames",
|
||||
"source-map-js"
|
||||
],
|
||||
"outputPath": "dist",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"tsConfig": "src/tsconfig.app.json",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico",
|
||||
"src/ReleaseNotes.txt"
|
||||
],
|
||||
"styles": [
|
||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"node_modules/notosans-fontface/css/notosans-fontface.min.css",
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"scripts": [],
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"buildOptimizer": true,
|
||||
"sourceMap": true,
|
||||
"optimization": false,
|
||||
"namedChunks": true,
|
||||
"aot": true
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"budgets": [{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": {
|
||||
"hidden": true,
|
||||
"scripts": true,
|
||||
"styles": false
|
||||
},
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"fileReplacements": [{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}]
|
||||
},
|
||||
"electronProd": {
|
||||
"budgets": [{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"fileReplacements": [{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.electron.prod.ts"
|
||||
}]
|
||||
},
|
||||
"electronDev": {
|
||||
"budgets": [{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}],
|
||||
"fileReplacements": [{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.electron.ts"
|
||||
}]
|
||||
},
|
||||
"githubProd": {
|
||||
"budgets": [{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"namedChunks": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"fileReplacements": [{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.github.prod.ts"
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "gns3-web-ui:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "gns3-web-ui:build:production"
|
||||
},
|
||||
"electronProd": {
|
||||
"browserTarget": "gns3-web-ui:build:electronProd"
|
||||
},
|
||||
"electronDev": {
|
||||
"browserTarget": "gns3-web-ui:build:electronDev"
|
||||
},
|
||||
"githubProd": {
|
||||
"browserTarget": "gns3-web-ui:build:githubProd"
|
||||
}
|
||||
}
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "gns3-web-ui:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"karmaConfig": "./karma.conf.js",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "src/tsconfig.spec.json",
|
||||
"scripts": [],
|
||||
"styles": [
|
||||
"node_modules/bootstrap/dist/css/bootstrap.min.css",
|
||||
"node_modules/notosans-fontface/css/notosans-fontface.min.css",
|
||||
"src/styles.scss",
|
||||
"src/theme.scss"
|
||||
],
|
||||
"sourceMap": false,
|
||||
"assets": [
|
||||
"src/assets",
|
||||
"src/favicon.ico"
|
||||
]
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"src/tsconfig.app.json",
|
||||
"src/tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**",
|
||||
"**/*.spec.ts"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"style": "scss"
|
||||
}
|
||||
}
|
||||
},
|
||||
"gns3-web-ui-e2e": {
|
||||
"root": "e2e",
|
||||
"sourceRoot": "e2e",
|
||||
"projectType": "application",
|
||||
"architect": {
|
||||
"e2e": {
|
||||
"builder": "@angular-devkit/build-angular:protractor",
|
||||
"options": {
|
||||
"protractorConfig": "./protractor.conf.js",
|
||||
"devServerTarget": "gns3-web-ui:serve"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"e2e/tsconfig.e2e.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "gns3-web-ui",
|
||||
"schematics": {
|
||||
"@schematics/angular:component": {
|
||||
"prefix": "app",
|
||||
"style": "scss"
|
||||
},
|
||||
"@schematics/angular:directive": {
|
||||
"prefix": "app"
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"analytics": false
|
||||
}
|
||||
}
|
||||
@ -59,6 +59,7 @@
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"angular-draggable-droppable": "^6.1.0",
|
||||
"angular-resizable-element": "^3.4.0",
|
||||
"autoprefixer": "10.4.5",
|
||||
"bootstrap": "^5.1.3",
|
||||
"command-exists": "^1.2.9",
|
||||
"core-js": "^3.22.3",
|
||||
@ -103,8 +104,8 @@
|
||||
"@types/jasmine": "^4.0.3",
|
||||
"@types/jasminewd2": "^2.0.10",
|
||||
"@types/node": "^17.0.31",
|
||||
"codelyzer": "^6.0.2",
|
||||
"electron": "^13.2.2",
|
||||
"codelyzer": "^0.0.28",
|
||||
"electron": "13.6.6",
|
||||
"electron-builder": "^23.0.3",
|
||||
"file-loader": "^6.2.0",
|
||||
"jasmine-core": "^4.1.0",
|
||||
@ -126,7 +127,7 @@
|
||||
"ts-node": "^10.7.0",
|
||||
"tslint": "^6.1.3",
|
||||
"tslint-config-prettier": "^1.18.0",
|
||||
"typescript": "^4.6.4",
|
||||
"typescript": "4.6.4",
|
||||
"webpack": "^5.72.0",
|
||||
"yarn-upgrade-all": "^0.7.1"
|
||||
},
|
||||
|
||||
@ -23,7 +23,7 @@ export class UploadingProcessbarComponent implements OnInit {
|
||||
ngOnInit() {
|
||||
this.subscription = this._US.currentCount.subscribe((count:number) => {
|
||||
this.uploadProgress = count;
|
||||
if (this.uploadProgress === 100) {
|
||||
if (this.uploadProgress === 100 || this.uploadProgress == null ) {
|
||||
this.dismiss()
|
||||
}
|
||||
})
|
||||
|
||||
@ -10,61 +10,96 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div mat-dialog-content>
|
||||
<mat-radio-group name="install_appliances" class="choose-instal-appliance" [value]="install_appliance" (change)="selectInstallApplianceOption($event)">
|
||||
<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>
|
||||
<div mat-dialog-content>
|
||||
<mat-radio-group
|
||||
name="install_appliances"
|
||||
class="choose-instal-appliance"
|
||||
[value]="install_appliance"
|
||||
(change)="selectInstallApplianceOption($event)"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
<div mat-dialog-actions align="end">
|
||||
<button mat-raised-button color="primary" (click)="isInstallAppliance =!isInstallAppliance">Next</button>
|
||||
</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 class="row" style="display: flex;">
|
||||
<div *ngIf="isInstallAppliance">
|
||||
<div class="row" style="display: flex">
|
||||
<div class="col-md-6">
|
||||
<h5>Please Select image</h5>
|
||||
|
||||
<h5 *ngIf="uploaderImage.queue.length <= 0">Please Select image</h5>
|
||||
<p *ngIf="uploaderImage.queue.length > 0"class="uploaded-text">Uploaded image details</p>
|
||||
</div>
|
||||
<div class="col-md-4 txt-align">
|
||||
<input type="file" accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp" multiple #file class="non-visible"
|
||||
(change)="uploadImageFile($event)" />
|
||||
<div class="col-md-4 txt-align" *ngIf="uploaderImage.queue.length <= 0">
|
||||
<input
|
||||
type="file"
|
||||
accept=".qcow2, .bin,.image,.qcow2,.vmdk,.img,.tmp"
|
||||
multiple
|
||||
#file
|
||||
class="non-visible"
|
||||
ng2FileSelect
|
||||
[uploader]="uploaderImage"
|
||||
(onFileSelected)="uploadImageFile($event)"
|
||||
/>
|
||||
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
|
||||
</div>
|
||||
<div class="col-md-2 txt-align">
|
||||
<div class="{{uploaderImage.queue.length > 0 ? 'col-md-6 txt-align' : 'col-md-2 txt-align'}} ">
|
||||
<button mat-button (click)="dialogRef.close()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" *ngFor="let img of selectFile; let i = index">
|
||||
<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 class="row" *ngFor="let img of uploaderImage.queue; let i = index">
|
||||
<div class="{{img.isError || img.isUploaded ? 'col-md-10' : 'col-md-6'}}">
|
||||
<mat-title [ngClass]="{ 'uploaded-error-text': img.isError }">
|
||||
{{ i + 1 }}. {{ img.isError ? 'Image ' : '' }} {{ img?.some?.name }}
|
||||
{{ img.isError ? ' already exists' : '' }}
|
||||
</mat-title>
|
||||
</div>
|
||||
<div class="{{img.isError || img.isUploaded ? 'col-md-1' : 'col-md-4'}}" *ngIf="!img.isUploaded">
|
||||
<mat-progress-bar
|
||||
mode="determinate"
|
||||
*ngIf="img?.some?.name === uploadProgress.some?.name"
|
||||
[value]="uploadProgress.progress"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></mat-progress-bar>
|
||||
<mat-progress-bar
|
||||
mode="determinate"
|
||||
*ngIf="img?.some?.name !== uploadProgress.some?.name && !img.isUploaded"
|
||||
[value]="0"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
>
|
||||
</mat-progress-bar>
|
||||
</div>
|
||||
<div class="{{img.isError || img.isUploaded ? 'col-md-1' : 'col-md-2'}}"
|
||||
*ngIf="img?.some?.name === uploadProgress.some?.name && img.isReady && !img.isUploaded"
|
||||
>
|
||||
{{ uploadProgress.progress + ' %' }}
|
||||
</div>
|
||||
<div
|
||||
class="col-md-2"
|
||||
*ngIf="img?.some?.name !== uploadProgress.some?.name && img.isReady && !uploadProgress.isUploaded"
|
||||
>
|
||||
{{ '0 %' }}
|
||||
</div>
|
||||
</div>
|
||||
<div mat-dialog-actions align="end" *ngIf="uploaderImage.queue.length > 0 && !uploadProgress.isUploaded">
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
(click)="uploaderImage.queue.length > 0 ? cancelUploading() : dialogRef.close(false)"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="isExistImage">
|
||||
<div mat-dialog-content>
|
||||
<div *ngIf="uploadFileMessage.length > 0">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<div mat-dialog-actions align="end">
|
||||
<button mat-raised-button color="primary" (click)="dialogRef.close(false)">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -79,5 +79,6 @@
|
||||
.instal-appliances-button {
|
||||
margin: 11px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -14,6 +14,7 @@ import { AddImageDialogComponent } from './add-image-dialog.component';
|
||||
import { NO_ERRORS_SCHEMA } from '@angular/core';
|
||||
import { ToasterService } from 'app/services/toaster.service';
|
||||
import { MockedToasterService } from 'app/services/toaster.service.spec';
|
||||
import { MatSnackBarModule } from '@angular/material/snack-bar';
|
||||
|
||||
export class MockedImageManagerService {
|
||||
public getImages(server: Server) {
|
||||
@ -37,7 +38,8 @@ describe('AddImageDialogComponent', () => {
|
||||
MatToolbarModule,
|
||||
MatMenuModule,
|
||||
MatCheckboxModule,
|
||||
MatDialogModule
|
||||
MatDialogModule,
|
||||
MatSnackBarModule
|
||||
],
|
||||
providers: [
|
||||
{ provide: ServerService, useValue: mockedServerService },
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import { Component, DoCheck, Inject, OnInit } from '@angular/core';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { UploadServiceService } from 'app/common/uploading-processbar/upload-service.service';
|
||||
import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload';
|
||||
import { Server } from '../../../models/server';
|
||||
import { ImageManagerService } from '../../../services/image-manager.service';
|
||||
import { Observable, of } from 'rxjs';
|
||||
import { catchError } from 'rxjs/operators';
|
||||
import { ImageData } from '../../../models/images';
|
||||
import { ToasterService } from '../../../services/toaster.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-add-image-dialog',
|
||||
@ -19,58 +19,93 @@ import { ImageData } from '../../../models/images';
|
||||
]),
|
||||
],
|
||||
})
|
||||
|
||||
export class AddImageDialogComponent implements OnInit,DoCheck {
|
||||
export class AddImageDialogComponent implements OnInit {
|
||||
server: Server;
|
||||
uploadedFile: boolean = false;
|
||||
isExistImage: boolean = false;
|
||||
isInstallAppliance: boolean = false
|
||||
install_appliance: boolean = false
|
||||
isInstallAppliance: boolean = false;
|
||||
install_appliance: boolean = false;
|
||||
selectFile: any = [];
|
||||
uploadFileMessage: ImageData = []
|
||||
uploadProgress:number = 0
|
||||
uploaderImage: FileUploader;
|
||||
uploadProgress: number = 0;
|
||||
|
||||
constructor(
|
||||
@Inject(MAT_DIALOG_DATA) public data: any,
|
||||
public dialogRef: MatDialogRef<AddImageDialogComponent>,
|
||||
private imageService: ImageManagerService,
|
||||
private toasterService: ToasterService,
|
||||
private uploadServiceService: UploadServiceService
|
||||
) {}
|
||||
|
||||
) { }
|
||||
public ngOnInit() {
|
||||
this.server = this.data;
|
||||
|
||||
public ngOnInit(): void {
|
||||
this.server = this.data
|
||||
this.uploaderImage = new FileUploader({});
|
||||
this.uploaderImage.onAfterAddingFile = (file) => {
|
||||
file.withCredentials = false;
|
||||
};
|
||||
|
||||
this.uploaderImage.onErrorItem = (
|
||||
item: FileItem,
|
||||
response: string,
|
||||
status: number,
|
||||
headers: ParsedResponseHeaders
|
||||
) => {
|
||||
let responseData = {
|
||||
name: item.file.name,
|
||||
message: JSON.parse(response),
|
||||
};
|
||||
this.toasterService.error(responseData?.message.message);
|
||||
};
|
||||
|
||||
this.uploaderImage.onSuccessItem = (
|
||||
item: FileItem,
|
||||
response: string,
|
||||
status: number,
|
||||
headers: ParsedResponseHeaders
|
||||
) => {
|
||||
let responseData = {
|
||||
filename: item.file.name,
|
||||
message: JSON.parse(response),
|
||||
};
|
||||
this.toasterService.success('Image ' + responseData?.message.filename + ' imported succesfully' );
|
||||
};
|
||||
this.uploaderImage.onProgressItem = (progress: any) => {
|
||||
this.uploadProgress = progress;
|
||||
};
|
||||
}
|
||||
|
||||
cancelUploading() {
|
||||
this.uploaderImage.clearQueue();
|
||||
this.dialogRef.close();
|
||||
this.uploadServiceService.processBarCount(null);
|
||||
this.toasterService.warning('Image file Uploading canceled');
|
||||
}
|
||||
|
||||
selectInstallApplianceOption(ev) {
|
||||
this.install_appliance = ev.value
|
||||
this.install_appliance = ev.value;
|
||||
}
|
||||
|
||||
async uploadImageFile(event) {
|
||||
for (let imgFile of event.target.files) {
|
||||
this.selectFile.push(imgFile)
|
||||
for (let imgFile of event) {
|
||||
this.selectFile.push(imgFile);
|
||||
}
|
||||
await this.upload()
|
||||
await this.importImageFile();
|
||||
}
|
||||
|
||||
// files uploading
|
||||
upload() {
|
||||
const calls = [];
|
||||
this.uploadedFile = true;
|
||||
this.selectFile.forEach(imgElement => {
|
||||
calls.push(this.imageService.uploadedImage(this.server, this.install_appliance, imgElement.name, imgElement).pipe(catchError(error => of(error))))
|
||||
// files uploading
|
||||
importImageFile() {
|
||||
this.selectFile.forEach((event, i) => {
|
||||
let fileName = event.name;
|
||||
let file = event;
|
||||
let fileReader: FileReader = new FileReader();
|
||||
fileReader.onloadend = () => {
|
||||
const url = this.imageService.getImagePath(this.server, this.install_appliance, fileName);
|
||||
const itemToUpload = this.uploaderImage.queue[i];
|
||||
itemToUpload.url = url;
|
||||
if ((itemToUpload as any).options) (itemToUpload as any).options.disableMultipart = true;
|
||||
(itemToUpload as any).options.headers = [{ name: 'Authorization', value: 'Bearer ' + this.server.authToken }];
|
||||
this.uploaderImage.uploadItem(itemToUpload);
|
||||
};
|
||||
fileReader.readAsText(file);
|
||||
});
|
||||
this.uploadProgress = calls.length
|
||||
Observable.forkJoin(calls).subscribe(responses => {
|
||||
this.uploadFileMessage = responses
|
||||
this.uploadedFile = false;
|
||||
this.isExistImage = true;
|
||||
});
|
||||
}
|
||||
ngDoCheck(){
|
||||
setTimeout(() => {
|
||||
if(this.uploadProgress < 95){
|
||||
this.uploadProgress = this.uploadProgress + 1
|
||||
}
|
||||
}, 100000);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -123,7 +123,7 @@ export class ImageManagerComponent implements OnInit {
|
||||
|
||||
deleteAllFiles() {
|
||||
const dialogRef = this.dialog.open(DeleteAllImageFilesDialogComponent, {
|
||||
width: '500px',
|
||||
width: '550px',
|
||||
maxHeight: '650px',
|
||||
autoFocus: false,
|
||||
disableClose: true,
|
||||
|
||||
@ -274,7 +274,7 @@ export class AddIosTemplateComponent implements OnInit, OnDestroy {
|
||||
|
||||
cancelUploading() {
|
||||
this.uploader.clearQueue();
|
||||
this.uploadServiceService.processBarCount(100)
|
||||
this.uploadServiceService.processBarCount(null)
|
||||
this.toasterService.warning('Image upload cancelled');
|
||||
// this.uploadServiceService.cancelFileUploading(false)
|
||||
// window.location.reload()
|
||||
|
||||
@ -162,7 +162,7 @@ export class AddQemuVmTemplateComponent implements OnInit {
|
||||
|
||||
cancelUploading() {
|
||||
this.uploader.clearQueue();
|
||||
this.uploadServiceService.processBarCount(100)
|
||||
this.uploadServiceService.processBarCount(null)
|
||||
this.toasterService.warning('Image Uploading canceled');
|
||||
this.uploadServiceService.cancelFileUploading(false)
|
||||
|
||||
|
||||
@ -370,7 +370,7 @@
|
||||
type="file"
|
||||
class="non-visible"
|
||||
#file2
|
||||
(change)="importImage($, image.filename)"
|
||||
(change)="importImage($event, image.filename)"
|
||||
ng2FileSelect
|
||||
[uploader]="uploaderImage"
|
||||
/>
|
||||
|
||||
@ -185,7 +185,7 @@ export class NewTemplateDialogComponent implements OnInit {
|
||||
status: number,
|
||||
headers: ParsedResponseHeaders
|
||||
) => {
|
||||
this.toasterService.error('An error has occured');
|
||||
this.toasterService.error('An error has occured because image already exists');
|
||||
this.progressService.deactivate();
|
||||
this.uploaderImage.clearQueue();
|
||||
};
|
||||
@ -428,7 +428,7 @@ export class NewTemplateDialogComponent implements OnInit {
|
||||
|
||||
cancelUploading() {
|
||||
this.uploaderImage.clearQueue();
|
||||
this.uploadServiceService.processBarCount(100)
|
||||
this.uploadServiceService.processBarCount(null)
|
||||
this.toasterService.warning('Image upload cancelled');
|
||||
this.uploadServiceService.cancelFileUploading(false)
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user