Add response display for success and error

js/controllers.js

@@ -1,4 +1,5 @@
 
+// Controller for the top masthead
 function MastheadController($scope) {
     $scope.template = 'partials/masthead.html';
 
@@ -13,6 +14,7 @@ function MastheadController($scope) {
         $scope.iclass = '';
         $scope.sclass = '';
 
+        //This is shitty, I need help with this crap.
         switch(link) {
             case 'home':
                 $scope.hclass = 'active';
@@ -32,46 +34,66 @@ function MastheadController($scope) {
     };
 }
 
-function SideBarController($scope, Container) {
-    $scope.template = 'partials/sidebar.html';
-    
-    Container.query({}, function(d) {
-        $scope.containers = d;
-    });
-}
-
 function HomeController() {
     
 }
 
-function SettingsController() {
+function SettingsController($scope, Settings) {
     
 }
 
+// Controls the page that displays a single container and actions on that container.
 function ContainerController($scope, $routeParams, Container) {
     $('#response').hide();
+    $scope.alertClass = 'block';
+
+    var showAndHide = function(hide) {
+        $('#response').show();
+        if (hide) {
+            setTimeout(function() { $('#response').hide();}, 5000);
+        }
+    };
 
     $scope.start = function(){
         Container.start({id: $routeParams.id}, function(d) {
-            $scope.response = d;        
-            $('#response').show();
-            setTimeout($('#response').hide, 5000);
+            console.log(d);
+            $scope.alertClass = 'success';
+            $scope.response = 'Container started.';
+            showAndHide(true);
+        }, function(e) {
+            console.log(e);
+            $scope.alertClass = 'error';
+            $scope.response = e.data;
+            showAndHide(false);
         }); 
     };
 
     $scope.stop = function() {
-        
         Container.stop({id: $routeParams.id}, function(d) {
-            $scope.response = d;        
-            $('#response').show();
-            setTimeout($('#response').hide, 5000);
+            console.log(d);
+            $scope.alertClass = 'success';
+            $scope.response = 'Container stopped.';
+            showAndHide(true);
+        }, function(e) {
+            console.log(e);
+            $scope.alertClass = 'error';
+            $scope.response = e.data;
+            showAndHide(false);
         });
     };
 
     $scope.remove = function() {
         if (confirm("Are you sure you want to remove the container?")) {
             Container.remove({id: $routeParams.id}, function(d) {
-                $scope.response = d; 
+                console.log(d);
+                $scope.alertClass = 'success';
+                $scope.response = 'Container removed.';
+                showAndHide(true);
+            }, function(e){
+                console.log(e);
+                $scope.alertClass = 'error';
+                $scope.response = e.data;
+                showAndHide(false);
             });
         }
     };
@@ -91,9 +113,11 @@ function ContainerController($scope, $routeParams, Container) {
    $scope.getChanges();
 }
 
+// Controller for the list of containers
 function ContainersController($scope, Container, Settings) {
     $scope.displayAll = Settings.displayAll;
     $scope.predicate = '-Created';
+
     var update = function(data) {
         Container.query(data, function(d) {
             $scope.containers = d;        
@@ -104,29 +128,52 @@ function ContainersController($scope, Container, Settings) {
         Settings.displayAll = $scope.displayAll;
         var u = update;
         var data = {all: 0};
+
         if ($scope.displayAll) {
             data.all = 1;
         }
         u(data);
     };
+
     update({all: $scope.displayAll ? 1 : 0}); 
-   }
+}
 
+// Controller for the list of images
 function ImagesController($scope, Image) {
-   
     $scope.predicate = '-Created';
+
     Image.query({}, function(d) {
         $scope.images = d;
     });    
 }
 
+// Controller for a single image and actions on that image
 function ImageController($scope, $routeParams, Image) {
     $scope.history = [];
     $scope.tag = {repo: '', force: false};
+
+    $('#response').hide();
+    $scope.alertClass = 'block';
+
+    var showAndHide = function(hide) {
+        $('#response').show();
+        if (hide) {
+            setTimeout(function() { $('#response').hide();}, 5000);
+        }
+    };
+
     $scope.remove = function() {
         if (confirm("Are you sure you want to delete this image?")) {
             Image.remove({id: $routeParams.id}, function(d) {
-                $scope.response = d;
+                console.log(d);
+                $scope.alertClass = 'success';
+                $scope.response = 'Image removed.';
+                showAndHide(true);
+            }, function(e) {
+                console.log(e);
+                $scope.alertClass = 'error';
+                $scope.response = e.data;
+                showAndHide(false);
             }); 
         }
     };
@@ -140,7 +187,15 @@ function ImageController($scope, $routeParams, Image) {
     $scope.updateTag = function() {
         var tag = $scope.tag;
         Image.tag({id: $routeParams.id, repo: tag.repo, force: tag.force ? 1 : 0}, function(d) {
-            $scope.response = d;    
+            console.log(d);
+            $scope.alertClass = 'success';
+            $scope.response = 'Tag added.';
+            showAndHide(true);
+        }, function(e) {
+            console.log(e);
+            $scope.alertClass = 'error';
+            $scope.response = e.data;
+            showAndHide(false);
         });
     };
     

partials/container.html

@@ -1,6 +1,6 @@
 <div class="detail">
-    <div id="response" class="alert alert-block">
-        
+    <div id="response" class="alert alert-{{ alertClass }}">
+        {{ response }}        
     </div>
 
     <h4>Container: {{ container.Id }}</h4>

partials/image.html

@@ -1,4 +1,9 @@
 <div class="detail">
+
+    <div id="response" class="alert alert-{{ alertClass }}">
+        {{ response }}        
+    </div>
+
     <h4>Image: {{ image.id }}</h4>
 
     <table class="table table-striped">
@@ -67,7 +72,7 @@
                 <label class="checkbox">
                       <input type="checkbox" ng-model="tag.force"/> Force?
                  </label>
-                 <input type="button" ng-click="updateTag()" value="Update" />
+                 <input type="button" ng-click="updateTag()" value="Update" class="btn btn-info"/>
             </fieldset>
         </form>
     </div>