Begin machine details overlay

client/index.html

@@ -26,6 +26,9 @@
                 <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>
+
                     <!-- Nav -->
                     <div ng-include="'./partials/nav.html'"></div>
                 </div>
@@ -81,7 +84,9 @@
     <script src="./js/controllers/login.js"></script>
     <script src="./js/controllers/status.js"></script>
     <script src="./js/controllers/home/main.js"></script>
+    <script src="./js/controllers/home/machineDetails.js"></script>	
     <script src="./js/controllers/network/main.js"></script>
+
     
     
 

client/js/controllers/home/machineDetails.js

@@ -0,0 +1,21 @@
+/**
+ * The home controller
+ * 
+ * @param {$scope} $scope The $scope service from angular
+ */
+mainApp.controller('machineDetailsCtrl', [ '$scope', 'Compute', '$rootScope', function ($scope, Compute, $rootScope)
+{
+
+
+
+
+	$scope.$on('showMachineDetailsEvent', function(eventName ,machine){
+		$scope.machine=machine;
+		$('#machineDetailsModal').modal({backdrop: false, keyboard: true});
+	});
+
+
+	
+
+	
+}]);

client/js/controllers/home/main.js

@@ -3,7 +3,7 @@
  * 
  * @param {$scope} $scope The $scope service from angular
  */
-mainApp.controller('homeCtrl', [ '$scope', 'Compute', function ($scope, Compute)
+mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', function ($scope, Compute, $rootScope)
 {
 
 	var updatePage=function(){
@@ -12,5 +12,10 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', function ($scope, Compute)
 
 	// Retrieve all Data
 	Compute.pullData(updatePage);
+
+	$scope.raiseShowMachineDetailsEvent=function(){
+		var machine={name: "Machine 1"};
+		$rootScope.$broadcast("showMachineDetailsEvent", machine);		
+	}
     
 }]);

client/partials/home/machineDetails.html

@@ -0,0 +1,38 @@
+<div class="modal" id="machineDetailsModal" ng-controller="machineDetailsCtrl" >
+    <div class="modal-dialog">
+        <div class="modal-content"></div>
+    </div>
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>-->
+                <h4 class="modal-title">Machine</h4>
+
+            </div>
+            <div class="modal-body">
+
+				<form class="form-horizontal" role="form">
+					<div class="form-group">
+						<label class="control-label col-sm-2" for="email">Name</label>
+						<div class="col-sm-10">
+							      <p class="form-control-static">{{ machine.name  }}</p>
+						</div>
+					</div>
+					<div class="form-group">
+						<label class="control-label col-sm-2" for="pwd">State</label>
+						<div class="col-sm-10">
+							Offline &nbsp;
+							<button class="btn btn-success">Turn On</button>		  
+						</div>
+					</div>
+				</form>
+
+
+			</div>
+            <div class="modal-footer"> 
+                <a href="#" data-dismiss="modal" class="btn btn-primary">Apply</a>
+                <a href="#" data-dismiss="modal" class="btn btn-default">Cancel</a>
+            </div>
+        </div>
+    </div>
+</div>

client/partials/home/main.html

@@ -1,8 +1,9 @@
- <div class="panel panel-default">
+ <div class="panel panel-default" ng-controller="homeCtrl">
     <div class="panel-heading">
         Home 
     </div>
     <div class="panel-body">
         Main Content
+		<button ng-click="raiseShowMachineDetailsEvent()" > Show Machine details</button>
     </div>
-</div>
+</div>