From 83558d0d4e43654783326f1cdfdf9eaf952c6a0a Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Mon, 16 Sep 2019 02:35:10 -0700
Subject: [PATCH] Support for frame-relay-switch added

---
 .../config-action/config-action.component.ts  |   3 +-
 .../switch/configurator-switch.component.html | 103 +++++++++---------
 .../switch/configurator-switch.component.ts   |  68 +++++++++++-
 3 files changed, 117 insertions(+), 57 deletions(-)

diff --git a/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts b/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
index b92cad39..47263086 100644
--- a/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
@@ -19,7 +19,8 @@ export class ConfigActionComponent {
   @Input() server: Server;
   @Input() node: Node;
   private conf = {
-    autoFocus: false
+    autoFocus: false,
+    width: '800px'
   };
   dialogRef;
 
diff --git a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html
index 9410a44f..dcdb4b61 100644
--- a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html
+++ b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.html
@@ -4,27 +4,18 @@
     <div class="content">
         <div class="default-content">
             <mat-card>
-                <form [formGroup]="inputForm">
-                    <mat-form-field class="form-field">
-                        <input 
-                            matInput type="text" 
-                            [(ngModel)]="node.name" 
-                            formControlName="name"
-                            placeholder="Name">
-                    </mat-form-field>
-                </form>
-                <table class="table" mat-table [dataSource]="dataSource">
-                    <ng-container matColumnDef="Port: DLCI">
-                        <th mat-header-cell *matHeaderCellDef> Port number </th>
-                        <td mat-cell *matCellDef="let element"> {{element.port_number}} </td>
+                <table *ngIf="nodeMappingsDataSource.length" class="table" mat-table [dataSource]="nodeMappingsDataSource">
+                    <ng-container matColumnDef="portIn">
+                        <th mat-header-cell *matHeaderCellDef> Port : DLCI</th>
+                        <td mat-cell *matCellDef="let element"> {{element.portIn}} </td>
                     </ng-container>
                 
-                    <ng-container matColumnDef="Port: DLCI ">
-                        <th mat-header-cell *matHeaderCellDef> VLAN </th>
-                        <td mat-cell *matCellDef="let element"> {{element.vlan}} </td>
+                    <ng-container matColumnDef="portOut">
+                        <th mat-header-cell *matHeaderCellDef> Port : DLCI </th>
+                        <td mat-cell *matCellDef="let element"> {{element.portOut}} </td>
                     </ng-container>
                 
-                    <ng-container matColumnDef="action">
+                    <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)">
@@ -36,39 +27,51 @@
                     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                 </table><br/>
