홍길동 / 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 @@
<script type="text/javascript" src="../tp/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="practice-table.js"></script>
<script type="text/javascript" src="../app/fw/widget/widget.js"></script>
<script type="text/javascript" src="../app/fw/widget/table.js"></script>
<style>
html,
......@@ -44,241 +46,13 @@
color: darkred;
}
table {
height: 200px;
}
</style>
</head>
<!-- outline for using a controller in Angular -->
<body ng-app="practiceTable">
<h2>Scrolling Table Practice</h2>
<div>
<table table-height="200px" fixed-header>
<thead>
<tr>
<th>URI</th>
<th>Vendor</th>
<th>Hardware Version</th>
<th>Software Version</th>
<th>Serial Number</th>
<th>Protocol</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr><tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial#101291031813</td>
<td>protocol protocol protocol protocol protocol protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
<tr>
<td>id</td>
<td>mfr</td>
<td>hw</td>
<td>sw</td>
<td>serial</td>
<td>protocol</td>
</tr>
</tbody>
</table>
<div id="tableDiv" ng-controller="showTableCtrl as ctrl">
</div>
</body>
......
......@@ -23,8 +23,8 @@
var config = {
colIds: ['_iconid_available', 'id', 'mfr', 'hw', 'sw', 'serial',
'annotations.protocol'],
colText: ['', 'URI', 'Vendor', 'Hardware Version', 'Software Version',
'annotations'],
colText: ['Availability', 'URI', 'Vendor', 'Hardware Version', 'Software Version',
'Serial Number', 'Protocol']
},
deviceData = {
......@@ -39,8 +39,8 @@
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
}
},
{
"id": "of:0000000000000004",
"available": false,
......@@ -66,6 +66,136 @@
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000092",
"available": false,
"_iconid_available": "deviceOffline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000092",
"available": false,
"_iconid_available": "deviceOffline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000092",
"available": false,
"_iconid_available": "deviceOffline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000092",
"available": false,
"_iconid_available": "deviceOffline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000092",
"available": false,
"_iconid_available": "deviceOffline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000092",
"available": false,
"_iconid_available": "deviceOffline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000092",
"available": false,
"_iconid_available": "deviceOffline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000092",
"available": false,
"_iconid_available": "deviceOffline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000092",
"available": false,
"_iconid_available": "deviceOffline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000092",
"available": false,
"_iconid_available": "deviceOffline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
}]
};
......@@ -90,7 +220,7 @@
function setCSS(thead, tbody, height) {
thead.style('display', 'block');
tbody.style({'display': 'block',
'height': height || '500px',
'height': height || '100px',
'overflow': 'auto'
});
}
......@@ -100,7 +230,12 @@
setCSS(th, tb, height);
}
angular.module('practiceTable', [])
angular.module('practiceTable', ['onosWidget'])
.controller('showTableCtrl', ['$log', 'TableService',
function ($log, ts) {
ts.renderAndLoadTable(d3.select('#tableDiv'), config, deviceData);
}])
.directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) {
return {
......@@ -113,6 +248,7 @@
var table = d3.select(element[0]),
thead = table.select('thead'),
tbody = table.select('tbody');
$log.log('in directive function');
// wait until the table is visible
scope.$watch(
......
......@@ -23,7 +23,7 @@
var $log;
function renderTable(div, config) {
var table = div.append('table').attr('fixed-header', true),
var table = div.append('table').attr('fixed-header', ''),
thead, tr, numTableCols, i;
table.append('thead');
table.append('tbody');
......@@ -50,23 +50,17 @@
// let me know if you have suggestions for this function
var numTableCols = colIds.length,
tbody, tr, td, i;
tbody, tr, i;
tbody = div.select('tbody');
// get the array associated with the first object, such as "devices"
// in fakeData
// (for some reason it doesn't like the data.keys() function, saying
// "undefined is not a function"
// Object.keys(data) works though)
// loop through every object in the array, and every property in the object
// put their property in the td of the table
// loop through every object in the array, and every colId in config
// put the appropriate property in the td of the table
(data[Object.keys(data)[0]]).forEach(function (item) {
tr = tbody.append('tr');
for(var key in item) {
for(i = 0; i < numTableCols; i += 1) {
if(key === colIds[i]) {
td = tr.append('td').html(item[key]);
}
for(i = 0; i < numTableCols; i += 1) {
if(item.hasOwnProperty(colIds[i])) {
tr.append('td').html(item[colIds[i]]);
}
}
});
......
......@@ -37,8 +37,8 @@ describe('factory: fw/widget/table.js', function() {
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
}
},
{
"id": "of:0000000000000004",
"available": false,
......@@ -79,7 +79,6 @@ describe('factory: fw/widget/table.js', function() {
d3.select('#myDiv').remove();
});
it('should define TableService', function () {
expect(ts).toBeDefined();
});
......@@ -88,7 +87,7 @@ describe('factory: fw/widget/table.js', function() {
var table = div.select('table'),
tableHeaders;
expect(table).toBeTruthy();
expect(table.attr('fixed-header')).toBeTruthy();
expect(table.attr('fixed-header')).toBeFalsy();
expect(table.select('thead')).toBeTruthy();
expect(table.select('tbody')).toBeTruthy();
......