GPS timer Framerwork
by grippstick
HTML
<link rel="stylesheet" href="http://babackofficedev.radolo.com/kendo/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://babackofficedev.radolo.com/Kendo/Styles/kendo.flat.min.css">
<script src="http://babackofficedev.radolo.com/Kendo/js/jquery.min.js"></script>
<script src="http://babackofficedev.radolo.com/Kendo/js/kendo.all.min.js"></script>
<div id='container'>
<ul>
<li>Current Time Stamp <span data-bind='text:currentTimeStamp'></span>
</li>
<li>Last Time Stamp <span data-bind='text:lastTimeStamp'></span>
</li>
<li>Time Difference <span data-bind='text:timeDifference'></span>
</li>
</ul>
<button data-bind='click:clickStart,invisible:running'>Start</button>
<button data-bind='click:clickStop,visible:running'>Stop</button>
</div>
JavaScript
var vm = new kendo.observable({
running: false,
lastTimeStamp: null,
currentTimeStamp: null,
timeDifference: null,
getTimeDifference: function (endTime, startTime) {
var diff = null;
diff=endTime-startTime;
vm.set('timeDifference', diff);
return diff;
},
clickStart: function () {
vm.set('running', true);
vm.getPosition();
},
clickStop: function () {
vm.set('running', false);
},
getPosition: function () {
if (!vm.get('running')) {
return;
}
var prev = vm.get('lastTimeStamp');
var curr = Date.now();
vm.set('currentTimeStamp', curr);
var waitTime = 1000;
var diff = vm.getTimeDifference(curr, prev);
if (diff > 1000) {
waitTime = 0;
}
setTimeout(function () {
console.warn('starting gpsCall');
//gps call here
}, waitTime);
},
gpsSuccess: function (e) {
console.warn('gps success');
vm.set('lastTimeStamp', Date.now());
//record coordinates
//calc distances
vm.getPosition();
},
gpsFailure: function (e) {
console.warn('gps failure');
vm.set('lastTimeStamp', Date.now());
//let the user know we have a whoopsie
vm.getPosition();
}
});
kendo.bind($('#container'), vm);