GUI -- Bug fixing and refactoring app view - WIP.

Change-Id: I23012972ac762a62391289a2200bf0b95e4ed9c3

@@ -7,10 +7,22 @@
                  icon icon-size="36" icon-id="refresh"
                  ng-click="toggleRefresh()"></div>
             <div class="separator"></div>
-            <div id="app-install"    icon icon-size="36" icon-id="plus" class="active"></div>
-            <div id="app-activate"   icon icon-size="36" icon-id="play"></div>
-            <div id="app-deactivate" icon icon-size="36" icon-id="stop"></div>
-            <div id="app-uninstall"  icon icon-size="36" icon-id="garbage"></div>
+            <div id="app-install"
+                 icon icon-size="36" icon-id="plus"
+                 class="active">
+            </div>
+            <div id="app-activate"
+                 icon icon-size="36" icon-id="play"
+                 ng-class="{active: ctrlBtnState.installed}">
+            </div>
+            <div id="app-deactivate"
+                 icon icon-size="36" icon-id="stop"
+                 ng-class="{active: ctrlBtnState.active}">
+            </div>
+            <div id="app-uninstall"
+                 icon icon-size="36" icon-id="garbage"
+                 ng-class="{active: ctrlBtnState.selection}">
+            </div>
         </div>
 
         <form id="app-form" method="POST" action="rs/applications/upload"

@@ -21,23 +21,39 @@
 (function () {
     'use strict';
 
-    var selRow, selection;
+    var selectionObj;
 
     angular.module('ovApp', [])
     .controller('OvAppCtrl',
-        ['$log', '$scope', 'TableBuilderService', 'WebSocketService',
+        ['$log', '$scope', 'FnService', 'TableBuilderService', 'WebSocketService',
+
+    function ($log, $scope, fs, tbs, wss) {
+        $scope.ctrlBtnState = {};
+        // TODO: clean up view
+        // all DOM manipulation (adding styles, getting elements and doing stuff
+        //     with them) should be done in directives
 
-    function ($log, $scope, tbs, wss) {
         function selCb($event, row) {
-            selRow = angular.element($event.currentTarget);
-            selection = row;
+            $scope.ctrlBtnState.selection = !!$scope.selId;
+            selectionObj = row;
             $log.debug('Got a click on:', row);
-            // adjust which toolbar buttons are selected
-            d3.select('#app-activate').classed('active', row && row.state === 'INSTALLED');
-            d3.select('#app-deactivate').classed('active', row && row.state === 'ACTIVE');
-            d3.select('#app-uninstall').classed('active', row);
+
+            if ($scope.ctrlBtnState.selection) {
+                $scope.ctrlBtnState.installed = row.state === 'INSTALLED';
+                $scope.ctrlBtnState.active = row.state === 'ACTIVE';
+            } else {
+                $scope.ctrlBtnState.installed = false;
+                $scope.ctrlBtnState.active = false;
+            }
         }
 
+        tbs.buildTable({
+            scope: $scope,
+            tag: 'app',
+            selCb: selCb
+        });
+
+        // TODO: use d3 click events -- move to directive
         d3.select('#app-install').on('click', function () {
             $log.debug('Initiating install');
             var evt = document.createEvent("HTMLEvents");
@@ -45,18 +61,21 @@
             document.getElementById('file').dispatchEvent(evt);
         });
 
+        // TODO: use d3 to select elements -- move to directive
         document.getElementById('app-form-response').onload = function () {
             document.getElementById('app-form').reset();
-            $scope.refresh();
+            $scope.$apply();
+            //$scope.sortCallback($scope.sortParams);
         };
 
         function appAction(action) {
-            if (selection) {
-                $log.debug('Initiating uninstall of', selection);
-                wss.sendEvent('appManagementRequest', {action: action, name: selection.id});
+            if ($scope.ctrlBtnState.selection) {
+                $log.debug('Initiating ' + action + ' of', selectionObj);
+                wss.sendEvent('appManagementRequest', {action: action, name: selectionObj.id});
             }
         }
 
+        // TODO: use d3 to select elements -- move to directive
         d3.select('#file').on('change', function () {
             var file = document.getElementById('file').value.replace('C:\\fakepath\\', '');
             $log.info('Handling file', file);
@@ -65,16 +84,11 @@
             document.getElementById('app-upload').dispatchEvent(evt);
         });
 
+        // TODO: move to directive
         d3.select('#app-uninstall').on('click', function () { appAction('uninstall'); });
         d3.select('#app-activate').on('click', function () { appAction('activate'); });
         d3.select('#app-deactivate').on('click', function () { appAction('deactivate'); });
 
-        tbs.buildTable({
-            scope: $scope,
-            tag: 'app',
-            selCb: selCb
-        });
-
         $log.log('OvAppCtrl has been created');
     }]);
 }());

@@ -47,6 +47,7 @@
 
     function coordFromLngLat(loc) {
         var p = api.projection();
+        // suspected cause of ONOS-2109
         return p ? p([loc.lng, loc.lat]) : [0, 0];
     }