瀏覽代碼

cameras loader and error

develop
Robin Thoni 9 年之前
父節點
當前提交
2fbf13909a

+ 11
- 3
admin/controllers/home.controller.js 查看文件

@@ -1,6 +1,14 @@
1 1
 angular.module('camotionAdmin')
2
-    .controller('HomeController', ['$scope', '$state',
3
-        function($scope, $state) {
4
-
2
+    .controller('HomeController', ['$scope', '$state', 'luticateAuthCache',
3
+        function($scope, $state, luticateAuthCache) {
5 4
 
5
+            if (luticateAuthCache.hasEffectivePermission("CAMOTION_CAMERA_GET")) {
6
+                $state.go('cameras');
7
+            }
8
+            else if (luticateAuthCache.hasEffectivePermission("CAMOTION_SENSOR_GET")) {
9
+                $state.go('sensors');
10
+            }
11
+            else if (luticateAuthCache.hasEffectivePermission("CAMOTION_COMMAND_GET")) {
12
+                $state.go('commands');
13
+            }
6 14
     }]);

+ 42
- 8
camotion/controllers/cameras.controller.js 查看文件

@@ -2,6 +2,12 @@ angular.module('camotion')
2 2
     .controller('CamerasController', ['$scope', 'CamerasService', '$timeout',
3 3
         function($scope, CamerasService, $timeout) {
4 4
 
5
+            $scope.query = "";
6
+            $scope.maxPage = 1;
7
+            $scope.page = 0;
8
+            $scope.perPage = 6;
9
+            $scope.pages = [];
10
+
5 11
             $scope.cameras = [];
6 12
             $scope.images = {};
7 13
             $scope.interval = 1000;
@@ -42,7 +48,11 @@ angular.module('camotion')
42 48
             $scope.updateCamera = function(camera)
43 49
             {
44 50
                 if ($scope.isPlaying(camera)) {
45
-                    CamerasService.getImage({camera_id: camera.Id})
51
+                    var promiseLoadCamera = {
52
+                        id: "promiseLoadCamera_" + camera.Id,
53
+                        errorGroups: ["camera_" + camera.Id]
54
+                    };
55
+                    CamerasService.getImage({camera_id: camera.Id}, promiseLoadCamera)
46 56
                         .then(function (image) {
47 57
                             if ($scope.isPlaying(camera)) {
48 58
                                 $scope.images[camera.Id] = {
@@ -59,17 +69,41 @@ angular.module('camotion')
59 69
                 }
60 70
             };
61 71
 
62
-            CamerasService.getAll({}).then(function(cameras)
72
+            $scope.loadPage = function(page)
63 73
             {
64
-                $scope.images = {};
65
-                $scope.cameras = cameras.Data;
66
-                for (var i = 0; i < $scope.cameras.length; ++i) {
67
-                    var camera = angular.copy($scope.cameras[i]);
68
-                    $scope.play(camera);
74
+                if (page < 0 || page >= $scope.maxPage) {
75
+                    return;
69 76
                 }
70
-            });
77
+
78
+                var promiseLoadCameras = {
79
+                    id: "promiseLoadCameras",
80
+                    groups: ["camerasView"]
81
+                };
82
+                $scope.images = {};
83
+
84
+                CamerasService.getAll({page: page, perPage: $scope.perPage, query: $scope.query}, promiseLoadCameras)
85
+                    .then(function(cameras) {
86
+                        $scope.page = page;
87
+                        $scope.images = {};
88
+                        $scope.cameras = cameras.Data;
89
+                        $scope.pages = [];
90
+                        $scope.maxPage = Math.max(cameras.Count / $scope.perPage, 1);
91
+                        var start = Math.max(0, $scope.page - 5);
92
+                        var end = Math.min(start + 10, $scope.maxPage);
93
+                        for (var i = start; i < end; ++i) {
94
+                            $scope.pages.push(i);
95
+                        }
96
+
97
+                        for (i = 0; i < $scope.cameras.length; ++i) {
98
+                            var camera = angular.copy($scope.cameras[i]);
99
+                            $scope.play(camera);
100
+                        }
101
+                    });
102
+            };
71 103
 
72 104
             $scope.$on('$destroy', function(){
73 105
                 $scope.images = {};
74 106
             });
107
+
108
+            $scope.loadPage($scope.page);
75 109
     }]);

+ 11
- 3
camotion/controllers/home.controller.js 查看文件

@@ -1,6 +1,14 @@
1 1
 angular.module('camotion')
2
-    .controller('HomeController', ['$scope', '$state',
3
-        function($scope, $state) {
4
-
2
+    .controller('HomeController', ['$scope', '$state', 'luticateAuthCache',
3
+        function($scope, $state, luticateAuthCache) {
5 4
 
5
+            if (luticateAuthCache.hasEffectivePermission("CAMOTION_CAMERA_GET")) {
6
+                $state.go('cameras');
7
+            }
8
+            else if (luticateAuthCache.hasEffectivePermission("CAMOTION_SENSOR_GET")) {
9
+                $state.go('sensors');
10
+            }
11
+            else if (luticateAuthCache.hasEffectivePermission("CAMOTION_COMMAND_GET")) {
12
+                $state.go('commands');
13
+            }
6 14
     }]);

+ 8
- 0
camotion/css/app.less 查看文件

@@ -66,6 +66,10 @@ footer {
66 66
   width: 100%;
67 67
 }
68 68
 
69
+.player-image-wrapper {
70
+  padding: 0;
71
+}
72
+
69 73
 .player-legend {
70 74
   background-color: @player-bg-color;
71 75
   color: @player-text-color;
@@ -83,4 +87,8 @@ footer {
83 87
 }
84 88
 
85 89
 .player-legend-name {
90
+}
91
+
92
+.cameras-filter-input {
93
+  margin-bottom: 24px;
86 94
 }

+ 40
- 11
camotion/views/cameras.html 查看文件

@@ -1,15 +1,44 @@
1 1
 <!-- Page Content -->
2 2
 <div class="container">
3
-    <div ng-repeat="c in cameras" class="col-md-6">
4
-        <figure class="player col-sm-12">
5
-            <img id="camera_{{ c.Id }}" ng-click="playPause(c)" src="img/camera_loading.jpg" class="player-image">
6
-            <figcaption class="player-legend" title="{{ c.Description }}">
7
-                <span class="player-button-play" ng-class="{
8
-                    'fui-play': !isPlaying(c),
9
-                    'fui-pause': isPlaying(c)
10
-                }" ng-click="playPause(c)"></span>
11
-                <span class="player-legend-name">{{ c.Name }}</span>
12
-            </figcaption>
13
-        </figure>
3
+
4
+    <div class="col-md-12" lu-busy="camerasView">
5
+        <div class="row">
6
+            <div class="col-sm-3 pull-right cameras-filter-input">
7
+                <input placeholder="Filter" class="form-control" ng-model-options="{debounce: 500}"
8
+                       ng-model="query" ng-change="loadPage(0)"/>
9
+            </div>
10
+        </div>
11
+
12
+        <div class="row">
13
+            <div ng-repeat="c in cameras" class="col-md-6">
14
+                <figure class="player col-sm-12">
15
+                    <div class="col-sm-12 player-image-wrapper" lu-busy="{group: 'camera_' + c.Id}">
16
+                        <img id="camera_{{c.Id }}" ng-click="playPause(c)" src="img/camera_loading.jpg" class="player-image">
17
+                    </div>
18
+                    <figcaption class="player-legend" title="{{ c.Description }}">
19
+                        <span class="player-button-play" ng-class="{
20
+                            'fui-play': !isPlaying(c),
21
+                            'fui-pause': isPlaying(c)
22
+                        }" ng-click="playPause(c)"></span>
23
+                        <span class="player-legend-name">{{ c.Name }}</span>
24
+                    </figcaption>
25
+                </figure>
26
+            </div>
27
+        </div>
28
+        <div class="col-sm-12 text-center">
29
+            <div class="pagination">
30
+                <ul>
31
+                    <li class="previous">
32
+                            <a href="" class="fui-arrow-left" ng-click="loadPage(page - 1)"></a>
33
+                    </li>
34
+                    <li ng-repeat="p in pages" ng-class="{ 'active' : p == page}">
35
+                            <a href="" ng-click="loadPage(p)">{{ p + 1 }}</a>
36
+                    </li>
37
+                    <li class="next">
38
+                            <a href="" class="fui-arrow-right" ng-click="loadPage(page + 1)"></a>
39
+                    </li>
40
+                </ul>
41
+            </div>
42
+        </div>
14 43
     </div>
15 44
 </div>

Loading…
取消
儲存