From b7625d5f867afbe5b1ec1fcf5ef87adfbe0fe3a0 Mon Sep 17 00:00:00 2001 From: Mathieu Nayrolles Date: Fri, 29 Jan 2016 16:56:58 -0500 Subject: [PATCH] New click-based synchronization system #58 The input-based sync system where users had to input the current time after a five seconds countdown was source of errors. Many users were inputing 12 hours-format time instead of 24 and we were likely having a serious issue with timezones... In this prototype, users have to click a button at the next quarter minute. For ex, if it's 12:20:20, then we'll ask to hit the button at 12:20:30. I included some jokes (Almost there youngling, All good, take me home scotty, One does not simply ...) that we could randomize (like the Jack bot). The rule is, however, to keep them short (20 characters space included) so they fit on the popup. @AlphonseJr, @VS2000, thoughts ? --- application/views/measure/audio.php | 36 --- application/views/measure/dashboard.php | 2 +- application/views/measure/get-accuracy.php | 54 ++--- application/views/measure/new-measure.php | 44 ++-- assets/js/application.js | 128 ----------- assets/js/input.time.logic.js | 243 +++++++++++++++++++++ 6 files changed, 280 insertions(+), 227 deletions(-) delete mode 100644 application/views/measure/audio.php create mode 100644 assets/js/input.time.logic.js 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..3d2802a2 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;?>

+
- -
-
- At the end of the countdown, please enter below the exact time as it is on your watch.
Let's check the accuracy of your watch! -
-
-
- -
- -
-
+
-
5
+
+
+
+
+ +
-
- -
- -
Please use the 24-hour clock format - -
-
@@ -88,12 +79,12 @@

- +



We Instagram, tag us with your wristshots and share your results using #ToolwatchApp !

- - - - +
+ + +
@@ -109,8 +100,7 @@ Back to measures - - +
@@ -118,4 +108,6 @@ + + load->view("time");?> diff --git a/application/views/measure/new-measure.php b/application/views/measure/new-measure.php index 3db68df9..e85de1e3 100644 --- a/application/views/measure/new-measure.php +++ b/application/views/measure/new-measure.php @@ -1,19 +1,12 @@
-

New measure

+

New measure

-
-
- To begin measuring the accuracy of your watch, we must first synchronize your watch with Toolwatch’s accuracy system. - Start clicking on « Start now! » to start the countdown then look at your watch.

