r2934 - in branches/ng-jtimer/jtimer-server/src/main/webapp: css js partials - Jtimer-commits

11 Sep 2013

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>

    

r2934 - in branches/ng-jtimer/jtimer-server/src/main/webapp: css js partials

echatellier＠users.chorem.org

tags

participants (1)