Refreshing list of templates

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();
         });

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<any>();
@@ -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();
+  }
 }

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<Template> = new Subject<Template>();
+
   constructor(private httpServer: HttpServer) {}
 
   list(server: Server): Observable<Template[]> {