Merge branch 'develop' into Eole_Graph

Conflicts:
	client/index.html
	client/js/controllers/home/home.js
	client/partials/home/home.html

14 files changed, 780 insertions, 679 deletions

diff --git a/client/js/app.js b/client/js/app.js
index a26e0ec..4ef35b5 100644
--- a/client/js/app.js
+++ b/client/js/app.js
@@ -3,7 +3,7 @@
  * The main app module instance
  * @type angular.module.angular-1_3_6_L1749.moduleInstance
  */
-var mainApp=angular.module("mainApp",['ngRoute', 'ngSanitize', 'ngCookies']);
+var mainApp=angular.module("mainApp",['ngRoute', 'ngSanitize', 'ngCookies','lr.upload']);
 
 /**
  * Configure routeProvider
@@ -12,19 +12,20 @@ mainApp.config(['$routeProvider', function($routeProvider){
         
         
         $routeProvider.
-                when('/home',{
-                    templateUrl: 'partials/home/home.html',
-                    controller: 'homeCtrl'
-        }).
-                when('/network',{
-                    templateUrl: 'partials/network/network.html',
-                    controller: 'networkCtrl'
-		}).
-		        when('/image',{
-                    templateUrl: 'partials/image/image.html',
-                    controller: 'imageCtrl'
-        }).otherwise({
-            redirectTo: '/'
+            when('/home',{
+                templateUrl: 'partials/home/home.html',
+                controller: 'homeCtrl'
+            }).
+            when('/network',{
+                templateUrl: 'partials/network/network.html',
+                controller: 'networkCtrl'
+            }).
+            when('/image',{
+                templateUrl: 'partials/image/image.html',
+                controller: 'imageCtrl'
+            })
+            .otherwise({
+                redirectTo: '/home'
         });
 }]);
 
diff --git a/client/js/controllers/home/home.js b/client/js/controllers/home/home.js
index 9af3ae3..f6e6b84 100644..100755
--- a/client/js/controllers/home/home.js
+++ b/client/js/controllers/home/home.js
@@ -5,129 +5,116 @@
  */
 mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image)
 {
-	console.log("homeCTRl");
+	console.log("test");
+	// Function to call after pull all data about machines
 	var callMeAfterPullData=function(data){
-		$scope.machines=Compute.getData().machines;
-			Loading.stop();
-	}
-
-	;
-	if(Compute.getData().machines == null && Identity.isAlreadyLogin()){
-		Loading.start();
-		Compute.pullData(callMeAfterPullData);		
-	}
-	else{
-		if(Identity.isAlreadyLogin()){
-			callMeAfterPullData();
-		}
-	}
-
-
-	Image.getImages(function(){});
-
-
-	$scope.raiseShowMachineDetailsEvent=function(id){
-
-		var callback=function(){
-			Loading.stop();
-			var data=Compute.getData();
-			$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);		
-
-		}
-		Loading.start();
-		Compute.pullMachines(callback);
-	}
-
-	//adjacencyList, hard-encoded now but will be the result of a request to the server, format may change
-	var vmList = {
-		'vms': [
-			'VM 1',
-			'VM 2',
-			'VM 3',
-			'VM 4',
-			'VM 5',
-			'VM 6',
-			'VM 7',
-			'VM 8',
-			'VM 9',
-			'VM 10'
-		],
-		'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']
-		]
+		//$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
+          }
+      }
+  };
 	
-	//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)
-	});
+	// 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();
+	
+	var displayMachine = function(){
+		console.log("test");
+		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)
+		});
 		
-	//Custom view for this element
-	/*joint.shapes.basic.Rect.ElementView = joint.dia.ElementView.extend({
-
-		initialize: function() {
-			_.bindAll(this, 'updateBox');
-			joint.dia.ElementView.prototype.initialize.apply(this, arguments);
-
-			this.$box = $(_.template(this.model.get('html'))());
-			// Prevent paper from handling pointerdown.
-			this.$box.find('input,select').on('mousedown click', function(evt) { evt.stopPropagation(); });
-			// This is an example of reacting on the input change and storing the input data in the cell model.
-			this.$box.find('input').on('change', _.bind(function(evt) {
-				this.model.set('input', $(evt.target).val());
-			}, this));
-			this.$box.find('select').on('change', _.bind(function(evt) {
-				this.model.set('select', $(evt.target).val());
-			}, this));
-			this.$box.find('select').val(this.model.get('select'));
-			this.$box.on('click', function(){
-               $scope.raiseShowMachineDetailsEvent();
-            });
-			// Update the box position whenever the underlying model changes.
-			this.model.on('change', this.updateBox, this);
-			// Remove the box when the model gets removed from the graph.
-			this.model.on('remove', this.removeBox, this);
+		var graph = new joint.dia.Graph;
+		var paper = new joint.dia.Paper({
+			el: $('#graphHolder'),
+			width: $('#graphHolder').width(),
+			//height: test.height,
+			model: graph,
+			gridSize: 1,
+			eractive: false
+		});
+		paper.$el.css('pointer-events', 'none');
+		var cells = buildGraphFromAdjacencyList(vmList);
+		
+		graph.addCells(cells);
+		var test = joint.layout.DirectedGraph.layout(graph, {
+			etLinkVertices: false,
+			//Top to bottom generation
+			ankDir: "TB",
+			odeSep: 150,
+			dgeSep: 150,
+			ankSep: 50
+		});
+		
+		paper.setDimensions(test.width, test.height);
+		
+		$(".Member").bind('click', function() {
+			$scope.raiseShowMachineDetailsEvent($(this).attr('model-id'));
+		});
+	}
 
-			this.updateBox();
-		},
-		render: function() {
-			joint.dia.ElementView.prototype.render.apply(this, arguments);
-			this.paper.$el.prepend(this.$box);
-			this.updateBox();
-			return this;
-		},
-		updateBox: function() {
-			// Set the position and dimension of the box so that it covers the JointJS element.
-			var bbox = this.model.getBBox();
-			// Example of updating the HTML with a data stored in the cell model.
-			this.$box.find('label').text(this.model.get('name'));
-			this.$box.find('span').text(this.model.get('select'));
-			this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)' });
-		},
-		removeBox: function(evt) {
-			this.$box.remove();
-		}
-	});
-	*/
-  
 	//Read the adjacencyList and build the elements and the links according to it
 	function buildGraphFromAdjacencyList(adjacencyList) {
 
@@ -137,11 +124,9 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
 		_.each(adjacencyList['vms'], function(vm) {
 			elements.push(makeElement(vm));
 		});
-		console.log(elements);
 		_.each(adjacencyList['links'], function(link) {
 			links.push(makeLink(link[0], link[1] , link[2], link[3]));
 		});
-		console.log(links);
 		// 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.
@@ -162,7 +147,8 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
 	}
 
 	//Return a new element
