GUI -- TableService can take a div, config object, and data object in order to programmatically render and load data into a table. Test functions added.
Change-Id: I95f82108d7bb4f84a701b49e0e419afbdbac6f14
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index 833c42c..bd20b9c 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -22,12 +22,68 @@
var $log;
+ function renderTable(div, config) {
+ var table = div.append('table').attr('fixed-header', true),
+ thead, tr, numTableCols, i;
+ table.append('thead');
+ table.append('tbody');
+
+ thead = table.select('thead');
+ tr = thead.append('tr');
+ numTableCols = config.colIds.length;
+
+ for(i = 0; i < numTableCols; i += 1) {
+ tr.append('th').html(config.colText[i]);
+ }
+
+ return config.colIds;
+ }
+
+ // I can delete these comments later...
+ // loadTableData needs to know which IDs are used to create the table...
+ // Potentially, there will be some rows in the JSON that the server is
+ // sending back that will be unused. We don't want to create unneeded rows.
+ // For example, in device view, we aren't displaying "role" or
+ // "available" properties, but they would be displayed if we took it
+ // directly from the data being sent in.
+ function loadTableData(data, div, colIds) {
+ // let me know if you have suggestions for this function
+
+ var numTableCols = colIds.length,
+ tbody, tr, td, 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
+ (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]);
+ }
+ }
+ }
+ });
+ }
+
+ function renderAndLoadTable(div, config, data) {
+ loadTableData(data, div, (renderTable(div, config)));
+ }
+
angular.module('onosWidget')
.factory('TableService', ['$log', function (_$log_) {
$log = _$log_;
return {
-
+ renderTable: renderTable,
+ loadTableData: loadTableData,
+ renderAndLoadTable: renderAndLoadTable
};
}]);