mirror of
https://github.com/GNS3/gns3-web-ui.git
synced 2024-12-29 17:28:51 +00:00
I complete export project UI and bind export portable project API
This commit is contained in:
Rajnikant
parent
ea76493ab8
commit
5c1ce1a5ab
@ -1,58 +1,105 @@
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<h1 mat-dialog-title>Export Project</h1>
|
||||
<form
|
||||
[formGroup]="export_project_form"
|
||||
(ngSubmit)="export_project_form.valid && exportPortableProject()"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="col-md-10">
|
||||
<h1 mat-dialog-title>Export Project</h1>
|
||||
</div>
|
||||
<div class="col-md-2 txt-align">
|
||||
<button mat-button class="close-btn" (click)="dialogRef.close()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 txt-align">
|
||||
<button mat-button (click)="dialogRef.close()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p mat-dialog-subtitle>Please select the location, whether to include base images or not and the compression type.</p>
|
||||
<mat-divider></mat-divider>
|
||||
<div mat-dialog-content>
|
||||
<div class="row">
|
||||
<div class="col-md-4">Path:</div>
|
||||
<div class="col-md-6"></div>
|
||||
<div class="col-md-2"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">Compression:</div>
|
||||
<div class="col-md-6"></div>
|
||||
<div class="col-md-2"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4">Compression level:</div>
|
||||
<div class="col-md-6"></div>
|
||||
<div class="col-md-2"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<section class="checkBox-section">
|
||||
<mat-checkbox class="checkBox-margin"> Include base images </mat-checkbox>
|
||||
</section>
|
||||
<p mat-dialog-subtitle>
|
||||
Please select the location, whether to include base images or not and the compression <br />type.
|
||||
</p>
|
||||
<mat-divider></mat-divider>
|
||||
|
||||
<div class="mat-data">
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-data">
|
||||
<div mat-title>Path:</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<mat-form-field class="input-full-width">
|
||||
<input matInput type="text" formControlName="file_path" required />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<input
|
||||
type="file"
|
||||
accept=".qcow2"
|
||||
#file
|
||||
class="non-visible"
|
||||
(change)="uploadImageFile($event)"
|
||||
ng2FileSelect
|
||||
[uploader]="uploader"
|
||||
/>
|
||||
<button mat-raised-button color="primary" (click)="file.click()" class="file-button">Browse</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-data">Compression:</div>
|
||||
<div class="col-md-8">
|
||||
<mat-form-field class="input-full-width">
|
||||
<mat-select formControlName="compression" (selectionChange)="selectCompression($event)" required>
|
||||
<mat-option *ngFor="let compressionValue of compression_methods" [value]="compressionValue.name">{{
|
||||
compressionValue.name
|
||||
}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-4 col-data">Compression level:</div>
|
||||
<div class="col-md-8">
|
||||
<mat-form-field class="input-full-width">
|
||||
<mat-select formControlName="compression_level" required>
|
||||
<mat-option *ngFor="let compressionLevel of compression_filter_value" [value]="compressionLevel">{{
|
||||
compressionLevel
|
||||
}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 checkbox-row">
|
||||
<section class="checkBox-section">
|
||||
<mat-checkbox formControlName="include_base_image" class="checkBox-margin"> Include base images </mat-checkbox>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 checkbox-row">
|
||||
<section class="checkBox-section" >
|
||||
<mat-checkbox class="checkBox-margin" formControlName="include_snapshots"> Include snapshots </mat-checkbox>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12 checkbox-row">
|
||||
<section class="checkBox-section">
|
||||
<mat-checkbox formControlName="reset_mac_address" class="checkBox-margin"> Reset MAC addresses</mat-checkbox>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<section class="checkBox-section">
|
||||
<mat-checkbox class="checkBox-margin"> Include snapshots </mat-checkbox>
|
||||
</section>
|
||||
<div class="col-md-4">
|
||||
<div mat-dialog-actions align="start">
|
||||
<button type="button" mat-button>Help</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<div mat-dialog-actions align="end">
|
||||
<button type="button" mat-button (click)="dialogRef.close()" cdkFocusInitial>Back</button>
|
||||
<button mat-button type="submit" cdkFocusInitial>Next</button>
|
||||
<button type="button" mat-button (click)="dialogRef.close()" cdkFocusInitial>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<section class="checkBox-section">
|
||||
<mat-checkbox class="checkBox-margin"> Reset MAC addresses </mat-checkbox>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider></mat-divider>
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button>Help</button>
|
||||
<button mat-button cdkFocusInitial>Back</button>
|
||||
<button mat-button cdkFocusInitial>Next</button>
|
||||
<button mat-button cdkFocusInitial>Cancel</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
@ -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<ExportPortableProjectComponent>,
|
||||
|
||||
) { }
|
||||
@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);
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,8 +12,27 @@ import { SettingsService } from './settings.service';
|
||||
|
||||
@Injectable()
|
||||
export class ProjectService {
|
||||
public projectListSubject = new Subject<boolean>();
|
||||
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<boolean>();
|
||||
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}`)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user