홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
68844bae 1 parent 70aacc4e

ONOS-2422 - GUI -- Sample client side code for maven archetypes updated. 

Change-Id: I3ce65ab83b24cd04498913cf1fabf8eabb67ba14
Inline Side-by-side
Showing 4 changed files with 125 additions and 38 deletions
1 /* css for sample app view */ 1 /* css for sample app view */
2 2
3 -#ov-sample p { 3 +#ov-sample h2 {
4 - margin: 0 30px; 4 + display: inline-block;
5 - padding: 10px;
6 - border: 2px solid;
7 } 5 }
8 6
9 -.light #ov-sample p { 7 +/* Panel Styling */
10 - color: darkblue; 8 +#item-details-panel.floatpanel {
11 - border-color: #88c; 9 + position: absolute;
10 + top: 115px;
12 } 11 }
13 -.dark #ov-sample p { 12 +
14 - color: #aac; 13 +.light #item-details-panel.floatpanel {
15 - border-color: #448; 14 + background-color: rgb(229, 234, 237);
15 +}
16 +.dark #item-details-panel.floatpanel {
17 + background-color: #3A4042;
18 +}
19 +
20 +#item-details-panel h3 {
21 + margin: 0;
22 + font-size: large;
23 +}
24 +
25 +#item-details-panel h4 {
26 + margin: 0;
27 +}
28 +
29 +#item-details-panel td {
30 + padding: 5px;
31 +}
32 +#item-details-panel td.label {
33 + font-style: italic;
34 + opacity: 0.8;
16 } 35 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -15,9 +15,9 @@ ...@@ -15,9 +15,9 @@
15 <div class="table-header" onos-sortable-header> 15 <div class="table-header" onos-sortable-header>
16 <table> 16 <table>
17 <tr> 17 <tr>
18 - <td colId="id" sortable> Item ID </td> 18 + <td colId="id" sortable>Item ID </td>
19 - <td colId="label" sortable> Label </td> 19 + <td colId="label" sortable>Label </td>
20 - <td colId="code" sortable> Code </td> 20 + <td colId="code" sortable>Code </td>
21 </tr> 21 </tr>
22 </table> 22 </table>
23 </div> 23 </div>
......
...@@ -3,27 +3,44 @@ ...@@ -3,27 +3,44 @@
3 'use strict'; 3 'use strict';
4 4
5 // injected refs 5 // injected refs
6 - var $log, $scope, fs, mast, ps, wss; 6 + var $log, $scope, fs, wss, ps;
7 -
8 - // internal state
9 - var selRow,
10 - detailsPanel,
11 - pStartY, pHeight,
12 - wSize;
13 7
14 // constants 8 // constants
15 - var topPadding = 20, 9 + var detailsReq = 'sampleDetailsRequest',
16 -
17 - detailsReq = 'sampleDetailsRequest',
18 detailsResp = 'sampleDetailsResponse', 10 detailsResp = 'sampleDetailsResponse',
19 pName = 'item-details-panel', 11 pName = 'item-details-panel',
20 12
21 - propOrder = [ 'id', 'label', 'code'], 13 + propOrder = ['id', 'label', 'code'],
22 - friendlyProps = [ 'Item ID', 'Item Label', 'Special 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');
23 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 + }
24 41
25 function respDetailsCb(data) { 42 function respDetailsCb(data) {
26 - $scope.panelData = data.details; 43 + $scope.panelDetails = data.details;
27 $scope.$apply(); 44 $scope.$apply();
28 } 45 }
29 46
...@@ -39,34 +56,84 @@ ...@@ -39,34 +56,84 @@
39 wss = _wss_; 56 wss = _wss_;
40 57
41 var handlers = {}; 58 var handlers = {};
59 + $scope.panelDetails = {};
42 60
43 - $scope.panelData = []; 61 + // details response handler
62 + handlers[detailsResp] = respDetailsCb;
63 + wss.bindHandlers(handlers);
44 64
65 + // custom selection callback
45 function selCb($event, row) { 66 function selCb($event, row) {
46 - selRow = angular.element($event.currentTarget);
47 if ($scope.selId) { 67 if ($scope.selId) {
48 wss.sendEvent(detailsReq, { id: row.id }); 68 wss.sendEvent(detailsReq, { id: row.id });
49 } else { 69 } else {
50 - $log.debug('need to hide details panel'); 70 + $scope.hidePanel();
51 - //detailsPanel.hide()
52 } 71 }
53 $log.debug('Got a click on:', row); 72 $log.debug('Got a click on:', row);
54 } 73 }
55 74
75 + // TableBuilderService creating a table for us
56 tbs.buildTable({ 76 tbs.buildTable({
57 scope: $scope, 77 scope: $scope,
58 tag: 'sample', 78 tag: 'sample',
59 selCb: selCb 79 selCb: selCb
60 }); 80 });
61 81
62 - // details response handler 82 + // cleanup
63 - handlers[detailsResp] = respDetailsCb;
64 - wss.bindHandlers(handlers);
65 -
66 $scope.$on('$destroy', function () { 83 $scope.$on('$destroy', function () {
67 - wss.unbindHandlerse(handlers); 84 + wss.unbindHandlers(handlers);
68 }); 85 });
69 86
70 $log.log('OvSampleCtrl has been created'); 87 $log.log('OvSampleCtrl has been created');
71 - }]); 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 + }]);
72 }()); 139 }());
......
...@@ -185,6 +185,7 @@ ...@@ -185,6 +185,7 @@
185 position: 'absolute', 185 position: 'absolute',
186 top: pStartY + 'px' 186 top: pStartY + 'px'
187 }); 187 });
188 + $scope.hidePanel = function () { detailsPanel.hide(); };
188 detailsPanel.hide(); 189 detailsPanel.hide();
189 } 190 }
190 191
...@@ -207,7 +208,7 @@ ...@@ -207,7 +208,7 @@
207 ns = _ns_; 208 ns = _ns_;
208 var params = $location.search(), 209 var params = $location.search(),
209 handlers = {}; 210 handlers = {};
210 - $scope.panelData = []; 211 + $scope.panelData = {};
211 $scope.flowTip = 'Show flow view for selected device'; 212 $scope.flowTip = 'Show flow view for selected device';
212 $scope.portTip = 'Show port view for selected device'; 213 $scope.portTip = 'Show port view for selected device';
213 $scope.groupTip = 'Show group view for selected device'; 214 $scope.groupTip = 'Show group view for selected device';
...@@ -226,7 +227,7 @@ ...@@ -226,7 +227,7 @@
226 if ($scope.selId) { 227 if ($scope.selId) {
227 wss.sendEvent(detailsReq, { id: row.id }); 228 wss.sendEvent(detailsReq, { id: row.id });
228 } else { 229 } else {
229 - detailsPanel.hide(); 230 + $scope.hidePanel();
230 } 231 }
231 $log.debug('Got a click on:', row); 232 $log.debug('Got a click on:', row);
232 } 233 }
......