From 5ef1c9b8b1ab47b659f512db86e51dacf1bec860 Mon Sep 17 00:00:00 2001
From: manzerbredes <loic.guegan_secondary@yahoo.fr>
Date: Tue, 1 Mar 2016 20:51:08 +0100
Subject: Edit machineDetails

---
 client/partials/home/machineDetails.html | 14 +++++++-------
 client/partials/home/main.html           |  9 +++++----
 2 files changed, 12 insertions(+), 11 deletions(-)

(limited to 'client/partials')

diff --git a/client/partials/home/machineDetails.html b/client/partials/home/machineDetails.html
index 606edcf..28c9165 100644
--- a/client/partials/home/machineDetails.html
+++ b/client/partials/home/machineDetails.html
@@ -21,11 +21,11 @@
 					<div class="form-group">
 						<label class="control-label col-sm-2" for="pwd">State</label>
 						<div class="col-sm-10">
-							<span ng-if="machine.online">Online</span>
-							<span ng-if="!machine.online">Offline</span>
+							<span ng-if="machine.status=='ACTIVE'">Online</span>
+							<span ng-if="machine.status!=='ACTIVE'">Offline</span>
 							&nbsp;
-							<button class="btn btn-danger" ng-if="machine.online" ng-click="toggleMachineState()">Turn Off</button>		 
-							<button class="btn btn-success" ng-if="!machine.online" ng-click="toggleMachineState()">Turn On</button>		 
+							<button class="btn btn-danger" ng-if="machine.status=='ACTIVE'" ng-click="toggleMachineState()">Turn Off</button>		 
+							<button class="btn btn-success" ng-if="machine.status!=='ACTIVE'" ng-click="toggleMachineState()">Turn On</button>		 
 							&nbsp;<img src="images/spin/32x32/Preloader_1.gif" id="waitingForToggleMachine"></span>
 
 							
@@ -34,7 +34,7 @@
 					<fieldset class="form-group">
 						<label class="control-label col-sm-2">RAM</label>
 						<select class="col-sm-20" id="ramSelected">
-							<option>128 MB</option>
+							<option>{{ machine.ram  }} MB</option>
 							<option>512 MB</option>
 							<option>1024 MB</option>
 							<option>2048 MB</option>
@@ -45,7 +45,7 @@
 					<fieldset class="form-group">
 						<label class="control-label col-sm-2">Disk</label>
 						<select class="col-sm-20" id="ramSelected">
-							<option>1 Go</option>
+							<option>{{ machine.disk }} Go</option>
 							<option>2 Go</option>
 							<option>5 Go</option>
 							<option>10 Go</option>
@@ -60,7 +60,7 @@
 					<fieldset class="form-group">
 						<label class="control-label col-sm-2">Image</label>
 						<select class="col-sm-20" id="ramSelected">
-							<option>Cirros</option>
+							<option>{{ machine.imageId  }}</option>
 							<option>Debian</option>
 							<option>Tiny Core</option>
 							<option>Centos</option>
diff --git a/client/partials/home/main.html b/client/partials/home/main.html
index 37638d3..77a9bc4 100644
--- a/client/partials/home/main.html
+++ b/client/partials/home/main.html
@@ -3,9 +3,10 @@
         Home 
     </div>
     <div class="panel-body">
-        Main Content
-		<button ng-click="raiseShowMachineDetailsEvent()" > Show Machine details</button>
-		<div id="test">
-		</div>
+        
+		
+		Selectionner une machine:
+		<div ng-repeat="machine in machines"> <a ng-click="raiseShowMachineDetailsEvent(machine.id)"> {{ machine.name  }}</a></div>
+		
     </div>
 </div>
-- 
cgit v1.2.3


From e9108d4b97132e853a71cb1dfbad6cf4bddb599b Mon Sep 17 00:00:00 2001
From: manzerbredes <loic.guegan_secondary@yahoo.fr>
Date: Tue, 1 Mar 2016 22:50:37 +0100
Subject: Finish details machine

---
 client/js/controllers/home/machineDetails.js |  3 +-
 client/js/controllers/home/main.js           |  6 +--
 client/js/services/Compute.js                | 64 ++++++++++++++++++++++++++--
 client/partials/home/machineDetails.html     | 22 ++--------
 4 files changed, 69 insertions(+), 26 deletions(-)