-	function makeElement(label) {
+	function makeElement(vm) {
+		var label = vm[0];
 
 		var maxLineLength = _.max(label.split('\n'), function(l) { return l.length; }).length;
 
@@ -171,83 +157,30 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I
 		// an approximation of the monospace font letter width.
 		var width = 130;
 		var height = 80;
-
-		/*return new joint.shapes.html.Element({
-            id: label,
-			name: label,
-            size: { width: width, height: height },
-
-            html: [
-				'<div class="html-element">',
-				'<img src="./images/ON.png">',
-				'<label></label>',
-				'<input type="image" src="./images/gear.png" class="config"></button>',
-				'</div>'
-			].join(''),
-
-            attrs: {
-                rect: {
-                    fill: '#FE854F',
-                    width: width,
-                    height: height,
-                    rx: 5,
-                    ry: 5,
-                    stroke: 'none'
-                }
-            }
-        });*/
-	    return new joint.shapes.org.Member({
-		id: label,
-		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 }
+		var data = Compute.getData();
+		console.log(data.machines[vm[1]]);
+		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 }
+				}
+			});
 		}
-	    });
 	}
-	
-	var graph = new joint.dia.Graph;
-    var paper = new joint.dia.Paper({
-        el: $('#graphHolder'),
-        width: $('#graphHolder').width(),
-        //height: test.height,
-        model: graph,
-        gridSize: 1,
-	interactive: false
-    });
-    paper.$el.css('pointer-events', 'none');
-    var cells = buildGraphFromAdjacencyList(vmList);
-    console.log(cells);
-    /*graph.resetCells(cells);
-    joint.layout.DirectedGraph.layout(graph, {
-		setLinkVertices: false,
-		//Top to bottom generation
-		rankDir: "TB",
-		nodeSep: 150,
-		edgeSep: 150,
-		rankSep: 150
-	});*/
-    graph.addCells(cells);
-    var test = joint.layout.DirectedGraph.layout(graph, {
-		setLinkVertices: false,
-		//Top to bottom generation
-		rankDir: "TB",
-		nodeSep: 150,
-		edgeSep: 150,
-		rankSep: 50
-	});
-    console.log(test);
-
-    paper.setDimensions(test.width, test.height);
-
-    $(".Member").bind('click', function() {
-	console.log("Click");
-	$scope.raiseShowMachineDetailsEvent();
-    });
-    
-    
-	
-
 }]);
diff --git a/client/js/controllers/home/machineDetails.js b/client/js/controllers/home/machineDetails.js
index c015eaa..9c8c602 100644
--- a/client/js/controllers/home/machineDetails.js
+++ b/client/js/controllers/home/machineDetails.js
@@ -3,41 +3,43 @@
  * 
  * @param {$scope} $scope The $scope service from angular
  */
