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

1 Sep 2013

Author: echatellier
Date: 2013-09-01 16:44:14 +0200 (Sun, 01 Sep 2013)
New Revision: 2931

Url: http://chorem.org/projects/jtimer/repository/revisions/2931

Log:
Display idle dialog when detected

Modified:
   branches/ng-jtimer/jtimer-server/src/main/go/jtimer.go
   branches/ng-jtimer/jtimer-server/src/main/webapp/css/app.css
   branches/ng-jtimer/jtimer-server/src/main/webapp/index.html
   branches/ng-jtimer/jtimer-server/src/main/webapp/js/app.js
   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/go/jtimer.go
===================================================================

--- branches/ng-jtimer/jtimer-server/src/main/go/jtimer.go	2013-09-01 12:48:08 UTC (rev 2930)
+++ branches/ng-jtimer/jtimer-server/src/main/go/jtimer.go	2013-09-01 14:44:14 UTC (rev 2931)
@@ -57,7 +57,7 @@
         currentIdleTime := reply.MsSinceUserInput
         fmt.Println("Idle since", currentIdleTime)
         
-        msSinceUserInputString := fmt.Sprintf("{idle:%d}", currentIdleTime)
+        msSinceUserInputString := fmt.Sprintf("{\"idle\":%d}", currentIdleTime)
         h.broadcast <- msSinceUserInputString
     }
 }

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-01 12:48:08 UTC (rev 2930)
+++ branches/ng-jtimer/jtimer-server/src/main/webapp/css/app.css	2013-09-01 14:44:14 UTC (rev 2931)
@@ -14,6 +14,17 @@
     background:black;
     color:graytext;
 }
+div#alerts{
+	position:absolute;
+    bottom:20px;
+    left:0;
+    width:100%;
+    z-index: 1000;
+}
+.alert {
+	margin-bottom: 0;
+}
+
 div#footer{
     position:absolute;
     bottom:0;

Modified: branches/ng-jtimer/jtimer-server/src/main/webapp/index.html
===================================================================
--- branches/ng-jtimer/jtimer-server/src/main/webapp/index.html	2013-09-01 12:48:08 UTC (rev 2930)
+++ branches/ng-jtimer/jtimer-server/src/main/webapp/index.html	2013-09-01 14:44:14 UTC (rev 2931)
@@ -4,14 +4,19 @@
         <title>jTimer</title>
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         
+         
          <link rel="stylesheet" href="css/jtimer.css">
          <script src="js/jtimer.js"></script>
 
+         <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
+
          <link rel="stylesheet" href="css/app.css">
          <script src="js/app.js"></script>
          <script src="js/controllers.js"></script>
          <script src="js/filters.js"></script>
          <script src="js/entities.js"></script>
+         
+         
     </head>
     <body>
 

Modified: branches/ng-jtimer/jtimer-server/src/main/webapp/js/app.js
===================================================================
--- branches/ng-jtimer/jtimer-server/src/main/webapp/js/app.js	2013-09-01 12:48:08 UTC (rev 2930)
+++ branches/ng-jtimer/jtimer-server/src/main/webapp/js/app.js	2013-09-01 14:44:14 UTC (rev 2931)
@@ -200,8 +200,47 @@
     };
 }];
 
+var wtWebSocketService = [function() {
+    var service = {};
 
-angular.module('webtimer', ['webtimerFilters', 'ngRoute', 'ngAnimate'])
+    service.connect = function() {
+      if(service.ws) { return; }
+
+      var ws = new WebSocket("ws://localhost:12345/jtimer");
+
+      ws.onopen = function() {
+        console.log('Websocket open');
+        service.callback.status(true);
+      };
+
+      ws.onerror = function() {
+        console.log('Websocket error');
+      };
+
+      ws.onclose = function() {
+        service.callback.status(false);
+      };
+
+      ws.onmessage = function(message) {
+        service.callback.message(message.data);
+      };
+
+      service.ws = ws;
+    };
+
+    service.send = function(message) {
+      service.ws.send(message);
+    };
+
+    service.subscribe = function(callback) {
+      service.callback = callback;
+    };
+
+    return service;
+}];
+
+
+angular.module('webtimer', ['webtimerFilters', 'ngRoute', 'ngAnimate', 'ui.bootstrap'])
     .config(['$routeProvider', function($routeProvider) {
         $routeProvider.
             when('/tasks', {templateUrl: 'partials/tasks.html', controller: TasksCtrl}).
@@ -232,4 +271,5 @@
         };
     })
 
