code.user.js

// ==UserScript==
// @name         Scheduling Subject Registration
// @namespace    http://tampermonkey.net/
// @version      2024-07-03

// @author       Minh Triet (Alex Ng)
// @match        https://uis.ptithcm.edu.vn/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @require      http://code.jquery.com/jquery-3.6.0.min.js
// @grant        GM_addStyle
// @grant        unsafeWindow
// @run-at       document-start
// @downloadURL  
// @License      MIT


// ==/UserScript==


GM_addStyle(`
 .card-header {
        border-radius: 15px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125) !important;
        padding: 0.75rem 1.25rem !important;
        margin-bottom: 0 !important;
    }

    .container-fluid {
        border-radius: 15px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important;

    }

    .card {
        border: 0px solid rgba(0, 0, 0, 0.125) !important;
        border-radius: 15px !important;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.125) !important;
    }

    .btn-primary {
        border: 0px solid rgba(0, 0, 0, 0.125) !important;
        border-radius: 15px !important;
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.125) !important;
    }


  
    html {
        background: #f2f2f2;
    }
    body {
        background: inherit !important;
        margin: 0;
        font-family: "Inter", sans-serif;
    }

    .banner {
        background-color: #fff !important;
    }

    .banner {
        display: block;
        width: 100% !important;
        height: 728px !important;
        border-bottom-left-radius: 15px !important;
        border-bottom-right-radius: 15px !important;

    }

    .float {
        position: fixed;
        z-index: 1;
        width:60px;
        height:60px;
        bottom:40px;
        right:40px;
        color: #000000;
        background: #FFF;
        border-radius: 50%;
        border: none;
        transition: box-shadow 400ms cubic-bezier(0.2, 0, 0.7, 1), transform 200ms cubic-bezier(0.2, 0, 0.7, 1);
      }
    .float:after {
        font-size: 2.5em;
        line-height: 1.1em;
      }
    .float:hover {
        box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.22) rgba(0, 0, 0, 0.36) rgba(0, 0, 0, 0.3) !important;

        transform: scale(1.05);

    }

    .editTKB {
        background-color:#2fa4e7 !important;

    }

    .editTKB > i {
        color: #fff !important;
    }

    #tkb_div {
        height: auto;
        width: 80% !important;
        margin-left: 10% !important;
        margin-right: 10% !important;
        margin-top: 60px;
        align-items: center;
        justify-content: center;
        background-color: #fefefe;
    }

    .danhsachmonhoc_text {
        text-align: center;
        margin: auto;
    }

    .tkb_preview_table > thead {
        background-color: #2fa4e7;

    }

    .tkb_preview_table > thead > tr > th {
        color: #fff;
        padding: 0.5px;
        text-align: center;
    }

    .cellqh {
        border: 1px solid green;
        max-width: 14px;
        max-height: 6px;
        font-size: 13px;
        position: relative;
        border-bottom: 1px dotted black;
        padding: 2px;
        text-align: center;

    }

    .tooltiptext {
        font-size: 8px;
    }

    .cellqh .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        position: absolute;
        z-index: 1;
        display: block;
        float: left;
      }
      .cellqh:hover .tooltiptext:not(:empty) {
        visibility: visible;
      }

      .cellqh:hover .tooltiptext {
        visibility: visible;
      }

    .starttimerow {
        padding: 1px;
        vertical-align: middle;
        border-top: 0.2px solid #2fa4e7;
        background-color: #2fa4e7;
        color: #fff;
        max-width: 30px;
        max-height: 10px;
        font-size: 8px;
    }

    .chonngaydiv {
        text-align: center;
        margin-bottom: 10px;
        background-color: #fefefe;
        border-collapse: collapse;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.02);
        align-items: center;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;

    }

    .danhsachmonhoc {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
        flex-wrap: wrap;
        background-color: #fefefe;
        border-collapse: collapse;
        flex-direction: column;
    }

    .dropdownlecture {
        text-align: center;
        margin-bottom: 10px;
        margin-top: 30px;
        background-color: #fefefe;
        border-collapse: collapse;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.02);
        background-color: #fefefe;
        margin-left: 30%;
        margin-right: 30%;
        width: 40%;
    }

    input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
        color: #fff;
        position: relative;
    }

      input[type="date"]::-webkit-datetime-edit-year-field {
        position: absolute !important;
        border-left:1px solid #8c8c8c;
        padding: 2px;
        color:#000;
        left: 56px;
      }

      input[type="date"]::-webkit-datetime-edit-month-field {
        position: absolute !important;
        border-left:1px solid #8c8c8c;
        padding: 2px;
        color:#000;
        left: 26px;
      }


    input[type="date"]::-webkit-datetime-edit-day-field {
        position: absolute !important;
        color:#000;
        padding: 2px;
        left: 4px;
    }

    .timetables {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .timetable-container {
            width: calc(100% / 5 - 20px);
            margin: 10px;
        }

        .timetable-container h2 {
            text-align: center;
        }

        .timetable {
            width: 100%;
            border-collapse: collapse;
        }

        .timetable th, .timetable td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        .timetable th {
            background-color: #f2f2f2;
        }

        @media (max-width: 1200px) {
            .timetable-container {
                width: calc(100% / 4 - 20px);
            }
        }

        @media (max-width: 992px) {
            .timetable-container {
                width: calc(100% / 3 - 20px);
            }
        }

        @media (max-width: 768px) {
            .timetable-container {
                width: calc(100% / 2 - 20px);
            }
        }

        @media (max-width: 576px) {
            .timetable-container {
                width: 100%;
            }
        }
    `);