-                <!-- <mat-form-field class="form-field">
-                    <input 
-                        matInput type="number" 
-                        [(ngModel)]="newPort.port_number" 
-                        placeholder="Port">
-                </mat-form-field>
-                <mat-form-field class="form-field">
-                    <input 
-                        matInput type="number" 
-                        [(ngModel)]="newPort.vlan" 
-                        placeholder="VLAN">
-                </mat-form-field>
-                <mat-form-field class="select">
-                    <mat-select 
-                        placeholder="Type" 
-                        [ngModelOptions]="{standalone: true}" 
-                        [(ngModel)]="newPort.type">
-                        <mat-option *ngFor="let type of portTypes" [value]="type">
-                            {{type}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <mat-form-field class="select">
-                    <mat-select 
-                        placeholder="EtherType" 
-                        [ngModelOptions]="{standalone: true}" 
-                        [(ngModel)]="newPort.ethertype">
-                            <mat-option *ngFor="let type of etherTypes" [value]="type">
-                                {{type}}
-                            </mat-option>
-                    </mat-select>
-                </mat-form-field>
-                <button mat-button class="form-field" (click)="onAdd()">Add</button> -->
+
+                <form [formGroup]="nameForm">
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="text" 
+                            [(ngModel)]="node.name" 
+                            formControlName="name"
+                            placeholder="Name">
+                    </mat-form-field>
+                </form>
+
+                <form [formGroup]="inputForm">
+                    Source
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="number" 
+                            [(ngModel)]="sourcePort" 
+                            formControlName="sourcePort"
+                            placeholder="Port">
+                    </mat-form-field>
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="number" 
+                            [(ngModel)]="sourceDlci" 
+                            formControlName="sourceDlci"
+                            placeholder="DLCI">
+                    </mat-form-field>
+                    Destination
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="number" 
+                            [(ngModel)]="destinationPort" 
+                            formControlName="destinationPort"
+                            placeholder="Port">
+                    </mat-form-field>
+                    <mat-form-field class="form-field">
+                        <input 
+                            matInput type="number" 
+                            [(ngModel)]="destinationDlci" 
+                            formControlName="destinationDlci"
+                            placeholder="DLCI">
+                    </mat-form-field>
+                </form>
+                
+                <button mat-button class="form-field" (click)="add()">Add</button>
             </mat-card>
         </div>
     </div>
diff --git a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts
index 1ead27b8..b6215af3 100644
--- a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts
@@ -10,18 +10,25 @@ import { MatDialogRef } from '@angular/material';
 @Component({
     selector: 'app-configurator-switch',
     templateUrl: './configurator-switch.component.html',
-    styleUrls: ['../configurator.component.scss']
+    styleUrls: ['../configurator.component.scss', '../../../../preferences/preferences.component.scss']
 })
 export class ConfiguratorDialogSwitchComponent implements OnInit {
     server: Server;
     node: Node;
     name: string;
+    nameForm: FormGroup;
     inputForm: FormGroup;
     consoleTypes: string[] = [];
 
     nodeMappings = new Map<string, string>();
+    nodeMappingsDataSource: NodeMapping[] = [];
     dataSource = [];
-    displayedColumns = ['Port: DLCI', 'Port: DLCI ']
+    displayedColumns = ['portIn', 'portOut', 'actions']
+
+    sourcePort: string = '';
+    sourceDlci: string = '';
+    destinationPort: string = '';
+    destinationDlci: string = '';
 
     constructor(
         public dialogRef: MatDialogRef<ConfiguratorDialogSwitchComponent>,
@@ -29,8 +36,15 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
         private toasterService: ToasterService,
         private formBuilder: FormBuilder
     ) {
+        this.nameForm = this.formBuilder.group({
+            name: new FormControl('', Validators.required),
+        });
+
         this.inputForm = this.formBuilder.group({
-            name: new FormControl('', Validators.required)
+            sourcePort: new FormControl('', Validators.required),
+            sourceDlci: new FormControl('', Validators.required),
+            destinationPort: new FormControl('', Validators.required),
+            destinationDlci: new FormControl('', Validators.required),
         });
     }
 
@@ -43,11 +57,43 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
             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) {
-        
+    delete(elem: NodeMapping) {
+        this.nodeMappingsDataSource = this.nodeMappingsDataSource.filter(n => n !== elem);
+    }
+
+    add() {
+        if (this.inputForm.valid) {
+            let nodeMapping: NodeMapping = {
+                portIn: `${this.sourcePort}:${this.sourceDlci}`,
+                portOut: `${this.destinationPort}:${this.destinationDlci}`
+            };
+    
+            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 = '';
+        this.sourceDlci = '';
+        this.destinationPort = '';
+        this.destinationDlci = '';
     }
 
     strMapToObj(strMap) {
@@ -59,7 +105,12 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
     }
 
     onSaveClick() {
-        if (this.inputForm.valid) {
+        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(() => {
@@ -75,3 +126,8 @@ export class ConfiguratorDialogSwitchComponent implements OnInit {
         this.dialogRef.close();
     }
 }
+
+export interface NodeMapping {
+    portIn: string,
+    portOut: string
+}