Add size and actions to container view

js/controllers.js

@@ -68,8 +68,7 @@ function ContainerController($scope, $routeParams, $location, Container) {
 
     $scope.start = function(){
         Container.start({id: $routeParams.id}, function(d) {
-            console.log(d);
-            setSuccessfulResponse($scope, 'Container started.', '#response');
+            console.log(d); setSuccessfulResponse($scope, 'Container started.', '#response');
         }, function(e) {
             console.log(e);
             setFailedResponse($scope, e.data, '#response');
@@ -137,15 +136,32 @@ function ContainerController($scope, $routeParams, $location, Container) {
 function ContainersController($scope, Container, Settings, ViewSpinner) {
     $scope.displayAll = Settings.displayAll;
     $scope.predicate = '-Created';
+    $scope.toggle = false;
 
     var update = function(data) {
         ViewSpinner.spin();
         Container.query(data, function(d) {
-            $scope.containers = d;
+            $scope.containers = d.map(function(item) { return new ContainerViewModel(item); });
             ViewSpinner.stop();
         });
     };
 
+    var batch = function(items, action) {
+         angular.forEach(items, function(c) {
+           if (c.Checked) {
+               action({id: c.Id}, function(d) {
+                  console.log(d); 
+               });
+           }
+        });
+    };
+
+    $scope.toggleSelectAll = function() {
+        angular.forEach($scope.containers, function(i) {
+            i.Checked = $scope.toggle;
+        });
+    };
+ 
     $scope.toggleGetAll = function() {
         Settings.displayAll = $scope.displayAll;
         var u = update;
@@ -157,6 +173,22 @@ function ContainersController($scope, Container, Settings, ViewSpinner) {
         u(data);
     };
 
+    $scope.startAction = function() {
+        batch($scope.containers, Container.start);
+    };
+
+    $scope.stopAction = function() {
+        batch($scope.containers, Container.stop);
+    };
+
+    $scope.killAction = function() {
+        batch($scope.containers, Container.kill);
+    };
+
+    $scope.removeAction = function() {
+        batch($scope.containers, Container.remove);
+    };
+
     update({all: $scope.displayAll ? 1 : 0});
 }
 

js/viewmodel.js

@@ -6,3 +6,13 @@ function ImageViewModel(data) {
     this.Created = data.Created;
     this.Checked = false;
 }
+
+function ContainerViewModel(data) {
+   this.Id = data.Id;
+   this.Image = data.Image;
+   this.Command = data.Command;
+   this.Created = data.Created;
+   this.SizeRw = data.SizeRw;
+   this.Status = data.Status;
+   this.Checked = false;
+}

partials/containers.html

@@ -1,12 +1,27 @@
 
 <h2>Containers:</h2>
 
-<div style="float:right;">
-    <input type="checkbox" ng-model="displayAll" ng-click="toggleGetAll()"/> Display All
+<div>
+    <ul class="nav nav-pills pull-left">
+        <li class="dropdown">
+            <a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">Actions <b class="caret"></b></a>
+            <ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
+                <li><a tabindex="-1" href="" ng-click="startAction()">Start</a></li>
+                <li><a tabindex="-1" href="" ng-click="stopAction()">Stop</a></li>
+                <li><a tabindex="-1" href="" ng-click="killAction()">Kill</a></li>
+                <li><a tabindex="-1" href="" ng-click="removeAction()">Remove</a></li>
+            </ul>
+        </li>
+    </ul>
+
+    <div class="pull-right">
+        <input type="checkbox" ng-model="displayAll" ng-click="toggleGetAll()"/> Display All
+    </div>
 </div>
 <table class="table table-striped">
     <thead>
         <tr>
+            <th>Action <input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /></th>
             <th>Id</th>
             <th>Image</th>
             <th>Command</th>
@@ -17,6 +32,7 @@
     </thead>
     <tbody>
         <tr ng-repeat="container in containers|orderBy:predicate">
+            <td><input type="checkbox" ng-model="container.Checked" /></td>
             <td><a href="/#/containers/{{ container.Id }}/">{{ container.Id|truncate:10}}</a></td>
             <td><a href="/#/images/{{ container.Image }}/">{{ container.Image }}</a></td>
             <td>{{ container.Command|truncate:40 }}</td>