window.onload = function() {
    unsafeWindow.scraptSubjects = scraptSubjects;
    unsafeWindow.drawTable = drawTable;
    unsafeWindow.process = process;


    const floatingButton = document.createElement('button');
    floatingButton.innerHTML = `<button class="float"><i class="fa fa-cogs"></i></button>`;
    floatingButton.onclick = function() {
        var float = $(".float");
        float.addClass("editTKB");

        process()
        ensureDropdownEventListener()
        ensureCheckBoxEventListener()
    }

    document.body.appendChild(floatingButton)
    // we have input's class name, so how to combine with?
}


class Subject {
    constructor(subjectCode, subjectName, groupCode, teamCode, classCode, timeTable) {
        this.subjectCode = subjectCode
        this.subjectName = subjectName
        this.groupCode = groupCode
        this.teamCode = teamCode.trim().length >= 1 ? teamCode : ''
        this.classCode = classCode
        this.timeTable = reformatRoutine(timeTable)
    }
}



const registeredSubjects = new Map();
const subjects = new Map();
const nameStoring = new Map();
const storeCheckedSubjects = new Set();
let dateStart = new Date( '2024-08-12' );

const tables = Array.from({ length: 28 }, () => Array.from({ length: 14 }, () => Array.from({ length: 7 }, () => [])));


function scraptSubjects() {
    let nameStoring = new Map();
    unsafeWindow.subjects = subjects;
    $(".custom-control").attr("style", "display :none !important");
    const tableSubjects = $('tbody')[28]
    const rows = tableSubjects.children

    for (let i = 0; i < rows.length; i++) {
        // enable checked for this input
        const subject = new Subject(
            rows[i].children[1].innerText,
            rows[i].children[2].innerText,
            rows[i].children[3].innerText,
            rows[i].children[4].innerText,
            rows[i].children[6].innerText,
            rows[i].children[9].innerText
        )


        nameStoring.set(rows[i].children[1].innerText, rows[i].children[2].innerText)


        const key = subject.subjectCode + subject.groupCode + subject.teamCode
        subjects.set
        (
            key,
            subject
        ); // key -value

        // modify checkbox
        let form = $(rows[i]).find("form")
        let tag = `<input type='checkbox' class='editCheckBoxInput' value="${key}">`
        form.append(tag)
    }

    subjects.forEach((value, key) => {
        console.log(key, value)
    })

    // add dropdown
    var dropDown = $(".dropdownlecture");
    dropDown.empty();
    dropDown.append('<option value ="all" class ="">All</option>');

    for (let [key, value] of nameStoring) {
        dropDown.append(`<option value ="${key}">${key} ${value}</option>`);
    }

    alert("Đã tải xong dữ liệu môn học");

}



