Skeleton implementation of TableDetailService, to house common code for creating detail panels for table item selection.

Change-Id: I547f74a2e42699e4242cb8616f0edf3076019e88

web/gui/src/main/webapp/app/fw/widget/tableDetail.js

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2017-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Widget -- Table Detail Panel Service
+ */
+(function () {
+    'use strict';
+
+    // injected refs
+    var $log, $interval, $timeout, fs, wss;
+
+    // constants
+    // var refreshInterval = 2000;
+
+    function noop() {}
+
+    // TODO: describe the input object for the main function
+    // example params to (functionX):
+    // {
+    //    ...
+    // }
+    function buildBasePanel(opts) {
+        var popTopF = fs.isF(opts.popTop) || noop,
+            popMidF = fs.isF(opts.popMid) || noop,
+            popBotF = fs.isF(opts.popBot) || noop;
+
+        $log.debug('options are', opts);
+
+        // TODO use panel service to create base panel
+
+        // TODO: create divs, and pass into invocations of popTopF(div), etc.
+    }
+
+    // more functions
+
+    // TODO: add ref to PanelService
+    angular.module('onosWidget')
+    .factory('TableDetailService',
+    ['$log', '$interval', '$timeout', 'FnService', 'WebSocketService',
+
+    function (_$log_, _$interval_, _$timeout_, _fs_, _wss_) {
+        $log = _$log_;
+        $interval = _$interval_;
+        $timeout = _$timeout_;
+        fs = _fs_;
+        wss = _wss_;
+
+        return {
+            buildBasePanel: buildBasePanel
+        };
+    }]);
+}());

web/gui/src/main/webapp/app/view/device/device.js

@@ -258,14 +258,29 @@
         detailsPanel.hide();
     }
 
+    // Sample functions for detail panel creation
+    function popTop(div) {
+        $log.debug('populateTop');
+        // TODO: real work
+        // div.append(.....);
+        // div.append(.....);
+        // div.append(.....);
+    }
+
+    function popMid(div) {
+        $log.debug('populateMiddle');
+        // TODO: real work
+    }
+
     angular.module('ovDevice', [])
     .controller('OvDeviceCtrl',
-        ['$log', '$scope', '$location', 'TableBuilderService', 'FnService',
+        ['$log', '$scope', '$location', 'TableBuilderService',
+            'TableDetailService', 'FnService',
             'MastService', 'PanelService', 'WebSocketService', 'IconService',
             'NavService', 'KeyService',
 
         function (_$log_, _$scope_, _$location_,
-                  tbs, _fs_, _mast_, _ps_, _wss_, _is_, _ns_, _ks_) {
+                  tbs, tds, _fs_, _mast_, _ps_, _wss_, _is_, _ns_, _ks_) {
             var params,
                 handlers = {};
 
@@ -314,6 +329,16 @@
                 selCb: selCb
             });
 
+
+            // ==================== for testing for now ===============
+            // TODO: more than just an example
+            tds.buildBasePanel({
+                popTop: popTop,
+                popMid: popMid
+            });
+            // ==================== for testing for now ===============
+
+
             $scope.nav = function (path) {
                 if ($scope.selId) {
                     ns.navTo(path, { devId: $scope.selId });

web/gui/src/main/webapp/index.html

@@ -81,6 +81,7 @@
     <script src="app/fw/widget/toolbar.js"></script>
     <script src="app/fw/widget/tooltip.js"></script>
     <script src="app/fw/widget/button.js"></script>
+    <script src="app/fw/widget/tableDetail.js"></script>
     <script src="app/fw/widget/tableBuilder.js"></script>
     <script src="app/fw/widget/chartBuilder.js"></script>
     <script src="app/fw/widget/listBuilder.js"></script>