From 01d49a7321b5a37415198e29f8c901e7a400cc01 Mon Sep 17 00:00:00 2001 From: piotrpekala7 <31202938+piotrpekala7@users.noreply.github.com> Date: Mon, 20 Apr 2020 15:21:34 +0200 Subject: [PATCH] Initial implementation of drag & drop to add new node --- .../template/template.component.html | 44 ++++++++++++++- .../template/template.component.scss | 41 ++++++++++++++ .../components/template/template.component.ts | 55 ++++++++++++++++++- 3 files changed, 136 insertions(+), 4 deletions(-) diff --git a/src/app/components/template/template.component.html b/src/app/components/template/template.component.html index a5b2a19b..081810cb 100644 --- a/src/app/components/template/template.component.html +++ b/src/app/components/template/template.component.html @@ -1 +1,43 @@ - + + + + + + + + + + + + {{type}} + + + + + + diff --git a/src/app/components/template/template.component.scss b/src/app/components/template/template.component.scss index e69de29b..2f2aa2ab 100644 --- a/src/app/components/template/template.component.scss +++ b/src/app/components/template/template.component.scss @@ -0,0 +1,41 @@ +// ::ng-deep .menu { +// scrollbar-color: darkgrey #263238!important; +// scrollbar-width: thin!important; +// } + +.menu { + height: 200px; + overflow-y: scroll; + scrollbar-color: darkgrey #263238; + scrollbar-width: thin; +} + +::-webkit-scrollbar { + width: 0.5em; +} + +::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); +} + +::-webkit-scrollbar-thumb { + background-color: darkgrey; + outline: 1px solid #263238; +} + +.form-field { + width: 90%; + margin-left: 5%; + margin-right: 5%; +} + +.image { + width: 65px; + height: 65px; + filter: invert(0); + --webkit-filter: invert(0)!important; +} + +.templateIcon { + height: 80px!important; +} diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts index 3814b1a2..2e152e1e 100644 --- a/src/app/components/template/template.component.ts +++ b/src/app/components/template/template.component.ts @@ -5,6 +5,8 @@ import { TemplateListDialogComponent, NodeAddedEvent } from './template-list-dia import { Server } from '../../models/server'; import { Template } from '../../models/template'; import { Project } from '../../models/project'; +import { TemplateService } from '../../services/template.service'; +import { MapScaleService } from '../../services/mapScale.service'; @Component({ selector: 'app-template', @@ -16,11 +18,54 @@ export class TemplateComponent implements OnInit { @Input() project: Project; @Output() onNodeCreation = new EventEmitter(); - constructor(private dialog: MatDialog) {} + templates: Template[] = []; + filteredTemplates: Template[] = []; + searchText: string = ''; + templateTypes: string[] = ['all', 'cloud', 'ethernet_hub', 'ethernet_switch', 'docker', 'dynamips', 'vpcs', 'traceng', 'virtualbox', 'vmware', 'iou', 'qemu']; + selectedType: string; - ngOnInit() {} + constructor( + private dialog: MatDialog, + private templateService: TemplateService, + private scaleService: MapScaleService + ) {} - listTemplatesModal() { + ngOnInit() { + this.templateService.list(this.server).subscribe((listOfTemplates: Template[]) => { + this.filteredTemplates = listOfTemplates; + this.templates = listOfTemplates; + }); + } + + filterTemplates(event) { + let temporaryTemplates = this.templates.filter(item => { + return item.name.toLowerCase().includes(this.searchText.toLowerCase()); + }); + + if (this.selectedType === 'all') { + this.filteredTemplates = temporaryTemplates; + } else { + this.filteredTemplates = temporaryTemplates.filter(t => t.template_type === this.selectedType); + } + } + + dragEnd(ev, template) { + console.log('Element was dragged', ev); + console.log('Template', template); + console.log((event as MouseEvent).clientX, (event as MouseEvent).clientY); + + let scale = this.scaleService.getScale(); + let nodeAddedEvent: NodeAddedEvent = { + template: template, + server: 'local', + numberOfNodes: 1, + x: ((event as MouseEvent).clientX - this.project.scene_width/2 + window.scrollX) * scale, //template.width + y: ((event as MouseEvent).clientY - this.project.scene_height/2 + window.scrollY) * scale + }; + this.onNodeCreation.emit(nodeAddedEvent); + } + + openDialog() { const dialogRef = this.dialog.open(TemplateListDialogComponent, { width: '600px', data: { @@ -37,4 +82,8 @@ export class TemplateComponent implements OnInit { } }); } + + getImageSourceForTemplate(template: Template) { + return `http://${this.server.host}:${this.server.port}/v2${template.symbol.substring(1)}/raw`; + } }