(limited to 'client/partials')

diff --git a/client/js/controllers/home/machineDetails.js b/client/js/controllers/home/machineDetails.js
index 7476c69..24fac42 100644
--- a/client/js/controllers/home/machineDetails.js
+++ b/client/js/controllers/home/machineDetails.js
@@ -9,8 +9,9 @@ mainApp.controller('machineDetailsCtrl', [ '$scope', 'Compute', '$rootScope', '$
 	$scope.machine={};
 	$("#waitingForToggleMachine").hide();
 
-	$scope.$on('showMachineDetailsEvent', function(eventName ,machine){
+	$scope.$on('showMachineDetailsEvent', function(eventName ,machine, axioms){
 		$scope.machine=machine;
+		$scope.axioms=axioms;
 		console.log(machine);
 		$('#machineDetailsModal').modal({backdrop: false, keyboard: true});
 	});
diff --git a/client/js/controllers/home/main.js b/client/js/controllers/home/main.js
index b44836b..9d7ddfc 100644
--- a/client/js/controllers/home/main.js
+++ b/client/js/controllers/home/main.js
@@ -6,19 +6,19 @@
 mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', function ($scope, Compute, $rootScope)
 {
 
-	var callMeAfterGetMachines=function(data){
+	var callMeAfterPullData=function(data){
 		$scope.machines=Compute.getData().machines;
 	}
 
 
-	Compute.pullMachines(callMeAfterGetMachines);
+	Compute.pullData(callMeAfterPullData);
 
 
 	
 	$scope.raiseShowMachineDetailsEvent=function(id){
 		var callback=function(){
 			var data=Compute.getData();
-			$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id]);		
+			$rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms);		
 	
 		}
 		Compute.pullMachines(callback);
diff --git a/client/js/services/Compute.js b/client/js/services/Compute.js
index e2fb3df..36ddc16 100644
--- a/client/js/services/Compute.js
+++ b/client/js/services/Compute.js
@@ -5,12 +5,14 @@ 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
 	
 
 	/**
-	 * Retrieve machine list 
+	 * 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
@@ -55,14 +57,68 @@ mainApp.factory('Compute',[ '$http', 'Identity', function($http, Identity){
 			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){
-		// TODO call getMachines etc...
+		var nextFunction=function(response){
+			if(response.status==0){
+				pullMachines(callback);
+			}
+		}
+		pullImages(nextFunction);
 	}
 
 
diff --git a/client/partials/home/machineDetails.html b/client/partials/home/machineDetails.html
index 28c9165..47a65fb 100644
--- a/client/partials/home/machineDetails.html
+++ b/client/partials/home/machineDetails.html
@@ -34,36 +34,22 @@
 					<fieldset class="form-group">
 						<label class="control-label col-sm-2">RAM</label>
 						<select class="col-sm-20" id="ramSelected">
-							<option>{{ machine.ram  }} MB</option>
-							<option>512 MB</option>
-							<option>1024 MB</option>
-							<option>2048 MB</option>
-							<option>4096 MB</option>
+							<option ng-repeat="ram in axioms.ram" ng-selected="machine.ram == ram">{{ ram }}</option>
 						</select>
+						<span>MB</span>
 					</fieldset>
 
 					<fieldset class="form-group">
 						<label class="control-label col-sm-2">Disk</label>
 						<select class="col-sm-20" id="ramSelected">
-							<option>{{ machine.disk }} Go</option>
-							<option>2 Go</option>
-							<option>5 Go</option>
-							<option>10 Go</option>
-							<option>25 Go</option>
-							<option>50 Go</option>
-							<option>100 Go</option>
-							<option>150 Go</option>
-							<option>200 Go</option>
+							<option ng-repeat="disk in axioms.disk" ng-selected="machine.disk == disk">{{ disk }}</option>
 						</select>
 					</fieldset>
 
 					<fieldset class="form-group">
 						<label class="control-label col-sm-2">Image</label>
 						<select class="col-sm-20" id="ramSelected">
-							<option>{{ machine.imageId  }}</option>
-							<option>Debian</option>
-							<option>Tiny Core</option>
-							<option>Centos</option>
+							<option ng-repeat="image in axioms.images" ng-selected="machine.imageId == Object.keys(image)">{{ image.name }}</option>
 						</select>
 					</fieldset>
 
-- 
cgit v1.2.3


From 2d99f1ecf2164431b03eff5bcbaa7abe67287602 Mon Sep 17 00:00:00 2001
From: manzerbredes <loic.guegan_secondary@yahoo.fr>
Date: Wed, 2 Mar 2016 07:14:05 +0100
Subject: Create loading service

---
 client/index.html                  |  4 +++-
 client/js/controllers/home/main.js |  8 ++++++--
 client/js/services/Loading.js      | 22 ++++++++++++++++++++++
 client/partials/loading.html       | 18 ++++++++++++++++++
 4 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 client/js/services/Loading.js
 create mode 100644 client/partials/loading.html

(limited to 'client/partials')

diff --git a/client/index.html b/client/index.html
index 8d81ac3..8ca2b9f 100644
--- a/client/index.html
+++ b/client/index.html
@@ -28,8 +28,9 @@
                     <div ng-include="'./partials/login.html'"></div>
 					<!-- Machine Details Overlay -->
                     <div ng-include="'./partials/home/machineDetails.html'"></div>
+					<div ng-include="'./partials/loading.html'"></div>
 
-                    <!-- Nav -->
+					<!-- Nav -->
                     <div ng-include="'./partials/nav.html'"></div>
                 </div>
             </div>
@@ -79,6 +80,7 @@
     <script src="./js/services/Identity.js"></script>
     <script src="./js/services/Image.js"></script>
     <script src="./js/services/Compute.js"></script>
+    <script src="./js/services/Loading.js"></script>
 	
     <!-- Include controller -->
     <script src="./js/controllers/login.js"></script>
diff --git a/client/js/controllers/home/main.js b/client/js/controllers/home/main.js
index 9d7ddfc..2e9c00b 100644
--- a/client/js/controllers/home/main.js
+++ b/client/js/controllers/home/main.js
@@ -3,24 +3,28 @@
  * 
  * @param {$scope} $scope The $scope service from angular
  */
-mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', function ($scope, Compute, $rootScope)
+mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading', function ($scope, Compute, $rootScope, Loading)
 {
 
 	var callMeAfterPullData=function(data){
 		$scope.machines=Compute.getData().machines;
+			Loading.stop();
 	}
 
-
+	Loading.start();
 	Compute.pullData(callMeAfterPullData);
 
 
 	
 	$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);
 	}
 
diff --git a/client/js/services/Loading.js b/client/js/services/Loading.js
new file mode 100644
index 0000000..b12aaa0
--- /dev/null
+++ b/client/js/services/Loading.js
@@ -0,0 +1,22 @@
+
+mainApp.factory('Loading',[ '$http', 'Identity', function($http, Identity){
+
+
+
+
+	var start=function(){
+		$('#loadingModal').modal({backdrop: 'static', keyboard: false});	
+	};
+
+	var stop=function(){
+		$('#loadingModal').modal('hide');
+	}
+
+
+	return {
+		start:start,
+		stop:stop
+	};
+
+
+}]);
diff --git a/client/partials/loading.html b/client/partials/loading.html
new file mode 100644
index 0000000..c978190
--- /dev/null
+++ b/client/partials/loading.html
@@ -0,0 +1,18 @@
+<div class="modal fade" id="loadingModal" ng-controller="loginCtrl">
+    <div class="modal-dialog">
+        <div class="modal-content"></div>
+    </div>
+    <div class="modal-dialog" style="width:200px;">
+        <div class="modal-content">
+
+            <div class="modal-body" >
+				<div align="center">
+					<img src="images/spin/128x128/Preloader_8.gif" />
+				</div>
+
+
+            </div>
+
+        </div>
+    </div>
+</div>
-- 
cgit v1.2.3


From b6d7d2c30efe5e9758072bb82ea3a947bda7fd1d Mon Sep 17 00:00:00 2001
From: manzerbredes <loic.guegan_secondary@yahoo.fr>
Date: Wed, 2 Mar 2016 07:25:28 +0100
Subject: Correct bug

---
 client/js/controllers/home/main.js | 10 +++++++---
 client/partials/home/main.html     |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

(limited to 'client/partials')

diff --git a/client/js/controllers/home/main.js b/client/js/controllers/home/main.js
index 2e9c00b..f84f625 100644
--- a/client/js/controllers/home/main.js
+++ b/client/js/controllers/home/main.js
@@ -3,7 +3,7 @@
  * 
  * @param {$scope} $scope The $scope service from angular
  */
-mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading', function ($scope, Compute, $rootScope, Loading)
+mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','Identity', function ($scope, Compute, $rootScope, Loading, Identity)
 {
 
 	var callMeAfterPullData=function(data){
@@ -11,8 +11,12 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading', f
 			Loading.stop();
 	}
 
-	Loading.start();
-	Compute.pullData(callMeAfterPullData);
+	;
+	if(Compute.getData().machines == null && Identity.isAlreadyLogin()){
+		Loading.start();
+		Compute.pullData(callMeAfterPullData);		
+	}
+
 
 
 	
diff --git a/client/partials/home/main.html b/client/partials/home/main.html
index 77a9bc4..f9f8878 100644
--- a/client/partials/home/main.html
+++ b/client/partials/home/main.html
@@ -4,7 +4,7 @@
     </div>
     <div class="panel-body">
         
-		
+		Pour charger les machines, recharger la page (temporaire)<br />
 		Selectionner une machine:
 		<div ng-repeat="machine in machines"> <a ng-click="raiseShowMachineDetailsEvent(machine.id)"> {{ machine.name  }}</a></div>
 		
-- 
cgit v1.2.3


From fa5a48bc3a76b109f6611620b6e56f3024def029 Mon Sep 17 00:00:00 2001
From: manzerbredes <loic.guegan_secondary@yahoo.fr>
Date: Wed, 2 Mar 2016 17:41:04 +0100
Subject: Correct bugs

---
 client/js/controllers/login.js  |  3 ++-
 client/js/controllers/status.js |  6 +++---
 client/js/services/Identity.js  |  6 +++++-
 client/partials/nav.html        | 26 +++++++-------------------
 4 files changed, 17 insertions(+), 24 deletions(-)

(limited to 'client/partials')

diff --git a/client/js/controllers/login.js b/client/js/controllers/login.js
index 1a89563..63cb6d1 100644
--- a/client/js/controllers/login.js
+++ b/client/js/controllers/login.js
@@ -16,10 +16,11 @@ mainApp.controller('loginCtrl', ['$scope','$sce','Identity', function ($scope,$s
 
 	// Manager logout event
 	$scope.$on('logoutEvent', function(){
-		Identity.logout();
 		$('#loginModal').modal({backdrop: 'static', keyboard: false});
 	});
 
+
+	
 	// Hide loading button and message alert
     $('#loadingLoginButton').hide();
     $('#failedToLoginAlert').hide();
diff --git a/client/js/controllers/status.js b/client/js/controllers/status.js
index 940d794..6f398ad 100644
--- a/client/js/controllers/status.js
+++ b/client/js/controllers/status.js
@@ -11,10 +11,10 @@ mainApp.controller('statusCtrl', ['$scope','Identity', '$rootScope', function ($
 
 	// Give profile to model
     $scope.profile=Identity.getProfile();
-
+	
     // Function to logout
-    $scope.raiseLogoutEvent=function(){
-		$rootScope.$broadcast('logoutEvent');
+    $scope.logout=function(){
+		Identity.logout();
 	};
 
 }]);
diff --git a/client/js/services/Identity.js b/client/js/services/Identity.js
index da85ecd..e6a9daf 100644
--- a/client/js/services/Identity.js
+++ b/client/js/services/Identity.js
@@ -1,5 +1,5 @@
 
-mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
+mainApp.factory('Identity',[ '$http', '$cookies', '$rootScope', function($http, $cookies, $rootScope){
 
 	/* Create profile structure to store informations
 	 * about current session
@@ -51,6 +51,9 @@ mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
 		token=null;
 		profile.username=null;
 		profile.projectname=null;
+
+		// Reload Page
+		location.reload();
 	}
 
 	
@@ -95,6 +98,7 @@ mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){
 		else{
 			requestParserResult.failReason="Please check your username, password and project name !";
 		}
+
 		
 		return requestParserResult;
 	};
diff --git a/client/partials/nav.html b/client/partials/nav.html
index b3ef76a..01b9079 100644
--- a/client/partials/nav.html
+++ b/client/partials/nav.html
@@ -8,7 +8,7 @@
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-        <a class="navbar-brand" href="#"><b>Status</b></a>
+        <a class="navbar-brand"><b>Status</b></a>
     </div>
 
     <div class="navbar-"></div>
@@ -18,24 +18,12 @@
 
       <ul class="nav navbar-nav">
         <li class="nav-divider"></li>
-        <li><a href="#">User : {{ profile.username }}</a></li>
-        <li><a href="#">Project Name : {{ profile.projectname }}</a></li>
-
-        <!--<li><a href="#" >Connection : <span ng-bind-html="connection"></span></a></li>-->
-
-      </ul>
-    
+        <li><a>User : {{ profile.username }}</a></li>
+        <li><a>Project Name : {{ profile.projectname }}</a></li>
+      </ul>    
       <ul class="nav navbar-nav navbar-right">
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Account<span class="caret"></span></a>
-          <ul class="dropdown-menu">
-            <li><a href="#">Informations</a></li>
-            <li><a href="#">Settings</a></li>
-            <li role="separator" class="divider"></li>
-            <li><a href="#" ng-click="raiseLogoutEvent()">Logout</a></li>
-          </ul>
-        </li>
+		  <li><a ng-click="logout()">Logout</a></li>
       </ul>
-    </div><!-- /.navbar-collapse -->
-  </div><!-- /.container-fluid -->
+    </div>
+  </div>
 </nav>
-- 
cgit v1.2.3


From e2be86814e8ac92778bfa9fc49e1d02946a7efbc Mon Sep 17 00:00:00 2001
From: manzerbredes <loic.guegan_secondary@yahoo.fr>
Date: Wed, 2 Mar 2016 20:46:24 +0100
Subject: Clean some things

---
 client/index.html                            | 27 +++++++++++++-------------
 client/js/controllers/home/machineDetails.js | 10 ++++++----
 client/partials/home/machineDetails.html     |  2 +-
 client/partials/nav.html                     | 29 ----------------------------
 client/partials/status.html                  | 29 ++++++++++++++++++++++++++++
 5 files changed, 50 insertions(+), 47 deletions(-)
 delete mode 100644 client/partials/nav.html
 create mode 100644 client/partials/status.html

(limited to 'client/partials')

diff --git a/client/index.html b/client/index.html
index 8ca2b9f..ca6bbe6 100644
--- a/client/index.html
+++ b/client/index.html
@@ -11,27 +11,28 @@
         <link rel="stylesheet" href="./css/style.css">
 
 
-      <!--[if lt IE 9]>
-      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-      <![endif]-->
+		<!--[if lt IE 9]>
+			<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+		<![endif]-->
     </head>
     
     
     <body>
-        
+
+		<!-- Overlay -->
+        <div ng-include="'./partials/login.html'"></div>
+        <div ng-include="'./partials/home/machineDetails.html'"></div>
+		<div ng-include="'./partials/loading.html'"></div>
+
+
+		
         <!-- MAIN GRID -->
         <div class="container-lg">
             <!-- Status bar -->
             <div class="row" ng-controller="statusCtrl">
                 <div class="col-lg-12">
-                    <!-- Login Overlay -->
-                    <div ng-include="'./partials/login.html'"></div>
-					<!-- Machine Details Overlay -->
-                    <div ng-include="'./partials/home/machineDetails.html'"></div>
-					<div ng-include="'./partials/loading.html'"></div>
-
-					<!-- Nav -->
-                    <div ng-include="'./partials/nav.html'"></div>
+					<!-- Status bar -->
+                    <div ng-include="'./partials/status.html'"></div>
                 </div>
             </div>
             <!-- Page content -->
@@ -56,7 +57,7 @@
                                 </div>
                             </div>
                         </div>     
-                   </div>  
+					</div>  
                 </div>
             </div>      
         </div>
diff --git a/client/js/controllers/home/machineDetails.js b/client/js/controllers/home/machineDetails.js
index 24fac42..c015eaa 100644
--- a/client/js/controllers/home/machineDetails.js
+++ b/client/js/controllers/home/machineDetails.js
@@ -6,23 +6,25 @@
 mainApp.controller('machineDetailsCtrl', [ '$scope', 'Compute', '$rootScope', '$timeout', function ($scope, Compute, $rootScope, $timeout)
 {
 
+	// Init scope
 	$scope.machine={};
-	$("#waitingForToggleMachine").hide();
+	$scope.machineIsStarting=false; // For loading icon
+
 
 	$scope.$on('showMachineDetailsEvent', function(eventName ,machine, axioms){
 		$scope.machine=machine;
 		$scope.axioms=axioms;
-		console.log(machine);
 		$('#machineDetailsModal').modal({backdrop: false, keyboard: true});
 	});
 
 
 	$scope.toggleMachineState=function(){
-		$("#waitingForToggleMachine").show();
+		// Display gif
+		$scope.machineIsStarting=true;
 
 		// Fake timeout
 		$timeout(function(){
-		$("#waitingForToggleMachine").hide();	
+			$scope.machineIsStarting=false;
 		}, 3000);
 		$timeout(function(){
 		$scope.machine.online=!$scope.machine.online;
diff --git a/client/partials/home/machineDetails.html b/client/partials/home/machineDetails.html
index 47a65fb..c4c8a38 100644
--- a/client/partials/home/machineDetails.html
+++ b/client/partials/home/machineDetails.html
@@ -26,7 +26,7 @@
 							&nbsp;
 							<button class="btn btn-danger" ng-if="machine.status=='ACTIVE'" ng-click="toggleMachineState()">Turn Off</button>		 
 							<button class="btn btn-success" ng-if="machine.status!=='ACTIVE'" ng-click="toggleMachineState()">Turn On</button>		 
-							&nbsp;<img src="images/spin/32x32/Preloader_1.gif" id="waitingForToggleMachine"></span>
+							&nbsp;<img src="images/spin/32x32/Preloader_1.gif" ng-if="machineIsStarting"></span>
 
 							
 						</div>
diff --git a/client/partials/nav.html b/client/partials/nav.html
deleted file mode 100644
index 01b9079..0000000
--- a/client/partials/nav.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<nav class="navbar navbar-default">
-  <div class="container-fluid">
-    <!-- Brand and toggle get grouped for better mobile display -->
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-        <a class="navbar-brand"><b>Status</b></a>
-    </div>
-
-    <div class="navbar-"></div>
-    
-    <!-- Collect the nav links, forms, and other content for toggling -->
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-
-      <ul class="nav navbar-nav">
-        <li class="nav-divider"></li>
-        <li><a>User : {{ profile.username }}</a></li>
-        <li><a>Project Name : {{ profile.projectname }}</a></li>
-      </ul>    
-      <ul class="nav navbar-nav navbar-right">
-		  <li><a ng-click="logout()">Logout</a></li>
-      </ul>
-    </div>
-  </div>
-</nav>
diff --git a/client/partials/status.html b/client/partials/status.html
new file mode 100644
index 0000000..01b9079
--- /dev/null
+++ b/client/partials/status.html
@@ -0,0 +1,29 @@
+<nav class="navbar navbar-default">
+  <div class="container-fluid">
+    <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="navbar-header">
+      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
+        <span class="sr-only">Toggle navigation</span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+        <span class="icon-bar"></span>
+      </button>
+        <a class="navbar-brand"><b>Status</b></a>
+    </div>
+
+    <div class="navbar-"></div>
+    
+    <!-- Collect the nav links, forms, and other content for toggling -->
+    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
+      <ul class="nav navbar-nav">
+        <li class="nav-divider"></li>
+        <li><a>User : {{ profile.username }}</a></li>
+        <li><a>Project Name : {{ profile.projectname }}</a></li>
+      </ul>    
+      <ul class="nav navbar-nav navbar-right">
+		  <li><a ng-click="logout()">Logout</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
-- 
cgit v1.2.3