-mainApp.controller('machineDetailsCtrl', [ '$scope', 'Compute', '$rootScope', '$timeout', function ($scope, Compute, $rootScope, $timeout)
-{
+mainApp.controller('machineDetailsCtrl', ['$scope', 'Compute', '$rootScope', '$timeout', 'Identity', function ($scope, Compute, $rootScope, $timeout, Identity)
+    {
 
-	// Init scope
-	$scope.machine={};
-	$scope.machineIsStarting=false; // For loading icon
 
+        // Init scope
+        $scope.machine = {};
+        $scope.machineIsStarting = false; // For loading icon
 
-	$scope.$on('showMachineDetailsEvent', function(eventName ,machine, axioms){
-		$scope.machine=machine;
-		$scope.axioms=axioms;
-		$('#machineDetailsModal').modal({backdrop: false, keyboard: true});
-	});
+        // When we need to show details of machine
+        $scope.$on('showMachineDetailsEvent', function (eventName, machine, axioms) {
+            $scope.machine = machine;
+            $scope.axioms = axioms;
+            $('#machineDetailsModal').modal({backdrop: false, keyboard: true});
+        });
 
+        // Try to stop or start a machine
+        $scope.toggleMachineState = function () {
+            // Display gif
+            $scope.machineIsStarting = true;
 
-	$scope.toggleMachineState=function(){
-		// Display gif
-		$scope.machineIsStarting=true;
+            // Fake timeout
+            $timeout(function () {
+                $scope.machineIsStarting = false;
+            }, 3000);
+            $timeout(function () {
+                $scope.machine.online = !$scope.machine.online;
 
-		// Fake timeout
-		$timeout(function(){
-			$scope.machineIsStarting=false;
-		}, 3000);
-		$timeout(function(){
-		$scope.machine.online=!$scope.machine.online;
+            }, 3000);
 
-		}, 3000);
 
-		
-	};
+        };
 
-	$scope.applyModifications=function(){
-		//Todo
-	}
-	
+        // Apply modifications
+        $scope.applyModifications = function () {
+            //Todo
+        };
 
-	
-}]);
+
+
+    }]);
diff --git a/client/js/controllers/image/image.js b/client/js/controllers/image/image.js
index e298fcc..d0578d7 100644
--- a/client/js/controllers/image/image.js
+++ b/client/js/controllers/image/image.js
@@ -3,19 +3,22 @@
  * 
  * @param {$scope} $scope The $scope service from angular
  */
-mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', function ($scope, Image, Loading)
-{
-	var callbackTest=function(){
-		$scope.images=Image.getData().images;
-				Loading.stop();
-	};
+mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity', function ($scope, Image, Loading, Identity)
+    {
 
-	if(Image.getData().images==null){
-		Loading.start();
-		Image.getImages(callbackTest);
-	}
-	else{
-		callbackTest();
-	}
-	
-}]);
+        // Update view
+        var callMeAfterGetImage = function () {
+            $scope.images = Image.getData().images;
+            Loading.stop();
+        };
+
+        // If user is login try to retrieve data
+        if (Identity.isAlreadyLogin()) {
+            if (Image.getData().images == null) {
+                Loading.start();
+                Image.getImages(callMeAfterGetImage);
+            } else {
+                callMeAfterGetImage();
+            }
+        }
+    }]);
diff --git a/client/js/controllers/image/upload.js b/client/js/controllers/image/upload.js
new file mode 100644
index 0000000..6737269
--- /dev/null
+++ b/client/js/controllers/image/upload.js
@@ -0,0 +1,62 @@
+/**
+ * The image controller
+ * 
+ * @param {$scope} $scope The $scope service from angular
+ */
+mainApp.controller('uploadImageCtrl', ['$scope', 'Image', 'Loading', 'Identity', 'upload', function ($scope, Image, Loading, Identity, upload)
+    {
+        /*$scope.uploader = new FileUploader({
+         "token" : Identity.getToken(),
+         "task" : "image",
+         'action':'uploadImage',
+         'id':'6564'
+         });
+         $scope.uploader.url='../server/index.php'
+         $scope.uploader.alias='file_name'
+         $scope.uploader.formData={
+         "token" : Identity.getToken(),
+         "task" : "image",
+         'action':'uploadImage',
+         'id':'6564'
+         }
+         */
+
+        $scope.doUpload = function () {
+            console.log($('#imageToUpload').prop('files')[0]);
+            Image.uploadImage($('#imageToUpload').prop('files')[0], function () {
+                alert("done")
+            })
+            /*$("#drop-area-div").dmUploader({
+             extraData: 	{
+             "token" : Identity.getToken(),
+             "task" : "image",
+             'action':'uploadImage',
+             'id':'6564'},
+             url:"../server/index.php"
+             });
+             */
+
+            /*upload({
+             url: '../server/index.php',
+             method: 'POST',
+             data: {
+             "token" : Identity.getToken(),
+             "task" : "image",
+             'action':'uploadImage',
+             'id':'6564',
+             "file_name": $scope.myFile, // a jqLite type="file" element, upload() will extract all the files from the input and put them into the FormData object before sending.
+             }
+             }).then(
+             function (response) {
+             console.log(response.data); // will output whatever you choose to return from the server on a successful upload
+             },
+             function (response) {
+             console.error(response); //  Will return if status code is above 200 and lower than 300, same as $http
+             }
+             );*/
+
+
+        };
+
+        $scope.token = Identity.getToken();
+    }]);
diff --git a/client/js/controllers/login.js b/client/js/controllers/login.js
index 63cb6d1..4a0de42 100644
--- a/client/js/controllers/login.js
+++ b/client/js/controllers/login.js
@@ -5,62 +5,63 @@
  * @param {$sce} $sce The $sce angular service
  * @param {$http} $http The $http angular service
  * @param {Identity} The Identity service
-
+ 
  */
