Bri Prebilic Cole

GUI -- Cleaned up directives - onos-sortable-header and icon no longer use isola…

…te scope. Icon directive moved to icon.js. Deleted unneeded TableService.

Change-Id: I53970176b9ca021d1aa7d844ccd961cbf6ac6b51
......@@ -59,25 +59,5 @@
});
}
};
}])
// create icon directive, so that we can inject icons into
// HTML tables etc.
.directive('icon', ['IconService', function (is) {
return {
restrict: 'A',
scope: {
iconId: '@',
iconSize: '@'
},
link: function (scope, element, attrs) {
attrs.$observe('iconId', function () {
var div = d3.select(element[0]);
div.selectAll('*').remove();
is.loadEmbeddedIcon(div, scope.iconId, scope.iconSize);
});
}
};
}]);
}());
......
......@@ -227,6 +227,19 @@
// === DEFINE THE MODULE
angular.module('onosSvg')
.directive('icon', ['IconService', function (is) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
attrs.$observe('iconId', function () {
var div = d3.select(element[0]);
div.selectAll('*').remove();
is.loadEmbeddedIcon(div, attrs.iconId, attrs.iconSize);
});
}
};
}])
.factory('IconService', ['$log', 'FnService', 'GlyphService',
'SvgUtilService',
......
......@@ -189,44 +189,26 @@
.directive('onosSortableHeader', ['$log', 'IconService',
function (_$log_, _is_) {
return {
scope: {
sortCallback: '&',
sortParams: '='
},
link: function (scope, element) {
$log = _$log_;
is = _is_;
var header = d3.select(element[0]);
sortIconAPI = is.sortIcons();
// when a header is clicked, change its sort direction
// and get sorting order to send to the server.
header.selectAll('td').on('click', function () {
var col = d3.select(this);
if (col.attr('sortable') === '') {
updateSortDirection(col);
scope.$apply(function () {
scope.sortParams = sortRequestParams();
});
scope.sortCallback({
requestParams: scope.sortParams
});
}
});
}
};
}])
.factory('TableService', ['IconService',
function (is) {
sortIconAPI = is.sortIcons();
return function (scope, element) {
$log = _$log_;
is = _is_;
var header = d3.select(element[0]);
sortIconAPI = is.sortIcons();
header.selectAll('td').on('click', function () {
var col = d3.select(this);
if (col.attr('sortable') === '') {
updateSortDirection(col);
scope.sortParams = sortRequestParams();
scope.sortCallback(scope.sortParams);
}
});
return {
resetSort: resetSort
};
scope.$on('$destroy', function () {
resetSort();
});
}
}]);
}());
......
......@@ -21,7 +21,7 @@
'use strict';
// injected refs
var $log, $interval, fs, wss, ts;
var $log, $interval, fs, wss;
// constants
var refreshInterval = 2000;
......@@ -98,7 +98,6 @@
// Cleanup on destroyed scope
o.scope.$on('$destroy', function () {
wss.unbindHandlers(handlers);
ts.resetSort();
stopRefresh();
});
......@@ -108,14 +107,13 @@
angular.module('onosWidget')
.factory('TableBuilderService',
['$log', '$interval', 'FnService', 'WebSocketService', 'TableService',
['$log', '$interval', 'FnService', 'WebSocketService',
function (_$log_, _$interval_, _fs_, _wss_, _ts_) {
function (_$log_, _$interval_, _fs_, _wss_) {
$log = _$log_;
$interval = _$interval_;
fs = _fs_;
wss = _wss_;
ts = _ts_;
return {
buildTable: buildTable
......
......@@ -38,10 +38,7 @@
<div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
sort-params="sortParams"
sort-callback="sortCallback(sortParams)">
<div class="table-header" onos-sortable-header>
<table>
<tr>
<td colId="state" class="table-icon" sortable></td>
......
......@@ -28,10 +28,7 @@
<div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
sort-params="sortParams"
sort-callback="sortCallback(sortParams)">
<div class="table-header" onos-sortable-header>
<table>
<tr>
<td colId="_iconid_state" class="table-icon" sortable></td>
......
......@@ -28,10 +28,7 @@
<div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
sort-params="sortParams"
sort-callback="sortCallback(sortParams)">
<div class="table-header" onos-sortable-header>
<table>
<tr>
<td colId="available" class="table-icon" sortable></td>
......
......@@ -30,10 +30,7 @@
<div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
sort-params="sortParams"
sort-callback="sortCallback(sortParams)">
<div class="table-header" onos-sortable-header>
<table>
<tr>
<td colId="id" col-width="180px" sortable>Flow ID </td>
......
......@@ -46,10 +46,7 @@
<div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
sort-params="sortParams"
sort-callback="sortCallback(sortParams)">
<div class="table-header" onos-sortable-header>
<table>
<tr>
<td colId="id" sortable>Group ID </td>
......
......@@ -12,10 +12,7 @@
<div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
sort-params="sortParams"
sort-callback="sortCallback(sortParams)">
<div class="table-header" onos-sortable-header>
<table>
<tr>
<td colId="type" class="table-icon" sortable></td>
......
......@@ -28,10 +28,7 @@
<div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
sort-params="sortParams"
sort-callback="sortCallback(sortParams)">
<div class="table-header" onos-sortable-header>
<table>
<tr>
<td colId="appId" sortable>Application ID </td>
......
......@@ -28,10 +28,7 @@
<div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
sort-params="sortParams"
sort-callback="sortCallback(sortParams)">
<div class="table-header" onos-sortable-header>
<table>
<tr>
<td colId="_iconid_state" class="table-icon" sortable></td>
......
......@@ -46,10 +46,7 @@
<div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
sort-params="sortParams"
sort-callback="sortCallback(sortParams)">
<div class="table-header" onos-sortable-header>
<table>
<tr>
<td colId="id" col-width="60px" sortable>Port ID </td>
......
......@@ -12,10 +12,7 @@
<div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
sort-params="sortParams"
sort-callback="sortCallback(sortParams)">
<div class="table-header" onos-sortable-header>
<table>
<tr>
<td colId="component" sortable col-width="200px">Component </td>
......