Check the accuracy
', $output); - } - - public function test_getReferenceTime() { - $CI = &get_instance(); - $CI->load->model('User'); - $CI->load->library('Session'); - - $output = $this->request('GET', ['Measures', 'getReferenceTime']); - - $this->assertEquals($CI->session->userdata('referenceTime'), time()); + $this->assertContains('Check the accuracy', $output);
}
public function test_baseMesure() {
@@ -227,8 +217,8 @@ public function test_baseMesure() {
['Measures', 'baseMeasure'],
[
'watchId' => self::$watchId,
- 'userTime' => '10:13:12',
- 'userTimezone' => '5'
+ 'referenceTimestamp' => microtime(),
+ 'userTimestamp' => microtime()
]
);
@@ -242,15 +232,13 @@ public function test_accuracyMeasure() {
$measure = $CI->Measure->find_by('watchId', self::$watchId);
- $CI->session->set_userdata('referenceTime', time());
-
$output = $this->request(
'POST',
['Measures', 'accuracyMeasure'],
[
'measureId' => $measure->id,
- 'userTime' => '10:16:12',
- 'userTimezone' => '5'
+ 'referenceTimestamp' => microtime(),
+ 'userTimestamp' => microtime()
]
);
diff --git a/application/views/home/demo.php b/application/views/home/demo.php
index bf468ccd..579b396d 100644
--- a/application/views/home/demo.php
+++ b/application/views/home/demo.php
@@ -2,37 +2,37 @@
-
+
-
- 5
-
-
-
-
-
-
-
-
Please use the 24-hour clock format
- Your time should be hours:minutes:seconds (like 11:22:33).
-
- ;?>)
+
+
+
+
+
+
+
+
+
-
-
+
+
Congratulations!
The accuracy of your watch is
- seconds a day!
+ seconds a day!
-
\ No newline at end of file
+
diff --git a/application/views/home/home.php b/application/views/home/home.php
index 658bd5c1..fec5bfbe 100644
--- a/application/views/home/home.php
+++ b/application/views/home/home.php
@@ -6,13 +6,13 @@
-
- load->view('home/demo');
- $this->load->view('home/slogan');
+
+ load->view('home/demo');
+ $this->load->view('home/slogan');
?>
-
+
-load->view('home/mosa'); ?>
\ No newline at end of file
+load->view('home/mosa'); ?>
diff --git a/application/views/measure/audio.php b/application/views/measure/audio.php
deleted file mode 100644
index c630d747..00000000
--- a/application/views/measure/audio.php
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
diff --git a/application/views/measure/dashboard.php b/application/views/measure/dashboard.php
index 213fdaaf..17d0971b 100644
--- a/application/views/measure/dashboard.php
+++ b/application/views/measure/dashboard.php
@@ -74,7 +74,7 @@
Add a watch
-
+
Start a new measure
diff --git a/application/views/measure/get-accuracy.php b/application/views/measure/get-accuracy.php
index 3a9a18c3..20ae9414 100644
--- a/application/views/measure/get-accuracy.php
+++ b/application/views/measure/get-accuracy.php
@@ -1,42 +1,33 @@
- Check the accuracy
Check the accuracy of your brand.' - '.$selectedWatch->name;?>
New measure
New measure
the second-hand
"
+ + '
'
+ + "
"
+ + "reaches exactly the twelve
o'clock position
"
+ );
+
+ $("#sync-button").show();
+ $("#demo-first-step").show();
+ $("#demo-second-step").hide();
+
+ var d = new Date();
+ var seconds = d.getSeconds();
+
+ timeoutClick = setTimeout(
+ function(){$( "#sync-button" ).click()},
+ (60 - seconds+1) * 1000);
+
+ $( "#sync-button" ).click(function() {
+
+ clearInterval(timeoutClick);
var result = delta;
- $("#demo-pointer").hide();
- $("#demo-third-step").hide();
- $("#demo-fourth-step").fadeToggle();
+ $("#demo-first-step").hide();
+ $("#demo-second-step").fadeToggle();
$(".watch-accuracy").html(result.toFixed(1));
- });
+ setTimeout(
+ function(){initDemo();},
+ 10 * 1000);
+ });
-});
-
-function initCounDown(){
- $("#demo-second-step").show();
- $("#demo-third-step").hide();
- $("#demo-fourth-step").hide();
- $("#demo-sync-time").html(5);
- $("#inputUserTime").val("");
- $("#demo-pointer").removeAttr('style');
- timeouts.push(setTimeout(countDownDisplay, 1000));
}
function initSize(){
@@ -78,80 +99,3 @@ function initSize(){
}, 2000);
}
-
-function countDownDisplay(){
- var countdown = $("#demo-sync-time").html();
-
- $("#demo-sync-time").html(countdown - 1);
- if(countdown > 1){
- timeouts.push(setTimeout(countDownDisplay, 1000));
- }else{
- d = new Date(new Date().getTime());
- similateInput();
- }
-}
-
-function similateInput(){
- $("#demo-second-step").hide();
- $("#demo-third-step").fadeToggle("slow", function (){
-
- var leftDelta = $("#demo-pointer").position().left
- - $("#inputUserTime").position().left;
-
- var topDelta = $("#demo-pointer").position().top
- - $("#inputUserTime").position().top - $("#inputUserTime").height() /2;
-
- $( "#demo-pointer" ).animate({
- marginTop: "-="+topDelta,
- marginLeft: "-="+leftDelta
- }, 2000, function(){
-
- var seconds = (d.getSeconds() + Math.floor(Math.abs(delta)));
- if(seconds <= 9){
- seconds = "0"+seconds;
- }
-
- var hours = d.getHours();
-
- if(hours <= 9){
- hours = "0"+seconds;
- }
-
- var minutes = d.getMinutes();
-
- if(minutes <= 9){
- minutes = "0"+minutes;
- }
-
- var date = hours + ':' + minutes + ':' + seconds;
- writeToInput(date, 0);
- });
- });
-}
-
-function writeToInput(text, i){
-
- if(i < text.length){
- $("#inputUserTime").val($("#inputUserTime").val() + text.charAt(i));
- i = i +1;
- timeouts.push(setTimeout(writeToInput, Math.round(Math.random() * (300 - 100) + 100), text, i));
- }else{
- clickCTA();
- }
-}
-
-function clickCTA(){
- var leftDelta = $("#demo-pointer").position().left - $("#demo-cta").position().left + $("#demo-cta").width() * 2 + 30;
-
- var topDelta = $("#demo-pointer").position().top - $("#demo-cta").position().top + $("#demo-cta").height() * 3;
-
- $( "#demo-pointer" ).animate({
- marginTop: "+="+topDelta,
- marginLeft: "+="+leftDelta
- }, 2000, function(){
- $("#demo-cta").click();
- });
-
- timeouts = [];
- setTimeout(initCounDown, 10000);
-}
diff --git a/assets/js/input.time.logic.js b/assets/js/input.time.logic.js
new file mode 100644
index 00000000..9a3834c2
--- /dev/null
+++ b/assets/js/input.time.logic.js
@@ -0,0 +1,296 @@
+var offsetedDate;
+var clickedDate;
+var isAccuracy = false;
+var validateFunction = "validateBaseMeasure();";
+var ctaText = "All good, take me home scotty";
+
+/**
+ * Link button click
+ */
+$( document ).ready(function() {
+
+ // This is shared between the baseMeasure and accuracyMeasure pages.
+ // Here, we do the difference between both and change the validateFunction
+ // used in the clicked function;
+ if ($( "#accuracyHolder" ).length){
+ isAccuracy = true;
+ validateFunction = "validateAccuracyMeasure();";
+ ctaText = "SHOW! ME! MY! ACCURACY!";
+ createCTA();
+ }
+
+ console.log(isAccuracy);
+
+ $('body').on('click', 'button[name="startSync"]', function(e)
+ {
+ e.preventDefault();
+ createCTA();
+ });
+});
+
+/**
+ * Check if a watch is selected and displays the CTA
+ */
+function createCTA(){
+ var watchId = $('select[name="watchId"]').val();
+ $('.watch-error').hide();
+
+ if(watchId != null)
+ {
+ $('button[name="startSync"]').hide();
+ $('.watch-select').hide();
+ $('span#selectedWatch').text(
+ "for your " +
+ $('select[name="watchId"]').find(":selected").text()
+ );
+ getNextMinute();
+
+ }
+ else
+ {
+ $('.watch-error').show();
+ }
+}
+
+/**
+ * Compute the next minute
+ */
+function getNextMinute(){
+
+ var d = new Date();
+ var seconds = d.getSeconds();
+ var offsetSeconds = 0;
+
+ // If it's somewhere between xx:xx:51 and xx:xx:60,
+ // users won't have the time to click.
+ // So, we add a minute.
+ if(seconds >= 50){
+ offsetSeconds = 60 - seconds;
+ }else{
+ offsetSeconds = -seconds;
+ }
+
+ offsetedDate = new Date(d.getTime() + offsetSeconds * 1000 + 60 * 1000);
+
+ $("#sync-button").html(""
+ + "Press this button when
the second-hand
"
+ + ''
+ + "
"
+ + "reaches exactly the twelve
o'clock position
"
+ );
+
+ $("#sync-button").show();
+
+ //The maximum waiting time is 70 secs. If nothing happens in the next 80
+ //sec, we display a popup.
+ timeoutPopup = setTimeout(function(){deadlinePassed();},
+ 80 * 1000);
+}
+
+/**
+ * Bootstrap css doesn't like us to override the
+ * default font for buttons...
+ * @return font-size depending on the screen
+ */
+function computeFontSize(){
+ var style = "";
+ if(document.body.clientWidth > 500){
+ style = "font-size:20px";
+ }
+ return style;
+}
+
+/**
+ * Helper function to transform a javascript Date in xx:xx:xx
+ *
+ * @param Date date
+ * @return String
+ */
+function constructoffsetedDateString(date){
+ var hours = (date.getHours() < 10) ? "0"+date.getHours() :
+ date.getHours();
+
+ var minutes = (offsetedDate.getMinutes() < 10) ? "0"+date.getMinutes() :
+ date.getMinutes();
+
+ var seconds = (offsetedDate.getSeconds() < 10) ? "0"+date.getSeconds() :
+ date.getSeconds();
+
+ return hours + ":" + minutes + ":" + seconds;
+}
+
+/**
+ * This function is triggererd by a setTimeout function and displays a
+ * popop
+ */
+function deadlinePassed(){
+
+ console.log("Deadline Passed");
+
+ var deadlinePassedText =
+ `
+ Is everything ok, Doc ?
+
+ To begin measuring the accuracy of your watch, we must first
+ synchronize it with Toolwatch's accuracy system.
+ You were supposed to click when the second hand was
+
+ exactly at 12
+ .
+
+ Retry
+ `;
+
+ $('#pageModal .modal-body').html(deadlinePassedText);
+
+ $('#pageModal').modal({
+ show: true
+ });
+}
+
+/**
+ * Resets everything
+ */
+function reset(){
+ $('button.close').click();
+ getNextMinute();
+}
+
+/**
+ * Big ass button has been clicked.
+ * Displays confirmation popup.
+ */
+function clicked(){
+
+ clearInterval(timeoutPopup);
+ clickedDate = new Date();
+
+ var clickedText =
+ `
+ Almost there youngling
+
+ You've synchronized you watch at
+ `
+ + constructoffsetedDateString(offsetedDate) +
+ `
+
+
+ `+ctaText+`
+
+
+
+
+ One does not simply have a timepiece without drift !
+ Press the following
+ button to add/retrieve a minute or
+ click here to retry.
+
+
+
+
+ -1 minute
+
+
+
+ +1 minute
+
+
+
+ `;
+
+ $('#pageModal .modal-body').html(clickedText);
+
+ $('#pageModal').modal({
+ show: true
+ });
+
+}
+
+/**
+ * Removes a minute from the offsetedDate
+ */
+function retrieveMinute(){
+ offsetedDate = new Date(offsetedDate.getTime()-60*1000);
+ $("span#timeSyncAt").text(constructoffsetedDateString(offsetedDate));
+}
+
+/**
+ * Adds a minute from the offsetedDate
+ */
+function addMinute(){
+ offsetedDate = new Date(offsetedDate.getTime()+60*1000);
+ $("span#timeSyncAt").text(constructoffsetedDateString(offsetedDate));
+}
+
+/**
+ * Validation function fot the accuracyMeasure
+ */
+function validateAccuracyMeasure(){
+
+ var measureId = $('input[name="measureId"]').val();
+
+ $.post('/measures/accuracyMeasure',
+ {
+ measureId: measureId,
+ referenceTimestamp: offsetedDate.getTime(),
+ userTimestamp: clickedDate.getTime()
+ }, function(data){
+ var result = $.parseJSON(data);
+ if(result.success == true)
+ {
+
+ $('button.close').click();
+
+ $("#sync-button").hide();
+ $('button[name="restartCountdown"]').hide();
+ $('.sync-success').show();
+ $('.backToMeasure').show();
+ $('#mainTitle').hide();
+
+ if(result.accuracy != null)
+ {
+ $('button.close').click();
+ if(result.accuracy > 0){
+ result.accuracy = '+'+result.accuracy;
+ }
+
+ $('.watch-accuracy').html(result.accuracy);
+ $('.watch-percentile').html(result.percentile);
+
+ $('.share-button').each(function(index){
+ $(this).attr("href", $(this).attr("href").replace("{WatchPercentile}", result.percentile));
+ });
+
+ }
+ }
+ else
+ {
+ $('.measure-error').show();
+ $('.btn-spinner i').css('display', 'none');
+ }
+ }
+ );
+}
+
+/**
+ * Validation function for the baseMeasure
+ */
+function validateBaseMeasure(){
+ var watchId = $('select[name="watchId"]').val();
+
+ $.post('/measures/baseMeasure',
+ {
+ watchId: watchId,
+ referenceTimestamp: offsetedDate.getTime(),
+ userTimestamp: clickedDate.getTime()
+ }, function(data){
+ var response = $.parseJSON(data);
+ if(response.success == true){
+ window.location.replace(window.location.origin+"/measures");
+ }
+ }
+ );
+}
+
-
diff --git a/application/views/home/home.php b/application/views/home/home.php
index 658bd5c1..fec5bfbe 100644
--- a/application/views/home/home.php
+++ b/application/views/home/home.php
@@ -6,13 +6,13 @@
;?>)
- 5
-
-
-
-
-
-
- -
Please use the 24-hour clock format - Your time should be hours:minutes:seconds (like 11:22:33). - -
+
\ No newline at end of file
+-
-
- -
Please use the 24-hour clock format - Your time should be hours:minutes:seconds (like 11:22:33). - -
+
+
-
-
+
+
+
+
+ +
+
+
+
+ +
+
+
-Congratulations!
The accuracy of your watch is
- seconds a day!
+ seconds a day!
-
- load->view('home/demo');
- $this->load->view('home/slogan');
+
+ load->view('home/demo');
+ $this->load->view('home/slogan');
?>
-
+
- + Start a new measure diff --git a/application/views/measure/get-accuracy.php b/application/views/measure/get-accuracy.php index 3a9a18c3..20ae9414 100644 --- a/application/views/measure/get-accuracy.php +++ b/application/views/measure/get-accuracy.php @@ -1,42 +1,33 @@
-
Check the accuracy
Check the accuracy of your brand.' - '.$selectedWatch->name;?>
-
New measure
New measure
the second-hand
" + + '
'
+ + "" + + "reaches exactly the twelve
o'clock position
" + ); + + $("#sync-button").show(); + $("#demo-first-step").show(); + $("#demo-second-step").hide(); + + var d = new Date(); + var seconds = d.getSeconds(); + + timeoutClick = setTimeout( + function(){$( "#sync-button" ).click()}, + (60 - seconds+1) * 1000); + + $( "#sync-button" ).click(function() { + + clearInterval(timeoutClick); var result = delta; - $("#demo-pointer").hide(); - $("#demo-third-step").hide(); - $("#demo-fourth-step").fadeToggle(); + $("#demo-first-step").hide(); + $("#demo-second-step").fadeToggle(); $(".watch-accuracy").html(result.toFixed(1)); - }); + setTimeout( + function(){initDemo();}, + 10 * 1000); + }); -}); - -function initCounDown(){ - $("#demo-second-step").show(); - $("#demo-third-step").hide(); - $("#demo-fourth-step").hide(); - $("#demo-sync-time").html(5); - $("#inputUserTime").val(""); - $("#demo-pointer").removeAttr('style'); - timeouts.push(setTimeout(countDownDisplay, 1000)); } function initSize(){ @@ -78,80 +99,3 @@ function initSize(){ }, 2000); } - -function countDownDisplay(){ - var countdown = $("#demo-sync-time").html(); - - $("#demo-sync-time").html(countdown - 1); - if(countdown > 1){ - timeouts.push(setTimeout(countDownDisplay, 1000)); - }else{ - d = new Date(new Date().getTime()); - similateInput(); - } -} - -function similateInput(){ - $("#demo-second-step").hide(); - $("#demo-third-step").fadeToggle("slow", function (){ - - var leftDelta = $("#demo-pointer").position().left - - $("#inputUserTime").position().left; - - var topDelta = $("#demo-pointer").position().top - - $("#inputUserTime").position().top - $("#inputUserTime").height() /2; - - $( "#demo-pointer" ).animate({ - marginTop: "-="+topDelta, - marginLeft: "-="+leftDelta - }, 2000, function(){ - - var seconds = (d.getSeconds() + Math.floor(Math.abs(delta))); - if(seconds <= 9){ - seconds = "0"+seconds; - } - - var hours = d.getHours(); - - if(hours <= 9){ - hours = "0"+seconds; - } - - var minutes = d.getMinutes(); - - if(minutes <= 9){ - minutes = "0"+minutes; - } - - var date = hours + ':' + minutes + ':' + seconds; - writeToInput(date, 0); - }); - }); -} - -function writeToInput(text, i){ - - if(i < text.length){ - $("#inputUserTime").val($("#inputUserTime").val() + text.charAt(i)); - i = i +1; - timeouts.push(setTimeout(writeToInput, Math.round(Math.random() * (300 - 100) + 100), text, i)); - }else{ - clickCTA(); - } -} - -function clickCTA(){ - var leftDelta = $("#demo-pointer").position().left - $("#demo-cta").position().left + $("#demo-cta").width() * 2 + 30; - - var topDelta = $("#demo-pointer").position().top - $("#demo-cta").position().top + $("#demo-cta").height() * 3; - - $( "#demo-pointer" ).animate({ - marginTop: "+="+topDelta, - marginLeft: "+="+leftDelta - }, 2000, function(){ - $("#demo-cta").click(); - }); - - timeouts = []; - setTimeout(initCounDown, 10000); -} diff --git a/assets/js/input.time.logic.js b/assets/js/input.time.logic.js new file mode 100644 index 00000000..9a3834c2 --- /dev/null +++ b/assets/js/input.time.logic.js @@ -0,0 +1,296 @@ +var offsetedDate; +var clickedDate; +var isAccuracy = false; +var validateFunction = "validateBaseMeasure();"; +var ctaText = "All good, take me home scotty"; + +/** + * Link button click + */ +$( document ).ready(function() { + + // This is shared between the baseMeasure and accuracyMeasure pages. + // Here, we do the difference between both and change the validateFunction + // used in the clicked function; + if ($( "#accuracyHolder" ).length){ + isAccuracy = true; + validateFunction = "validateAccuracyMeasure();"; + ctaText = "SHOW! ME! MY! ACCURACY!"; + createCTA(); + } + + console.log(isAccuracy); + + $('body').on('click', 'button[name="startSync"]', function(e) + { + e.preventDefault(); + createCTA(); + }); +}); + +/** + * Check if a watch is selected and displays the CTA + */ +function createCTA(){ + var watchId = $('select[name="watchId"]').val(); + $('.watch-error').hide(); + + if(watchId != null) + { + $('button[name="startSync"]').hide(); + $('.watch-select').hide(); + $('span#selectedWatch').text( + "for your " + + $('select[name="watchId"]').find(":selected").text() + ); + getNextMinute(); + + } + else + { + $('.watch-error').show(); + } +} + +/** + * Compute the next minute + */ +function getNextMinute(){ + + var d = new Date(); + var seconds = d.getSeconds(); + var offsetSeconds = 0; + + // If it's somewhere between xx:xx:51 and xx:xx:60, + // users won't have the time to click. + // So, we add a minute. + if(seconds >= 50){ + offsetSeconds = 60 - seconds; + }else{ + offsetSeconds = -seconds; + } + + offsetedDate = new Date(d.getTime() + offsetSeconds * 1000 + 60 * 1000); + + $("#sync-button").html("" + + "Press this button when
the second-hand
" + + '
'
+ + "" + + "reaches exactly the twelve
o'clock position
" + ); + + $("#sync-button").show(); + + //The maximum waiting time is 70 secs. If nothing happens in the next 80 + //sec, we display a popup. + timeoutPopup = setTimeout(function(){deadlinePassed();}, + 80 * 1000); +} + +/** + * Bootstrap css doesn't like us to override the + * default font for buttons... + * @return font-size depending on the screen + */ +function computeFontSize(){ + var style = ""; + if(document.body.clientWidth > 500){ + style = "font-size:20px"; + } + return style; +} + +/** + * Helper function to transform a javascript Date in xx:xx:xx + * + * @param Date date + * @return String + */ +function constructoffsetedDateString(date){ + var hours = (date.getHours() < 10) ? "0"+date.getHours() : + date.getHours(); + + var minutes = (offsetedDate.getMinutes() < 10) ? "0"+date.getMinutes() : + date.getMinutes(); + + var seconds = (offsetedDate.getSeconds() < 10) ? "0"+date.getSeconds() : + date.getSeconds(); + + return hours + ":" + minutes + ":" + seconds; +} + +/** + * This function is triggererd by a setTimeout function and displays a + * popop + */ +function deadlinePassed(){ + + console.log("Deadline Passed"); + + var deadlinePassedText = + `
Is everything ok, Doc ?
+
+ To begin measuring the accuracy of your watch, we must first
+ synchronize it with Toolwatch's accuracy system.
+ You were supposed to click when the second hand was
+
+ exactly at 12
+ .
+
Almost there youngling
++
You've synchronized you watch at
+ `
+ + constructoffsetedDateString(offsetedDate) +
+ `
+ +
One does not simply have a timepiece without drift ! + Press the following + button to add/retrieve a minute or + click here to retry.
+ ++ + + -1 minute + + + + +1 minute + +
+
+