GUI -- Cycling through icons in table headers:
- An object is returned that has the current column ID and which icon/sorting needs to take place when sent to the server
- clicking on each header will display to the debug console which way it will be sorted
Change-Id: I686d417a5b9b0e5c9b591380b8a6166c70c3c401
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.css b/web/gui/src/main/webapp/app/fw/svg/icon.css
index ff1bb5a..ff8cb8e 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.css
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.css
@@ -59,10 +59,12 @@
fill: #ccc;
}
-svg.embeddedIcon .icon.tableColSortAsc rect {
+svg.embeddedIcon .icon.tableColSortAsc rect,
+svg.embeddedIcon .icon.tableColSortDesc rect {
stroke: none;
fill: none;
}
+
svg.embeddedIcon .icon rect {
stroke: black;
stroke-width: 1px;
@@ -70,6 +72,10 @@
.dark svg.embeddedIcon .icon rect {
stroke: #ccc;
}
+.dark svg.embeddedIcon .icon.tableColSortAsc rect,
+.dark svg.embeddedIcon .icon.tableColSortDesc rect {
+ stroke: none;
+}
svg .svgIcon {
fill-rule: evenodd;
diff --git a/web/gui/src/main/webapp/app/view/device/device.css b/web/gui/src/main/webapp/app/view/device/device.css
index 5dee1f8..2b97bfb 100644
--- a/web/gui/src/main/webapp/app/view/device/device.css
+++ b/web/gui/src/main/webapp/app/view/device/device.css
@@ -15,9 +15,9 @@
*/
/*
- ONOS GUI -- Sample View -- CSS file
+ ONOS GUI -- Device View -- CSS file
*/
-#ov-device {
- /* placeholder */
+#ov-device th {
+ cursor: pointer;
}
\ No newline at end of file
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 08b40ec..7aaf8db 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -6,18 +6,18 @@
ng-style="setTableHW()">
<thead>
<tr>
- <th></th>
- <th>URI
+ <th colId="available"></th>
+ <th colId="id">URI
<div class="inline-icon"
icon icon-id="tableColSortAsc"
icon-size="10">
</div>
</th>
- <th>Vendor</th>
- <th>Hardware Version</th>
- <th>Software Version</th>
- <th>Serial Number</th>
- <th>Protocol</th>
+ <th colId="mfr">Vendor</th>
+ <th colId="hw">Hardware Version</th>
+ <th colId="sw">Software Version</th>
+ <th colId="serial">Serial Number</th>
+ <th colId="protocol">Protocol</th>
</tr>
</thead>
diff --git a/web/gui/src/main/webapp/app/view/device/device.js b/web/gui/src/main/webapp/app/view/device/device.js
index c59944a..b97e9e7 100644
--- a/web/gui/src/main/webapp/app/view/device/device.js
+++ b/web/gui/src/main/webapp/app/view/device/device.js
@@ -15,11 +15,14 @@
*/
/*
- ONOS GUI -- Sample View Module
+ ONOS GUI -- Device View Module
*/
(function () {
'use strict';
+ var currCol = {},
+ prevCol = {};
+
angular.module('ovDevice', [])
.controller('OvDeviceCtrl', ['$log', '$location', 'RestService',
@@ -35,6 +38,31 @@
self.deviceData = data.devices;
});
+ d3.selectAll('th').on('click', function(d) {
+ var thElem = d3.select(this);
+ currCol.colId = thElem.attr('colId');
+
+ if(currCol.colId === prevCol.colId) {
+ (currCol.icon === 'tableColSortDesc') ?
+ currCol.icon = 'tableColSortAsc' :
+ currCol.icon = 'tableColSortDesc';
+ prevCol.icon = currCol.icon;
+ } else {
+ currCol.icon = 'tableColSortAsc';
+ prevCol.icon = 'tableColSortNone';
+ }
+
+ $log.debug('currCol clicked: ' + currCol.colId +
+ ', with sorting icon: ' + currCol.icon);
+ $log.debug('prevCol clicked: ' + prevCol.colId +
+ ', with its current sorting icon as ' + prevCol.icon);
+
+ // TODO: send the prev and currCol info to the server to use in sorting table here
+
+ prevCol.colId = currCol.colId;
+
+ });
+
$log.log('OvDeviceCtrl has been created');
}]);
}());