-mainApp.controller('loginCtrl', ['$scope','$sce','Identity', function ($scope,$sce, Identity)
-{
-	// Check for login and define default states
-	if(!Identity.isAlreadyLogin()){
-		$('#loginModal').modal({backdrop: 'static', keyboard: false});
-	}
+mainApp.controller('loginCtrl', ['$scope', '$sce', 'Identity', '$rootScope', function ($scope, $sce, Identity, $rootScope)
+    {
+        // Check for login and define default states
+        if (!Identity.isAlreadyLogin()) {
+            $('#loginModal').modal({backdrop: 'static', keyboard: false});
+        }
 
-	// Manager logout event
-	$scope.$on('logoutEvent', function(){
-		$('#loginModal').modal({backdrop: 'static', keyboard: false});
-	});
+        // Manager logout event
+        $scope.$on('logoutEvent', function () {
+            $('#loginModal').modal({backdrop: 'static', keyboard: false});
+        });
 
 
-	
-	// Hide loading button and message alert
-    $('#loadingLoginButton').hide();
-    $('#failedToLoginAlert').hide();
 
-	
-	// Defined function for login
-    $scope.loginAction=function(){
-		
-		// Begin login state for template
-        $('#loginButton').hide();
-        $('#loadingLoginButton').show();
+        // Hide loading button and message alert
+        $('#loadingLoginButton').hide();
         $('#failedToLoginAlert').hide();
 
-		// Get data from templates
-        var username=$("#loginFormUsername").val();
-        var password=$("#loginFormPassword").val();
-        var projectname=$("#loginFormProjectname").val();
 
-		// Function to call to handle result
-		var responseCallback=function(response){
+        // Defined function for login
+        $scope.loginAction = function () {
+
+            // Begin login state for template
+            $('#loginButton').hide();
+            $('#loadingLoginButton').show();
+            $('#failedToLoginAlert').hide();
+
+            // Get data from templates
+            var username = $("#loginFormUsername").val();
+            var password = $("#loginFormPassword").val();
+            var projectname = $("#loginFormProjectname").val();
+
+            // Function to call to handle result
+            var responseCallback = function (response) {
+
+                if (response.status !== 0) {
+                    // Set reason of fail
+                    $scope.failReason = response.failReason;
+
+                    // Display the error
+                    $('#failedToLoginAlert').show();
+                } else {
+                    // Else the user is online !
+                    $('#loginModal').modal('hide');
+                    // Send login event
+                    $rootScope.$broadcast("loginEvent");
+                }
 
-            if(response.status!==0){
-				// Set reason of fail
-                $scope.failReason=response.failReason;
+                // Reset button state
+                $('#loginButton').show();
+                $('#loadingLoginButton').hide();
+            };
 
-				// Display the error
-                $('#failedToLoginAlert').show();
-            }
-            else {
-				// Else the user is online !
-				$('#loginModal').modal('hide');				
-            }
+            // Try to login
+            Identity.login(username, password, projectname, responseCallback);
+        };
 
-            // Reset button state
-            $('#loginButton').show();
-            $('#loadingLoginButton').hide();	
-		}
-		
-		// Try to login
-        Identity.login(username, password, projectname, responseCallback);
-    };
-	
-}]);
+    }]);
diff --git a/client/js/controllers/network/network.js b/client/js/controllers/network/network.js
index 7264aec..f600f83 100644
--- a/client/js/controllers/network/network.js
+++ b/client/js/controllers/network/network.js
@@ -5,4 +5,5 @@
  */
 mainApp.controller('networkCtrl', function ($scope)
 {
+
 });
\ No newline at end of file
diff --git a/client/js/controllers/status.js b/client/js/controllers/status.js
index 6f398ad..c3e634b 100644
--- a/client/js/controllers/status.js
+++ b/client/js/controllers/status.js
@@ -6,15 +6,14 @@
  * @param {$scope} $scope The $scope service from angular
  * @param {Identity} The Identity service
  */
-mainApp.controller('statusCtrl', ['$scope','Identity', '$rootScope', function ($scope, Identity, $rootScope)
-{
+mainApp.controller('statusCtrl', ['$scope', 'Identity', '$rootScope', function ($scope, Identity, $rootScope)
+    {
+        // Give profile to model
+        $scope.profile = Identity.getProfile();
 
-	// Give profile to model
-    $scope.profile=Identity.getProfile();
-	
-    // Function to logout
-    $scope.logout=function(){
-		Identity.logout();
-	};
+        // Function to logout
+        $scope.logout = function () {
+            Identity.logout();
+        };
 
-}]);
+    }]);
diff --git a/client/js/services/Compute.js b/client/js/services/Compute.js
index 36ddc16..5e95f22 100644
--- a/client/js/services/Compute.js
+++ b/client/js/services/Compute.js
@@ -1,141 +1,140 @@
 
