LT-107: Add countdown dialog

- Remove ui from meteor-stale-session package

Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.html

@@ -0,0 +1,10 @@
+<template name="timeoutCountdownDialog">
+    <div id="timeoutCountdownDialog">
+        <div class="dialogHeader">
+            <h5>Session is about to expire!</h5>
+        </div>
+        <div class="dialogContent">
+            <p>You will be log out in {{leftTime}} {{secondsText}}.</p>
+        </div>
+    </div>
+</template>

Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.js

@@ -0,0 +1,9 @@
+
+Template.timeoutCountdownDialog.helpers({
+    leftTime: function(e) {
+        return Session.get("countdownDialogLeftTime");
+    },
+    secondsText: function() {
+        return Session.get("countdownDialogLeftTime") > 1? "seconds": "second";
+    }
+});

Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.styl

@@ -0,0 +1,15 @@
+#timeoutCountdownDialog
+  display: none
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  margin: auto
+  width: 20%
+  height: 15%
+  z-index: 100
+  border-radius: 5px
+  padding: 10px 20px 10px 20px
+  background-color: rgba(255,255,255,1)
+  outline: none

Packages/lesiontracker/package.js

@@ -79,6 +79,10 @@ Package.onUse(function(api) {
     api.addFiles('client/components/nonTargetResponseDialog/nonTargetResponseDialog.styl', 'client');
     api.addFiles('client/components/nonTargetResponseDialog/nonTargetResponseDialog.js', 'client');
 
+    api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.html', 'client');
+    api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.styl', 'client');
+    api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.js', 'client');
+
     api.addFiles('client/components/timepointTextDialog/timepointTextDialog.html', 'client');
     api.addFiles('client/components/timepointTextDialog/timepointTextDialog.styl', 'client');
 

Packages/meteor-stale-session/client.js

@@ -9,74 +9,84 @@
 var heartbeatInterval = Meteor.settings && Meteor.settings.public && Meteor.settings.public.staleSessionHeartbeatInterval || (3*60*1000); // 3mins
 var activityEvents = Meteor.settings && Meteor.settings.public && Meteor.settings.public.staleSessionActivityEvents || 'mousemove click keydown';
 var inactivityTimeout = Meteor.settings && Meteor.settings.public && Meteor.settings.public.staleSessionInactivityTimeout || (30*60*1000); // 30mins
-var countdownDialogTime = Meteor.settings && Meteor.settings.public && Meteor.settings.public.countdownDialogTime || (15*1000); // 30second
-var showCountdownDialog = Meteor.settings && Meteor.settings.public && Meteor.settings.public.showCountdownDialog || true;
+
+var dialogTimeout = Meteor.settings && Meteor.settings.public && Meteor.settings.public.dialogTimeout || (30*1000); // 30secs
+var showCountdownDialog =  Meteor.settings && Meteor.settings.public && Meteor.settings.public.showCountdownDialog || false;
+var countdownHeartbeatInterval = (heartbeatInterval < dialogTimeout)? heartbeatInterval : dialogTimeout;
 
 var activityDetected = false;
-var activityDetectedTime = new Date();
+var lastActivityDetectedTime = new Date();
+var dialogIsOpen = false;
 
 Meteor.startup(function() {
-    // Add countdown dialog to body
-    $("body").append('<div id="staleSessionCountdownModal" title="Session will expire!"></div>');
-
-    //Initialize the dialog
-    $("#staleSessionCountdownModal").dialog({
-        autoOpen: false,
-        open: function(){
-            $('.ui-widget-overlay').bind('click',function(){
-                $('#staleSessionCountdownModal').dialog('close');
-            });
-        }
-    });
 
     //
     // periodically send a heartbeat if activity has been detected within the interval
     //
-    Meteor.setInterval(function() {
-        if (Meteor.userId() && activityDetected) {
-            Meteor.call('heartbeat');
-            activityDetected = false;
-        }
-    }, heartbeatInterval);
-
-    // Detect the time when countdown dialog will be shown
     if (showCountdownDialog) {
         Meteor.setInterval(function() {
-            if (!activityDetected) {
-                var lastHeartbeatTime = activityDetectedTime.getTime();
-                var now = new Date().getTime();
-                var overdueTimestamp = now - lastHeartbeatTime;
-                var dialogTime = inactivityTimeout - countdownDialogTime;
-                if(dialogTime <= overdueTimestamp && inactivityTimeout >= overdueTimestamp) {
-                    var sec = Math.round((inactivityTimeout - overdueTimestamp) / 1000);
-                    console.log(sec);
-                    var dialogStr = "You will be log out in "+sec+" seconds.";
-                    if (sec === 0) {
-                        $("#staleSessionCountdownModal").dialog('close');
-                    } else {
-                        if(sec === 1) {
-                            dialogStr = "You will be log out in "+sec+" second.";
-                        }
-                        $('#staleSessionCountdownModal').html(dialogStr);
-                        $("#staleSessionCountdownModal").dialog('open');
-
-                        // Remove border of close button
-                        $(".ui-button:focus").css("outline", "none");
-                    }
+            if (Meteor.userId()) {
+                if (activityDetected) {
+                    Meteor.call('heartbeat', function(error, heartbeatTime) {
+                        lastActivityDetectedTime = heartbeatTime;
+                        activityDetected = false;
+                        // Event to close dialog
+                        $.event.trigger('TriggerCloseTimeoutCountdownDialog');
+                        dialogIsOpen = false;
+                    });
 
                 } else {
-                    $("#staleSessionCountdownModal").dialog('close');
+                    var overdueTimestamp = new Date().getTime() - lastActivityDetectedTime;
+                    // Ignore min differences
+                    overdueTimestamp = overdueTimestamp - (overdueTimestamp % 1000);
+                    console.log(overdueTimestamp);
+                    var startTime = inactivityTimeout - dialogTimeout;
+                    if (overdueTimestamp <= inactivityTimeout) {
+                        var nextIntervalTime = overdueTimestamp + countdownHeartbeatInterval;
+                        if (nextIntervalTime <= inactivityTimeout && nextIntervalTime >= startTime) {
+                            if (Math.abs(startTime - overdueTimestamp) <= Math.abs(nextIntervalTime - startTime) && !dialogIsOpen) {
+                                // Open dialog
+                                var leftTime = Math.round((inactivityTimeout - overdueTimestamp) / 1000);
+                                $.event.trigger('TriggerOpenTimeoutCountdownDialog', leftTime);
+                                dialogIsOpen = true;
+                            }
+                        } else {
+                            // Event to close dialog
+                            $.event.trigger('TriggerCloseTimeoutCountdownDialog');
+                            dialogIsOpen = false;
+                        }
+
+                    } else {
+                        // Event to close dialog
+                        $.event.trigger('TriggerCloseTimeoutCountdownDialog');
+                        dialogIsOpen = false;
+                    }
                 }
+
+            } else {
+                // Event to close dialog
+                $.event.trigger('TriggerCloseTimeoutCountdownDialog');
+                dialogIsOpen = false;
             }
-        }, 1000);
+        }, countdownHeartbeatInterval);
+
+    } else{
+
+        Meteor.setInterval(function() {
+            if (Meteor.userId() && activityDetected) {
+                Meteor.call('heartbeat');
+                activityDetected = false;
+            }
+        }, heartbeatInterval);
     }
 
     //
     // detect activity and mark it as detected on any of the following events
     //
-    $(document).on(activityEvents, function(event) {
+    $(document).on(activityEvents, function() {
         activityDetected = true;
-        activityDetectedTime = new Date();
-        $("#staleSessionCountdownModal").dialog('close');
+        // Event to close dialog
+        $.event.trigger('TriggerCloseTimeoutCountdownDialog');
+        dialogIsOpen = false;
     });
 });

Packages/meteor-stale-session/package.js

@@ -1,14 +1,13 @@
 Package.describe({
-  name:    'zuuk:stale-session',
-  summary: 'Stale session and session timeout handling for meteorjs',
-  git:     "https://github.com/lindleycb/meteor-stale-session.git",
-  version: "1.0.8"
+    name:    'zuuk:stale-session',
+    summary: 'Stale session and session timeout handling for meteorjs',
+    git:     "https://github.com/lindleycb/meteor-stale-session.git",
+    version: "1.0.8"
 });
 
 Package.onUse(function(api) {
     api.use('accounts-base@1.0.0', ['client','server']);
     api.use('jquery@1.0.0', 'client');
-    api.use('mizzao:jquery-ui', 'client');
     api.addFiles('client.js', 'client');
     api.addFiles('server.js', 'server');
-});
+});

Packages/meteor-stale-session/server.js

@@ -17,7 +17,9 @@ Meteor.methods({
         if (!this.userId) { return; }
         var user = Meteor.users.findOne(this.userId);
         if (user) {
-            Meteor.users.update(user._id, {$set: {heartbeat: new Date()}});
+            var heartbeatTime = new Date();
+            Meteor.users.update(user._id, {$set: {heartbeat: heartbeatTime}});
+            return heartbeatTime;
         }
     }
 });