function ensureDropdownEventListener() {
    let inputEle;

    var timer = setInterval(() => {
        if ($('.dropdownlecture').length == 0) {
            return;
        }
        else {
            $(".dropdownlecture").change(function(event) {


                if (inputEle == undefined) {
                    inputEle = document.getElementsByClassName("form-control form-control-sm small text-secondary ng-untouched ng-pristine ng-valid")[0]
                }
                if (event.target.value == "all") {
                    inputEle.value = "";
                }
                else {
                    inputEle.value = event.target.value
                }
                const inputEvent = new Event('input', {
                    bubbles: true,
                    cancelable: true,
                });
                inputEle.dispatchEvent(inputEvent);

                reinitializeCheckboxInput()

            })
            clearInterval(timer);
        }
    }, 200)
    }

function ensureCheckBoxEventListener() {
    var time = setInterval(() => {
        if ($('.editCheckBoxInput').length == 0) {
            return;
        }
        else {
            $(".editCheckBoxInput").change(function(event) {
                const key = event.target.value
                console.log(key);
                const subject = subjects.get(key)

                if (event.target.checked) {
                    if (registeredSubjects.has(subject.subjectCode)) {
                        alert("Môn học đã được đăng ký");
                        $(event.target).prop('checked', false);
                    }
                    else {
                        console.log(subject)
                        addSubjectToTable(subject);

                        registeredSubjects.set(subject.subjectCode, subject);
                        storeCheckedSubjects.add(key);
                        $(".danhsachmonhoc").empty();

                        for (let [key, value] of registeredSubjects) {
                            $(".danhsachmonhoc").append(`<div class="${value.subjectCode}">${value.subjectCode} | ${value.subjectName} | ${value.classCode}</div>`);
                        }



                    }
                }
                else {
                    registeredSubjects.delete(subject.subjectCode);
                    storeCheckedSubjects.delete(key);
                    removeSubjectFromTable(subject);

                    $(".danhsachmonhoc").empty();

                    for (let [key, value] of registeredSubjects) {
                        $(".danhsachmonhoc").append(`<div class="${value.subjectCode}">${value.subjectCode} | ${value.subjectName} | ${value.classCode}</div>`);
                    }
                }
            })

            clearInterval(time);
        }
    }, 200)
    }




function addSubjectToTable(subject) {
    // add to table times
    subject.timeTable.forEach((item) => {
        console.log(item);
        let distanceStart = caculateDistanceTwoDays(item.start, dateStart);
        let distanceEnd = caculateDistanceTwoDays(item.end, dateStart);
        let day = item.day;

        let start = Math.floor(distanceStart / 7);
        let end = Math.floor(distanceEnd / 7);

        console.log(start, end);

        while (start <= end) {
            for (let i = item.time[0] - 1; i <= item.time[1] - 1; i++) {
                tables[start][i][day - 2].push({
                    subjectCode: subject.subjectCode,
                    subjectName: subject.subjectName,
                    classCode: subject.classCode
                });
                // console.log(`start: ${start} i: ${i} day: ${day} subject: ${subject.subjectCode}  tables: ${tables[start][i][day]}`)
            }
            start++;
        }
    })
    updateTable(tables)
}


