Base Checkin Advanced Color

base_color.user.js

// ==UserScript==
// @name         Base Checkin Advanced Color
// @namespace    base
// @version      0.6
// @description  Color base on checkin time
// @author       Jonny
// @match        https://checkin.base.vn/me*
// @icon         https://static-gcdn.basecdn.net/checkin/image/fav.png
// @grant        none
// ==/UserScript==

(function() {
    const INTERVAL_TIME = 500;
    const THRESHOLD = 540;

    function addMenuItem() {
        if ($('#checkstatus').length) return;

        const checkButton = $("<div>", {
            html: "Kiểm tra Timesheet",
            id: "checkstatus",
            class: "cta",
            click: checkCheckinStatus
        });

        $('.side').eq(2).append(checkButton);
        $('.msg-channel').addClass('collapsed');
        checkCheckinStatus();
    }

    function timeToMinutes(time) {
        const [hours, minutes] = time.split(':').map(Number);
        return (hours * 60) + minutes;
    }

    function compareTime(time1, time2) {
        return timeToMinutes(time1) - timeToMinutes(time2);
    }

    function calcTime(timeIn, timeOut) {
        return timeToMinutes(timeOut) - timeToMinutes(timeIn);
    }

    function checkCheckinStatus() {
        $('.inner[class*="js-ts-"]').each(function() {
            const $this = $(this);
            const checkinInfo = $this.find('.checkin-info').first();

            if (checkinInfo.length) {
                const times = checkinInfo.children().first().text().match(/(\d{2}:\d{2})/g);
                console.log(times);
                if(times) {
                    const [timeIn = '00:00', timeOut = '00:00'] = times;

                    if (times.length) {
                        const timeTotal = calcTime(timeIn, timeOut);

                        if (timeTotal < THRESHOLD) {
                            $this.css('backgroundColor', '#FFDAB9');
                        }

                        $this.find('.from').css('color', compareTime(timeIn, '8:59') < 0 ? 'green' : 'red');
                        $this.find('.to').css('color', compareTime(timeOut, '16:59') > 0 ? 'green' : 'red');
                    }
                }
            }
        });
    }

    setInterval(addMenuItem, INTERVAL_TIME);
})();