Use timer to timeout a form in AngularJs - angularjs

Question

I trying to build a feedback system with Angular. I am using angular ui router to route the user to different pages. It has basically 3 screens(see below).
Satisfied / Not satisfied links with icon.
A form for satisfied user to fill.
A form for unsatisfied user to fill.
I have succeeded in implementing it mostly. But am not able to figure out how to do 1 thing. I want to time out the form if some one leaves it without submitting it and send go back to the 1st screen, so next user can give feedback. But at the same time, I don't want give a flat timer as I don't want the form to redirect if someone is filling the form say slowly. So the timer should redirect to the form to first screen if no activity is happening. But the timer should reset each time the user interact with the form.
Routes:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route to show main page with satisfied/unsatisfied
.state('main', {
url: '/main',
templateUrl: 'container.html',
controller: 'formController',
})
//satisfied
.state('main.happy', {
url: '/happy',
// data: { happy: true },
templateUrl: 'happy.html',
})
//not satisfied
.state('main.sad', {
url: '/sad',
templateUrl: 'welcome.html'
})
// catch all route
$urlRouterProvider.otherwise('/main');
})
The form code below:
<form id="signup-form" ng-submit="processForm()" >
<div class="col-md-12"><h4 class="col-md-12" >What made you satisfied</h4></div>
<div class="form-group col-md-12">
<div class="row">
<div class="radio col-md-6">
<label>
<input type="checkbox" ng-model="formData.option1" >
Option1
</label>
</div>
<div class="radio col-md-6">
<label>
<input type="checkbox" ng-model="formData.option2" >
Option2
</label>
</div>
</div>
</div>
<div class="col-md-12 contact">
<h4 class="col-md-12" >Want us to contact you?</h4>
<div class="form-group">
<div class="textbox col-md-12">
<label>Name </label>
<input type="text" ng-model="formData.name" >
</div>
<div class="textbox col-md-12">
<label>Email </label>
<input type="text" ng-model="formData.email" >
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12 ">
<div class="col-md-12 contact">
<button type="submit" class="btn btn-primary" >Submit</button>
</div>
</div>
</div>
</form>

Answer 1

Here is a timeout function(you might could use $timeout as well) that I wrote to do something similar. It will allow the function to run for a set amount of time, and reset if a change has occurred to the scope of the timeout:
function TimeOut(fn, interval, scope, args) {
scope = scope || window;
var self = this;
var wrap = function() {
self.Clear();
fn.apply(scope, args || arguments);
};
this.Id = setTimeout(wrap, interval);
TimeOut.prototype.Id = null;
TimeOut.prototype.Cleared = false;
TimeOut.prototype.Clear = function() {
clearTimeout(this.Id);
this.Cleared = true;
this.Id = null;
}
}
I was using this to send some data to the server after a toggle is flipped, but I did not want it to fire if the user repeatedly flipped the switch. To Use this function you do something similar to this (Starting it on page load):
$scope.yourTimer = new TimeOut( SomeFunction($scope.someObject),
someInterval, yourScope, arg)
NOTE: I passed in window.parent for yourScope so the function will fire regardless if user left page. Yous do not need to pass in the args if you do not have any
Now what you need to do is add a watch/watchcollection to your form data and in this watch you do this:
$scope.$watchCollection( "yourData",
function( newValue, oldValue ) {
if(newValue != oldValue){
if(!($scope.youtTimer.Cleared === true && $scope.yourTimer === null){
$scope.yourTimer.Clear()
$scope.yourTimer = new TimeOut( SomeFunction($scope.someObject),
someInterval, yourScope, arg)
}else{
//recreate time just in case
$scope.yourTimer = new TimeOut( SomeFunction($scope.someObject),
someInterval, yourScope, arg)
}
}
}
);
Now if any thing changes in the "yourData", before the timer elapses, the current timeout is cleared and restarted again.