gerrit.opnfv Code Review - onosfw.git/blob

   1 // js for sample app view
   2 (function () {
   3     'use strict';
   4
   5     // injected refs
   6     var $log, $scope, fs, wss, ps;
   7
   8     // constants
   9     var detailsReq = 'sampleDetailsRequest',
  10         detailsResp = 'sampleDetailsResponse',
  11         pName = 'item-details-panel',
  12
  13         propOrder = ['id', 'label', 'code'],
  14         friendlyProps = ['Item ID', 'Item Label', 'Special Code'];
  15
  16
  17     function addProp(tbody, index, value) {
  18         var tr = tbody.append('tr');
  19
  20         function addCell(cls, txt) {
  21             tr.append('td').attr('class', cls).html(txt);
  22         }
  23         addCell('label', friendlyProps[index] + ' :');
  24         addCell('value', value);
  25     }
  26
  27     function populatePanel(panel) {
  28         var title = panel.append('h3'),
  29             tbody = panel.append('table').append('tbody');
  30
  31         title.text('Item Details');
  32
  33         propOrder.forEach(function (prop, i) {
  34             addProp(tbody, i, $scope.panelDetails[prop]);
  35         });
  36
  37         panel.append('hr');
  38         panel.append('h4').text('Comments');
  39         panel.append('p').text($scope.panelDetails.comment);
  40     }
  41
  42     function respDetailsCb(data) {
  43         $scope.panelDetails = data.details;
  44         $scope.$apply();
  45     }
  46
  47     angular.module('ovSample', [])
  48         .controller('OvSampleCtrl',
  49         ['$log', '$scope', 'TableBuilderService',
  50             'FnService', 'WebSocketService',
  51
  52             function (_$log_, _$scope_, tbs, _fs_, _wss_) {
  53                 $log = _$log_;
  54                 $scope = _$scope_;
  55                 fs = _fs_;
  56                 wss = _wss_;
  57
  58                 var handlers = {};
  59                 $scope.panelDetails = {};
  60
  61                 // details response handler
  62                 handlers[detailsResp] = respDetailsCb;
  63                 wss.bindHandlers(handlers);
  64
  65                 // custom selection callback
  66                 function selCb($event, row) {
  67                     if ($scope.selId) {
  68                         wss.sendEvent(detailsReq, { id: row.id });
  69                     } else {
  70                         $scope.hidePanel();
  71                     }
  72                     $log.debug('Got a click on:', row);
  73                 }
  74
  75                 // TableBuilderService creating a table for us
  76                 tbs.buildTable({
  77                     scope: $scope,
  78                     tag: 'sample',
  79                     selCb: selCb
  80                 });
  81
  82                 // cleanup
  83                 $scope.$on('$destroy', function () {
  84                     wss.unbindHandlers(handlers);
  85                 });
  86
  87                 $log.log('OvSampleCtrl has been created');
  88             }])
  89
  90         .directive('itemDetailsPanel', ['PanelService', 'KeyService',
  91             function (_ps_, ks) {
  92             return {
  93                 restrict: 'E',
  94                 link: function (scope, element, attrs) {
  95                     ps = _ps_;
  96                     // insert details panel with PanelService
  97                     // create the panel
  98                     var panel = ps.createPanel(pName, {
  99                         width: 200,
 100                         margin: 20,
 101                         hideMargin: 0
 102                     });
 103                     panel.hide();
 104                     scope.hidePanel = function () { panel.hide(); };
 105
 106                     function closePanel() {
 107                         if (panel.isVisible()) {
 108                             $scope.selId = null;
 109                             panel.hide();
 110                         }
 111                     }
 112
 113                     // create key bindings to handle panel
 114                     ks.keyBindings({
 115                         esc: [closePanel, 'Close the details panel'],
 116                         _helpFormat: ['esc']
 117                     });
 118                     ks.gestureNotes([
 119                         ['click', 'Select a row to show item details']
 120                     ]);
 121
 122                     // update the panel's contents when the data is changed
 123                     scope.$watch('panelDetails', function () {
 124                         if (!fs.isEmptyObject(scope.panelDetails)) {
 125                             panel.empty();
 126                             populatePanel(panel);
 127                             panel.show();
 128                         }
 129                     });
 130
 131                     // cleanup on destroyed scope
 132                     scope.$on('$destroy', function () {
 133                         ks.unbindKeys();
 134                         ps.destroyPanel(pName);
 135                     });
 136                 }
 137             };
 138         }]);
 139 }());