cameras loader and error

admin/controllers/home.controller.js

 angular.module('camotionAdmin')
-    .controller('HomeController', ['$scope', '$state',
-        function($scope, $state) {
-
+    .controller('HomeController', ['$scope', '$state', 'luticateAuthCache',
+        function($scope, $state, luticateAuthCache) {
 
+            if (luticateAuthCache.hasEffectivePermission("CAMOTION_CAMERA_GET")) {
+                $state.go('cameras');
+            }
+            else if (luticateAuthCache.hasEffectivePermission("CAMOTION_SENSOR_GET")) {
+                $state.go('sensors');
+            }
+            else if (luticateAuthCache.hasEffectivePermission("CAMOTION_COMMAND_GET")) {
+                $state.go('commands');
+            }
     }]);

camotion/controllers/cameras.controller.js

     .controller('CamerasController', ['$scope', 'CamerasService', '$timeout',
         function($scope, CamerasService, $timeout) {
 
+            $scope.query = "";
+            $scope.maxPage = 1;
+            $scope.page = 0;
+            $scope.perPage = 6;
+            $scope.pages = [];
+
             $scope.cameras = [];
             $scope.images = {};
             $scope.interval = 1000;
             $scope.updateCamera = function(camera)
             {
                 if ($scope.isPlaying(camera)) {
-                    CamerasService.getImage({camera_id: camera.Id})
+                    var promiseLoadCamera = {
+                        id: "promiseLoadCamera_" + camera.Id,
+                        errorGroups: ["camera_" + camera.Id]
+                    };
+                    CamerasService.getImage({camera_id: camera.Id}, promiseLoadCamera)
                         .then(function (image) {
                             if ($scope.isPlaying(camera)) {
                                 $scope.images[camera.Id] = {
                 }
             };
 
-            CamerasService.getAll({}).then(function(cameras)
+            $scope.loadPage = function(page)
             {
-                $scope.images = {};
-                $scope.cameras = cameras.Data;
-                for (var i = 0; i < $scope.cameras.length; ++i) {
-                    var camera = angular.copy($scope.cameras[i]);
-                    $scope.play(camera);
+                if (page < 0 || page >= $scope.maxPage) {
+                    return;
                 }
-            });
+
+                var promiseLoadCameras = {
+                    id: "promiseLoadCameras",
+                    groups: ["camerasView"]
+                };
+                $scope.images = {};
+
+                CamerasService.getAll({page: page, perPage: $scope.perPage, query: $scope.query}, promiseLoadCameras)
+                    .then(function(cameras) {
+                        $scope.page = page;
+                        $scope.images = {};
+                        $scope.cameras = cameras.Data;
+                        $scope.pages = [];
+                        $scope.maxPage = Math.max(cameras.Count / $scope.perPage, 1);
+                        var start = Math.max(0, $scope.page - 5);
+                        var end = Math.min(start + 10, $scope.maxPage);
+                        for (var i = start; i < end; ++i) {
+                            $scope.pages.push(i);
+                        }
+
+                        for (i = 0; i < $scope.cameras.length; ++i) {
+                            var camera = angular.copy($scope.cameras[i]);
+                            $scope.play(camera);
+                        }
+                    });
+            };
 
             $scope.$on('$destroy', function(){
                 $scope.images = {};
             });
+
+            $scope.loadPage($scope.page);
     }]);

camotion/controllers/home.controller.js

 angular.module('camotion')
-    .controller('HomeController', ['$scope', '$state',
-        function($scope, $state) {
-
+    .controller('HomeController', ['$scope', '$state', 'luticateAuthCache',
+        function($scope, $state, luticateAuthCache) {
 
+            if (luticateAuthCache.hasEffectivePermission("CAMOTION_CAMERA_GET")) {
+                $state.go('cameras');
+            }
+            else if (luticateAuthCache.hasEffectivePermission("CAMOTION_SENSOR_GET")) {
+                $state.go('sensors');
+            }
+            else if (luticateAuthCache.hasEffectivePermission("CAMOTION_COMMAND_GET")) {
+                $state.go('commands');
+            }
     }]);

camotion/css/app.less

   width: 100%;
 }
 
+.player-image-wrapper {
+  padding: 0;
+}
+
 .player-legend {
   background-color: @player-bg-color;
   color: @player-text-color;
 }
 
 .player-legend-name {
+}
+
+.cameras-filter-input {
+  margin-bottom: 24px;
 }

camotion/views/cameras.html

 <!-- Page Content -->
 <div class="container">
-    <div ng-repeat="c in cameras" class="col-md-6">
-        <figure class="player col-sm-12">
-            <img id="camera_{{ c.Id }}" ng-click="playPause(c)" src="img/camera_loading.jpg" class="player-image">
-            <figcaption class="player-legend" title="{{ c.Description }}">
-                <span class="player-button-play" ng-class="{
-                    'fui-play': !isPlaying(c),
-                    'fui-pause': isPlaying(c)
-                }" ng-click="playPause(c)"></span>
-                <span class="player-legend-name">{{ c.Name }}</span>
-            </figcaption>
-        </figure>
+
+    <div class="col-md-12" lu-busy="camerasView">
+        <div class="row">
+            <div class="col-sm-3 pull-right cameras-filter-input">
+                <input placeholder="Filter" class="form-control" ng-model-options="{debounce: 500}"
+                       ng-model="query" ng-change="loadPage(0)"/>
+            </div>
+        </div>
+
+        <div class="row">
+            <div ng-repeat="c in cameras" class="col-md-6">
+                <figure class="player col-sm-12">
+                    <div class="col-sm-12 player-image-wrapper" lu-busy="{group: 'camera_' + c.Id}">
+                        <img id="camera_{{c.Id }}" ng-click="playPause(c)" src="img/camera_loading.jpg" class="player-image">
+                    </div>
+                    <figcaption class="player-legend" title="{{ c.Description }}">
+                        <span class="player-button-play" ng-class="{
+                            'fui-play': !isPlaying(c),
+                            'fui-pause': isPlaying(c)
+                        }" ng-click="playPause(c)"></span>
+                        <span class="player-legend-name">{{ c.Name }}</span>
+                    </figcaption>
+                </figure>
+            </div>
+        </div>
+        <div class="col-sm-12 text-center">
+            <div class="pagination">
+                <ul>
+                    <li class="previous">
+                            <a href="" class="fui-arrow-left" ng-click="loadPage(page - 1)"></a>
+                    </li>
+                    <li ng-repeat="p in pages" ng-class="{ 'active' : p == page}">
+                            <a href="" ng-click="loadPage(p)">{{ p + 1 }}</a>
+                    </li>
+                    <li class="next">
+                            <a href="" class="fui-arrow-right" ng-click="loadPage(page + 1)"></a>
+                    </li>
+                </ul>
+            </div>
+        </div>
     </div>
 </div>