cameras ui

admin/controllers/modals/cameraedit.controller.js

@@ -50,6 +50,9 @@ angular.module('camotionAdmin')
 
             $scope.submitForm = function()
             {
+                if ($scope.camera.Data == null) {
+                    $scope.camera.Data = {};
+                }
                 if (luticateAuthCache.hasEffectivePermission($scope.permission)) {
                     $scope.camera.Data = JSON.stringify($scope.camera.Data);
                     if ($scope.camera.Id != null) {

admin/controllers/modals/commandedit.controller.js

@@ -50,6 +50,9 @@ angular.module('camotionAdmin')
 
             $scope.submitForm = function()
             {
+                if ($scope.command.Data == null) {
+                    $scope.command.Data = {};
+                }
                 if (luticateAuthCache.hasEffectivePermission($scope.permission)) {
                     $scope.command.Data = JSON.stringify($scope.command.Data);
                     if ($scope.command.Id != null) {

admin/controllers/modals/sensoredit.controller.js

@@ -50,6 +50,9 @@ angular.module('camotionAdmin')
 
             $scope.submitForm = function()
             {
+                if ($scope.sensor.Data == null) {
+                    $scope.sensor.Data = {};
+                }
                 if (luticateAuthCache.hasEffectivePermission($scope.permission)) {
                     $scope.sensor.Data = JSON.stringify($scope.sensor.Data);
                     if ($scope.sensor.Id != null) {

camotion/controllers/cameras.controller.js

@@ -1,6 +1,30 @@
 angular.module('camotion')
-    .controller('CamerasController', ['$scope', '$state',
-        function($scope, $state) {
+    .controller('CamerasController', ['$scope', 'CamerasService',
+        function($scope, CamerasService) {
 
+            $scope.cameras = [];
+            $scope.rowCameras = [];
 
+            $scope.playingCameras = [];
+
+            $scope.playPause = function(camera)
+            {
+                var idx = $scope.playingCameras.indexOf(camera.Id);
+                if (idx > -1) {
+                    $scope.playingCameras.splice(idx, 1);
+                }
+                else {
+                    $scope.playingCameras.push(camera.Id);
+                }
+            };
+
+            $scope.isPlaying = function(camera)
+            {
+                return $scope.playingCameras.indexOf(camera.Id) > -1;
+            };
+
+            CamerasService.getAll({}).then(function(cameras)
+            {
+                $scope.cameras = cameras.Data;
+            });
     }]);

camotion/css/app.less

@@ -10,6 +10,23 @@ footer {
   text-align: center;
 }
 
+.border-bottom-right-radius(@radius) {
+  -webkit-border-bottom-right-radius: @radius;
+  -moz-border-radius-bottomright: @radius;
+  border-bottom-right-radius: @radius;
+}
+
+.border-bottom-left-radius(@radius) {
+  -webkit-border-bottom-left-radius: @radius;
+  -moz-border-radius-bottomleft: @radius;
+  border-bottom-left-radius: @radius;
+}
+
+.border-bottom-radius(@radius) {
+  .border-bottom-right-radius(@radius);
+  .border-bottom-left-radius(@radius);
+}
+
 .border-radius(@radius) {
   -webkit-border-radius: @radius;
   -moz-border-radius: @radius;
@@ -28,3 +45,34 @@ footer {
 /**
 ========================================================
 **/
+
+@player-bg-color: #2f4154;
+@player-text-color: white;
+@player-border-radius: 8px;
+
+.player {
+  margin-bottom: 36px;
+}
+
+.player-image {
+  width: 100%;
+}
+
+.player-legend {
+  background-color: @player-bg-color;
+  color: @player-text-color;
+  padding-left: @player-border-radius;
+  .border-bottom-radius(@player-border-radius);
+}
+
+.player-button-play {
+  padding: 5px;
+  cursor: pointer;
+  .no-text-select();
+  &:hover {
+    color: #1abc9c;
+  }
+}
+
+.player-legend-name {
+}

camotion/views/cameras.html

@@ -1,4 +1,15 @@
 <!-- Page Content -->
 <div class="container">
-
+    <div ng-repeat="c in cameras" class="col-md-6">
+        <figure class="player col-sm-12">
+            <img ng-click="playPause(c)" src="https://designmodo.github.io/Flat-UI/docs/assets/img/video/poster.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>
 </div>