Author: echatellier Date: 2013-09-11 22:18:35 +0200 (Wed, 11 Sep 2013) New Revision: 2934 Url: http://chorem.org/projects/jtimer/repository/revisions/2934 Log: Update ui bootstrap : fix idle modal dialog Modified: branches/ng-jtimer/jtimer-server/src/main/webapp/css/app.css branches/ng-jtimer/jtimer-server/src/main/webapp/js/controllers.js branches/ng-jtimer/jtimer-server/src/main/webapp/partials/tasks.html Modified: branches/ng-jtimer/jtimer-server/src/main/webapp/css/app.css =================================================================== --- branches/ng-jtimer/jtimer-server/src/main/webapp/css/app.css 2013-09-11 19:33:54 UTC (rev 2933) +++ branches/ng-jtimer/jtimer-server/src/main/webapp/css/app.css 2013-09-11 20:18:35 UTC (rev 2934) @@ -251,4 +251,8 @@ .offline { color: red; +} + +.idleModal { + width: 400px; } \ No newline at end of file Modified: branches/ng-jtimer/jtimer-server/src/main/webapp/js/controllers.js =================================================================== --- branches/ng-jtimer/jtimer-server/src/main/webapp/js/controllers.js 2013-09-11 19:33:54 UTC (rev 2933) +++ branches/ng-jtimer/jtimer-server/src/main/webapp/js/controllers.js 2013-09-11 20:18:35 UTC (rev 2934) @@ -1,4 +1,4 @@ -function TasksCtrl($scope, $timeout, $localStorage, $window, $document, wtWebsocket) { +function TasksCtrl($scope, $timeout, $localStorage, $window, $document, $modal, wtWebsocket) { /** * {Boolean} vrai si on est online @@ -33,15 +33,10 @@ // {boolean} boolean qui indique si la colonne TAGS doit etre affichee $scope.showTags = true; - // etat du client local (le serveur websocket) + // {boolean} etat du client local (le serveur websocket) $scope.webSocketClientOnline = false; - // le client est en état d'inactivité + // {boolean} boolean qui indique si une inactivité a été détectée $scope.webSocketClientIdle = false; - // idle modal dialog option - $scope.modalIdleOpts = { - backdropFade: true, - dialogFade:true - }; /** * Met a jour la tache selectionne, si la tache selectionnee est la courante @@ -324,9 +319,9 @@ return moment().format("HH:mm DD/MM/YYYY"); }; - // force the first tree creation - $scope.createTree(); - + /** + * Subscribe to websocket messages queue. + */ wtWebsocket.subscribe({ message: function(data) { var jsData = JSON.parse(data); @@ -334,10 +329,11 @@ //$scope.$apply(); //console.log(jsData); if (jsData.idle) { - if (jsData.idle > 30000) { //30s + if (jsData.idle > 30000 && !$scope.webSocketClientIdle) { //30s console.log("Idle detected"); + idleDetected(); + $scope.$apply(); $scope.webSocketClientIdle = true; - $scope.$apply(); } } }, @@ -345,9 +341,53 @@ $scope.webSocketClientOnline = status; } }); + + /** + * Called on idle detect. + */ + var idleDetected = function() { + var modalInstance = $modal.open({ + templateUrl: 'idleModalTemplate.html', + windowClass: 'idleModal', + controller: IdleModalCtrl, + backdropFade: true, + dialogFade: true, + keyboard: false // for cancel to not work + }); + modalInstance.result.then($scope.restartFromIdleness); + }; + + /** + * Called by modal dialog to resume from idle. + * + * @param {string} restart option ('stop', 'continue', 'resume') + */ + $scope.restartFromIdleness = function(restartOption) { + switch(restartOption) { + case 'stop': + break; + case 'continue': + break; + case 'resume': + break; + } + $scope.webSocketClientIdle = false; + }; + + // force the first tree creation + $scope.createTree(); + // connect to webscocket server (go client) wtWebsocket.connect(); - - $scope.restartFromIdleness = function() { - $scope.webSocketClientIdle = false; +} + +/** + * Controller de pour la modal d'inactivité. + * + * @param $scope + * @param $modalInstance + */ +function IdleModalCtrl($scope, $modalInstance) { + $scope.close = function(restartOption) { + $modalInstance.close(restartOption); }; -} +} \ No newline at end of file Modified: branches/ng-jtimer/jtimer-server/src/main/webapp/partials/tasks.html =================================================================== --- branches/ng-jtimer/jtimer-server/src/main/webapp/partials/tasks.html 2013-09-11 19:33:54 UTC (rev 2933) +++ branches/ng-jtimer/jtimer-server/src/main/webapp/partials/tasks.html 2013-09-11 20:18:35 UTC (rev 2934) @@ -91,17 +91,17 @@ </div> </div> -<div modal="webSocketClientIdle" options="modalIdleOpts"> +<script type="text/ng-template" id="idleModalTemplate.html"> <div class="modal-header"> - <h3>Inativité détectée</h3> + <h3>Inactivité détectée</h3> </div> <div class="modal-body"> Vous êtes inactif depuis 42 minutes. Choisissez une option pour reprendre ou arrêter la tâche. </div> <div class="modal-footer"> - <button class="btn btn-primary icon-remove-circle" ng-click="restartFromIdleness()"> Arrêter</button> - <button class="btn btn-primary icon-arrow-right" ng-click="restartFromIdleness()"> Continuer</button> - <button class="btn btn-primary icon-ok-circle" ng-click="restartFromIdleness()"> Reprendre</button> + <button class="btn btn-primary icon-remove-circle" ng-click="close('stop')"> Arrêter</button> + <button class="btn btn-primary icon-arrow-right" ng-click="close('continue')"> Continuer</button> + <button class="btn btn-primary icon-ok-circle" ng-click="close('resume')"> Reprendre</button> </div> -</div> +</script>