Add batch ops to images

index.html

@@ -59,6 +59,7 @@
     <script src="js/services.js"></script>
     <script src="js/filters.js"></script>
     <script src="js/controllers.js"></script>
+    <script src="js/viewmodel.js"></script>
 
   </body>
 </html>

js/controllers.js

@@ -165,14 +165,31 @@ function ImagesController($scope, Image, ViewSpinner) {
     $scope.predicate = '-Created';
     $('#response').hide();
     $scope.alertClass = 'block';
+    $scope.toggle = false;
 
     $scope.showBuilder = function() {
         $('#build-modal').modal('show');
     };
 
+    $scope.removeAction = function() {
+        angular.forEach($scope.images, function(i) { 
+            if (i.Checked) {
+                Image.remove({id: i.Id}, function(d) {
+                   console.log(d); 
+                });
+            }
+        });
+    };
+ 
+    $scope.toggleSelectAll = function() {
+        angular.forEach($scope.images, function(i) {
+            i.Checked = $scope.toggle;
+        });
+    };
+
     ViewSpinner.spin();
     Image.query({}, function(d) {
-        $scope.images = d;
+        $scope.images = d.map(function(item) { return new ImageViewModel(item); });
         ViewSpinner.stop();
     }, function (e) {
         console.log(e);
@@ -188,7 +205,7 @@ function ImageController($scope, $routeParams, $location, Image) {
 
     $('#response').hide();
     $scope.alertClass = 'block';
-    
+ 
     $scope.remove = function() {
         if (confirm("Are you sure you want to delete this image?")) {
             Image.remove({id: $routeParams.id}, function(d) {

js/services.js

@@ -28,7 +28,7 @@ angular.module('dockerui.services', ['ngResource'])
             insert :{method: 'POST', params: {id: '@id', action:'insert'}},
             push :{method: 'POST', params: {id: '@id', action:'push'}},
             tag :{method: 'POST', params: {id: '@id', action:'tag', force: 0, repo: '@repo'}},
-            delete :{id: '@id', method: 'DELETE'}
+            remove :{method: 'DELETE', params: {id: '@id'}, isArray: true}
         });
     })
     .factory('Docker', function($resource, Settings) {

js/viewmodel.js

@@ -0,0 +1,8 @@
+
+function ImageViewModel(data) {
+    this.Id = data.Id;
+    this.Tag = data.Tag;
+    this.Repository = data.Repository;
+    this.Created = data.Created;
+    this.Checked = false;
+}

partials/images.html

@@ -7,10 +7,19 @@
     {{ response }}
 </div>
 
-<a href="" ng-click="showBuilder()">Build Image</a>
+<ul class="nav nav-pills">
+    <li class="active"><a href="" ng-click="showBuilder()">Build Image</a></li>
+    <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="removeAction()">Remove</a></li>
+        </ul>
+    </li>
+</ul>
 <table class="table table-striped">
     <thead>
         <tr>
+            <th>Action <input type="checkbox" ng-model="toggle" ng-click="toggleSelectAll()" /></th>
             <th>Id</th>
             <th>Tag</th>
             <th>Repository</th>
@@ -19,7 +28,8 @@
     </thead>
     <tbody>
         <tr ng-repeat="image in images | orderBy:predicate">
-            <td><a href="/#/images/{{ image.Id }}/">{{ image.Id|truncate:10}}</a></td>
+            <td><input type="checkbox" ng-model="image.Checked" /></td>
+            <td><a href="/#/images/{{ image.Id }}/">{{ image.Id|truncate:20}}</a></td>
             <td>{{ image.Tag }}</td>
             <td>{{ image.Repository }}</td>
             <td>{{ image.Created|getdate }}</td>