Adding Modulation to UI

Change-Id: I651dc44dd8f784962f4bc74bcbf246441a236707
diff --git a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.html b/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.html
index 812bfed..79e2fb5 100644
--- a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.html
+++ b/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.html
@@ -70,6 +70,7 @@
                     <td colId="minFreq">Min Freq (GHz)</td>
                     <td colId="maxFreq">Max Freq (GHz)</td>
                     <td colId="grid">Grid (GHz)</td>
+                    <td colId="modulation">Modulation</td>
                     <td colId="powerRange">Power Range (dBm)</td>
                     <td colId="currentPower">Current Power (dBm)</td>
                     <td colId="targetPower">Target Power (dBm)</td>
@@ -94,6 +95,15 @@
                     <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.type=='OCH'?port.minFreq:""}}</td>
                     <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.type=='OCH'?port.maxFreq:""}}</td>
                     <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.type=='OCH'?port.grid:""}}</td>
+                    <td [ngClass]="(isDelta() ? 'delta' : '')">
+                        <form [formGroup]="modulationForm" (ngSubmit)="submitModulation(devId, port.id)" *ngIf="port.type=='OCH'">
+                            <select [(ngModel)]="port.modulation" formControlName="newModulation">
+                                <option value="dp_qpsk">qpsk</option>
+                                <option value="dp_16qam">16qam</option>
+                            </select>
+                            <button type="submit">Submit</button>
+                        </form>
+                    </td>
                     <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.powerRange}}</td>
                     <td [ngClass]="(isDelta() ? 'delta' : '')">{{port.currentPower}}</td>
                     <td [ngClass]="(isDelta() ? 'delta' : '')">
diff --git a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts b/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts
index d1a2a21..869c256 100644
--- a/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts
+++ b/apps/roadm/web/roadm-gui/projects/roadm-gui-lib/src/lib/port/port.component.ts
@@ -47,6 +47,7 @@
     powerRange: string;
     currentPower: string;
     targetPower: string;
+    modulation: string;
     hasTargetPower: string;
     serviceState: string;
 }
@@ -78,8 +79,10 @@
     toggleState: FilterToggleState;
 
     powerForm: FormGroup;
+    modulationForm: FormGroup;
     SET_POWER_REQ = 'roadmSetTargetPowerRequest';
     SET_POWER_RESP = 'roadmSetTargetPowerResponse';
+    SET_MODULATION = 'roadmSetModulationRequest';
 
     restorePrefsConfig; // Function
 
@@ -128,7 +131,10 @@
         this.powerForm = new FormGroup({
             newPower: new FormControl(''),
         });
-        this.log.debug('Create Form');
+        this.modulationForm = new FormGroup({
+            newModulation: new FormControl(''),
+        });
+        this.log.debug('Create Forms');
     }
 
     ngOnDestroy() {
@@ -207,6 +213,15 @@
         });
     }
 
+    submitModulation(devId, port) {
+        this.log.debug('Set Modulation of port ', port, 'in device ', devId, 'as value ', this.modulationForm.value['newModulation']);
+        this.wss.sendEvent(this.SET_MODULATION, {
+            'modulation': this.modulationForm.value['newModulation'],
+            'devId': devId,
+            'id': port,
+        });
+    }
+
     powerConfigCb(data) {
         if (!data.valid) {
             const info = 'The power config operation is failed. The reason is: \n' + data.message;