function removeSubjectFromTable(subject) {
    // remove from table times

    subject.timeTable.forEach((item) => {
        let distanceStart = caculateDistanceTwoDays(item.start, dateStart);
        let distanceEnd = caculateDistanceTwoDays(item.end, dateStart);
        let day = item.day;

        let start = Math.floor(distanceStart / 7);
        let end = Math.floor(distanceEnd / 7);


        while (start <= end) {
            for (let i = item.time[0] - 1; i <= item.time[1] - 1; i++) {
                let index = tables[start][i][day - 2].findIndex((item) => item.subjectCode == subject.subjectCode)
                tables[start][i][day - 2].splice(index, 1);
            }
            start++;
        }

    })
    updateTable(tables)

}
function updateTable(tables) {
    const states = {
        available: {
            color: "white",
            icon: "+",
            colorText: "black"
        },

        full: {
            // don't have any subject
            color: 'green',
            icon: "o",
            colorText: "white"
        },

        // have one subject
        // have more than one subject
        over: {
            color: 'red',
            icon: "x",
            colorText: "white"
        }
    }

    for (let i = 0; i < 28; i++) {
        for (let r = 0; r < 14; r++) {
            for (let c = 0; c < 7; c++) {
                let id = "tkb" + i + r + c;
                let cell = $(`#${id}`);

                let state = states.available;
                if (tables[i][r][c].length == 1) {
                    state = states.full;
                }
                else if (tables[i][r][c].length > 1) {
                    state = states.over;
                }

                let hoverText = tables[i][r][c].map((item) => {
                    return `${item.subjectCode} - ${item.subjectName} - ${item.classCode}`
                }).join("\n")
                cell.css('background-color', state.color);
                cell.css('color', state.colorText);
                cell.text(state.icon);
                cell.attr('title', hoverText );

                // hover event for cell
            }
        }

    }
}






function reformatRoutine(str) {
    try {
        if (str.trim() == "")
            return [];

        str = str.toLowerCase();

        const dayInWeek = new Map([
            ["thứ 2", 2],
            ["thứ 3", 3],
            ["thứ 4", 4],
            ["thứ 5", 5],
            ["thứ 6", 6],
            ["thứ 7", 7],
            ["chủ nhật", 8]
        ]);


        return str.split("\n").map((item) => {
            if (item.indexOf("đến") == -1) {
                let [day, time, date] = item.split(",");
                let [startDay, startMonth, startYear] = date.split("/");
                let [start, end] = time.replace("tiết", "").trim().split("->").map((item) => parseInt(item));
                startYear = startYear.replace(/\D/g, "");

                return {
                    day: dayInWeek.get(day),
                    time: [start, end],
                    start: new Date(`20${startYear.trim()}-${startMonth.trim()}-${startDay.trim()}`),
                    end: new Date(`20${startYear.trim()}-${startMonth.trim()}-${startDay.trim()}`)
                };
            }

            let [day, time, date] = item.split(",");
            let [start, end] = date.split("đến");
            let [startDay, startMonth, startYear] = start.split("/");
            let [endDay, endMonth, endYear] = end.split("/");
            endYear = endYear.replace(/\D/g, "");

            time = time.replace("tiết", "").trim().split("->").map((item) => parseInt(item));

            return {
                day: dayInWeek.get(day),
                time: time,
                start: new Date(`20${startYear.trim()}-${startMonth.trim()}-${startDay.trim()}`),
                end: new Date(`20${endYear.trim()}-${endMonth.trim()}-${endDay.trim()}`)
            };


        });

    } catch (e) {
        console.log(e);
        return [];
    }
}




