Device details now separated from Device icon view.

Tabs are not shown if the settings are not loaded yet.

res/app/device-list/device-list-details-controller.js

@@ -0,0 +1,112 @@
+module.exports = function DeviceListCtrlDetails(
+  $scope
+, DeviceService
+, GroupService
+, ControlService
+, ngTableParams
+, SettingsService
+, $filter
+, $location
+, gettext
+, $q
+) {
+
+  // TODO: this is not working, why?
+  $scope.filterEnabled = false
+  SettingsService.bind($scope, {
+    key: 'filterEnabled'
+  , storeName: 'DeviceList.filterEnabled'
+  })
+
+  $scope.statusFilter = function () {
+    var def = $q.defer()
+    var statuses = [
+      { id: true
+        , title: gettext('Available')
+      }
+      , { id: false
+        , title: gettext('N/A')
+      }
+    ]
+    def.resolve(statuses)
+    return def
+  }
+
+  $scope.tableFilter = {
+    usable: ''
+  }
+//  SettingsService.bind($scope, {
+//    key: 'tableFilter',
+//    storeName: 'DeviceList.tableFilter'
+//  })
+
+  $scope.tableSorting = {
+    state: 'desc'     // initial sorting
+  }
+//  SettingsService.bind($scope, {
+//    key: 'tableSorting',
+//    storeName: 'DeviceList.tableSorting'
+//  })
+
+//  $scope.$watchCollection('tableParams.sorting()', function (data) {
+//    $scope.tableSorting = data
+//  })
+//
+//  $scope.$watchCollection('tableParams.filter()', function (data) {
+//    $scope.tableFilter = data
+//  })
+
+  $scope.tableParams = new ngTableParams(
+    { filter: $scope.tableFilter
+    , sorting: $scope.tableSorting
+    }
+  , { total: 1
+    , counts: []
+    , filterDelay: 0
+    , getData: function ($defer, params) {
+        var data = $scope.tracker.devices
+
+        var filteredData = params.filter() ?
+          $filter('filter')(data, params.filter()) :
+          data
+
+        var orderedData = params.sorting() ?
+          $filter('orderBy')(filteredData, params.orderBy()) :
+          data
+
+        $defer.resolve(orderedData)
+      }
+    })
+
+  $scope.$on('devices.update', function () {
+    $scope.tableParams.reload()
+  })
+
+  $scope.userContactUrl = function (mail) {
+    var config = {
+      hipchatEnabled: true
+    , hipchatUrl: 'https://cyberagent.hipchat.com/chat?focus_jid='
+    }
+
+    if (config.hipchatEnabled) {
+      return config.hipchatUrl + mail
+    } else {
+      return 'mailto:' + mail
+    }
+  }
+
+  $scope.columns = [
+    { title: 'Model'
+    , field: 'model'
+    , sortable: 'model'
+    , filter: {model: 'text'}
+    , visible: true
+    }
+  , { title: 'Product'
+    , field: 'name'
+    , sortable: 'name'
+    , filter: {name: 'text'}
+    , visible: true
+    }
+  ]
+}

res/app/device-list/device-list.jade

@@ -3,7 +3,7 @@ div.stf-device-list
     .col-md-12
       .widget-container.fluid-height
         .widget-content.padded
-          tabset.overflow-auto
+          tabset.overflow-auto(ng-if='activeTabs')
             tab(active='activeTabs.devices')
               tab-heading
                 i.fa.fa-th-large
@@ -39,7 +39,7 @@ div.stf-device-list
               tab-heading
                 i.fa.fa-list(translate)
                 span(translate) Details
-              div
+              div(ng-if='activeTabs.details', ng-controller='DeviceListDetailsCtrl')
                 nothing-to-show(message='{{"No devices connected"|translate}}', icon='fa-sitemap', ng-show='!tracker.devices.length')
 
                 .filtering-buttons

res/app/device-list/index.js

@@ -12,3 +12,4 @@ module.exports = angular.module('device-list', [
     })
   }])
   .controller('DeviceListCtrl', require('./device-list-controller'))
+  .controller('DeviceListDetailsCtrl', require('./device-list-details-controller'))