related to #15

Added functionality to add and rename aliases for images.

modules/image/ImageController.js

@@ -32,9 +32,85 @@ angular.module('myApp.image', ['ngRoute'])
     }])
 
 
-    .controller('imageViewCtrl', function ($scope, $routeParams, $filter, $location, image, ImageServices) {
+    .controller('imageViewCtrl', function ($scope, $routeParams, $filter, $location, $uibModal, $route,
+                                           image, ImageServices) {
         $scope.image = image.data.metadata;
-    })
+
+        $scope.openEditAliasDialog = function (alias) {
+            var modalInstance = $uibModal.open({
+                animation: $scope.animationsEnabled,
+                templateUrl: 'modules/image/modalEditAlias.html',
+                controller: 'editAliasModalCtrl',
+                size: 'sm',
+                resolve: {
+                    alias: function() {
+                        return alias;
+                    },
+                    image: function () {
+                        return $scope.image;
+                    }
+                }
+            });
+
+            modalInstance.result.then(function (data) {
+                var origAlias = data.origAlias;
+                var newAlias = data.newAlias;
+
+                // rename
+                ImageServices.renameAlias(origAlias, newAlias).then(function (data) {
+                    if (data.status != "Success") {
+                        console.log("Something went wrong");
+                    }
+                });
+
+
+            }, function () {
+                // Nothing
+            });
+        }
+
+
+        $scope.openAddAliasDialog = function (alias) {
+            var modalInstance = $uibModal.open({
+                animation: $scope.animationsEnabled,
+                templateUrl: 'modules/image/modalAddAlias.html',
+                controller: 'addAliasModalCtrl',
+                size: 'sm',
+                resolve: {
+                    image: function () {
+                        return $scope.image;
+                    }
+                }
+            });
+
+            modalInstance.result.then(function (data) {
+                var image = data.image;
+                var alias = data.alias;
+
+                // add alias
+                ImageServices.addAlias(image, alias).then(function (data) {
+                    if (data.status != "Success") {
+                        console.log("Something went wrong");
+                    }
+                    $route.reload();
+
+                });
+            }, function () {
+                // Nothing
+            });
+        };
+
+
+        $scope.removeAlias = function (alias) {
+            ImageServices.removeAlias(alias).then(function (data) {
+                if (data.status != "Success") {
+                    console.log("Something went wrong");
+                }
+                $route.reload();
+            });
+        };
+}   )
+
 
     .controller('imageListCtrl', function ($scope, $routeParams, $interval, $filter, $location, $uibModal,
                                            ContainerServices, ImageServices, images) {
@@ -98,6 +174,36 @@ angular.module('myApp.image', ['ngRoute'])
     })
 
 
+    .controller('addAliasModalCtrl', function ($scope, $routeParams, $filter, $location, $uibModalInstance,
+                                                   image, ImageServices) {
+        $scope.image = image;
+
+        $scope.ok = function () {
+            $uibModalInstance.close( { image: $scope.image, alias: $scope.alias} );
+        };
+
+        $scope.cancel = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    })
+
+
+    .controller('editAliasModalCtrl', function ($scope, $routeParams, $filter, $location, $uibModalInstance,
+                                                image, alias, ImageServices) {
+        $scope.image = image;
+        $scope.alias = alias;
+        $scope.origAlias = angular.copy(alias);
+
+        $scope.ok = function () {
+            $uibModalInstance.close( { origAlias: $scope.origAlias, newAlias: $scope.alias} );
+        };
+
+        $scope.cancel = function () {
+            $uibModalInstance.dismiss('cancel');
+        };
+    })
+
+
     .controller('imageAddRemoteCtrl', function ($scope, $routeParams, $filter, $location, ImageServices) {
         $scope.addRemoteImage = function () {
             ImageServices.addRemoteImage($scope.url);

modules/image/ImageService.js

@@ -51,11 +51,43 @@ angular.module('myApp.image')
                   });
                 }
 
+
                 obj.delete = function(container) {
                   return $http.delete(SettingServices.getLxdApiUrl() + '/images/' + container.fingerprint);
                 }
 
 
+                // Alias
+                obj.renameAlias = function(origAlias, newAlias) {
+                    var postData = {
+                        "name": newAlias.name,
+                    };
+
+                    // sync
+                    return $http.post(SettingServices.getLxdApiUrl() + '/images/aliases/' + origAlias.name, postData);
+                }
+
+
+                // Alias
+                obj.addAlias = function(image, alias) {
+                    var postData = {
+                        description: alias.description,
+                        name: alias.name,
+                        target: image.fingerprint,
+                    };
+
+                    // sync
+                    return $http.post(SettingServices.getLxdApiUrl() + '/images/aliases', postData);
+                }
+
+
+                // Alias
+                obj.removeAlias = function(alias) {
+                    // sync
+                    return $http.delete(SettingServices.getLxdApiUrl() + '/images/aliases/' + alias.name);
+                }
+
+
                 obj.addRemoteImage = function(url) {
                     var data = {
                         "public": true,

modules/image/image-view.html

@@ -20,11 +20,16 @@
                 </tr>
 
                 <tr>
-                    <td>Aliases </td>
+                    <td>Aliases
+                        <a href ng-click="openAddAliasDialog()"><span class="glyphicon glyphicon-plus"></span></a>
+                    </td>
                     <td>
                         <div class="" ng-repeat="alias in image.aliases">
                             {{alias.name}} - {{alias.description}}
+                            <a href ng-click="openEditAliasDialog(alias)"><span class="glyphicon glyphicon-edit"></span></a>
+                            <a href ng-click="removeAlias(alias)"><span class="glyphicon glyphicon-remove"></span></a>
                         </div>
+
                     </td>
                 </tr>
 

modules/image/modalAddAlias.html

@@ -0,0 +1,12 @@
+<div class="modal-header">
+    <h3 class="modal-title">Add Alias</h3>
+</div>
+
+<div class="modal-body">
+    Name: <input ng-model="alias.name" type="text" value="{{alias.name}}">
+    Description: <input ng-model="alias.description" type="text" value="{{alias.description}}">
+</div>
+<div class="modal-footer">
+    <button class="btn btn-primary" type="button" ng-click="ok()">Save</button>
+    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
+</div>

modules/image/modalEditAlias.html

@@ -0,0 +1,11 @@
+<div class="modal-header">
+    <h3 class="modal-title">Edit Alias</h3>
+</div>
+
+<div class="modal-body">
+    Name: <input ng-model="alias.name" type="text" value="{{alias.name}}">
+</div>
+<div class="modal-footer">
+    <button class="btn btn-primary" type="button" ng-click="ok()">Save</button>
+    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
+</div>