I want to reload the timer board when it has detected an update from another browser with the same timer board open. When the update is detected, on my laptop, phone or the iMac at my work, it works completly fine. But when i try it on the iPad, it doesn't reload correctly.
Picture 1 This is how it looks like on the ipad after a reload
Picture 2 This is how it looks like on the laptop, pc, phone etc with the reloads
I've tried to remove the '`' And '${}' because maybe that would be the problem, but no that was not it. I've tried to change the ajax request with some parameters, but that's also not the solution
This is the ajax request to get all the tables (each table has an separite timer)
$.ajax({
url: './mod/get-tables.php',
type: 'POST',
cache: false,
async: true,
timeout: 8000,
headers: {
"cache-control": "no-cache"
},
success: function (response) {
$("#tables-container").html(response);
}
});
This is how an table div looks like when it's not active
<div class='col-lg-2 col-md-3 col-sm-4 col-4 mt-2 table-container' id='1' data-autostart='false' data-start-time='0'>
<button class='btn btn-secondary btn-block text-center table'>
tafel <b>1</b>
<br>
<span class='time'>
<span class='hours'>00</span>:
<span class='minutes'>00</span>:
<span class='seconds'>00</span>
</span>
</button>
</div>
This is how an table div looks like when it's active
<div class='col-lg-2 col-md-3 col-sm-4 col-4 mt-2 table-container' id='1' data-autostart='true' data-start-time='2019-11-06 09:05:16'>
<button class='btn btn-success btn-block text-center table'>
tafel <b>1</b>
<br>
<span class='time'>
<span class='hours'>12</span>:
<span class='minutes'>02</span>:
<span class='seconds'>58</span>
</span>
</button>
</div>
And the code that runs the timers
$(".table").on('click', function () {
var $button = $(this);
if ($button.hasClass('btn-secondary')) {
$button.removeClass('btn-secondary').addClass('btn-success');
} else if ($button.hasClass('btn-warning')) {
$button.removeClass('btn-warning').addClass('btn-secondary');
} else if ($button.hasClass('btn-danger')) {
$button.removeClass('btn-danger').addClass('btn-secondary');
} else {
$button.removeClass('btn-success').addClass('btn-secondary');
}
});
function prependZero(time, length) {
time = '' + (time | 0);
while (time.length < length) time = '0' + time;
return time;
}
$(function () {
$('.table-container').each(function () {
var element = $(this);
var table_id = this.id;
var cooking = element.data('autostart');
var startTime = element.data('start-time');
var hoursElement = element.find('.hours');
var minutesElement = element.find('.minutes');
var secondsElement = element.find('.seconds');
var toggleElement = element.find('.table');
var hours = 0, minutes = 0, seconds = 0, timer;
function setStopwatch(hours, minutes, seconds) {
hoursElement.text(prependZero(hours, 2));
minutesElement.text(prependZero(minutes, 2));
secondsElement.text(prependZero(seconds, 2));
}
function runTimer(givenTime = Date.now()) {
var startTime = givenTime;
var prevHours = hours;
var prevMinutes = minutes;
var prevSeconds = seconds;
timer = setInterval(function () {
var timeElapsed = Date.now() - startTime;
hours = (timeElapsed / 3600000) + prevHours;
minutes = ((timeElapsed / 60000) + prevMinutes) % 60;
seconds = ((timeElapsed / 1000) + prevSeconds) % 60;
if (hours >= 1) {
toggleElement.removeClass('btn-success').removeClass('btn-warning').addClass('btn-danger');
} else if (minutes >= 15 && minutes < 20) {
toggleElement.removeClass('btn-success').addClass('btn-warning');
} else if (minutes >= 20) {
toggleElement.removeClass('btn-success').removeClass('btn-warning').addClass('btn-danger');
}
setStopwatch(hours, minutes, seconds);
}, 1000);
}
function run(givenTime = 0) {
cooking = true;
if (givenTime !== 0) {
runTimer(givenTime);
} else {
runTimer();
startDatabase(table_id, Date.now());
}
}
function pause() {
cooking = false;
clearTimeout(timer);
}
function reset() {
cooking = false;
pause();
hours = minutes = seconds = 0;
setStopwatch(hours, minutes, seconds);
stopDatabase(table_id, Date.now());
}
toggleElement.on('click', function () {
(cooking) ? reset() : run();
});
if (cooking) {
let timeElapsed = new Date(startTime).getTime();
run(timeElapsed);
}
});
function stopDatabase(table_id, stop_time) {
haveClicked = true;
$.ajax(
{
url: './mod/send-table.php',
data: {
stop: true,
table_id,
stop_time: formatTime(stop_time)
},
type: 'POST',
cache: false,
async: true,
timeout: 8000,
headers: {
"cache-control": "no-cache"
}
}
);
}
function startDatabase(table_id, start_time) {
haveClicked = true;
$.ajax(
{
url: './mod/send-table.php',
data: {
start: true,
table_id,
start_time: formatTime(start_time)
},
type: 'POST',
cache: false,
async: true,
timeout: 8000,
headers: {
"cache-control": "no-cache"
}
}
);
}
function formatTime(timestamp) {
var date = new Date(timestamp);
// return `${date.getFullYear()}-${prependZero((date.getMonth() + 1), 2)}-${prependZero(date.getDate(), 2)} ${prependZero(date.getHours(), 2)}:${prependZero(date.getMinutes(), 2)}:${prependZero(date.getSeconds(), 2)}`;
return date.getFullYear() + '-' + prependZero((date.getMonth() + 1), 2) + '-' + prependZero(date.getDate(), 2) + ' ' + prependZero(date.getHours(), 2) + ':' + prependZero(date.getMinutes(), 2) + ':' + prependZero(date.getSeconds(), 2);
}
});
What is has to do is that when the tables (timer board) is reloaded, the time should auto start on iPad, and not show 00:00:00 as it does now
I found the soluition myself yesterday in the evening This is what it looked like before
if (cooking) {
let timeElapsed = new Date("2019-11-07 10:02:15").getTime();
run(timeElapsed);
}
But I found out that an iPad (or maybe IOS in general) doesn't know how to handle that datetime format with the new Date([DATETIME]). So I had to change the '-' with an '/'.
So now it looks like this:
if (cooking) {
let timeElapsed = new Date("2019-11-07 10:02:15".replace(/-/g, '/')).getTime();
run(timeElapsed);
}
This is the soluition