홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
5c2cab98 1 parent 23b5a763

GUI -- TableService can take a div, config object, and data object in order to p… 

…rogrammatically render and load data into a table. Test functions added.

Change-Id: I585cee8331612be984ca7ead2829525af7f3d3e5
Inline Side-by-side
Showing 4 changed files with 155 additions and 252 deletions
...@@ -31,6 +31,8 @@ ...@@ -31,6 +31,8 @@
31 <script type="text/javascript" src="../tp/jquery-2.1.1.min.js"></script> 31 <script type="text/javascript" src="../tp/jquery-2.1.1.min.js"></script>
32 32
33 <script type="text/javascript" src="practice-table.js"></script> 33 <script type="text/javascript" src="practice-table.js"></script>
34 + <script type="text/javascript" src="../app/fw/widget/widget.js"></script>
35 + <script type="text/javascript" src="../app/fw/widget/table.js"></script>
34 36
35 <style> 37 <style>
36 html, 38 html,
...@@ -44,241 +46,13 @@ ...@@ -44,241 +46,13 @@
44 color: darkred; 46 color: darkred;
45 } 47 }
46 48
47 - table {
48 - height: 200px;
49 - }
50 -
51 </style> 49 </style>
52 50
53 </head> 51 </head>
54 <!-- outline for using a controller in Angular --> 52 <!-- outline for using a controller in Angular -->
55 <body ng-app="practiceTable"> 53 <body ng-app="practiceTable">
56 <h2>Scrolling Table Practice</h2> 54 <h2>Scrolling Table Practice</h2>
57 - <div> 55 + <div id="tableDiv" ng-controller="showTableCtrl as ctrl">
58 - <table table-height="200px" fixed-header>
59 - <thead>
60 - <tr>
61 - <th>URI</th>
62 - <th>Vendor</th>
63 - <th>Hardware Version</th>
64 - <th>Software Version</th>
65 - <th>Serial Number</th>
66 - <th>Protocol</th>
67 - </tr>
68 - </thead>
69 - <tbody>
70 - <tr>
71 - <td>id</td>
72 - <td>mfr</td>
73 - <td>hw</td>
74 - <td>sw</td>
75 - <td>serial#101291031813</td>
76 - <td>protocol protocol protocol protocol protocol protocol</td>
77 - </tr>
78 - <tr>
79 - <td>id</td>
80 - <td>mfr</td>
81 - <td>hw</td>
82 - <td>sw</td>
83 - <td>serial</td>
84 - <td>protocol</td>
85 - </tr>
86 - <tr>
87 - <td>id</td>
88 - <td>mfr</td>
89 - <td>hw</td>
90 - <td>sw</td>
91 - <td>serial</td>
92 - <td>protocol</td>
93 - </tr>
94 - <tr>
95 - <td>id</td>
96 - <td>mfr</td>
97 - <td>hw</td>
98 - <td>sw</td>
99 - <td>serial</td>
100 - <td>protocol</td>
101 - </tr><tr>
102 - <td>id</td>
103 - <td>mfr</td>
104 - <td>hw</td>
105 - <td>sw</td>
106 - <td>serial#101291031813</td>
107 - <td>protocol protocol protocol protocol protocol protocol</td>
108 - </tr>
109 - <tr>
110 - <td>id</td>
111 - <td>mfr</td>
112 - <td>hw</td>
113 - <td>sw</td>
114 - <td>serial</td>
115 - <td>protocol</td>
116 - </tr>
117 - <tr>
118 - <td>id</td>
119 - <td>mfr</td>
120 - <td>hw</td>
121 - <td>sw</td>
122 - <td>serial</td>
123 - <td>protocol</td>
124 - </tr>
125 - <tr>
126 - <td>id</td>
127 - <td>mfr</td>
128 - <td>hw</td>
129 - <td>sw</td>
130 - <td>serial</td>
131 - <td>protocol</td>
132 - </tr><tr>
133 - <td>id</td>
134 - <td>mfr</td>
135 - <td>hw</td>
136 - <td>sw</td>
137 - <td>serial#101291031813</td>
138 - <td>protocol protocol protocol protocol protocol protocol</td>
139 - </tr>
140 - <tr>
141 - <td>id</td>
142 - <td>mfr</td>
143 - <td>hw</td>
144 - <td>sw</td>
145 - <td>serial</td>
146 - <td>protocol</td>
147 - </tr>
148 - <tr>
149 - <td>id</td>
150 - <td>mfr</td>
151 - <td>hw</td>
152 - <td>sw</td>
153 - <td>serial</td>
154 - <td>protocol</td>
155 - </tr>
156 - <tr>
157 - <td>id</td>
158 - <td>mfr</td>
159 - <td>hw</td>
160 - <td>sw</td>
161 - <td>serial</td>
162 - <td>protocol</td>
163 - </tr><tr>
164 - <td>id</td>
165 - <td>mfr</td>
166 - <td>hw</td>
167 - <td>sw</td>
168 - <td>serial#101291031813</td>
169 - <td>protocol protocol protocol protocol protocol protocol</td>
170 - </tr>
171 - <tr>
172 - <td>id</td>
173 - <td>mfr</td>
174 - <td>hw</td>
175 - <td>sw</td>
176 - <td>serial</td>
177 - <td>protocol</td>
178 - </tr>
179 - <tr>
180 - <td>id</td>
181 - <td>mfr</td>
182 - <td>hw</td>
183 - <td>sw</td>
184 - <td>serial</td>
185 - <td>protocol</td>
186 - </tr>
187 - <tr>
188 - <td>id</td>
189 - <td>mfr</td>
190 - <td>hw</td>
191 - <td>sw</td>
192 - <td>serial</td>
193 - <td>protocol</td>
194 - </tr><tr>
195 - <td>id</td>
196 - <td>mfr</td>
197 - <td>hw</td>
198 - <td>sw</td>
199 - <td>serial#101291031813</td>
200 - <td>protocol protocol protocol protocol protocol protocol</td>
201 - </tr>
202 - <tr>
203 - <td>id</td>
204 - <td>mfr</td>
205 - <td>hw</td>
206 - <td>sw</td>
207 - <td>serial</td>
208 - <td>protocol</td>
209 - </tr>
210 - <tr>
211 - <td>id</td>
212 - <td>mfr</td>
213 - <td>hw</td>
214 - <td>sw</td>
215 - <td>serial</td>
216 - <td>protocol</td>
217 - </tr>
218 - <tr>
219 - <td>id</td>
220 - <td>mfr</td>
221 - <td>hw</td>
222 - <td>sw</td>
223 - <td>serial</td>
224 - <td>protocol</td>
225 - </tr><tr>
226 - <td>id</td>
227 - <td>mfr</td>
228 - <td>hw</td>
229 - <td>sw</td>
230 - <td>serial</td>
231 - <td>protocol</td>
232 - </tr>
233 - <tr>
234 - <td>id</td>
235 - <td>mfr</td>
236 - <td>hw</td>
237 - <td>sw</td>
238 - <td>serial</td>
239 - <td>protocol</td>
240 - </tr>
241 - <tr>
242 - <td>id</td>
243 - <td>mfr</td>
244 - <td>hw</td>
245 - <td>sw</td>
246 - <td>serial</td>
247 - <td>protocol</td>
248 - </tr><tr>
249 - <td>id</td>
250 - <td>mfr</td>
251 - <td>hw</td>
252 - <td>sw</td>
253 - <td>serial#101291031813</td>
254 - <td>protocol protocol protocol protocol protocol protocol</td>
255 - </tr>
256 - <tr>
257 - <td>id</td>
258 - <td>mfr</td>
259 - <td>hw</td>
260 - <td>sw</td>
261 - <td>serial</td>
262 - <td>protocol</td>
263 - </tr>
264 - <tr>
265 - <td>id</td>
266 - <td>mfr</td>
267 - <td>hw</td>
268 - <td>sw</td>
269 - <td>serial</td>
270 - <td>protocol</td>
271 - </tr>
272 - <tr>
273 - <td>id</td>
274 - <td>mfr</td>
275 - <td>hw</td>
276 - <td>sw</td>
277 - <td>serial</td>
278 - <td>protocol</td>
279 - </tr>
280 - </tbody>
281 - </table>
282 </div> 56 </div>
283 57
284 </body> 58 </body>
......
...@@ -23,8 +23,8 @@ ...@@ -23,8 +23,8 @@
23 23
24 var config = { 24 var config = {
25 colIds: ['_iconid_available', 'id', 'mfr', 'hw', 'sw', 'serial', 25 colIds: ['_iconid_available', 'id', 'mfr', 'hw', 'sw', 'serial',
26 - 'annotations.protocol'], 26 + 'annotations'],
27 - colText: ['', 'URI', 'Vendor', 'Hardware Version', 'Software Version', 27 + colText: ['Availability', 'URI', 'Vendor', 'Hardware Version', 'Software Version',
28 'Serial Number', 'Protocol'] 28 'Serial Number', 'Protocol']
29 }, 29 },
30 deviceData = { 30 deviceData = {
...@@ -39,8 +39,8 @@ ...@@ -39,8 +39,8 @@
39 "serial": "None", 39 "serial": "None",
40 "annotations": { 40 "annotations": {
41 "protocol": "OF_10" 41 "protocol": "OF_10"
42 - } 42 + }
43 - }, 43 + },
44 { 44 {
45 "id": "of:0000000000000004", 45 "id": "of:0000000000000004",
46 "available": false, 46 "available": false,
...@@ -66,6 +66,136 @@ ...@@ -66,6 +66,136 @@
66 "annotations": { 66 "annotations": {
67 "protocol": "OF_10" 67 "protocol": "OF_10"
68 } 68 }
69 + },
70 + {
71 + "id": "of:0000000000000092",
72 + "available": false,
73 + "_iconid_available": "deviceOffline",
74 + "role": "MASTER",
75 + "mfr": "Nicira, Inc.",
76 + "hw": "Open vSwitch",
77 + "sw": "2.0.1",
78 + "serial": "None",
79 + "annotations": {
80 + "protocol": "OF_10"
81 + }
82 + },
83 + {
84 + "id": "of:0000000000000092",
85 + "available": false,
86 + "_iconid_available": "deviceOffline",
87 + "role": "MASTER",
88 + "mfr": "Nicira, Inc.",
89 + "hw": "Open vSwitch",
90 + "sw": "2.0.1",
91 + "serial": "None",
92 + "annotations": {
93 + "protocol": "OF_10"
94 + }
95 + },
96 + {
97 + "id": "of:0000000000000092",
98 + "available": false,
99 + "_iconid_available": "deviceOffline",
100 + "role": "MASTER",
101 + "mfr": "Nicira, Inc.",
102 + "hw": "Open vSwitch",
103 + "sw": "2.0.1",
104 + "serial": "None",
105 + "annotations": {
106 + "protocol": "OF_10"
107 + }
108 + },
109 + {
110 + "id": "of:0000000000000092",
111 + "available": false,
112 + "_iconid_available": "deviceOffline",
113 + "role": "MASTER",
114 + "mfr": "Nicira, Inc.",
115 + "hw": "Open vSwitch",
116 + "sw": "2.0.1",
117 + "serial": "None",
118 + "annotations": {
119 + "protocol": "OF_10"
120 + }
121 + },
122 + {
123 + "id": "of:0000000000000092",
124 + "available": false,
125 + "_iconid_available": "deviceOffline",
126 + "role": "MASTER",
127 + "mfr": "Nicira, Inc.",
128 + "hw": "Open vSwitch",
129 + "sw": "2.0.1",
130 + "serial": "None",
131 + "annotations": {
132 + "protocol": "OF_10"
133 + }
134 + },
135 + {
136 + "id": "of:0000000000000092",
137 + "available": false,
138 + "_iconid_available": "deviceOffline",
139 + "role": "MASTER",
140 + "mfr": "Nicira, Inc.",
141 + "hw": "Open vSwitch",
142 + "sw": "2.0.1",
143 + "serial": "None",
144 + "annotations": {
145 + "protocol": "OF_10"
146 + }
147 + },
148 + {
149 + "id": "of:0000000000000092",
150 + "available": false,
151 + "_iconid_available": "deviceOffline",
152 + "role": "MASTER",
153 + "mfr": "Nicira, Inc.",
154 + "hw": "Open vSwitch",
155 + "sw": "2.0.1",
156 + "serial": "None",
157 + "annotations": {
158 + "protocol": "OF_10"
159 + }
160 + },
161 + {
162 + "id": "of:0000000000000092",
163 + "available": false,
164 + "_iconid_available": "deviceOffline",
165 + "role": "MASTER",
166 + "mfr": "Nicira, Inc.",
167 + "hw": "Open vSwitch",
168 + "sw": "2.0.1",
169 + "serial": "None",
170 + "annotations": {
171 + "protocol": "OF_10"
172 + }
173 + },
174 + {
175 + "id": "of:0000000000000092",
176 + "available": false,
177 + "_iconid_available": "deviceOffline",
178 + "role": "MASTER",
179 + "mfr": "Nicira, Inc.",
180 + "hw": "Open vSwitch",
181 + "sw": "2.0.1",
182 + "serial": "None",
183 + "annotations": {
184 + "protocol": "OF_10"
185 + }
186 + },
187 + {
188 + "id": "of:0000000000000092",
189 + "available": false,
190 + "_iconid_available": "deviceOffline",
191 + "role": "MASTER",
192 + "mfr": "Nicira, Inc.",
193 + "hw": "Open vSwitch",
194 + "sw": "2.0.1",
195 + "serial": "None",
196 + "annotations": {
197 + "protocol": "OF_10"
198 + }
69 }] 199 }]
70 }; 200 };
71 201
...@@ -90,7 +220,7 @@ ...@@ -90,7 +220,7 @@
90 function setCSS(thead, tbody, height) { 220 function setCSS(thead, tbody, height) {
91 thead.style('display', 'block'); 221 thead.style('display', 'block');
92 tbody.style({'display': 'block', 222 tbody.style({'display': 'block',
93 - 'height': height || '500px', 223 + 'height': height || '100px',
94 'overflow': 'auto' 224 'overflow': 'auto'
95 }); 225 });
96 } 226 }
...@@ -100,7 +230,12 @@ ...@@ -100,7 +230,12 @@
100 setCSS(th, tb, height); 230 setCSS(th, tb, height);
101 } 231 }
102 232
103 - angular.module('practiceTable', []) 233 + angular.module('practiceTable', ['onosWidget'])
234 +
235 + .controller('showTableCtrl', ['$log', 'TableService',
236 + function ($log, ts) {
237 + ts.renderAndLoadTable(d3.select('#tableDiv'), config, deviceData);
238 + }])
104 239
105 .directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) { 240 .directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) {
106 return { 241 return {
...@@ -113,6 +248,7 @@ ...@@ -113,6 +248,7 @@
113 var table = d3.select(element[0]), 248 var table = d3.select(element[0]),
114 thead = table.select('thead'), 249 thead = table.select('thead'),
115 tbody = table.select('tbody'); 250 tbody = table.select('tbody');
251 + $log.log('in directive function');
116 252
117 // wait until the table is visible 253 // wait until the table is visible
118 scope.$watch( 254 scope.$watch(
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 var $log; 23 var $log;
24 24
25 function renderTable(div, config) { 25 function renderTable(div, config) {
26 - var table = div.append('table').attr('fixed-header', true), 26 + var table = div.append('table').attr('fixed-header', ''),
27 thead, tr, numTableCols, i; 27 thead, tr, numTableCols, i;
28 table.append('thead'); 28 table.append('thead');
29 table.append('tbody'); 29 table.append('tbody');
...@@ -50,23 +50,17 @@ ...@@ -50,23 +50,17 @@
50 // let me know if you have suggestions for this function 50 // let me know if you have suggestions for this function
51 51
52 var numTableCols = colIds.length, 52 var numTableCols = colIds.length,
53 - tbody, tr, td, i; 53 + tbody, tr, i;
54 tbody = div.select('tbody'); 54 tbody = div.select('tbody');
55 55
56 // get the array associated with the first object, such as "devices" 56 // get the array associated with the first object, such as "devices"
57 - // in fakeData 57 + // loop through every object in the array, and every colId in config
58 - // (for some reason it doesn't like the data.keys() function, saying 58 + // put the appropriate property in the td of the table
59 - // "undefined is not a function"
60 - // Object.keys(data) works though)
61 - // loop through every object in the array, and every property in the object
62 - // put their property in the td of the table
63 (data[Object.keys(data)[0]]).forEach(function (item) { 59 (data[Object.keys(data)[0]]).forEach(function (item) {
64 tr = tbody.append('tr'); 60 tr = tbody.append('tr');
65 - for(var key in item) { 61 + for(i = 0; i < numTableCols; i += 1) {
66 - for(i = 0; i < numTableCols; i += 1) { 62 + if(item.hasOwnProperty(colIds[i])) {
67 - if(key === colIds[i]) { 63 + tr.append('td').html(item[colIds[i]]);
68 - td = tr.append('td').html(item[key]);
69 - }
70 } 64 }
71 } 65 }
72 }); 66 });
......
...@@ -37,8 +37,8 @@ describe('factory: fw/widget/table.js', function() { ...@@ -37,8 +37,8 @@ describe('factory: fw/widget/table.js', function() {
37 "serial": "None", 37 "serial": "None",
38 "annotations": { 38 "annotations": {
39 "protocol": "OF_10" 39 "protocol": "OF_10"
40 - } 40 + }
41 - }, 41 + },
42 { 42 {
43 "id": "of:0000000000000004", 43 "id": "of:0000000000000004",
44 "available": false, 44 "available": false,
...@@ -79,7 +79,6 @@ describe('factory: fw/widget/table.js', function() { ...@@ -79,7 +79,6 @@ describe('factory: fw/widget/table.js', function() {
79 d3.select('#myDiv').remove(); 79 d3.select('#myDiv').remove();
80 }); 80 });
81 81
82 -
83 it('should define TableService', function () { 82 it('should define TableService', function () {
84 expect(ts).toBeDefined(); 83 expect(ts).toBeDefined();
85 }); 84 });
...@@ -88,7 +87,7 @@ describe('factory: fw/widget/table.js', function() { ...@@ -88,7 +87,7 @@ describe('factory: fw/widget/table.js', function() {
88 var table = div.select('table'), 87 var table = div.select('table'),
89 tableHeaders; 88 tableHeaders;
90 expect(table).toBeTruthy(); 89 expect(table).toBeTruthy();
91 - expect(table.attr('fixed-header')).toBeTruthy(); 90 + expect(table.attr('fixed-header')).toBeFalsy();
92 expect(table.select('thead')).toBeTruthy(); 91 expect(table.select('thead')).toBeTruthy();
93 expect(table.select('tbody')).toBeTruthy(); 92 expect(table.select('tbody')).toBeTruthy();
94 93
......