-mainApp.factory('Compute',[ '$http', 'Identity', function($http, Identity){
-
-
-	// Init data
-	var data={};
-	data.machines=null;
-	data.axioms={} // Contain static data
-	data.axioms.ram=[128,512,1024,2048,4096];
-	data.axioms.disk=[1,2,5,10,25,50,100,150,200]
-	data.axioms.images={}; // Retrieve after
-	
-
-	/**
-	 * Parse pullMachines answer
-	 * @param {response} the server response
-	 * @param {boolean} false if the request as been send true else
-	 * @return {requestParserResult} the result of parsing
-	 */
-	var parsePullMachinesAnswer=function(response, failedToSendRequest){
-
-		// Defined return object
-		var requestParserResult={};
-		requestParserResult.status=1;
-		requestParserResult.failReason=null;
-
-		
-		if (typeof response.data.Servers !== 'undefined') {
-			// Set status code
-			requestParserResult.status=0;
-			data.machines=response.data.Servers;
-
-		}
-		else if(failedToSendRequest){
-			requestParserResult.failReason="Failed to send request";
-		}
-		else{
-			requestParserResult.failReason="Error";
-		}
-		return requestParserResult;
-	};
-
-
-	/**
-	 * Retrieve machine list 
-	 * @param {callback} function to call after request complete
-	 */
-	var pullMachines=function(callback){
-		// Send listServers request
-		var result=$http.post('../server/index.php',
-							  $.param({"token" : Identity.getToken(), "task" : "compute", "action":"listServers"}));		
-
-		// Wait and handle the response
-        result.then(function (response){
-			callback(parsePullMachinesAnswer(response, false));
-        },function(response){
-			callback(parsePullMachinesAnswer(response, true));
-        });
-	};
-
-
-	/**
-	 * Parse pullImages answer
-	 * @param {response} the server response
-	 * @param {boolean} false if the request as been send true else
-	 * @return {requestParserResult} the result of parsing
-	 */
-	var parsePullImagesAnswer=function(response, failedToSendRequest){
-
-		// Defined return object
-		var requestParserResult={};
-		requestParserResult.status=1;
-		requestParserResult.failReason=null;
-
-		
-		if (typeof response.data.Images !== 'undefined') {
-			// Set status code
-			requestParserResult.status=0;
-			data.axioms.images=response.data.Images;
-		}
-		else if(failedToSendRequest){
-			requestParserResult.failReason="Failed to send request";
-		}
-		else{
-			requestParserResult.failReason="Error";
-		}
-		return requestParserResult;
-	};
-
-
-
-	
-	/**
-	 * Retrieve machine list 
-	 * @param {callback} function to call after request complete
-	 */
-	var pullImages=function(callback){
-		// Send listServers request
-		var result=$http.post('../server/index.php',
-							  $.param({"token" : Identity.getToken(), "task" : "compute", "action":"listImages"}));		
-
-		// Wait and handle the response
-        result.then(function (response){
-			callback(parsePullImagesAnswer(response, false));
-        },function(response){
-			callback(parsePullImagesAnswer(response, true));
-        });
-	};
-
-
-	/**
-	 * Retrieve all data 
-	 * @param {callback} function to call after request complete
-	 */
-	var pullData=function(callback){
-		var nextFunction=function(response){
-			if(response.status==0){
-				pullMachines(callback);
-			}
-		}
-		pullImages(nextFunction);
-	}
-
-
-	/**
-	 * Get Data
-	 * @return {data} return the data object
-	 */
-	var getData=function(){
-		return data;
-	}
-	
-	// Return services objects
-	return {
-		pullMachines: pullMachines,
-		pullData: pullData,
-		getData: getData
-	};
-
-	
-}]);
+mainApp.factory('Compute', ['$http', 'Identity', function ($http, Identity) {
+
+
+        // Init data
+        var data = {};
+        data.machines = null;
+        data.axioms = {} // Contain static data
+        data.axioms.ram = [128, 512, 1024, 2048, 4096];
+        data.axioms.disk = [1, 2, 5, 10, 25, 50, 100, 150, 200]
+        data.axioms.images = {}; // Retrieve after
+
+
+        /**
+         * Parse pullMachines answer
+         * @param {response} the server response
+         * @param {boolean} false if the request as been send true else
+         * @return {requestParserResult} the result of parsing
+         */
+        var parsePullMachinesAnswer = function (response, failedToSendRequest) {
+
+            // Defined return object
+            var requestParserResult = {};
+            requestParserResult.status = 1;
+            requestParserResult.failReason = null;
+
+
+            if (typeof response.data.Servers !== 'undefined') {
+                // Set status code
+                requestParserResult.status = 0;
+                data.machines = response.data.Servers;
+
+            } else if (failedToSendRequest) {
+                requestParserResult.failReason = "Failed to send PullMachine request";
+            } else {
+                requestParserResult.failReason = "Error";
+            }
+            return requestParserResult;
+        };
+
+
+        /**
+         * Retrieve machine list 
+         * @param {callback} function to call after request complete
+         */
+        var pullMachines = function (callback) {
+            // Send listServers request
+            var result = $http.post('../server/index.php',
+                    $.param({"token": Identity.getToken(), "task": "compute", "action": "listServers"}));
+
+            // Wait and handle the response
+            result.then(function (response) {
+                callback(parsePullMachinesAnswer(response, false));
+            }, function (response) {
+                callback(parsePullMachinesAnswer(response, true));
+            });
+        };
+
+
+        /**
+         * Parse pullImages answer
+         * @param {response} the server response
+         * @param {boolean} false if the request as been send true else
+         * @return {requestParserResult} the result of parsing
+         */
+        var parsePullImagesAnswer = function (response, failedToSendRequest) {
+
+            // Defined return object
+            var requestParserResult = {};
+            requestParserResult.status = 1;
+            requestParserResult.failReason = null;
+
+
+            if (typeof response.data.Images !== 'undefined') {
+                // Set status code
+                requestParserResult.status = 0;
+                data.axioms.images = response.data.Images;
+            } else if (failedToSendRequest) {
+                requestParserResult.failReason = "Failed to send PullImage request";
+            } else {
+                requestParserResult.failReason = "Error";
+            }
+            return requestParserResult;
+        };
+
+
+
+
+        /**
+         * Retrieve machine list 
+         * @param {callback} function to call after request complete
+         */
+        var pullImages = function (callback) {
+            // Send listServers request
+            var result = $http.post('../server/index.php',
+                    $.param({"token": Identity.getToken(), "task": "compute", "action": "listImages"}));
+
+            // Wait and handle the response
+            result.then(function (response) {
+                callback(parsePullImagesAnswer(response, false));
+            }, function (response) {
+
+                callback(parsePullImagesAnswer(response, true));
+            });
+        };
+
+
+        /**
+         * Retrieve all data 
+         * @param {callback} function to call after request complete
+         */
+        var pullData = function (callback) {
+            var nextFunction = function (response) {
+                if (response.status == 0) {
+                    pullMachines(callback);
+                } else {
+                    callback(response);
+                }
+            };
+            pullImages(nextFunction);
+        };
+
+
+        /**
+         * Get Data
+         * @return {data} return the data object
+         */
+        var getData = function () {
+            return data;
+        };
+
+        // Return services objects
+        return {
+            pullMachines: pullMachines,
+            pullData: pullData,
+            getData: getData
+        };
+
+
+    }]);
diff --git a/client/js/services/Identity.js b/client/js/services/Identity.js
index db93e97..17678ed 100644
--- a/client/js/services/Identity.js
+++ b/client/js/services/Identity.js
@@ -1,163 +1,168 @@
 
