GUI -- Playing with application actions; converted to table builder; added selCB support.

Change-Id: I4fee554eadf443b09a786ce00eb5c63821eccca0

@@ -53,7 +53,7 @@ public class ApplicationViewMessageHandler extends AbstractTabularViewMessageHan
         Arrays.sort(rows, rc);
         ArrayNode applications = generateArrayNode(rows);
         ObjectNode rootNode = mapper.createObjectNode();
-        rootNode.set("applications", applications);
+        rootNode.set("apps", applications);
 
         connection().sendMessage("appDataResponse", 0, rootNode);
     }

@@ -80,6 +80,11 @@ table.summary-list th:last-child {
     color: #ccc;
 }
 
+/* rows are selectable */
+table.summary-list td {
+    cursor: pointer;
+}
+
 .dark table.summary-list td {
     color: #ccc;
 }

@@ -54,7 +54,7 @@ svg.embeddedIcon g.icon .glyph {
 /* color schemes for specific icon classes */
 
 svg.embeddedIcon .icon.appInactive .glyph {
-    fill: rgba(166, 166, 166, 0.52);
+    fill: none;
 }
 
 .light svg.embeddedIcon .icon.appActive .glyph {

@@ -34,7 +34,8 @@
         var handlers = {},
             root = o.tag + 's',
             req = o.tag + 'DataRequest',
-            resp = o.tag + 'DataResponse';
+            resp = o.tag + 'DataResponse',
+            onSel = fs.isF(o.selCb);
 
         o.self.tableData = [];
 
@@ -48,6 +49,13 @@
         }
         o.scope.sortCallback = sortCb;
 
+        function selCb(sel) {
+            o.scope.sel = (o.scope.sel === sel) ? null : sel;
+            onSel && onSel(o.scope.sel);
+        }
+        o.scope.selectCallback = selCb;
+
+
         handlers[resp] = respCb;
         wss.bindHandlers(handlers);
 

@@ -37,21 +37,25 @@ div.ctrl-btns div {
     cursor: pointer;
 }
 
-.light div.ctrl-btns div svg.embeddedIcon g.icon use {
-    fill: white;
+.light .ctrl-btns g.icon use {
+    fill: #fff;
 }
-.dark div.ctrl-btns div svg.embeddedIcon g.icon use {
+.dark .ctrl-btns g.icon use {
     fill: #333;
 }
 
-.light div.ctrl-btns div svg.embeddedIcon g.icon rect {
-    fill: #dde;
+.light .ctrl-btns g.icon rect {
+    fill: #bbb;
 }
-.dark div.ctrl-btns div svg.embeddedIcon g.icon rect {
-    fill: #556;
+.dark .ctrl-btns g.icon rect {
+    fill: #444;
 }
 
-/* rows are selectable */
-table.summary-list td {
-    cursor: pointer;
+/* Inactive */
+.light .ctrl-btns .disabled g.icon rect {
+    fill: #eee;
+}
+.dark .ctrl-btns .disabled g.icon rect {
+    fill: #111;
 }
+

 <!-- app partial HTML -->
 <div id="ov-app">
     <div>
-        <h2>Applications ({{ctrl.appData.length}} total)</h2>
+        <h2>Applications ({{ctrl.tableData.length}} total)</h2>
         <div class="ctrl-btns">
             <div icon icon-size="36" icon-id="appPlus"></div>
-            <div icon icon-size="36" icon-id="appMinus"></div>
-            <div icon icon-size="36" icon-id="appPlay"></div>
-            <div icon icon-size="36" icon-id="appStop"></div>
+            <div icon icon-size="36" icon-id="appMinus" class="disabled"></div>
+            <div icon icon-size="36" icon-id="appPlay" class="disabled"></div>
+            <div icon icon-size="36" icon-id="appStop" class="disabled"></div>
         </div>
     </div>
     <table class="summary-list"
@@ -24,9 +24,9 @@
         </thead>
 
         <tbody>
-        <tr ng-repeat="app in ctrl.appData"
-            ng-click="setSelected(app.id)"
-            ng-class="{selected: app.id === selectedAppId}"
+        <tr ng-repeat="app in ctrl.tableData"
+            ng-click="selectCallback(app)"
+            ng-class="{selected: app === sel}"
             ng-repeat-done>
             <td class="table-icon">
                 <div icon icon-id="{{app._iconid_state}}"></div>

@@ -23,38 +23,21 @@
 
     angular.module('ovApp', [])
     .controller('OvAppCtrl',
-        ['$log', '$scope', 'FnService', 'WebSocketService',
-
-        function ($log, $scope, fs, wss) {
-            var self = this;
-            self.appData = [];
-
-            $scope.responseCallback = function(data) {
-                self.appData = data.applications;
-                $scope.$apply();
-            };
-
-            $scope.sortCallback = function (requestParams) {
-                wss.sendEvent('appDataRequest', requestParams);
-            };
-
-            $scope.selectedAppId = null;
-            $scope.setSelected = function (appId) {
-                $scope.selectedAppId = appId;
-            };
-
-            var handlers = {
-                appDataResponse: $scope.responseCallback
-            };
-            wss.bindHandlers(handlers);
-
-            // Cleanup on destroyed scope
-            $scope.$on('$destroy', function () {
-                wss.unbindHandlers(handlers);
-            });
-
-            $scope.sortCallback();
-
-            $log.log('OvAppCtrl has been created');
-        }]);
+        ['$log', '$scope', 'TableBuilderService',
+
+    function ($log, $scope, tbs) {
+        function selCb(row) {
+            // adjust which toolbar buttons are selected
+            $log.debug('Got a click on:', row);
+        }
+
+        tbs.buildTable({
+            self: this,
+            scope: $scope,
+            tag: 'app',
+            selCb: selCb
+        });
+
+        $log.log('OvAppCtrl has been created');
+    }]);
 }());