-    .directive('wtTreeRepeat', wtTreeRepeatDirective);
+    .directive('wtTreeRepeat', wtTreeRepeatDirective)
+    .service('wtWebsocket', wtWebSocketService);

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-01 12:48:08 UTC (rev 2930)
+++ branches/ng-jtimer/jtimer-server/src/main/webapp/js/controllers.js	2013-09-01 14:44:14 UTC (rev 2931)
@@ -1,4 +1,4 @@
-function TasksCtrl($scope, $timeout, $localStorage, $window, $document) {
+function TasksCtrl($scope, $timeout, $localStorage, $window, $document, wtWebsocket) {
 
     /**
      * {Boolean} vrai si on est online
@@ -33,6 +33,16 @@
     // {boolean} boolean qui indique si la colonne TAGS doit etre affichee
     $scope.showTags = true;
 
+    // etat du client local (le serveur websocket)
+    $scope.webSocketClientOnline = false;
+    // le client est en état d'inactivité
+    $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
      * alors on met la selection a null
@@ -82,8 +92,6 @@
         $scope.online = true;
     }, false);
 
-
-
     /**
      * Force la sauvegarde des datas
      * @returns {undefined}
@@ -122,7 +130,6 @@
         if ($scope.tree) {
             $scope.tree.addChild($scope.createTreeNode(newTask));
         }
-//        $scope.createTree();
     };
 
     /**
@@ -136,7 +143,6 @@
         node.$$open = true;
         save();
         node.addChild($scope.createTreeNode(newTask));
-//        $scope.createTree();
     };
 
     /**
@@ -157,7 +163,6 @@
         // remove node in tree
         node.remove();
         save();
-//        $scope.createTree();
     };
 
     /**
@@ -322,11 +327,27 @@
     // force the first tree creation
     $scope.createTree();
 
-    var conn = conn = new WebSocket("ws://localhost:12345/jtimer");
-    conn.onclose = function(evt) {
-        console.log("Connection closed.");
+    wtWebsocket.subscribe({
+        message: function(data) {
+          var jsData = JSON.parse(data);
+          //$scope.messages.push(message);
+          //$scope.$apply();
+          //console.log(jsData);
+          if (jsData.idle) {
+            if (jsData.idle > 30000) { //30s
+              console.log("Idle detected");
+              $scope.webSocketClientIdle = true;
+              $scope.$apply();
+            }
+          }
+        },
+        status: function(status) {
+          $scope.webSocketClientOnline = status;
+        }
+    });
+    wtWebsocket.connect();
+    
+    $scope.restartFromIdleness = function() {
+      $scope.webSocketClientIdle = false;
     };
-    conn.onmessage = function(evt) {
-        console.log("Message", evt.data);
-    };
 }

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-01 12:48:08 UTC (rev 2930)
+++ branches/ng-jtimer/jtimer-server/src/main/webapp/partials/tasks.html	2013-09-01 14:44:14 UTC (rev 2931)
@@ -19,6 +19,12 @@
         <i class="icon-cloud" ng-class="{online: online, offline: !online}"></i>
     </span>
 </div>
+<div id="alerts">
+  <div class="alert alert-warning" ng-if="!webSocketClientOnline">
+    <span class="icon-warning-sign"></span> Impossible de contacter le client local pour la gestion de l'inactivité.
+      <a href="#" target="_blank">Télécharger le client local</a>.
+  </div>
+</div>
 <div id="footer">
     <span class="left">{{currentDate()}}</span>
     <span class="center"><i class="icon-html5"></i> <a href="#">WebTimer</a></span>
@@ -82,6 +88,20 @@
 			    </div>
 		    </div>
         </div>
+    </div>
+</div>
 
+<div modal="webSocketClientIdle" options="modalIdleOpts">
+    <div class="modal-header">
+        <h3>Inativité 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>
+    </div>
 </div>

    

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

echatellier＠users.chorem.org

tags

participants (1)