- At the end of the countdown, please enter below the exact time as it is on your watch. Let’s start measuring! -
-
@@ -34,26 +27,16 @@
-
5
-
-
- -
- -
- -
Please use the 24-hour clock format - +
+
+
+
+ +
@@ -65,13 +48,12 @@
- Back to measures - - +
+ load->view("time");?>
diff --git a/assets/js/application.js b/assets/js/application.js index 83835f36..fbe9fd81 100644 --- a/assets/js/application.js +++ b/assets/js/application.js @@ -234,29 +234,6 @@ $(document).ready(function() } }); - $('body').on('click', 'button[name="startSync"]', function(e) - { - e.preventDefault(); - var watchId = $('select[name="watchId"]').val(); - $('.watch-error').hide(); - - if(watchId != null) - { - $('button[name="startSync"]').hide(); - $('button[name="syncDone"]').show(); - $('.sync-time').show(); - $('button[name="restartCountdown"]').show(); - $('.watch-select').hide(); - - bips.play(); - - } - else - { - $('.watch-error').show(); - } - - }); $('body').on('submit', 'form[name="addWatch"]', function(e) { @@ -286,111 +263,6 @@ $(document).ready(function() }); - - $('body').on('submit', 'form[name="newAccuracy"]', function(e) - { - e.preventDefault(); - var watchId = $('select[name="watchId"]').val(); - var userTime = $('input[name="userTime"]').val(); - var myDate = new Date(); - // Timezone difference from Europe/Paris - var userTimezone= (myDate.getTimezoneOffset()/60)+1; - var measureId = $('input[name="measureId"]').val(); - - if(hoursRegExp.test(userTime)) - { - $('.btn-spinner i').css('display', 'inline-block'); - - $.post('/measures/accuracyMeasure', {watchId: watchId, userTime: userTime, userTimezone: userTimezone, measureId: measureId}, function(data) - { - var result = $.parseJSON(data); - if(result.success == true) - { - $('.userTime').hide(); - $('button[name="syncDone"]').hide(); - $('.sync-time').hide(); - $('button[name="restartCountdown"]').hide(); - $('.sync-success').show(); - $('.backToMeasure').show(); - $('#mainTitle').hide(); - $('#mainExplanation').hide(); - - if(result.accuracy != null) - { - 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'); - } - - }); - } - else - { - $('.time-error').show(); - } - - }); - - - - $('body').on('submit', 'form[name="newMeasure"]', function(e) - { - e.preventDefault(); - $('.signup-error').hide(); - - var watchId = $('select[name="watchId"]').val(); - var userTime = $('input[name="userTime"]').val(); - var getAccuracy = $('input[name="getAccuracy"]').val(); - - var myDate = new Date(); - // Timezone difference from Europe/Paris - var userTimezone= (myDate.getTimezoneOffset()/60)+1; - - if(hoursRegExp.test(userTime)) - { - $('.btn-spinner i').css('display', 'inline-block'); - - $.post('/measures/baseMeasure', {watchId: watchId, userTime: userTime, userTimezone: userTimezone, getAccuracy: getAccuracy}, function(data) - { - var result = $.parseJSON(data); - if(result.success == true) - { - $('.userTime').hide(); - $('button[name="syncDone"]').hide(); - $('.sync-time').hide(); - $('button[name="restartCountdown"]').hide(); - $('.sync-success').show(); - $('.backToMeasure').show(); - - } - else - { - $('.measure-error').show(); - $('.btn-spinner i').css('display', 'none'); - } - - }); - } - else - { - $('.time-error').show(); - } - }); - $('body').on('submit', 'form[name="contact"]', function(e) { e.preventDefault(); diff --git a/assets/js/input.time.logic.js b/assets/js/input.time.logic.js new file mode 100644 index 00000000..3489280b --- /dev/null +++ b/assets/js/input.time.logic.js @@ -0,0 +1,243 @@ +var offsetedDate; +var timeoutPopup; +var clickedDate; +var isAccuracy = false; +var validateFunction = "validateBaseMeasure();"; + +$( document ).ready(function() { + + if ($( "#accuracyHolder" ).length){ + isAccuracy = true; + validateFunction = "validateAccuracyMeasure();"; + } + + console.log(isAccuracy); + + $('body').on('click', 'button[name="startSync"]', function(e) + { + e.preventDefault(); + var watchId = $('select[name="watchId"]').val(); + $('.watch-error').hide(); + + if(watchId != null) + { + $('button[name="startSync"]').hide(); + $('button[name="restartCountdown"]').show(); + $('.watch-select').hide(); + $('span#selectedWatch').text( + "for your " + + $('select[name="watchId"]').find(":selected").text() + ); + getNextQuarterMinute(); + + } + else + { + $('.watch-error').show(); + } + }); + + $('body').on('click', 'button[name="restartCountdown"]', function(e) + { + e.preventDefault(); + reset(); + }); +}); + +function getNextQuarterMinute(){ + + var d = new Date(); + var seconds = d.getSeconds(); + var offsetSeconds; + + if(seconds < 15){ + offsetSeconds = 30 - seconds; + }else if(seconds < 30){ + offsetSeconds = 45 - seconds; + }else if(seconds < 45){ + offsetSeconds = 60 - seconds; + }else if(seconds < 60){ + offsetSeconds = 60 - seconds + 15; + } + + offsetedDate = new Date(d.getTime()+offsetSeconds*1000); + + console.log(seconds); + console.log(offsetSeconds); + console.log(offsetedDate.toString()); + + $("#sync-button").html("Press this button exactly at
" + + '' + + constructoffsetedDateString(offsetedDate) + + '' + ); + + $("#sync-button").show(); + + timeoutPopup = setTimeout(function(){deadlinePassed();}, + (offsetSeconds + 20) * 1000); +} + +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; +} + +function deadlinePassed(){ + + console.log("Deadline Passed"); + + var deadlinePassedText = + `
+

Did you missed it ?

+

+ To begin measuring the accuracy of your watch, we must first + synchronize it with Toolwatch's accuracy system.

+ You were supposed to click at ` + + constructoffsetedDateString(offsetedDate) + + `. +

+ Retry +
`; + + $('#pageModal .modal-body').html(deadlinePassedText); + + $('#pageModal').modal({ + show: true + }); +} + + +function reset(){ + $('button.close').click(); + getNextQuarterMinute(); +} + +function clicked(){ + + clearInterval(timeoutPopup); + clickedDate = new Date(); + + var clickedText = + `
+

Almost there youngling

+
+

You've synchronized you watch at + ` + + constructoffsetedDateString(offsetedDate) + + `

+ + + All good, take me home scotty + + +

+ +

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 + }); + +} + +function retrieveMinute(){ + offsetedDate = new Date(offsetedDate.getTime()-60*1000); + $("span#timeSyncAt").text(constructoffsetedDateString(offsetedDate)); +} + +function addMinute(){ + offsetedDate = new Date(offsetedDate.getTime()+60*1000); + $("span#timeSyncAt").text(constructoffsetedDateString(offsetedDate)); +} + +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) + { + + $("#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'); + } + } + ); +} + +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"); + } + } + ); +}