givin.school/timer.js

function fancyTimeFormat(duration) {
    const hrs = ~~(duration / 3600);
    const mins = ~~((duration % 3600) / 60);
    const secs = ~~duration % 60;

    // Output like "1:01" or "4:03:59" or "123:03:59"
    let ret = "";

    if (hrs > 0) {
        ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
    }

    ret += "" + mins + ":" + (secs < 10 ? "0" : "");
    ret += "" + secs;

    return ret;
}

function playDing() {
    const ding_sound = new Audio('ding-sound-effect_2.mp3');
    ding_sound.play();
}

function startTimerOnElement() {
    let currElement = $('#task_list > .current_element').first();
    if (!currElement.length) {
        $('#timer_reset_btn').prop('disabled', true);
        $('#timer_next_btn').prop('disabled', true);
        $('#timer_start_btn').prop('disabled', false);
        $('#spent_time').text('0:00');
        $('#element_title').text('');
        return;
    }

    let element_ttl = currElement.data('ttl');
    let timer = element_ttl;

    $('#spent_time').text(fancyTimeFormat(element_ttl - timer));
    $('#rest_time').text(fancyTimeFormat(timer));

    let title = currElement.html();
    if (title) {
        let short_title = '';
        $($.parseHTML(title)).filter('b').each(function () {
            short_title += $(this).text() + ' ';
        });
        $('#element_title').text(short_title);
    }

    timerId = setInterval(function () {
        --timer;

        $('#spent_time').text(fancyTimeFormat(element_ttl - timer));
        $('#rest_time').text(fancyTimeFormat(timer));

        if (!timer) {
            clearInterval(timerId);
            timerId = null;
            //playDing();

            startNextTimer(currElement);
        }
    }, 1000);
}

function startNextTimer(currElement) {
    let nextElement = currElement.parent().children('li.current_element + li');
    if (!nextElement) {
        $('#spent_time').text('0:00');
        $('#rest_time').text('0:00');
        return;
    }

    currElement.removeClass('current_element');
    nextElement.addClass('current_element');

    startTimerOnElement();
}

function calcTotalTimeSeconds() {
    let total_time = 0;

    $('#task_list').children('li').each(function () {
        let ttl = $(this).data('ttl');

        if (!ttl || !parseInt(ttl) || ttl != parseInt(ttl)) {
            alert('Illegal element TTL value "' + ttl + '"!');
            return false;
        }

        total_time += ttl;
    });

    return total_time;
}

let timerId;

$(document).ready(function () {
    $('#total_rest_time').text(fancyTimeFormat(calcTotalTimeSeconds()));

    $('#timer_start_btn').on('click', function () {
        if (timerId) {
            return;
        }

        $(this).prop('disabled', true);
        $('#timer_reset_btn').prop('disabled', false);
        $('#timer_next_btn').prop('disabled', false);
        //playDing();

        if (!$('#task_list > .current_element').length) {
            $('#task_list > li').first().addClass('current_element');
        }

        startTimerOnElement();
    })

    $('#timer_reset_btn').on('click', function () {
        if (!timerId) {
            return;
        }

        clearInterval(timerId);
        timerId = null;

        startTimerOnElement();
    });

    $('#timer_next_btn').on('click', function () {
        if (!timerId) {
            return;
        }

        clearInterval(timerId);
        timerId = null;

        let currElement = $('#task_list > .current_element').first();
        if (!currElement) {
            $('#spent_time').text('0:00');
            $('#rest_time').text('0:00');
            return;
        }

        startNextTimer(currElement);
    });
});