-mainApp.factory('Identity',[ '$http', '$cookies',  function($http, $cookies){
-
-	/* Create profile structure to store informations
-	 * about current session
-	 */
-    var profile={};
-    profile.username=null;
-    profile.projectname=null;
-	var token=null;
-
-	
-	/* 
-	 * @returns {boolean} Return true if a cookie is found (and load it in profile) false else 
-	 */
-	var isAlreadyLogin=function(){
-
-		// Load cookies
-		var profileInCookie=$cookies.getObject('profile');
-		var tokenPart_0InCookie=$cookies.getObject('token.part_0');
-		var tokenPart_1InCookie=$cookies.getObject('token.part_1');
-
-		
-		// Check if cookie is defined
-		if(typeof profileInCookie !== 'undefined'
-		   && typeof tokenPart_0InCookie !== 'undefined'
-		   && typeof tokenPart_1InCookie !== 'undefined'
-		  ){
-
-			// If yes, put it into variables
-			angular.extend(profile, profileInCookie);
-			token=tokenPart_0InCookie+tokenPart_1InCookie;
-
-			// Return I'm Login
-			return true;
-		}
-
-		// Return I'm not Login
-		return false;
-	}
-
-
-	
-	/*
-	 * Destroy profile cookies
-	 */
-	var logout=function(){
-		$cookies.remove('profile');
-		$cookies.remove('token.part_0');
-		$cookies.remove('token.part_1');
-		token=null;
-		profile.username=null;
-		profile.projectname=null;
-
-		// Reload Page
-		location.reload();
-	}
-
-	
-	/**
-	 * 
-	 * @param {string} response The response to parse
-	 * @param {boolean} to check if the request is send or not
-	 * @returns {requestParserResult} Formated data
-	 */
-	var parseLoginAnswer=function(response, failedToSendRequest){
-		
-		// Defined return object
-		var requestParserResult={};
-		requestParserResult.status=1;
-		requestParserResult.failReason=null;
-
-		if (typeof response.data.token !== 'undefined') {
-			// Set status code
-			requestParserResult.status=0;
-
-			// Find the middle of the token to split it
-			var middle=parseInt(response.data.token.length/2);
-
-			// Create expire date (cookie expire in 55 mins)
-			var expireDate=new Date();
-			expireDate.setMinutes(expireDate.getMinutes()+55);
-			
-			// Save profile
-			$cookies.putObject('profile', profile, {'expires': expireDate});
-			// Save first part of token
-			$cookies.putObject('token.part_0', response.data.token.substring(0, middle), {'expires': expireDate});
-			// Save second part of token
-			$cookies.putObject('token.part_1', response.data.token.substring(middle, response.data.token.length), {'expires': expireDate});
-
-			// Put token in var
-			token=response.data.token;
-			
-		}
-		else if(failedToSendRequest){
-			requestParserResult.failReason="Failed to send request";
-		}
-		else{
-			requestParserResult.failReason="Please check your username, password and project name !";
-		}
-
-		
-		return requestParserResult;
-	};
-
-	
-	/**
-	 * Function to connect to OpenStack
-	 * 
-	 * @param {object} $http Angular $http service
-	 * @param {string} username The user name
-	 * @param {string} password The user password
-	 * @param {string} projectname The user project name
-	 * @param {function} function to call when data is avalaible
-	 */
-	var login=function(username, password,projectname,callback){    
-		
-		// Set profile information (early)
-		profile.username=username;
-		profile.projectname=projectname;
-		
-		var result=$http.post('../server/index.php',
-							  $.param({"task" : "Authenticate", "user" : username, "password" : password, "project" : projectname}));  
-
-		// Wait and handle the response
-        result.then(function (response){
-			callback(parseLoginAnswer(response, false));
-        },function(response){
-			callback(parseLoginAnswer(response, true));
-        });		
-	};	
-
-
-
-
-	
-	/*
-     * Get the profile
-	 */
-	var getProfile=function(){
-		return profile;
-	}
-
-	/*
-     * Get the token
-	 */	
-	var getToken=function(){
-		return token;
-	}
-
-	
-
-	// Return services objects
-	return {
-		login: login,
-		getProfile: getProfile,
-		isAlreadyLogin: isAlreadyLogin,
-		logout:logout,
-		getToken:getToken
-	};
-
-	
-}]);
+mainApp.factory('Identity', ['$http', '$cookies', '$rootScope', function ($http, $cookies, $rootScope) {
+
+        /* Create profile structure to store informations
+         * about current session
+         */
+        var profile = {};
+        profile.username = null;
+        profile.projectname = null;
+        var token = null;
+
+
+        /* 
+         * @returns {boolean} Return true if a cookie is found (and load it in profile) false else 
+         */
+        var isAlreadyLogin = function () {
+
+            // Load cookies
+            var profileInCookie = $cookies.getObject('profile');
+            var tokenPart_0InCookie = $cookies.getObject('token.part_0');
+            var tokenPart_1InCookie = $cookies.getObject('token.part_1');
+
+
+            // Check if cookie is defined
+            if (typeof profileInCookie !== 'undefined'
+                    && typeof tokenPart_0InCookie !== 'undefined'
+                    && typeof tokenPart_1InCookie !== 'undefined'
+                    ) {
+
+                //if(token!==null){
+                // If yes, put it into variables
+                angular.extend(profile, profileInCookie);
+                token = tokenPart_0InCookie + tokenPart_1InCookie;
+                //}
+
+                // Return I'm Login
+                return true;
+            }
+
+            // Show the login overlay
+            $rootScope.$broadcast("logoutEvent");
+
+            // Return I'm not Login
+            return false;
+        };
+
+
+
+        /*
+         * Destroy profile cookies
+         */
+        var logout = function () {
+            $cookies.remove('profile');
+            $cookies.remove('token.part_0');
+            $cookies.remove('token.part_1');
+            token = null;
+            profile.username = null;
+            profile.projectname = null;
+
+            // Reload Page
+            //location.reload();
+            $rootScope.$broadcast("logoutEvent");
+
+        };
+
+
+        /**
+         * 
+         * @param {string} response The response to parse
+         * @param {boolean} to check if the request is send or not
+         * @returns {requestParserResult} Formated data
+         */
+        var parseLoginAnswer = function (response, failedToSendRequest) {
+
+            // Defined return object
+            var requestParserResult = {};
+            requestParserResult.status = 1;
+            requestParserResult.failReason = null;
+
+            if (typeof response.data.token !== 'undefined') {
+                // Set status code
+                requestParserResult.status = 0;
+
+                // Find the middle of the token to split it
+                var middle = parseInt(response.data.token.length / 2);
+
+                // Create expire date (cookie expire in 55 mins)
+                var expireDate = new Date();
+                expireDate.setMinutes(expireDate.getMinutes() + 55);
+
+                // Save profile
+                $cookies.putObject('profile', profile, {'expires': expireDate});
+                // Save first part of token
+                $cookies.putObject('token.part_0', response.data.token.substring(0, middle), {'expires': expireDate});
+                // Save second part of token
+                $cookies.putObject('token.part_1', response.data.token.substring(middle, response.data.token.length), {'expires': expireDate});
+
+                // Put token in var
+                token = response.data.token;
+
+            } else if (failedToSendRequest) {
+                requestParserResult.failReason = "Failed to send request";
+            } else {
+                requestParserResult.failReason = "Please check your username, password and project name !";
+            }
+
+
+            return requestParserResult;
+        };
+
+
+        /**
+         * Function to connect to OpenStack
+         * 
+         * @param {object} $http Angular $http service
+         * @param {string} username The user name
+         * @param {string} password The user password
+         * @param {string} projectname The user project name
+         * @param {function} function to call when data is avalaible
+         */
+        var login = function (username, password, projectname, callback) {
+
+            // Set profile information (early)
+            profile.username = username;
+            profile.projectname = projectname;
+
+            var result = $http.post('../server/index.php',
+                    $.param({"task": "Authenticate", "user": username, "password": password, "project": projectname}));
+
+            // Wait and handle the response
+            result.then(function (response) {
+                callback(parseLoginAnswer(response, false));
+            }, function (response) {
+                callback(parseLoginAnswer(response, true));
+            });
+        };
+
+
+
+
+
+        /*
+         * Get the profile
+         */
+        var getProfile = function () {
+            return profile;
+        };
+
+        /*
+         * Get the token
+         */
+        var getToken = function () {
+            return token;
+        };
+
+
+
+        // Return services objects
+        return {
+            login: login,
+            getProfile: getProfile,
+            isAlreadyLogin: isAlreadyLogin,
+            logout: logout,
+            getToken: getToken
+        };
+
+
+    }]);
diff --git a/client/js/services/Image.js b/client/js/services/Image.js
index 2e8c56f..795f85e 100644
--- a/client/js/services/Image.js
+++ b/client/js/services/Image.js
@@ -1,59 +1,114 @@
 
