[ONOS-7989] add sync button on roadm GUI view.

Change-Id: I0f27ac6c9c100f54180c490fc043da65ef1225e0
diff --git a/apps/roadm/src/main/resources/app/view/roadmPort/roadmPort.html b/apps/roadm/src/main/resources/app/view/roadmPort/roadmPort.html
index 57cc441..24c8a20 100644
--- a/apps/roadm/src/main/resources/app/view/roadmPort/roadmPort.html
+++ b/apps/roadm/src/main/resources/app/view/roadmPort/roadmPort.html
@@ -67,7 +67,9 @@
                     <td>{{item.powerRange}}</td>
                     <td>{{item.currentPower}}</td>
                     <td ng-show="showServiceState">{{item.serviceState}}</td>
-                    <td ng-show="showTargetPower" class="editable" roadm-power="item" roadm-set-power="setPortPower(port, targetVal, cb)"></td>
+                    <td ng-show="showTargetPower" class="editable" roadm-power="item"
+                        roadm-set-power="setPortPower(port, targetVal, cb)"
+                        roadm-sync-power="syncPortPower(port, cb)"></td>
                 </tr>
             </table>
             <div class="mode-select" ng-show="showServiceState">
diff --git a/apps/roadm/src/main/resources/app/view/roadmPort/roadmPort.js b/apps/roadm/src/main/resources/app/view/roadmPort/roadmPort.js
index 05f05dd..26951ca 100644
--- a/apps/roadm/src/main/resources/app/view/roadmPort/roadmPort.js
+++ b/apps/roadm/src/main/resources/app/view/roadmPort/roadmPort.js
@@ -4,6 +4,8 @@
 
     var SET_TARGET_POWER_REQ = "roadmSetTargetPowerRequest";
     var SET_TARGET_POWER_RESP = "roadmSetTargetPowerResponse";
+    var SYNC_TARGET_POWER_REQ = "roadmSyncTargetPowerRequest";
+    var SYNC_TARGET_POWER_RESP = "roadmSyncTargetPowerResponse";
     var SHOW_ITEMS_REQ = "roadmShowPortItemsRequest";
     var SHOW_ITEMS_RESP = "roadmShowPortItemsResponse";
     var SET_OPS_MODE_REQ = "roadmSetOpsModeRequest";
@@ -25,6 +27,16 @@
             });
     }
 
+    function syncPortPower(port, cb) {
+        var id = port.id;
+        portCbTable[id] = cb;
+        wss.sendEvent(SYNC_TARGET_POWER_REQ,
+            {
+                devId: $scope.devId,
+                id: port.id
+            });
+    }
+
     function portPowerCb(data) {
         portCbTable[data.id](data.valid, data.message);
     }
@@ -95,6 +107,7 @@
 
             var handlers = {};
             handlers[SET_TARGET_POWER_RESP] = portPowerCb;
+            handlers[SYNC_TARGET_POWER_RESP] = portPowerCb;
             handlers[SHOW_ITEMS_RESP] = showItemsCb;
             handlers[SET_OPS_MODE_RESP] = changeOpsModeCb;
             wss.bindHandlers(handlers);
@@ -111,6 +124,7 @@
             });
 
             $scope.setPortPower = setPortPower;
+            $scope.syncPortPower = syncPortPower;
             $scope.queryShowItems = queryShowItems;
             $scope.changeOpsMode = changeOpsMode;
 
@@ -145,6 +159,7 @@
                 '<input type="number" name="formVal" ng-model="formVal">' +
                 '<button type="submit" ng-click="send()">Set</button>' +
                 '<button type="button" ng-click="cancel()">Cancel</button>' +
+                '<button type="submit" ng-click="sync()">Sync</button>' +
                 '<span class="input-error" ng-show="showError">{{errorMessage}}</span>' +
             '</form>';
 
@@ -152,7 +167,8 @@
             restrict: 'A',
             scope: {
                 currItem: '=roadmPower',
-                roadmSetPower: '&'
+                roadmSetPower: '&',
+                roadmSyncPower: '&'
             },
             template: retTemplate,
             link: function ($scope, $element) {
@@ -183,6 +199,10 @@
                         if ($scope.currItem.id === $scope.targetItem.id) {
                             // update the ui to display the new attenuation value
                             $scope.currItem.targetPower = $scope.formVal;
+                            if (message.startsWith("Synced")) {
+                                var str = message.split(' ');
+                                $scope.currItem.targetPower = str[str.length-1].slice(0, -1);
+                            }
                         }
                         $scope.cancel();
                     } else {
@@ -192,7 +212,7 @@
                     $timeout(function () {
                         $scope.$apply()
                     });
-                }
+                };
                 $scope.send = function() {
                     // check input is an integer
                     if (!isInteger($scope.formVal)) {
@@ -204,6 +224,9 @@
                 $scope.cancel = function() {
                     $scope.editMode = false;
                     $scope.showError = false;
+                };
+                $scope.sync = function() {
+                    $scope.roadmSyncPower({port: $scope.targetItem, cb: $scope.sendCb});
                 }
             }
         };