From 5ec3cace94cd37c208062ef682b7ef678705c01f Mon Sep 17 00:00:00 2001 From: Aysel Afsar Date: Tue, 9 Feb 2016 22:16:37 -0500 Subject: [PATCH] LT-107: Add countdown dialog - Remove ui from meteor-stale-session package --- LesionTracker/.meteor/versions | 2 - .../lesionTrackerLayout.html | 1 + .../lesionTrackerLayout.js | 28 +++++ .../timeoutCountdownDialog.html | 10 ++ .../timeoutCountdownDialog.js | 9 ++ .../timeoutCountdownDialog.styl | 15 +++ Packages/lesiontracker/package.js | 4 + Packages/meteor-stale-session/client.js | 108 ++++++++++-------- Packages/meteor-stale-session/package.js | 11 +- Packages/meteor-stale-session/server.js | 4 +- config/localhostOrthanc.json | 10 +- config/medicalConnections.json | 10 +- config/medkenOrthanc.json | 10 +- config/siimDCM4CHEE.json | 10 +- 14 files changed, 158 insertions(+), 74 deletions(-) create mode 100644 Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.html create mode 100644 Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.js create mode 100644 Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.styl diff --git a/LesionTracker/.meteor/versions b/LesionTracker/.meteor/versions index b338efbf3..5bb385199 100644 --- a/LesionTracker/.meteor/versions +++ b/LesionTracker/.meteor/versions @@ -71,8 +71,6 @@ meteor-base@1.0.1 meteor-platform@1.2.3 minifiers@1.1.7 minimongo@1.0.10 -mizzao:build-fetcher@0.2.0 -mizzao:jquery-ui@1.11.4 mobile-experience@1.0.1 mobile-status-bar@1.0.6 momentjs:moment@2.11.2 diff --git a/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html b/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html index 58b0f4a4c..f15126f79 100644 --- a/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html +++ b/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.html @@ -18,5 +18,6 @@ {{/if}} + {{> timeoutCountdownDialog}} {{> yield}} \ No newline at end of file diff --git a/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.js b/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.js index 05436d7a9..a750d7f44 100644 --- a/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.js +++ b/LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.js @@ -11,3 +11,31 @@ Template.layoutLesionTracker.helpers({ return Meteor.user().profile.fullName; } }); + +Template.layoutLesionTracker.onCreated(function() { + // Show countdown dialog + var handle; + $(document).on('TriggerOpenTimeoutCountdownDialog', function (e, leftTime) { + // TODO: Show modal dialog + handle = setInterval(function() { + leftTime --; + // Set countdownDialogLeftTime session + Session.set("countdownDialogLeftTime", leftTime); + // Show dialog + if ($("#timeoutCountdownDialog").css("display") == "none") { + $("#timeoutCountdownDialog").css("display", "block"); + } + }, 1000); + + }); + + $(document).on('TriggerCloseTimeoutCountdownDialog', function (e) { + $("#timeoutCountdownDialog").css("display", "none"); + if (handle) { + clearInterval(handle); + // Close the dialog + $("#timeoutCountdownDialog").css("display", "none"); + + } + }); +}); \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.html b/Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.html new file mode 100644 index 000000000..6aefad20a --- /dev/null +++ b/Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.html @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.js b/Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.js new file mode 100644 index 000000000..7ef21124d --- /dev/null +++ b/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"; + } +}); \ No newline at end of file diff --git a/Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.styl b/Packages/lesiontracker/client/components/timeoutCountdownDialog/timeoutCountdownDialog.styl new file mode 100644 index 000000000..d9bad5739 --- /dev/null +++ b/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 diff --git a/Packages/lesiontracker/package.js b/Packages/lesiontracker/package.js index 19aadc5e0..1020d1aee 100644 --- a/Packages/lesiontracker/package.js +++ b/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'); diff --git a/Packages/meteor-stale-session/client.js b/Packages/meteor-stale-session/client.js index d15e7ea01..34594fd7b 100644 --- a/Packages/meteor-stale-session/client.js +++ b/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('
'); - - //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; }); }); diff --git a/Packages/meteor-stale-session/package.js b/Packages/meteor-stale-session/package.js index 81fd77a91..9138f7db4 100644 --- a/Packages/meteor-stale-session/package.js +++ b/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'); -}); +}); \ No newline at end of file diff --git a/Packages/meteor-stale-session/server.js b/Packages/meteor-stale-session/server.js index 37f83e1a1..5b406f167 100644 --- a/Packages/meteor-stale-session/server.js +++ b/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; } } }); diff --git a/config/localhostOrthanc.json b/config/localhostOrthanc.json index 8535b2975..f9e56984c 100644 --- a/config/localhostOrthanc.json +++ b/config/localhostOrthanc.json @@ -19,9 +19,11 @@ ] }, "public": { - "staleSessionInactivityTimeout": 1800000, - "staleSessionHeartbeatInterval": 180000, - "staleSessionPurgeInterval": 60000, - "staleSessionActivityEvents": "mousemove click keydown" + "staleSessionInactivityTimeout": 300000, + "staleSessionHeartbeatInterval": 30000, + "staleSessionPurgeInterval": 15000, + "staleSessionActivityEvents": "mousemove click keydown", + "showCountdownDialog": true, + "dialogTimeout": 30000 } } diff --git a/config/medicalConnections.json b/config/medicalConnections.json index fd35535ec..2953f37e1 100644 --- a/config/medicalConnections.json +++ b/config/medicalConnections.json @@ -17,9 +17,11 @@ ] }, "public": { - "staleSessionInactivityTimeout": 1800000, - "staleSessionHeartbeatInterval": 180000, - "staleSessionPurgeInterval": 60000, - "staleSessionActivityEvents": "mousemove click keydown" + "staleSessionInactivityTimeout": 300000, + "staleSessionHeartbeatInterval": 30000, + "staleSessionPurgeInterval": 15000, + "staleSessionActivityEvents": "mousemove click keydown", + "showCountdownDialog": true, + "dialogTimeout": 30000 } } \ No newline at end of file diff --git a/config/medkenOrthanc.json b/config/medkenOrthanc.json index 21996628a..a1721fe11 100644 --- a/config/medkenOrthanc.json +++ b/config/medkenOrthanc.json @@ -18,9 +18,11 @@ ] }, "public": { - "staleSessionInactivityTimeout": 1800000, - "staleSessionHeartbeatInterval": 180000, - "staleSessionPurgeInterval": 60000, - "staleSessionActivityEvents": "mousemove click keydown" + "staleSessionInactivityTimeout": 300000, + "staleSessionHeartbeatInterval": 30000, + "staleSessionPurgeInterval": 15000, + "staleSessionActivityEvents": "mousemove click keydown", + "showCountdownDialog": true, + "dialogTimeout": 30000 } } \ No newline at end of file diff --git a/config/siimDCM4CHEE.json b/config/siimDCM4CHEE.json index 46d5d320f..455a5cde5 100644 --- a/config/siimDCM4CHEE.json +++ b/config/siimDCM4CHEE.json @@ -17,9 +17,11 @@ ] }, "public": { - "staleSessionInactivityTimeout": 30000, - "staleSessionHeartbeatInterval": 3000, - "staleSessionPurgeInterval": 1000, - "staleSessionActivityEvents": "mousemove click keydown" + "staleSessionInactivityTimeout": 300000, + "staleSessionHeartbeatInterval": 30000, + "staleSessionPurgeInterval": 15000, + "staleSessionActivityEvents": "mousemove click keydown", + "showCountdownDialog": true, + "dialogTimeout": 30000 } } \ No newline at end of file