-mainApp.factory('Image',[ '$http', 'Identity', function($http, Identity){
+mainApp.factory('Image', ['$http', 'Identity', function ($http, Identity) {
 
-	var data={};
-	data.images=null;
+        // Data object
+        var data = {};
+        data.images = null; // Images
 
+        /**
+         *  Parse uploadImage anwser
+         * @param {type} response
+         * @param {type} failedToSendRequest
+         * @returns {Image_L2.parseUploadImageAnswer.requestParserResult}
+         */
+        var parseUploadImageAnswer = function (response, failedToSendRequest) {
 
-	var parseUploadImageAnswer=function(response, failedToSendRequest){
+            // Defined return object
+            var requestParserResult = {};
+            requestParserResult.status = 1;
+            requestParserResult.failReason = null;
 
-		// Defined return object
-		var requestParserResult={};
-		requestParserResult.status=1;
-		requestParserResult.failReason=null;
 
-		
-		if (typeof response.data.Images !== 'undefined') {
-			// Set status code
-			requestParserResult.status=0;
-			data.images=response.data.Images;
+            if (typeof response.data.Images !== 'undefined') {
+                // Set status code
+                requestParserResult.status = 0;
+                data.images = response.data.Images;
 
-		}
-		else if(failedToSendRequest){
-			requestParserResult.failReason="Failed to send request";
-		}
-		else{
-			requestParserResult.failReason="Error";
-		}
-		return requestParserResult;
-	};
+            } else if (failedToSendRequest) {
+                requestParserResult.failReason = "Failed to send request";
+            } else {
+                requestParserResult.failReason = "Error";
+            }
+            return requestParserResult;
+        };
 
 
-	var getImages=function(callback){
+        /**
+         *  Get images
+         * @param {type} callback
+         * @returns {undefined}
+         */
+        var getImages = function (callback) {
 
-		var result=$http.post('../server/index.php',
-							  $.param({"token" : Identity.getToken(), "task" : "image", 'action':'listImage'}));  
+            var result = $http.post('../server/index.php',
+                    $.param({"token": Identity.getToken(), "task": "image", 'action': 'listImage'}));
 
-		// Wait and handle the response
-        result.then(function (response){
-			callback(parseUploadImageAnswer(response, false));
-        },function(response){
-			callback(parseUploadImageAnswer(response, true));
-        });
+            // Wait and handle the response
+            result.then(function (response) {
+                callback(parseUploadImageAnswer(response, false));
+            }, function (response) {
+                callback(parseUploadImageAnswer(response, true));
+            });
 
-		
-	};
 
+        };
 
-	var getData=function(response){
-		return data;
-	};
-		
-	// Return services objects
-	return {
-		getImages:getImages,
-		getData:getData
-	};
+        /**
+         * Upload an image
+         * @param {type} fileToUpload
+         * @param {type} callback
+         * @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 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));
+             });*/
+        };
+
+
+        var getData = function (response) {
+            return data;
+        };
+
+        // Return services objects
+        return {
+            getImages: getImages,
+            getData: getData,
+            uploadImage: uploadImage
+        };
+
+
+    }]);
diff --git a/client/js/services/Loading.js b/client/js/services/Loading.js
index db06194..7ea2b42 100644
--- a/client/js/services/Loading.js
+++ b/client/js/services/Loading.js
@@ -1,23 +1,26 @@
+/**
+ * Loading service
+ * @param {type} param1
+ * @param {type} param2
+ */
+mainApp.factory('Loading', [function () {
+        /**
+         * Display Loading modal
+         */
+        var start = function () {
+            $('#loadingModal').modal({backdrop: 'static', keyboard: false});
+        };
 
-mainApp.factory('Loading',[ function(){
-	/**
-	 * Display Loading modal
-	 */
-	var start=function(){
-		$('#loadingModal').modal({backdrop: 'static', keyboard: false});	
-	};
+        /**
+         * Hide Loading modal
+         */
+        var stop = function () {
+            $('#loadingModal').modal('hide');
+        };
 
-	/**
-	 * Hide Loading modal
-	 */
-	var stop=function(){
-		$('#loadingModal').modal('hide');
-	}
-
-
-	// Service returns
-	return {
-		start:start,
-		stop:stop
-	};
-}]);
+        // Service returns
+        return {
+            start: start,
+            stop: stop
+        };
+    }]);
diff --git a/client/js/services/Network.js b/client/js/services/Network.js
new file mode 100644
index 0000000..a0cd5a4
--- /dev/null
+++ b/client/js/services/Network.js
@@ -0,0 +1,29 @@
+
+mainApp.factory('Network', ['$http', 'Identity', function ($http, Identity) {
+
+        // Data object
+        var data = {};
+        data.networks = null; // Networks
+
+        /**
+         * ListId
+         * @param {type} fileToUpload
+         * @param {type} callback
+         * @returns {undefined}
+         */
+        var ListId = function (fileToUpload, callback) {
+            var result = $http.post('../server/index.php',
+                    $.param({"token": Identity.getToken(), "task": "network", 'action': 'list_network_ids'}));
+
+            // Wait and handle the response
+            result.then(function (response) {
+                callback(parseUploadImageAnswer(response, false));
+            }, function (response) {
+                callback(parseUploadImageAnswer(response, true));
+            });
+        };
+
+
+    }]);
+
+
diff --git a/client/js/services/Test.js b/client/js/services/Test.js
new file mode 100644
index 0000000..f12c6b9
--- /dev/null
+++ b/client/js/services/Test.js
@@ -0,0 +1,8 @@
+var app = angular.module('mainApp',[]);
+app.controller('hassan', function($scope,$http){
+	$http.get('http://127.0.0.1/database.json').success(function(response){
+	$scope.persons = response.records;
+});
+
+
+});