Connect nodes with links

src/app/app.module.ts

@@ -47,6 +47,7 @@ import { StopNodeActionComponent } from './shared/node-context-menu/actions/stop
 import { ApplianceComponent } from './appliance/appliance.component';
 import { ApplianceListDialogComponent } from './appliance/appliance-list-dialog/appliance-list-dialog.component';
 import { NodeSelectInterfaceComponent } from './shared/node-select-interface/node-select-interface.component';
+import {LinkService} from "./shared/services/link.service";
 
 
 @NgModule({
@@ -95,6 +96,7 @@ import { NodeSelectInterfaceComponent } from './shared/node-select-interface/nod
     ServerService,
     ApplianceService,
     NodeService,
+    LinkService,
     IndexedDbService,
     HttpServer,
     SnapshotService,

src/app/cartography/shared/widgets/drawing-line.widget.ts

@@ -7,11 +7,14 @@ import {event, mouse, select} from "d3-selection";
 export class DrawingLineWidget {
   private drawingLine: DrawingLine = new DrawingLine();
   private selection: SVGSelection;
+  private drawing = false;
+  private data = {};
 
-  public start(x: number, y: number) {
+  public start(x: number, y: number, data: {}) {
     const self = this;
 
-    console.log("Start", x, y);
+    this.drawing = true;
+    this.data = data;
     this.drawingLine.start = new Point(x, y);
     this.drawingLine.end = new Point(x, y);
 
@@ -27,12 +30,15 @@ export class DrawingLineWidget {
     this.draw();
   }
 
-  public update(x: number, y: number) {
-    this.drawingLine.end = new Point(x, y);
+  public isDrawing() {
+    return this.drawing;
   }
 
   public stop() {
-
+    this.drawing = false;
+    this.selection.on('mousemove', null);
+    this.draw();
+    return this.data;
   }
 
   public connect(selection: SVGSelection) {
@@ -44,10 +50,14 @@ export class DrawingLineWidget {
   }
 
   public draw() {
-    const link_data = [[
-      [this.drawingLine.start.x, this.drawingLine.start.y],
-      [this.drawingLine.end.x, this.drawingLine.end.y]
-    ]];
+    let link_data = [];
+
+    if (this.drawing) {
+       link_data = [[
+        [this.drawingLine.start.x, this.drawingLine.start.y],
+        [this.drawingLine.end.x, this.drawingLine.end.y]
+      ]];
+    }
 
     const value_line = line();
 
@@ -66,6 +76,7 @@ export class DrawingLineWidget {
         .attr('d', value_line)
         .attr('stroke', '#000')
         .attr('stroke-width', '2');
-    
+
+    tool.exit().remove();
   }
 }

src/app/project-map/project-map.component.ts

@@ -32,6 +32,7 @@ import {NodeService} from "../shared/services/node.service";
 import {Symbol} from "../shared/models/symbol";
 import {NodeSelectInterfaceComponent} from "../shared/node-select-interface/node-select-interface.component";
 import {Port} from "../shared/models/port";
+import {LinkService} from "../shared/services/link.service";
 
 
 @Component({
@@ -65,6 +66,7 @@ export class ProjectMapComponent implements OnInit {
               private symbolService: SymbolService,
               private snapshotService: SnapshotService,
               private nodeService: NodeService,
+              private linkService: LinkService,
               private dialog: MatDialog,
               private progressDialogService: ProgressDialogService,
               private toastyService: ToastyService) {
@@ -269,8 +271,27 @@ export class ProjectMapComponent implements OnInit {
   public onChooseInterface(event) {
     const node: Node = event.node;
     const port: Port = event.port;
+    const drawingLineTool = this.mapChild.graphLayout.getDrawingLineTool();
+    if (drawingLineTool.isDrawing()) {
+      const data = drawingLineTool.stop();
+      this.onLineCreation(data['node'], data['port'], node, port);
+    } else {
+      drawingLineTool.start(node.x + node.width / 2., node.y + node.height / 2., {
+        'node': node,
+        'port': port
+      });
+    }
+  }
 
-    this.mapChild.graphLayout.getDrawingLineTool().start(node.x + node.width / 2., node.y + node.height / 2.);
+  public onLineCreation(source_node: Node, source_port: Port, target_node: Node, target_port: Port) {
+    this.linkService
+      .createLink(this.server, source_node, source_port, target_node, target_port)
+      .subscribe(() => {
+        this.projectService.links(this.server, this.project.project_id).subscribe((links: Link[]) => {
+          this.links = links;
+          this.mapChild.reload();
+        });
+      });
   }
 
 }

src/app/shared/services/link.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { LinkService } from './link.service';
+
+describe('LinkService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [LinkService]
+    });
+  });
+
+  it('should be created', inject([LinkService], (service: LinkService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/shared/services/link.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { Node } from '../../cartography/shared/models/node.model';
+import { Observable } from 'rxjs/Observable';
+
+import 'rxjs/add/operator/map';
+import { Server } from "../models/server";
+import { HttpServer } from "./http-server.service";
+import {Response} from "@angular/http";
+import {Port} from "../models/port";
+
+@Injectable()
+export class LinkService {
+
+
+  constructor(private httpServer: HttpServer) { }
+
+  createLink(
+    server: Server, source_node: Node, source_port: Port, target_node: Node, target_port: Port): Observable<Response> {
+    return this.httpServer
+                .post(
+                  server,
+                  `/projects/${source_node.project_id}/links`,
+                  {"nodes": [
+                    {
+                      node_id: source_node.node_id,
+                      port_number: source_port.port_number,
+                      adapter_number: source_port.adapter_number
+                    },
+                    {
+                      node_id: target_node.node_id,
+                      port_number: target_port.port_number,
+                      adapter_number: target_port.adapter_number
+                    }
+                  ]});
+  }
+
+}