diff options
Diffstat (limited to 'client')
19 files changed, 256 insertions, 99 deletions
diff --git a/client/index.html b/client/index.html index 8ca2b9f..08be038 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> +<div ng-include="'./partials/image/upload.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> @@ -65,7 +66,7 @@ <!-- Include JQuery --> <script src="./vendors/jquery/jquery-2.2.0.min.js"></script> - + <!-- Include Bootstrap --> <script src="./vendors/bootstrap/js/bootstrap.min.js"></script> @@ -85,9 +86,10 @@ <!-- Include controller --> <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/home.js"></script> <script src="./js/controllers/home/machineDetails.js"></script> - <script src="./js/controllers/network/main.js"></script> + <script src="./js/controllers/network/network.js"></script> + <script src="./js/controllers/image/image.js"></script> diff --git a/client/js/app.js b/client/js/app.js index e2d5b9b..1602e65 100644 --- a/client/js/app.js +++ b/client/js/app.js @@ -13,12 +13,16 @@ mainApp.config(['$routeProvider', function($routeProvider){ $routeProvider. when('/home',{ - templateUrl: 'partials/home/main.html', + templateUrl: 'partials/home/home.html', controller: 'homeCtrl' }). when('/network',{ - templateUrl: 'partials/network/main.html', + 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/main.js b/client/js/controllers/home/home.js index f84f625..2b355b1 100644 --- a/client/js/controllers/home/main.js +++ b/client/js/controllers/home/home.js @@ -3,22 +3,14 @@ * * @param {$scope} $scope The $scope service from angular */ -mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','Identity', function ($scope, Compute, $rootScope, Loading, Identity) +mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','Identity', 'Image', function ($scope, Compute, $rootScope, Loading, Identity, Image) { var callMeAfterPullData=function(data){ $scope.machines=Compute.getData().machines; - Loading.stop(); - } - - ; - if(Compute.getData().machines == null && Identity.isAlreadyLogin()){ - Loading.start(); - Compute.pullData(callMeAfterPullData); - } - - - + Loading.stop(); + }; + $scope.raiseShowMachineDetailsEvent=function(id){ @@ -26,11 +18,27 @@ mainApp.controller('homeCtrl', [ '$scope', 'Compute', '$rootScope', 'Loading','I Loading.stop(); var data=Compute.getData(); $rootScope.$broadcast("showMachineDetailsEvent", data.machines[id], data.axioms); - + } Loading.start(); Compute.pullMachines(callback); } + + + + if(Identity.isAlreadyLogin()){ + if(Compute.getData().machines == null{ + Loading.start(); + Compute.pullData(callMeAfterPullData); + } + else{ + if(Identity.isAlreadyLogin()){ + callMeAfterPullData(); + } + } + Image.getImages(function(){}); + } + }]); diff --git a/client/js/controllers/home/machineDetails.js b/client/js/controllers/home/machineDetails.js index 24fac42..371310b 100644 --- a/client/js/controllers/home/machineDetails.js +++ b/client/js/controllers/home/machineDetails.js @@ -3,29 +3,32 @@ * * @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={}; - $("#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; + $scope.machine.online=!$scope.machine.online; }, 3000); @@ -35,7 +38,7 @@ mainApp.controller('machineDetailsCtrl', [ '$scope', 'Compute', '$rootScope', '$ $scope.applyModifications=function(){ //Todo } - + }]); diff --git a/client/js/controllers/image/image.js b/client/js/controllers/image/image.js new file mode 100644 index 0000000..b0b162b --- /dev/null +++ b/client/js/controllers/image/image.js @@ -0,0 +1,29 @@ +/** + * The image controller + * + * @param {$scope} $scope The $scope service from angular + */ +mainApp.controller('imageCtrl', ['$scope', 'Image', 'Loading', 'Identity', function ($scope, Image, Loading, Identity) +{ + + var callbackTest=function(){ + $scope.images=Image.getData().images; + Loading.stop(); + }; + + $scope.doUpload = function () { + Image.uploadImage($scope.myFile,function(){}); + }; + + if(Identity.isAlreadyLogin()){ + + if(Image.getData().images==null){ + Loading.start(); + Image.getImages(callbackTest); + } + else{ + callbackTest(); + } + + } +}]); 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/network/main.js b/client/js/controllers/network/network.js index 7264aec..7264aec 100644 --- a/client/js/controllers/network/main.js +++ b/client/js/controllers/network/network.js diff --git a/client/js/controllers/status.js b/client/js/controllers/status.js index 940d794..b4a5dd9 100644 --- a/client/js/controllers/status.js +++ b/client/js/controllers/status.js @@ -9,12 +9,13 @@ mainApp.controller('statusCtrl', ['$scope','Identity', '$rootScope', function ($scope, Identity, $rootScope) { + // 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..f9d1df4 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', function($http, $cookies){ /* Create profile structure to store informations * about current session @@ -27,9 +27,12 @@ mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){ && typeof tokenPart_1InCookie !== 'undefined' ){ - // If yes, put it into variables - angular.extend(profile, profileInCookie); - token=tokenPart_0InCookie+tokenPart_1InCookie; + if(token!==null){ + // If yes, put it into variables + angular.extend(profile, profileInCookie); + token=tokenPart_0InCookie+tokenPart_1InCookie; + + } // Return I'm Login return true; @@ -51,6 +54,9 @@ mainApp.factory('Identity',[ '$http', '$cookies', function($http, $cookies){ token=null; profile.username=null; profile.projectname=null; + + // Reload Page + location.reload(); } @@ -95,6 +101,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/js/services/Image.js b/client/js/services/Image.js index 23b33a8..decb5b2 100644 --- a/client/js/services/Image.js +++ b/client/js/services/Image.js @@ -1,27 +1,76 @@ mainApp.factory('Image',[ '$http', 'Identity', function($http, Identity){ + var data={}; + data.images=null; var parseUploadImageAnswer=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.images=response.data.Images; + + } + else if(failedToSendRequest){ + requestParserResult.failReason="Failed to send request"; + } + else{ + requestParserResult.failReason="Error"; + } + return requestParserResult; }; var getImages=function(callback){ var result=$http.post('../server/index.php', - $.param({"token" : Identity.profile.token, "task" : "Image"})); + $.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)); + }); - }; + var uploadImage=function(fileToUpload, callback) { + + var result=$http.post('../server/index.php', + $.param({"token" : Identity.getToken(), "task" : "image", 'action':'uploadImage', 'filename':fileToUpload, '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 { - uploadImage: uploadImage + getImages:getImages, + getData:getData, + uploadImage:uploadImage }; diff --git a/client/js/services/Loading.js b/client/js/services/Loading.js index b12aaa0..db06194 100644 --- a/client/js/services/Loading.js +++ b/client/js/services/Loading.js @@ -1,22 +1,23 @@ -mainApp.factory('Loading',[ '$http', 'Identity', function($http, Identity){ - - - - +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'); } + // Service returns return { start:start, stop:stop }; - - }]); diff --git a/client/partials/home/main.html b/client/partials/home/home.html index f9f8878..f9f8878 100644 --- a/client/partials/home/main.html +++ b/client/partials/home/home.html 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 @@ <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> - <img src="images/spin/32x32/Preloader_1.gif" id="waitingForToggleMachine"></span> + <img src="images/spin/32x32/Preloader_1.gif" ng-if="machineIsStarting"></span> </div> diff --git a/client/partials/image/image.html b/client/partials/image/image.html new file mode 100644 index 0000000..886a11d --- /dev/null +++ b/client/partials/image/image.html @@ -0,0 +1,38 @@ + + +<div class="panel panel-default" ng-controller="imageCtrl"> + <div class="panel-heading"> + Image Manager + </div> + <div class="panel-body"> + + + <div class="btn-group btn-group-md" role="group" aria-label="..."> + <button type="button" class="btn btn-default" data-toggle="modal" data-target="#uploadImageModal"">Upload</button> + <button type="button" class="btn btn-default">Download</button> + </div> + <p></p> + <table class="table table-hover"> + <thead> + <tr> + <th>Name</th> + <th>Size</th> + <th>Action</th> + </tr> + </thead> + <tbody> + <tr ng-repeat="image in images"> + <td>{{ image.name }}</td> + <td>{{ (image.size / 1048576).toFixed(2) }} MB</td> + <td><button type="button" class="btn btn-danger">Remove</button></td> + </tr> + + </tbody> + </table> + + + + + + </div> +</div> diff --git a/client/partials/image/upload.html b/client/partials/image/upload.html new file mode 100644 index 0000000..9049abf --- /dev/null +++ b/client/partials/image/upload.html @@ -0,0 +1,25 @@ +<div class="modal fade" id="uploadImageModal" ng-controller="loginCtrl"> + <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">Upload Image</h4> + + </div> + + <div class="modal-body"> + + <label class="control-label">Select File</label> + <input id="input-1" type="file" class="file"> + <p></p> + <div class="modal-footer"> + <!--<a href="#" data-dismiss="modal" class="btn btn-default">Close</a>--> + + <a href="#" class="btn btn-lg btn-primary btn-block" id="loginButton">Upload</a> + </div> + </div> + </div> +</div> diff --git a/client/partials/menu.html b/client/partials/menu.html index dfd5842..a473fd8 100644 --- a/client/partials/menu.html +++ b/client/partials/menu.html @@ -1,4 +1,5 @@ <div class="list-group"> <a href="#/home" class="list-group-item">Home</a> <a href="#/network" class="list-group-item">Network</a> -</div>
\ No newline at end of file + <a href="#/image" class="list-group-item">Images</a> +</div> diff --git a/client/partials/nav.html b/client/partials/nav.html deleted file mode 100644 index b3ef76a..0000000 --- a/client/partials/nav.html +++ /dev/null @@ -1,41 +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" href="#"><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 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> - - <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> - </ul> - </div><!-- /.navbar-collapse --> - </div><!-- /.container-fluid --> -</nav> diff --git a/client/partials/network/main.html b/client/partials/network/network.html index 8b779be..8b779be 100644 --- a/client/partials/network/main.html +++ b/client/partials/network/network.html 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> |