ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-06-19 23:33:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Importing appliances extracted to separated component

Browse Source
This commit is contained in:
Piotr Pekala
2019-12-17 07:12:25 -08:00
parent d60d906043
commit b048c308d6
8 changed files with 90 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/components/project-map/import-appliance/import-appliance.component.html Normal file
View File

@ -0,0 +1,12 @@
<input
type="file"
accept=".gns3appliance, .gns3a"
class="non-visible"
#file
(change)="uploadAppliance($event)"
ng2FileSelect
[uploader]="uploader"/>
<button mat-menu-item (click)="file.click()">
<mat-icon>insert_drive_file</mat-icon>
<span>Import appliance</span>
</button>

0
src/app/components/project-map/import-appliance/import-appliance.component.scss Normal file
View File

0
src/app/components/project-map/import-appliance/import-appliance.component.spec.ts Normal file
View File

70
src/app/components/project-map/import-appliance/import-appliance.component.ts Normal file
View File

@ -0,0 +1,70 @@
import { Component, Input, OnInit } from "@angular/core";
import { Project } from '../../../models/project';
import { Server } from '../../../models/server';
import { ComputeService } from '../../../services/compute.service';
import { ToasterService } from '../../../services/toaster.service';
import { ServerResponse } from '../../../models/serverResponse';
import { FileUploader, ParsedResponseHeaders, FileItem } from 'ng2-file-upload';
@Component({
selector: 'app-import-appliance',
templateUrl: './import-appliance.component.html',
styleUrls: ['./import-appliance.component.scss']
})
export class ImportApplianceComponent implements OnInit {
@Input('project') project: Project;
@Input('server') server: Server;
uploader: FileUploader;
constructor(
private computeService: ComputeService,
private toasterService: ToasterService
) {}
ngOnInit() {
this.uploader = new FileUploader({});
this.uploader.onAfterAddingFile = file => {
file.withCredentials = false;
};
this.uploader.onErrorItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
let serverResponse: ServerResponse = JSON.parse(response);
let resultMessage = 'An error occured: ' + serverResponse.message;
this.toasterService.error(resultMessage);
};
this.uploader.onCompleteItem = (
item: FileItem,
response: string,
status: number,
headers: ParsedResponseHeaders
) => {
this.toasterService.success('Appliance imported successfully');
};
}
public uploadAppliance(event) {
const url = this.computeService.getUploadPath(this.server, event.target.files[0].name);
this.uploader.queue.forEach(elem => (elem.url = url));
const itemToUpload = this.uploader.queue[0];
this.uploader.uploadItem(itemToUpload);
}
// public uploadAppliance(event) {
// let fileInput = event.target;
// let file: File = fileInput.files[0];
// let name: string = file.name;
// let fileReader: FileReader = new FileReader();
// fileReader.onloadend = () => {
// let appliance = fileReader.result;
// var obj = JSON.parse(appliance as string);
// console.log(obj);
// // this.computeService.postAppliance(this.server, obj).subscribe(() => {
// // this.toasterService.success('Appliance imported.');
// // });
// }
// fileReader.readAsText(file);
// }
}

11
src/app/components/project-map/project-map.component.html
View File

@ -75,16 +75,7 @@
<mat-icon>call_received</mat-icon>
<span>Import portable project</span>
</button>
<input
type="file"
accept=".gns3appliance, .gns3a"
class="non-visible"
#file
(change)="uploadAppliance($event)"/>
<button mat-menu-item (click)="file.click()">
<mat-icon>insert_drive_file</mat-icon>
<span>Import appliance</span>
</button>
<app-import-appliance [server]="server" [project]="project" ></app-import-appliance>
<button mat-menu-item (click)="closeProject()">
<mat-icon>close</mat-icon>
<span>Close project</span>

17
src/app/components/project-map/project-map.component.ts
View File

@ -820,23 +820,6 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
});
}
public uploadAppliance(event) {
let fileInput = event.target;
let file: File = fileInput.files[0];
let name: string = file.name;
let fileReader: FileReader = new FileReader();
fileReader.onloadend = () => {
let appliance = fileReader.result;
var obj = JSON.parse(appliance as string);
console.log(obj);
this.computeService.postAppliance(this.server, obj).subscribe(() => {
this.toasterService.success('Appliance imported.');
});
}
fileReader.readAsText(file);
}
public ngOnDestroy() {
this.drawingsDataSource.clear();
this.nodesDataSource.clear();