diff --git a/src/app/components/export-portable-project/export-portable-project.component.html b/src/app/components/export-portable-project/export-portable-project.component.html index 61ca59f3..db403a80 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.html +++ b/src/app/components/export-portable-project/export-portable-project.component.html @@ -1,58 +1,105 @@ -
-
-

Export Project

+
+
+
+

Export Project

+
+
+ +
-
- -
-
-

Please select the location, whether to include base images or not and the compression type.

- -
-
-
Path:
-
-
-
-
-
Compression:
-
-
-
-
-
Compression level:
-
-
-
-
-
-
- Include base images -
+

+ Please select the location, whether to include base images or not and the compression
type. +

+ + +
+
+
+
Path:
+
+
+ + + +
+
+ + +
+
+
+
Compression:
+
+ + + {{ + compressionValue.name + }} + + +
+
+
+
Compression level:
+
+ + + {{ + compressionLevel + }} + + +
+
+
+
+
+ Include base images +
+
+
+
+
+
+ Include snapshots +
+
+
+
+
+
+ Reset MAC addresses +
+
+
-
-
- Include snapshots -
+
+
+ +
+
+
+
+ + + +
-
-
-
- Reset MAC addresses -
-
-
-
- -
- - - - -
+ diff --git a/src/app/components/export-portable-project/export-portable-project.component.scss b/src/app/components/export-portable-project/export-portable-project.component.scss index ac18267e..3f427895 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.scss +++ b/src/app/components/export-portable-project/export-portable-project.component.scss @@ -1,17 +1,39 @@ .mat-dialog-title { - margin: 0 0 0px; - display: block; + margin: 0 0 0px; + display: block; } .mat-dialog-container { - padding: 14px 14px 5px 14px !important; + padding: 14px 14px 5px 14px !important; } .checkBox-section { - display: flex; - align-content: center; - align-items: center; - height: 35px; - } - - .checkBox-margin { - margin: 0 10px; - } \ No newline at end of file + display: flex; + align-content: center; + align-items: center; + height: 35px; +} + +.checkBox-margin { + margin: 0 10px; +} +.txt-align { + text-align: end; +} +.close-btn { + margin: 0 0 20px 40px; +} +.mat-data { + margin: 15px 0 15px 0; +} + + +.input-full-width { + width: 100%; +} +.col-data { + text-align: left; + align-self: self-end; + margin-bottom: 20px; +} +.checkbox-row{ + margin-top: 5px 0 5px 0; +} diff --git a/src/app/components/export-portable-project/export-portable-project.component.ts b/src/app/components/export-portable-project/export-portable-project.component.ts index 92ede715..3de50e39 100644 --- a/src/app/components/export-portable-project/export-portable-project.component.ts +++ b/src/app/components/export-portable-project/export-portable-project.component.ts @@ -1,19 +1,92 @@ +import { Inject } from '@angular/core'; import { Component, OnInit } from '@angular/core'; -import { MatDialogRef } from '@angular/material/dialog'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { Server } from '../../models/server'; +import { FileItem, FileUploader, ParsedResponseHeaders } from 'ng2-file-upload'; +import { ProjectService } from '../../services/project.service'; +import { ToasterService } from '../../services/toaster.service'; @Component({ selector: 'app-export-portable-project', templateUrl: './export-portable-project.component.html', - styleUrls: ['./export-portable-project.component.scss'] + styleUrls: ['./export-portable-project.component.scss'], }) export class ExportPortableProjectComponent implements OnInit { + uploader: FileUploader; + export_project_form: FormGroup; + chosenImage: string = ''; + compression_methods: any = []; + compression_level: any = []; + compression_filter_value: any = []; + server: Server; constructor( public dialogRef: MatDialogRef, - - ) { } + @Inject(MAT_DIALOG_DATA) public data: any, + private toasterService: ToasterService, + private projectService: ProjectService, + private _fb: FormBuilder + ) {} ngOnInit(): void { + this.server = this.data; + + this.formControls(); + this.compression_methods = this.projectService.getCompression(); + this.compression_level = this.projectService.getCompressionLevel(); + this.uploader = new FileUploader({}); + + this.uploader.onAfterAddingFile = (file) => { + file.withCredentials = false; + }; + this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => { + this.toasterService.error('An error occured: ' + response); + }; + this.uploader.onSuccessItem = ( + item: FileItem, + response: string, + status: number, + headers: ParsedResponseHeaders + ) => { + this.toasterService.success('Image uploaded'); + }; + + this.uploader.onProgressItem = (progress: any) => {}; + + this.selectCompression({ value: this.compression_methods[4] }); + this.export_project_form.get('compression').setValue(this.compression_methods[4]); + } + formControls() { + this.export_project_form = this._fb.group({ + file_path: ['', Validators.required], + compression: ['', Validators.required], + compression_level: ['', Validators.required], + include_base_image: [false, Validators.required], + include_snapshots: [false, Validators.required], + reset_mac_address: [false, Validators.required], + }); + this.export_project_form.valueChanges.subscribe(() => {}); + } + + uploadImageFile(event) {} + + selectCompression(event) { + console.log(event); + this.compression_level.map((_) => { + if (event.value.value === _.name) { + this.export_project_form.get('compression_level').setValue(_.value); + this.compression_filter_value = _.selectionValues; + } + }); + } + + exportPortableProject() { + this.projectService.exportPortableProject(this.server,this.export_project_form.value).subscribe((res)=>{ + + }) + console.log(this.export_project_form.value); + } } diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts index 3367adba..335a7215 100644 --- a/src/app/services/project.service.ts +++ b/src/app/services/project.service.ts @@ -12,8 +12,27 @@ import { SettingsService } from './settings.service'; @Injectable() export class ProjectService { - public projectListSubject = new Subject(); + compression_methods: any = [ + { id: 1, value: 'none', name: 'None' }, + { id: 2, value: 'zip compression (deflate)', name: 'Zip compression (deflate)' }, + { id: 3, value: 'bzip2 compression', name: 'Bzip2 compression' }, + { id: 4, value: 'lzma compression', name: 'Lzma compression' }, + { id: 5, value: 'zstandard compression', name: 'Zstandard compression' }, + ]; + compression_level_default_value: any = [ + { id: 1, name: 'none', value: 'None', selectionValues: ['None'] }, + { id: 2, name: 'zip compression (deflate)', value: 6, selectionValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] }, + { id: 3, name: 'bzip2 compression', value: 9, selectionValues: [1, 2, 3, 4, 5, 6, 7, 8, 9] }, + { id: 4, name: 'lzma compression', value: 'None', selectionValues: ['None'] }, + { + id: 5, + name: 'zstandard compression', + value: 3, + selectionValues: [1, 2, 3, 4, 5, 6, 7, 8, 9.1, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22], + }, + ]; + public projectListSubject = new Subject(); constructor( private httpServer: HttpServer, private settingsService: SettingsService, @@ -109,4 +128,14 @@ export class ProjectService { } return false; } + + getCompression = () => { + return this.compression_methods; + }; + getCompressionLevel = () => { + return this.compression_level_default_value; + }; + exportPortableProject(server:Server,formData:any={}) { + return this.httpServer.get(server,`projects/${formData.file_path}/export?include_snapshots=${formData.include_snapshots}&include_images=${formData.include_base_image}&reset_mac_addresses=${formData.reset_mac_address}&compression=${formData.compression}&compression_level=${formData.compression_level}`) + } }