function drawTable() {
    let rows = 14; // Number of rows representing the periods
    let cols = 7; // Number of columns representing the days
    let tables = [];

    // Creating the main div container for the timetable
    let tkb_div = $("<div id='tkb_div' class='flex flex-wrap justify-center flex-row items-center'></div>");


    // draw tables that have 20 tables 1 table represent 1 week, and 1 day have 14 rows

    for (let i = 0; i < 28; i++) {
        let table_id = "tkbPreview" + i + 1;
        tables[i] = $('<table style="text-align:center;border-collapse: collapse;" class="tkb_preview_table" id="' + table_id + '"><thead> <th></th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th></th></thead><tbody>');

        for (let r = 0; r < rows; r++) {
            let start_time_in_hr = r +1;
            let tkb_separator = r % 2 ? 'border-bottom:2px solid #2fa4e7;' : '';
            let tr = $('<tr style="height:1px;' + tkb_separator + '"><td class="starttimerow">' + start_time_in_hr + '</td>');

            for (let c = 0; c < cols; c++) {
                let id = "tkb" + i + r + c;
                $('<td class="cellqh" id="' + (id) + '">+</td>').appendTo(tr); 
            }



            tr.appendTo(tables[i]);
        }

        $('</tbody></table>').appendTo(tables[i]);
        tkb_div.append(tables[i]);



    }
    tkb_div.attr("style", "display:flex; flex-wrap: wrap; padding: 10px; justify-content: center; align-items: center;")
    // Adding date picker and dropdown for lectures
    let date_pickerSection = $("<div id= 'datepickersection'></div>");
    date_pickerSection.append('<div class="chonngaydiv"><label for="datetimepicker">Chọn ngày bắt đầu tuần đầu tiên (Xem trong TKB tuần)</label><input class="inputdate" id="datetimepicker" type="date" value="2024-08-12"></input><br></div>');
    date_pickerSection.append('<select class="dropdownlecture"><option value="" class="label_dropdownlecture">Chọn môn</option></select>');
    date_pickerSection.append('<div class="danhsachmonhoc_text"><strong>Các môn đã đăng ký</strong></div>');
    date_pickerSection.append('<div class="danhsachmonhoc"></div>');



    // Adding the timetable to the page
    $("div.card-body.p-0 div.row.d-flex.justify-content-center.text-nowrap.pt-1").prepend(date_pickerSection);
    $("div.card-body.p-0 div.row.d-flex.justify-content-center.text-nowrap.pt-1").prepend(tkb_div);

    let introduce = $("<div class='introduce'></div>")

    introduce.append("<h3>Made by Minh Triet(Alex Ng)</h3>")
    introduce.append("<h3>Tool hỗ trợ sắp xếp thời gian biểu PTITHCM</h3>")
    introduce.append("<h3>1. Chọn thời gian bắt đầu của kì học mới</h3>")
    introduce.append("<h3>2. Chọn môn học muốn đăng ký</h3>")
    introduce.append("<h3>Note: Ô màu trắng thì chưa có môn nào chiếm chỗ</h3>")
    introduce.append("<h3>Ô màu xanh thì đang có 1 môn, Ô màu đỏ là ô không hợp lệ(chứa 2 môn)</h3>")
    introduce.append("<h3>Không chịu trách nhiệm dưới bất kì hình thức nào</h3>")
    introduce.append("<h3>Mình mong sẽ nhận được feedbacks từ các bạn, facebook: https://fb.com/triet.nguyen.39904181 </h3>")
    introduce.attr("style", "display:flex; ; padding: 10px; justify-content: center; align-items: center; flex-direction: column")



    $("div.card-body.p-0 div.row.d-flex.justify-content-center.text-nowrap.pt-1").prepend(introduce);



}





function process() {
    if ($("#tkb_div").length == 0) {
        drawTable();
    }

    if (subjects.size == 0) {
        scraptSubjects();
    }

}





function reinitializeCheckboxInput() {
    // wait for the input to be loaded

    var timer = setInterval(() => {
        if ($('.editCheckBoxInput').length == 0) {
            return;
        }

        else {
            const tableSubjects = $('tbody')[28]
            const rows = tableSubjects.children
            // delete all checkbox
            // delete all checkbox, consist old or new
            //
            for (let i = 0; i < rows.length; i++) {
                let form = $(rows[i]).find("form")
                // replace this input with new input
                let key = rows[i].children[1].innerText + rows[i].children[3].innerText + rows[i].children[4].innerText;

                let currTag = $(form).find("input");

                currTag.attr("value", key);
                if (storeCheckedSubjects.has(key)) {
                    currTag.prop('checked', true);
                }
                else {
                    currTag.prop('checked', false);
                }
            }
            clearInterval(timer);
        }
    }, 200)
    }





function caculateDistanceTwoDays(day1, day2) {
    const parsedDate1 = new Date(day1);
    const parsedDate2 = new Date(day2);

    // Calculate the difference in milliseconds
    const differenceInMilliseconds = parsedDate2 - parsedDate1;

    // Convert milliseconds to days
    const millisecondsInOneDay = 1000 * 60 * 60 * 24;
    const differenceInDays = differenceInMilliseconds / millisecondsInOneDay;

    return Math.abs(differenceInDays);
}



// listener for choosing date in date tag
$(document).ready(function() {
    $(document).on('change', '.inputdate', function(event) {
        dateStart = new Date(event.target.value);

    })
})