diff options
| -rw-r--r-- | client/index.html | 5 | ||||
| -rw-r--r-- | client/js/controllers/home/machineDetails.js | 21 | ||||
| -rw-r--r-- | client/js/controllers/home/main.js | 7 | ||||
| -rw-r--r-- | client/partials/home/machineDetails.html | 38 | ||||
| -rw-r--r-- | client/partials/home/main.html | 5 |
5 files changed, 73 insertions, 3 deletions
diff --git a/client/index.html b/client/index.html index ba183df..8d81ac3 100644 --- a/client/index.html +++ b/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> + diff --git a/client/js/controllers/home/machineDetails.js b/client/js/controllers/home/machineDetails.js new file mode 100644 index 0000000..43cfe07 --- /dev/null +++ b/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}); + }); + + + + + +}]); diff --git a/client/js/controllers/home/main.js b/client/js/controllers/home/main.js index 27de5f3..3d57f8d 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', 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); + } }]); diff --git a/client/partials/home/machineDetails.html b/client/partials/home/machineDetails.html new file mode 100644 index 0000000..9da131e --- /dev/null +++ b/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 + <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> diff --git a/client/partials/home/main.html b/client/partials/home/main.html index 7a5045a..e3611e5 100644 --- a/client/partials/home/main.html +++ b/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>
\ No newline at end of file +</div> |