Вызов Ajax не показывает правильное время таймера iPad - PullRequest
Новая
       11

Вызов Ajax не показывает правильное время таймера iPad

1 голос
/ 06 ноября 2019

Я хочу перезагрузить плату таймера, когда она обнаружила обновление от другого браузера с такой же открытой платой таймера. Когда обновление обнаруживается на моем ноутбуке, телефоне или iMac на моей работе, оно работает полностью нормально. Но когда я пробую его на iPad, он не перезагружается правильно.

Изображение 1 Вот как это выглядит на ipad после перезагрузки

Изображение 2 Вот так это выглядит на ноутбуке, ПК, телефоне и т. Д. С перезагрузками

Я пытался удалить '`' И '$ {}', потому что, возможно, это будетпроблема, но нет, это было не так. Я пытался изменить запрос ajax с некоторыми параметрами, но это также не решение

Это запрос ajax для получения всех таблиц (каждая таблица имеет отдельный таймер) 

$.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);
    }
});

Вот как выглядит div таблицы, когда он не активен 

<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>

Так выглядит div таблицы, когда он активен 

<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>

И код, который запускает таймеры

$(".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);
    }
});

Что нужно сделать, так это то, что при перезагрузке таблиц (табло таймера) время должно автоматически запуститься на iPad, а не показывать 00:00:00, как сейчас

1 Ответ

1 голос
/ 07 ноября 2019

Я сам нашел решение вчера вечером. Вот как это выглядело раньше 

if (cooking) {
    let timeElapsed = new Date("2019-11-07 10:02:15").getTime();
    run(timeElapsed);
}

Но я обнаружил, что iPad (или, возможно, IOS в целом) не знает, как с этим справитьсяформат даты и времени с новой датой ([DATETIME]). Поэтому мне пришлось поменять '-' на '/'.

Так что теперь это выглядит так: 

if (cooking) {
    let timeElapsed = new Date("2019-11-07 10:02:15".replace(/-/g, '/')).getTime();
    run(timeElapsed);
}

Это решение

...