├── .gitignore ├── README.md ├── app.js └── timer.html /.gitignore: -------------------------------------------------------------------------------- 1 | .idea -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vuejsTimer 2 | 3 | 4 | INTRO 5 | 6 | I needed a timer for my project, and found many pre-built jquery and javascript timers. However, I wanted a 7 | vue.js timeout script, and they were few and far between. I am fairly new to the software engineering world, 8 | so this is my first attempt at a vue.js timer. 9 | 10 | This should be relatively straight forward to add to your project. It uses bootstrap for the slideDown 11 | element, with a few lines of custom styling. 12 | 13 | 14 | 15 | CODE 16 | 17 | @mousemove is bound to the body element, which controls the user idle state. 18 | 19 | 20 | 21 | The idleTime is the internal timer, which keeps track of the user's idle state. 22 | 23 | idleTime: 3600 24 | 25 | The UITime is the amount of time shown to the user, in the UI, before the session is expired. 26 | 27 | UITime: 120 28 | 29 | I've commented the code to attempt to make it very easy to read. 30 | 31 | 32 | 33 | 34 | INSTALLATION 35 | 36 | 1. Copy the following HTML into your HTML. Place this under your NAV if you want the warning to 37 | appear at the top of the screen. If you want the warning to be full screen, make sure you 38 | do not add this within the div container. 39 | 40 | ```html 41 |
42 | 43 |

You will be logged out!

44 |

45 | You have been idle for longer than {{ idleTime }} seconds. You will be 46 | logged out in {{ UICountdown }} seconds. 47 |

48 | 49 | 50 |
51 | ``` 52 | 53 | 2. Add the @mousemove to your body tag 54 | 55 | 56 | 57 | 58 | 3. Add the following lines to the bottom of your HTML, just before the closing 59 | 60 | ```html 61 | 62 | 63 | 64 | ``` 65 | 66 | 3a. Don't forget to add bootstrap to the head of your HTML. 67 | 68 | 69 | 70 | 4. Copy the app.js to your public root folder (or wherever you chose) 71 | 72 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | new Vue({ 2 | el: 'body', // use the body element so we have mousemove on the entire document 3 | 4 | data: { // config values 5 | idleTime: 3600, // The internal timer that tracks idle time, is reset on event. Set this to your timeout value in seconds 6 | idleCountdown:null, // Populated at runtime by idleTime value. This value decrease every second until timeout is reached 7 | idleTimeout: false, // Timeout status toggle 8 | UITime: 120, // Total time before UI performs action. Set this to your desired countdown to your users 9 | UICountdown: null, // Populated by uiTime on idleTimeout, UI countdown decreases every second until timeout is reached 10 | UITimeout: false // UI timeout status toggle 11 | }, 12 | 13 | methods: { 14 | 15 | // ************************************* START IDLE COUNTDOWN ************************************* // 16 | 17 | // This starts the internal timer. The internal timer is started automatically 18 | // on page load. The internal timer will be reset everytime a mouse, click, 19 | // key event occurs, which means the user is active, on timeout, call 20 | // the countDown timer which is visible to the UI 21 | startIdleCountdown: function () { 22 | $('.UICountdown').hide(); // hides the UI warning window 23 | this.idleCountdown = this.idleTime; // initialize the timer with idle timeout config value 24 | this.setIdleTimer = setInterval(this.idleTimer, 1000); // starts the timer. setTimer is used to clear/reset idleTimer 25 | }, 26 | 27 | // This is the method that counts down the idle time. Every 1000 ms an additional 28 | // second is removed from the timer. Once the count hits zero, the UI is 29 | // displayed and we call the uiCountDown 30 | idleTimer: function () { 31 | this.idleCountdown = this.idleCountdown - 1; // decrement idleCountdown every second 32 | 33 | if(!this.idleCountdown){ // if countdown is zero timeout is achieved 34 | clearInterval(this.setIdleTimer); // clear timer 35 | this.idleTimeout = !this.idleTimeout; // toggle the idle timeout status 36 | 37 | this.startUICountdown(); // start the UI timer 38 | } 39 | }, 40 | 41 | // reset idle timer on mouse or key event. 42 | idleReset: function () { 43 | if(!this.idleTimeout) { // reset idle countdown only if idle timeout has not expired 44 | clearInterval(this.setIdleTimer); // reset the UI timer 45 | this.startIdleCountdown(); // start the idle countdown 46 | } 47 | }, 48 | 49 | // ************************************* START UI COUNTDOWN ************************************* // 50 | 51 | // Starts the UI countdown, and displays the warning to user 52 | startUICountdown: function () { 53 | $('.UICountdown').slideDown(2000); // display the UI warning window 54 | this.UICountdown = this.UITime; // initialize the UI timer with UI timeout config value 55 | this.setUITimer = setInterval(this.UITimer, 1000); // start UI timer. setUITimer is used to reset UITimer 56 | }, 57 | 58 | // the countdown timer decrements the UICountdown value until zero 59 | UITimer: function () { 60 | this.UICountdown = this.UICountdown - 1; // decrement UI countdown every second 61 | 62 | if(!this.UICountdown){ // the countdown is complete, take action 63 | clearInterval(this.setUITimer); // reset the UI timer 64 | this.UITimeout = !this.UITimeout; // toggle UI timeout status. Use for future events 65 | 66 | this.countdownExpired(); // post UI countdown expiry events 67 | } 68 | }, 69 | 70 | // If the UI reset button is clicked, we start from the beginning 71 | UIReset: function () { 72 | clearInterval(this.setUITimer); // reset the UI timer 73 | this.idleTimeout = !this.idleTimeout; // Toggle idleTimeout status 74 | this.startIdleCountdown(); // start the idle countdown 75 | }, 76 | 77 | // ************************************* COUNTDOWN EXPIRED EVENTS ************************************* // 78 | 79 | countdownExpired: function () { 80 | window.location = "/logout"; 81 | } 82 | }, 83 | 84 | ready: function () { 85 | this.startIdleCountdown(); 86 | } 87 | }); 88 | -------------------------------------------------------------------------------- /timer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue.js simple timer example 6 | 7 | 14 | 15 | 16 | 17 | 18 | 23 | 24 |
25 | 26 |

You will be logged out!

27 |

28 | You have been idle for longer than {{ idleTime }} seconds. You will be 29 | logged out in {{ UICountdown }} seconds. 30 |

31 | 32 | 33 |
34 | 35 |
36 | 
{{ $data | json }}
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | --------------------------------------------------------------------------------