Support for ATM switch added

src/app/app.module.ts

@@ -222,6 +222,7 @@ import { CustomAdaptersTableComponent } from './components/preferences/common/cu
 import { ConfiguratorDialogQemuComponent } from './components/project-map/node-editors/configurator/qemu/configurator-qemu.component';
 import { ConfiguratorDialogCloudComponent } from './components/project-map/node-editors/configurator/cloud/configurator-cloud.component';
 import { UdpTunnelsComponent } from './components/preferences/common/udp-tunnels/udp-tunnels.component';
+import { ConfiguratorDialogAtmSwitchComponent } from './components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -371,7 +372,8 @@ if (environment.production) {
     CustomAdaptersTableComponent,
     ConfiguratorDialogQemuComponent,
     ConfiguratorDialogCloudComponent,
-    UdpTunnelsComponent
+    UdpTunnelsComponent,
+    ConfiguratorDialogAtmSwitchComponent
   ],
   imports: [
     BrowserModule,
@@ -478,7 +480,8 @@ if (environment.production) {
     ConfiguratorDialogSwitchComponent,
     ConfiguratorDialogVirtualBoxComponent,
     ConfiguratorDialogQemuComponent,
-    ConfiguratorDialogCloudComponent
+    ConfiguratorDialogCloudComponent,
+    ConfiguratorDialogAtmSwitchComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts

@@ -9,6 +9,7 @@ import { ConfiguratorDialogSwitchComponent } from '../../../node-editors/configu
 import { ConfiguratorDialogVirtualBoxComponent } from '../../../node-editors/configurator/virtualbox/configurator-virtualbox.component';
 import { ConfiguratorDialogQemuComponent } from '../../../node-editors/configurator/qemu/configurator-qemu.component';
 import { ConfiguratorDialogCloudComponent } from '../../../node-editors/configurator/cloud/configurator-cloud.component';
+import { ConfiguratorDialogAtmSwitchComponent } from '../../../node-editors/configurator/atm_switch/configurator-atm-switch.component';
 
 
 @Component({
@@ -50,9 +51,9 @@ export class ConfigActionComponent {
     } else if (this.node.node_type === 'nat') {
 
     } else if (this.node.node_type === 'frame_relay_switch') {
-      this.dialogRef = this.dialog.open(ConfiguratorDialogSwitchComponent, this.conf); // to do
+      this.dialogRef = this.dialog.open(ConfiguratorDialogSwitchComponent, this.conf);
     } else if (this.node.node_type === 'atm_switch') {
-      this.dialogRef = this.dialog.open(ConfiguratorDialogSwitchComponent, this.conf); // to do
+      this.dialogRef = this.dialog.open(ConfiguratorDialogAtmSwitchComponent, this.conf);
     } else if (this.node.node_type === 'traceng') {
 
     }

src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.html

@@ -0,0 +1,109 @@
+<h1 mat-dialog-title>Configurator for node {{name}}</h1>
+
+<div class="modal-form-container">
+    <div class="content">
+        <div class="default-content">
+            <mat-card>
+                <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
+                    <ng-container matColumnDef="portIn">
+                        <th mat-header-cell *matHeaderCellDef> Port : VPI : VCI </th>
+                        <td mat-cell *matCellDef="let element"> {{element.portIn}} </td>
+                    </ng-container>
+                
+                    <ng-container matColumnDef="portOut">
+                        <th mat-header-cell *matHeaderCellDef> Port : VPI : VCI </th>
+                        <td mat-cell *matCellDef="let element"> {{element.portOut}} </td>
+                    </ng-container>
+                
+                    <ng-container matColumnDef="actions">
+                        <th mat-header-cell *matHeaderCellDef> Actions </th>
+                        <td mat-cell *matCellDef="let element">
+                            <button mat-icon-button matTooltip="Delete port" (click)="delete(element)">
+                                <mat-icon aria-label="Delete port">delete</mat-icon>
+                            </button>
+                        </td>
+                    </ng-container>
+                    
+                    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+                </table><br/>
+
+                <form [formGroup]="nameForm">
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="text" 
+                            [(ngModel)]="node.name" 
+                            formControlName="name"
+                            placeholder="Name">
+                    </mat-form-field>
+                </form>
+
+                <mat-checkbox [(ngModel)]="useVpiOnly">
+                    Use VPI only (VP tunnel)
+                </mat-checkbox>
+
+                <form [formGroup]="inputForm">
+                    Source
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="number" 
+                            [(ngModel)]="sourcePort" 
+                            formControlName="sourcePort"
+                            placeholder="Port">
+                    </mat-form-field>
+                </form>
+                <form [formGroup]="abstractForm">
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="number" 
+                            [(ngModel)]="sourceVpi" 
+                            formControlName="sourceVpi"
+                            placeholder="VPI">
+                    </mat-form-field>
+                </form>
+                <form [formGroup]="inputForm">
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="number" 
+                            [(ngModel)]="sourceVci" 
+                            formControlName="sourceVci"
+                            placeholder="VCI">
+                    </mat-form-field>
+                    Destination
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="number" 
+                            [(ngModel)]="destinationPort" 
+                            formControlName="destinationPort"
+                            placeholder="Port">
+                    </mat-form-field>
+                </form>
+                <form [formGroup]="abstractForm">
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="number" 
+                            [(ngModel)]="destinationVpi" 
+                            formControlName="destinationVpi"
+                            placeholder="VPI">
+                    </mat-form-field>
+                </form>
+                <form [formGroup]="inputForm">
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="number" 
+                            [(ngModel)]="destinationVci" 
+                            formControlName="destinationVci"
+                            placeholder="VCI">
+                    </mat-form-field>
+                </form>
+                
+                <button mat-button class="form-field" (click)="add()">Add</button>
+            </mat-card>
+        </div>
+    </div>
+</div>
+
+<div mat-dialog-actions>
+  <button mat-button (click)="onCancelClick()" color="accent">Cancel</button>
+  <button mat-button (click)="onSaveClick()" tabindex="2" mat-raised-button color="primary">Apply</button>
+</div>

src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.ts

@@ -0,0 +1,164 @@
+import { Component, OnInit, Input } from "@angular/core";
+import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { Node } from '../../../../../cartography/models/node';
+import { Server } from '../../../../../models/server';
+import { NodeService } from '../../../../../services/node.service';
+import { ToasterService } from '../../../../../services/toaster.service';
+import { MatDialogRef } from '@angular/material';
+
+
+@Component({
+    selector: 'app-configurator-atm-switch',
+    templateUrl: './configurator-atm-switch.component.html',
+    styleUrls: ['../configurator.component.scss', '../../../../preferences/preferences.component.scss']
+})
+export class ConfiguratorDialogAtmSwitchComponent implements OnInit {
+    server: Server;
+    node: Node;
+    name: string;
+    nameForm: FormGroup;
+    inputForm: FormGroup;
+    abstractForm: FormGroup;
+    consoleTypes: string[] = [];
+
+    nodeMappings = new Map<string, string>();
+    nodeMappingsDataSource: NodeMapping[] = [];
+    dataSource = [];
+    displayedColumns = ['portIn', 'portOut', 'actions']
+
+    sourcePort: string = '';
+    sourceVpi: string = '';
+    sourceVci: string = '';
+    destinationPort: string = '';
+    destinationVpi: string = '';
+    destinationVci: string = '';
+
+    useVpiOnly: boolean = false;
+
+    constructor(
+        public dialogRef: MatDialogRef<ConfiguratorDialogAtmSwitchComponent>,
+        public nodeService: NodeService,
+        private toasterService: ToasterService,
+        private formBuilder: FormBuilder
+    ) {
+        this.nameForm = this.formBuilder.group({
+            name: new FormControl('', Validators.required),
+        });
+
+        this.inputForm = this.formBuilder.group({
+            sourcePort: new FormControl('', Validators.required),
+            sourceVci: new FormControl('', Validators.required),
+            destinationPort: new FormControl('', Validators.required),
+            destinationVci: new FormControl('', Validators.required),
+        });
+
+        this.abstractForm = this.formBuilder.group({
+            sourceVpi: new FormControl('', Validators.required),
+            destinationVpi: new FormControl('', Validators.required)
+        });
+    }
+
+    ngOnInit() {
+        this.nodeService.getNode(this.server, this.node).subscribe((node: Node) => {
+            this.node = node;
+            this.name = node.name;
+
+            let mappings = node.properties.mappings;
+            Object.keys(mappings).forEach(key => {
+                this.nodeMappings.set(key, mappings[key]);
+            });
+
+            this.nodeMappings.forEach((value: string, key: string) => {
+                this.nodeMappingsDataSource.push({
+                    portIn: key,
+                    portOut: value
+                });
+            });
+        });
+    }
+
+    delete(elem: NodeMapping) {
+        this.nodeMappingsDataSource = this.nodeMappingsDataSource.filter(n => n !== elem);
+    }
+
+    add() {
+        if (this.inputForm.valid) {
+            let nodeMapping: NodeMapping;
+            if (!this.useVpiOnly) {
+                if (this.abstractForm.valid) {
+                    nodeMapping = {
+                        portIn: `${this.sourcePort}:${this.sourceVpi}:${this.sourceVci}`,
+                        portOut: `${this.destinationPort}:${this.destinationVpi}:${this.destinationVci}`
+                    };
+
+                    if (this.nodeMappingsDataSource.filter(n => n.portIn === nodeMapping.portIn).length > 0) {
+                        this.toasterService.error('Mapping already defined.');
+                    } else {
+                        this.nodeMappingsDataSource = this.nodeMappingsDataSource.concat([nodeMapping]);
+                        this.clearUserInput();
+                    }
+                } else {
+                    this.toasterService.error('Fill all required fields.');
+                }
+            } else {
+                nodeMapping = {
+                    portIn: `${this.sourcePort}:${this.sourceVci}`,
+                    portOut: `${this.destinationPort}:${this.destinationVci}`
+                };
+
+                if (this.nodeMappingsDataSource.filter(n => n.portIn === nodeMapping.portIn).length > 0) {
+                    this.toasterService.error('Mapping already defined.');
+                } else {
+                    this.nodeMappingsDataSource = this.nodeMappingsDataSource.concat([nodeMapping]);
+                    this.clearUserInput();
+                }
+            }
+        } else {
+            this.toasterService.error('Fill all required fields.');
+        }
+    }
+
+    clearUserInput() {
+        this.sourcePort = '0';
+        this.sourceVpi = '0';
+        this.sourceVci = '0';
+        this.destinationPort = '0';
+        this.destinationVpi = '0';
+        this.sourceVci = '0';
+    }
+
+    strMapToObj(strMap) {
+        let obj = Object.create(null);
+        for (let [k,v] of strMap) {
+          obj[k] = v;
+        }
+        return obj;
+    }
+
+    onSaveClick() {
+        if (this.nameForm.valid) {
+            this.nodeMappings.clear();
+            this.nodeMappingsDataSource.forEach(elem => {
+                this.nodeMappings.set(elem.portIn, elem.portOut);
+            });
+
+            this.node.properties.mappings = Array.from(this.nodeMappings).reduce((obj, [key, value]) => (Object.assign(obj, { [key]: value })), {});
+
+            this.nodeService.updateNode(this.server, this.node).subscribe(() => {
+                this.toasterService.success(`Node ${this.node.name} updated.`);
+                this.onCancelClick();
+            });
+        } else {
+            this.toasterService.error(`Fill all required fields.`);
+        }
+    }
+
+    onCancelClick() {
+        this.dialogRef.close();
+    }
+}
+
+export interface NodeMapping {
+    portIn: string,
+    portOut: string
+}

src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts

@@ -90,10 +90,10 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
     }
 
     clearUserInput() {
-        this.sourcePort = '';
+        this.sourcePort = '0';
-        this.sourceDlci = '';
+        this.sourceDlci = '0';
-        this.destinationPort = '';
+        this.destinationPort = '0';
-        this.destinationDlci = '';
+        this.destinationDlci = '0';
     }
 
     strMapToObj(strMap) {