admin: when editing a display, allow to select group

On mobile, drag'n'drop is not supported. Hence the alternate way.

Author: vincentbernat

app/scripts/controllers/display.js

@@ -3,7 +3,7 @@ angular.module('dashkiosk.controllers')
     'use strict';
 
   })
-  .controller('EditDisplayCtrl', function($scope) {
+  .controller('EditDisplayCtrl', function($scope, $q) {
     'use strict';
 
     var realDisplay = $scope.$parent.display,
@@ -18,17 +18,33 @@ angular.module('dashkiosk.controllers')
         }
         return false;
       });
-      realDisplay
-        .$update(modified)
-        .then(function() {
-          $scope.$hide();
+
+      var deferred = $q.defer(),
+          promise = deferred.promise;
+      if (!_.isEmpty(_.omit(modified, 'group'))) {
+        promise.then(function() {
+          return realDisplay.$update(_.omit(modified, 'group'));
+        });
+      }
+      if (_.has(modified, 'group')) {
+        promise.then(function() {
+          return $scope.groups[modified.group].$attach(realDisplay.name);
         });
+      }
+      promise.then(function() {
+        $scope.$hide();
+      });
+      deferred.resolve(true);
+      return promise;
     };
 
     // Destroy the display
     $scope.delete = function() {
-      realDisplay.$delete();
-      $scope.$hide();
+      realDisplay
+        .$delete()
+        .then(function() {
+          $scope.$hide();
+        });
     };
 
   });

app/scripts/directives/display.js

@@ -6,7 +6,8 @@ angular.module('dashkiosk.directives')
       restrict: 'E',
       replace: true,
       scope: {
-        display: '='
+        display: '=',
+        groups: '='
       },
       templateUrl: 'display.html',
       controller: 'DisplayCtrl'

app/scripts/directives/group.js

@@ -6,7 +6,8 @@ angular.module('dashkiosk.directives')
       restrict: 'E',
       replace: true,
       scope: {
-        group: '='
+        group: '=',
+        groups: '='
       },
       templateUrl: 'group.html',
       controller: 'GroupCtrl'

app/views/display.edit.html

@@ -23,12 +23,26 @@ <h4 class="modal-title" ng-bind="display.name"></h4>
                    placeholder="Description" name="description"
                    ng-model="display.description">
           </div>
-          <div class="input-group"  ng-class="{'has-error': displayForm.viewport.$invalid}">
-            <span class="input-group-addon"><span title="Viewport" class="glyphicon glyphicon-fullscreen"></span></span>
-            <input type="text" class="form-control" viewport
-                   autocapitalize="off" autocorrect="off"
-                   placeholder="Viewport size (height × width)" name="viewport"
-                   ng-model="display.viewport">
+          <div class="row">
+            <div class="col-md-6">
+              <div class="input-group" ng-class="{'has-error': displayForm.viewport.$invalid}">
+                <span class="input-group-addon"><span title="Viewport" class="glyphicon glyphicon-tag"></span></span>
+                <select class="form-control"
+                        name="group" required
+                        ng-options="g.id as g.name for (k, g) in groups"
+                        ng-model="display.group">
+                </select>
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="input-group" ng-class="{'has-error': displayForm.viewport.$invalid}">
+                <span class="input-group-addon"><span title="Viewport" class="glyphicon glyphicon-fullscreen"></span></span>
+                <input type="text" class="form-control" viewport
+                       autocapitalize="off" autocorrect="off"
+                       placeholder="Viewport size (height × width)" name="viewport"
+                       ng-model="display.viewport">
+              </div>
+            </div>
           </div>
         </div>
         <div class="modal-footer">

app/views/group.html

@@ -22,7 +22,7 @@
     <div class="displays">
       <dk-display
         ng-repeat="display in group.displays | orderBy:['-connected','name']"
-        display="display">
+        display="display" groups="groups">
       </dk-display>
     </div>
   </div>

app/views/groups.html

@@ -1,6 +1,6 @@
 <ul data-ui-element="dk-group-list">
   <li ng-repeat="group in groups" class="col-md-6">
-    <dk-group group="group">
+    <dk-group group="group" groups="groups">
     </dk-group>
   </li>
   <li class="col-md-2">