2 files changed, 160 insertions, 225 deletions

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
+        };
 
-	
-}]);
+
+
+    }]);