Add status to image

6 files changed, 279 insertions, 236 deletions

diff --git a/client/js/controllers/home/home.js b/client/js/controllers/home/home.js
index 47491ff..aeb89e5 100755
--- a/client/js/controllers/home/home.js
+++ b/client/js/controllers/home/home.js
@@ -4,199 +4,199 @@
  * @param {$scope} $scope The $scope service from angular
  */
 mainApp.controller('homeCtrl', ['$scope', 'Compute', '$rootScope', 'Loading', 'Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image)
-{
-	
-	graph = new joint.dia.Graph;
-	paper = new joint.dia.Paper({
-					el: $('#graphHolder'),
-					width: $('#graphHolder').width(),
-					//height: test.height,
-					model: graph,
-					gridSize: 1,
-					eractive: false
-			});
-	
-	$scope.raiseShowMachineCreationEvent = function () {
-			$rootScope.$broadcast("showMachineCreationEvent", Compute.getData().axioms);
-	};
-	
-	var displayMachine = function () {
-			
-			var machineNames = [];
-			var i = 0;
-			$.each(Compute.getData().machines, function () {
-					machineNames[i] = [this.name, this.id];
-					i++;
-			})
-			var vmList = {
-					'vms': machineNames
-									/*'links': [
-									['VM 1', 'VM 2', '', ''],
-									['VM 2', 'VM 3', 'I3', 'I4'],
-									['VM 1', 'VM 3', 'I5', 'I6'],
-									['VM 2', 'VM 4', 'I5', 'I6'],
-									['VM 4', 'VM 5', 'I5', 'I6'],
-									['VM 4', 'VM 6', 'I5', 'I6'],
-									['VM 4', 'VM 1', 'I5', 'I6'],
-									['VM 7', 'VM 4', 'I5', 'I6'],
-									['VM 7', 'VM 3', 'I5', 'I6'],
-									['VM 6', 'VM 8', 'I5', 'I6'],
-									['VM 3', 'VM 9', 'I5', 'I6'],
-									['VM 3', 'VM 10', 'I5', 'I6']
-									]*/
-			};
-			//Custom element for inserting html
-			joint.shapes.html = {};
-			joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
-					defaults: joint.util.deepSupplement({
-							type: 'html.Element',
-							attrs: {
-									rect: {stroke: 'none', 'fill-opacity': 0}
-							}
-					}, joint.shapes.basic.Rect.prototype.defaults)
-			});
-	
-			
-			this.paper.$el.css('pointer-events', 'none');
-			var cells = buildGraphFromAdjacencyList(vmList);
-	
-			this.graph.addCells(cells);
-			console.log(this.graph);
-			var test = joint.layout.DirectedGraph.layout(this.graph, {
-					etLinkVertices: false,
-					//Top to bottom generation
-					ankDir: "TB",
-					odeSep: 150,
-					dgeSep: 150,
-					ankSep: 50
-			});
-	
-			this.paper.setDimensions(test.width, test.height);
-	
-			$(".Member").bind('click', function () {
-					$scope.raiseShowMachineDetailsEvent($(this).attr('model-id'));
-			});
-	}
-	
-	// Function to call after pull all data about machines
-	var callMeAfterPullData = function (data) {
-			//$scope.machines=Compute.getData().machines;
-			Loading.stop();
-			displayMachine();
-	};
-	
-	var tryToRetrieveData = function () {
-			// If no data retrieve about machine and user is logged
-			if (Compute.getData().machines == null && Identity.isAlreadyLogin()) {
-					Loading.start(); // Show loading gif
-					Compute.pullData(callMeAfterPullData); // Retrieve data and call the callback
-			} else {
-					// Else if user is logged and data is already retrieve
-					// simply display data
-					if (Identity.isAlreadyLogin()) {
-							callMeAfterPullData(); // Display data
-					}
-			}
-	};
-	
-	// On user login
-	$scope.$on('loginEvent', function () {
-			tryToRetrieveData();
-	});
-	
-	// Function to call from view to display the details of a machine
-	$scope.raiseShowMachineDetailsEvent = function (id) {
-	
-			// Stop loading gif and display overlay
-			var callback = function () {
-					Loading.stop();
-					var data = Compute.getData();
-	
-					$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);
-	
-			};
-			Loading.start(); // Show loading gif
-			Compute.pullMachines(callback); // Retrieve machine info and display overlay
-	};
-	
-	// Try to retrieve data for the first time
-	tryToRetrieveData();
-	
-	
-	
-	//Read the adjacencyList and build the elements and the links according to it
-	function buildGraphFromAdjacencyList(adjacencyList) {
-	
-			var elements = [];
-			var links = [];
-	
-			_.each(adjacencyList['vms'], function (vm) {
-					elements.push(makeElement(vm));
-			});
-			_.each(adjacencyList['links'], function (link) {
-					links.push(makeLink(link[0], link[1], link[2], link[3]));
-			});
-			// Links must be added after all the elements. This is because when the links
-			// are added to the graph, link source/target
-			// elements must be in the graph already.
-			return elements.concat(links);
-	}
-	
-	// On user login
-	$scope.$on('updateGraphEvent', function () {
-		displayMachine();
-            
-	});
-	//Return a new link linking the parent and child elements with the interfaces names given in parameters 
-	function makeLink(parentElementLabel, childElementLabel, Iparent, Ichild) {
-	
-			return new joint.dia.Link({
-					source: {id: parentElementLabel},
-					target: {id: childElementLabel},
-					labels: [
-							{position: 20, attrs: {text: {text: Iparent}}},
-							{position: -20, attrs: {text: {text: Ichild}}}
-					]
-			});
-	}
-	
-	//Return a new element
-	function makeElement(vm) {
-			var label = vm[0];
-	
-			var maxLineLength = _.max(label.split('\n'), function (l) {
-					return l.length;
-			}).length;
-	
-			// Compute width/height of the rectangle based on the number 
-			// of lines in the label and the letter size. 0.6 * letterSize is
-			// an approximation of the monospace font letter width.
-			var width = 130;
-			var height = 80;
-			var data = Compute.getData();
-	
-			if (data.machines[vm[1]].status == "ACTIVE") {
-					return new joint.shapes.org.Member({
-							id: vm[1],
-							position: {x: 0, y: 0},
-							attrs: {
-									'.card': {fill: 'blue', stroke: 'none'},
-									image: {'xlink:href': './images/ON.png', opacity: 0.7},
-									//'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
-									'.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0}
-							}
-					});
-			} else {
-					return new joint.shapes.org.Member({
-							id: vm[1],
-							position: {x: 0, y: 0},
-							attrs: {
-									'.card': {fill: 'blue', stroke: 'none'},
-									image: {'xlink:href': './images/OFF.png', opacity: 0.7},
-									//'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
-									'.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0}
-							}
-					});
-			}
-	}
-}]);
\ No newline at end of file
+    {
+
+        graph = new joint.dia.Graph;
+        paper = new joint.dia.Paper({
+            el: $('#graphHolder'),
+            width: $('#graphHolder').width(),
+            //height: test.height,
+            model: graph,
+            gridSize: 1,
+            eractive: false
+        });
+
+        $scope.raiseShowMachineCreationEvent = function () {
+            $rootScope.$broadcast("showMachineCreationEvent", Compute.getData().axioms);
+        };
+
+        var displayMachine = function () {
+
+            var machineNames = [];
+            var i = 0;
+            $.each(Compute.getData().machines, function () {
+                machineNames[i] = [this.name, this.id];
+                i++;
+            })
+            var vmList = {
+                'vms': machineNames
+                        /*'links': [
+                         ['VM 1', 'VM 2', '', ''],
+                         ['VM 2', 'VM 3', 'I3', 'I4'],
+                         ['VM 1', 'VM 3', 'I5', 'I6'],
+                         ['VM 2', 'VM 4', 'I5', 'I6'],
+                         ['VM 4', 'VM 5', 'I5', 'I6'],
+                         ['VM 4', 'VM 6', 'I5', 'I6'],
+                         ['VM 4', 'VM 1', 'I5', 'I6'],
+                         ['VM 7', 'VM 4', 'I5', 'I6'],
+                         ['VM 7', 'VM 3', 'I5', 'I6'],
+                         ['VM 6', 'VM 8', 'I5', 'I6'],
+                         ['VM 3', 'VM 9', 'I5', 'I6'],
+                         ['VM 3', 'VM 10', 'I5', 'I6']
+                         ]*/
+            };
+            //Custom element for inserting html
+            joint.shapes.html = {};
+            joint.shapes.html.Element = joint.shapes.basic.Rect.extend({
+                defaults: joint.util.deepSupplement({
+                    type: 'html.Element',
+                    attrs: {
+                        rect: {stroke: 'none', 'fill-opacity': 0}
+                    }
+                }, joint.shapes.basic.Rect.prototype.defaults)
+            });
+
+
+            this.paper.$el.css('pointer-events', 'none');
+            var cells = buildGraphFromAdjacencyList(vmList);
+
+            this.graph.addCells(cells);
+            //console.log(this.graph);
+            var test = joint.layout.DirectedGraph.layout(this.graph, {
+                etLinkVertices: false,
+                //Top to bottom generation
+                ankDir: "TB",
+                odeSep: 150,
+                dgeSep: 150,
+                ankSep: 50
+            });
+
+            this.paper.setDimensions(test.width, test.height);
+
+            $(".Member").bind('click', function () {
+                $scope.raiseShowMachineDetailsEvent($(this).attr('model-id'));
+            });
+        }
+
+        // Function to call after pull all data about machines
+        var callMeAfterPullData = function (data) {
+            //$scope.machines=Compute.getData().machines;
+            Loading.stop();
+            displayMachine();
+        };
+
+        var tryToRetrieveData = function () {
+            // If no data retrieve about machine and user is logged
+            if (Compute.getData().machines == null && Identity.isAlreadyLogin()) {
+                Loading.start(); // Show loading gif
+                Compute.pullData(callMeAfterPullData); // Retrieve data and call the callback
+            } else {
+                // Else if user is logged and data is already retrieve
+                // simply display data
+                if (Identity.isAlreadyLogin()) {
+                    callMeAfterPullData(); // Display data
+                }
+            }
+        };
+
+        // On user login
+        $scope.$on('loginEvent', function () {
+            tryToRetrieveData();
+        });
+
+        // Function to call from view to display the details of a machine
+        $scope.raiseShowMachineDetailsEvent = function (id) {
+
+            // Stop loading gif and display overlay
+            var callback = function () {
+                Loading.stop();
+                var data = Compute.getData();
+
+                $rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);
+
+            };
+            Loading.start(); // Show loading gif
+            Compute.pullMachines(callback); // Retrieve machine info and display overlay
+        };
+
+        // Try to retrieve data for the first time
+        tryToRetrieveData();
+
+
+
+        //Read the adjacencyList and build the elements and the links according to it
+        function buildGraphFromAdjacencyList(adjacencyList) {
+
+            var elements = [];
+            var links = [];
+
+            _.each(adjacencyList['vms'], function (vm) {
+                elements.push(makeElement(vm));
+            });
+            _.each(adjacencyList['links'], function (link) {
+                links.push(makeLink(link[0], link[1], link[2], link[3]));
+            });
+            // Links must be added after all the elements. This is because when the links
+            // are added to the graph, link source/target
+            // elements must be in the graph already.
+            return elements.concat(links);
+        }
+
+        // On user login
+        $scope.$on('updateGraphEvent', function () {
+            displayMachine();
+
+        });
+        //Return a new link linking the parent and child elements with the interfaces names given in parameters 
+        function makeLink(parentElementLabel, childElementLabel, Iparent, Ichild) {
+
+            return new joint.dia.Link({
+                source: {id: parentElementLabel},
+                target: {id: childElementLabel},
+                labels: [
+                    {position: 20, attrs: {text: {text: Iparent}}},
+                    {position: -20, attrs: {text: {text: Ichild}}}
+                ]
+            });
+        }
+
+        //Return a new element
+        function makeElement(vm) {
+            var label = vm[0];
+
+            var maxLineLength = _.max(label.split('\n'), function (l) {
+                return l.length;
+            }).length;
+
+            // Compute width/height of the rectangle based on the number 
+            // of lines in the label and the letter size. 0.6 * letterSize is
+            // an approximation of the monospace font letter width.
+            var width = 130;
+            var height = 80;
+            var data = Compute.getData();
+
+            if (data.machines[vm[1]].status == "ACTIVE") {
+                return new joint.shapes.org.Member({
+                    id: vm[1],
+                    position: {x: 0, y: 0},
+                    attrs: {
+                        '.card': {fill: 'blue', stroke: 'none'},
+                        image: {'xlink:href': './images/ON.png', opacity: 0.7},
+                        //'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
+                        '.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0}
+                    }
+                });
+            } else {
+                return new joint.shapes.org.Member({
+                    id: vm[1],
+                    position: {x: 0, y: 0},
+                    attrs: {
+                        '.card': {fill: 'blue', stroke: 'none'},
+                        image: {'xlink:href': './images/OFF.png', opacity: 0.7},
+                        //'.rank': { text: rank, fill: textColor, 'word-spacing': '-5px', 'letter-spacing': 0},
+                        '.name': {text: label, fill: 'white', 'font-size': 13, 'font-family': 'Arial', 'letter-spacing': 0}
+                    }
+                });
+            }
+        }
+    }]);
\ No newline at end of file
diff --git a/client/js/controllers/image/image.js b/client/js/controllers/image/image.js
index 1702cb3..7ce3bb9 100755
--- a/client/js/controllers/image/image.js
+++ b/client/js/controllers/image/image.js
@@ -3,7 +3,7 @@
  * 
  * @param {$scope} $scope The $scope service from angular
  */
-mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity','$rootScope', function ($scope, Image, Loading, Identity, $rootScope)
+mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity', '$rootScope', function ($scope, Image, Loading, Identity, $rootScope)
     {
 
         // Update view
@@ -21,9 +21,14 @@ mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity','$root
                 callMeAfterGetImage();
             }
         }
-        
-        $scope.edit=function(image){
+
+        $scope.edit = function (image) {
             $rootScope.$broadcast("editImageEvent", image, Image.getData().axioms);
-            
+
         }
+
+        $scope.showUploadImageModal = function () {
+            $rootScope.$broadcast("showUploadImageModalEvent");
+
+        };
     }]);
diff --git a/client/js/controllers/image/upload.js b/client/js/controllers/image/upload.js
index 6737269..8d62b50 100644
--- a/client/js/controllers/image/upload.js
+++ b/client/js/controllers/image/upload.js
@@ -22,10 +22,11 @@ mainApp.controller('uploadImageCtrl', ['$scope', 'Image', 'Loading', 'Identity',
          */
 
         $scope.doUpload = function () {
-            console.log($('#imageToUpload').prop('files')[0]);
+           /* console.log($('#imageToUpload').prop('files')[0]);
             Image.uploadImage($('#imageToUpload').prop('files')[0], function () {
-                alert("done")
-            })
+                alert("done");
+            });*/
+            Image.uploadImage("loic",function(){})
             /*$("#drop-area-div").dmUploader({
              extraData: 	{
              "token" : Identity.getToken(),
@@ -57,6 +58,11 @@ mainApp.controller('uploadImageCtrl', ['$scope', 'Image', 'Loading', 'Identity',
 
 
         };
+        // Manager logout event
+        $scope.$on('showUploadImageModalEvent', function () {
+                    $scope.token = Identity.getToken();
+
+            $('#uploadImageModal').modal("show");
+        });
 
-        $scope.token = Identity.getToken();
     }]);
diff --git a/client/js/services/Image.js b/client/js/services/Image.js
index 90f3a48..ef4e0b1 100644
--- a/client/js/services/Image.js
+++ b/client/js/services/Image.js
@@ -84,45 +84,73 @@ mainApp.factory('Image', ['$http', 'Identity', function ($http, Identity) {
          * @returns {undefined}
          */
         var uploadImage = function (fileToUpload, callback) {
-            var form_data = new FormData();
-            form_data.append('file', fileToUpload);
-            console.log(fileToUpload);
-            form_data.append("task", "image");
-            form_data.append("token", Identity.getToken());
-            form_data.append('action', "uploadImage");
-            form_data.append('id', '6564');
-            form_data.append('file_name', fileToUpload);
-
-            $.ajax({
-                url: "../server/index.php", // Url to which the request is send
-                type: "POST", // Type of request to be send, called as method
-                data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
-                file_name: fileToUpload,
-                token: Identity.getToken(),
-                task: "image",
-                action: 'uploadImage',
-                id: '6564',
-                contentType: false, // The content type used when sending data to the server.
-                cache: false, // To unable request pages to be cached
-                processData: false, // To send DOMDocument or non processed data file it is set to false
-                success: function (data)   // A function to be called if request succeeds
-                {
-                    alert("success");
-                }
+            /*var form_data = new FormData();
+             form_data.append('file', fileToUpload);
+             console.log(fileToUpload);
+             form_data.append("task", "image");
+             form_data.append("token", Identity.getToken());
+             form_data.append('action', "uploadImage");
+             form_data.append('id', '6564');
+             form_data.append('file_name', fileToUpload);
+             
+             $.ajax({
+             url: "../server/index.php", // Url to which the request is send
+             type: "POST", // Type of request to be send, called as method
+             data: form_data, // Data sent to server, a set of key/value pairs (i.e. form fields and values)
+             file_name: fileToUpload,
+             token: Identity.getToken(),
+             task: "image",
+             action: 'uploadImage',
+             id: '6564',
+             contentType: false, // The content type used when sending data to the server.
+             cache: false, // To unable request pages to be cached
+             processData: false, // To send DOMDocument or non processed data file it is set to false
+             success: function (data)   // A function to be called if request succeeds
+             {
+             alert("success");
+             }
+             });*/
+
+            alert("send")
+            var result = $http.post('../server/index.php',
+                    $.param({"token": Identity.getToken(), "task": "image", 'action': 'createImage', "opt": {"name": "loic"}}));
+
+            //var result=$http.post('../server/index.php',
+            //				  $.param({"token" : Identity.getToken(), "task" : "image", 'action':'uploadImage', 'file_name':form_data, 'id':'6564'}));  
+
+            // Wait and handle the response
+            result.then(function (response) {
+                //callback(parseUploadImageAnswer(response, false));
+                alert(response.data)
+                console.log(response.data)
+                callback()
+            }, function (response) {
+                alert(response.data)
+                callback()
+                //callback(parseUploadImageAnswer(response, true));
             });
+        };
+
+        var createImage = function (name,callback) {
+        
+
+            var result = $http.post('../server/index.php',
+                    $.param({"token": Identity.getToken(), "task": "image", 'action': 'createImage', "opt": {"name": name}}));
 
             //var result=$http.post('../server/index.php',
             //				  $.param({"token" : Identity.getToken(), "task" : "image", 'action':'uploadImage', 'file_name':form_data, 'id':'6564'}));  
 
             // Wait and handle the response
-            /*   result.then(function (response){
-             callback(parseUploadImageAnswer(response, false));
-             },function(response){
-             callback(parseUploadImageAnswer(response, true));
-             });*/
+            result.then(function (response) {
+                callback()
+            }, function (response) {
+                alert(response.data)
+                callback()
+            });
         };
 
 
+
         var getData = function (response) {
             return data;
         };
@@ -132,6 +160,7 @@ mainApp.factory('Image', ['$http', 'Identity', function ($http, Identity) {
             getImages: getImages,
             updateImage: updateImage,
             getData: getData,
+            createImage: createImage,
             uploadImage: uploadImage
         };
 
diff --git a/client/partials/image/image.html b/client/partials/image/image.html
index 9c17c2f..a789ae8 100644
--- a/client/partials/image/image.html
+++ b/client/partials/image/image.html
@@ -8,7 +8,7 @@
 
 
         <div  class="btn-group btn-group-md" role="group" aria-label="...">
-            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#uploadImageModal">Upload</button>
+            <button type="button" class="btn btn-default" ng-click="showUploadImageModal()">Upload</button>
             <button type="button" class="btn btn-default">Download</button>
         </div>
         <p></p>
@@ -16,6 +16,7 @@
             <thead>
                 <tr>
                     <th>Name</th>
+                    <th>Status</th>
                     <th>Size</th>
                     <th>Action</th>
                 </tr>
@@ -23,6 +24,9 @@
             <tbody>
                 <tr ng-repeat="image in images">
                     <td>{{ image.name}}</td>
+                    <td ng-if="image.status == 'queued'"><font color="red">{{ image.status}}</font></td>
+                    <td ng-if="image.status != 'queued'"><font color="green">{{ image.status}}</font></td>
+
                     <td>{{ (image.size / 1048576).toFixed(2)}} MB</td>
                     <td>
                         <button type="button" class="btn btn-primary" ng-click="edit(image)">Edit</button>
diff --git a/client/partials/image/upload.html b/client/partials/image/upload.html
index 641646b..b3e8767 100644
--- a/client/partials/image/upload.html
+++ b/client/partials/image/upload.html
@@ -11,7 +11,6 @@
             </div>
 			
             <div class="modal-body">
-
                 <form action="../server/index.php" method="post">
                     <input type="hidden" name="task" value="image" />
                     <input type="hidden" name="token" value="{{ token }}" />