diff --git a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts index c4c5c321..44a85519 100644 --- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts +++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts @@ -19,6 +19,8 @@ import { IosTemplate } from '../../../models/templates/ios-template'; import { IosService } from '../../../services/ios.service'; import { IouService } from '../../../services/iou.service'; import { IouTemplate } from '../../../models/templates/iou-template'; +import { TemplateService } from '../../../services/template.service'; +import { Template } from '../../../models/template'; @Component({ selector: 'app-new-template-dialog', @@ -73,6 +75,7 @@ export class NewTemplateDialogComponent implements OnInit { private dockerService: DockerService, private iosService: IosService, private iouService: IouService, + private templateService: TemplateService, public dialog: MatDialog ) {} @@ -274,7 +277,8 @@ export class NewTemplateDialogComponent implements OnInit { iouTemplate.path = image.filename; iouTemplate.template_type = 'iou'; - this.iouService.addTemplate(this.server, iouTemplate).subscribe(() => { + this.iouService.addTemplate(this.server, iouTemplate).subscribe((template) => { + this.templateService.newTemplateCreated.next(template); this.toasterService.success('Template added'); this.dialogRef.close(); }); @@ -305,7 +309,8 @@ export class NewTemplateDialogComponent implements OnInit { iosTemplate.image = image.filename; iosTemplate.template_type = 'dynamips'; - this.iosService.addTemplate(this.server, iosTemplate).subscribe(() => { + this.iosService.addTemplate(this.server, iosTemplate).subscribe((template) => { + this.templateService.newTemplateCreated.next(template as any as Template); this.toasterService.success('Template added'); this.dialogRef.close(); }); @@ -325,7 +330,8 @@ export class NewTemplateDialogComponent implements OnInit { dockerTemplate.image = this.applianceToInstall.docker.image; dockerTemplate.template_type = 'docker'; - this.dockerService.addTemplate(this.server, dockerTemplate).subscribe(() => { + this.dockerService.addTemplate(this.server, dockerTemplate).subscribe((template) => { + this.templateService.newTemplateCreated.next(template as any as Template); this.toasterService.success('Template added'); this.dialogRef.close(); }); @@ -355,7 +361,8 @@ export class NewTemplateDialogComponent implements OnInit { qemuTemplate.hda_disk_image = image.filename; qemuTemplate.template_type = 'qemu'; - this.qemuService.addTemplate(this.server, qemuTemplate).subscribe(() => { + this.qemuService.addTemplate(this.server, qemuTemplate).subscribe((template) => { + this.templateService.newTemplateCreated.next(template as any as Template); this.toasterService.success('Template added'); this.dialogRef.close(); }); diff --git a/src/app/components/template/template.component.ts b/src/app/components/template/template.component.ts index 5eba22ac..0ee5fe02 100644 --- a/src/app/components/template/template.component.ts +++ b/src/app/components/template/template.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output, OnDestroy } from '@angular/core'; import { MatDialog } from '@angular/material'; import { TemplateListDialogComponent, NodeAddedEvent } from './template-list-dialog/template-list-dialog.component'; @@ -8,13 +8,14 @@ import { Project } from '../../models/project'; import { TemplateService } from '../../services/template.service'; import { MapScaleService } from '../../services/mapScale.service'; import { SymbolService } from '../../services/symbol.service'; +import { Subscription } from 'rxjs'; @Component({ selector: 'app-template', templateUrl: './template.component.html', styleUrls: ['./template.component.scss'] }) -export class TemplateComponent implements OnInit { +export class TemplateComponent implements OnInit, OnDestroy { @Input() server: Server; @Input() project: Project; @Output() onNodeCreation = new EventEmitter(); @@ -31,6 +32,8 @@ export class TemplateComponent implements OnInit { startX: number; startY: number; + private subscription: Subscription; + constructor( private dialog: MatDialog, private templateService: TemplateService, @@ -39,6 +42,10 @@ export class TemplateComponent implements OnInit { ) {} ngOnInit() { + this.subscription = this.templateService.newTemplateCreated.subscribe((template: Template) => { + this.templates.push(template); + }); + this.templateService.list(this.server).subscribe((listOfTemplates: Template[]) => { this.filteredTemplates = listOfTemplates; this.templates = listOfTemplates; @@ -105,4 +112,8 @@ export class TemplateComponent implements OnInit { getImageSourceForTemplate(template: Template) { return `http://${this.server.host}:${this.server.port}/v2/symbols/${template.symbol}/raw`; } + + ngOnDestroy() { + this.subscription.unsubscribe(); + } } diff --git a/src/app/services/template.service.ts b/src/app/services/template.service.ts index 3c5b32e9..c4b2e4a3 100644 --- a/src/app/services/template.service.ts +++ b/src/app/services/template.service.ts @@ -4,11 +4,13 @@ import 'rxjs/add/operator/map'; import { Server } from '../models/server'; import { HttpServer } from './http-server.service'; import { Template } from '../models/template'; -import { Observable } from 'rxjs'; +import { Observable, Subject } from 'rxjs'; import { QemuTemplate } from '../models/templates/qemu-template'; @Injectable() export class TemplateService { + public newTemplateCreated: Subject