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

@@ -59,10 +59,12 @@ div.inline-icon {
     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 @@ svg.embeddedIcon .icon rect {
 .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;

@@ -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

@@ -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>
 

@@ -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');
         }]);
 }());