From b069616da2d6c1a7c073b788d1e0babd967e71fa Mon Sep 17 00:00:00 2001
From: Michael Crosby <crosby.michael@gmail.com>
Date: Tue, 18 Jun 2013 19:08:17 -0900
Subject: [PATCH] Add batch ops to images

---
 index.html           |  1 +
 js/controllers.js    | 21 +++++++++++++++++++--
 js/services.js       |  2 +-
 js/viewmodel.js      |  8 ++++++++
 partials/images.html | 14 ++++++++++++--
 5 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 js/viewmodel.js

diff --git a/index.html b/index.html
index 6945c1bf9..78ba4134d 100644
--- a/index.html
+++ b/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>
diff --git a/js/controllers.js b/js/controllers.js
index 335597cf5..7943a97ea 100644
--- a/js/controllers.js
+++ b/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) {
diff --git a/js/services.js b/js/services.js
index cddac3f98..6aee21839 100644
--- a/js/services.js
+++ b/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) {
diff --git a/js/viewmodel.js b/js/viewmodel.js
new file mode 100644
index 000000000..11560ab2d
--- /dev/null
+++ b/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;
+}
diff --git a/partials/images.html b/partials/images.html
index 7dafb8a4a..6aea8a2bd 100644
--- a/partials/images.html
+++ b/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>