web/public/obj/js/issues.js

const issuesDiv = document.querySelector("#issues");
const issuesHolderDiv = document.querySelector("#issues-holder");
issuesHolderDiv.innerHTML = "<p><b>Loading items...</b></p>"

async function getStatus(issueIndex) {
    let response = await fetch(`/relay/hub_issue_timeline/${issueIndex}`);
    let json = await response.json();
    let status = "pending";
    let time_trackers = -1;
    json.forEach((entry) => {
        switch (entry.type) {
            case 'start_tracking':
                if (time_trackers === -1) time_trackers = 0;
                time_trackers++;
                break;
            case 'stop_tracking':
                time_trackers--;
                break;
        }
    });

    if (time_trackers > 0) {
        status = "in progress"
    } else if (time_trackers === -1) {
        status = "not started work"
    } else {
        status = "work is suspended"
    }

    return status;
}

async function updateIssues() {
    let fetchResult = await (await fetch('/relay/hub_issues')).json()
    if (fetchResult.length > 0) {
        issuesDiv.removeAttribute("hidden");

        let issueElems = [];
        for (const issue of fetchResult) {
            let issueDiv = document.createElement("div");
            issueDiv.classList.add("issue");
            let detailsDiv = document.createElement("div");
            detailsDiv.classList.add("issue-details");
            issueDiv.append(detailsDiv);

            let titleSpan = document.createElement("a");
            titleSpan.href = issue.html_url;
            titleSpan.classList.add("issue-title");
            detailsDiv.append(titleSpan);
            titleSpan.innerText = issue.title;


            let descriptionSpan = document.createElement("span");
            descriptionSpan.classList.add("issue-description");
            detailsDiv.append(descriptionSpan);
            let desc = () => {
                let body = issue.body.replaceAll("\r", "").replaceAll("\n", "  ");
                if (body.length > 100) {
                    return body.slice(0, 100) + "..."
                } else {
                    return body
                }
            };
            descriptionSpan.innerText = desc();

            let dataDiv = document.createElement("div");
            dataDiv.classList.add("issue-data");
            issueDiv.append(dataDiv);

            let statusSpan = document.createElement("span");
            statusSpan.classList.add("issue-status");
            dataDiv.append(statusSpan);
            statusSpan.innerText = await getStatus(issue.number);
            switch (issue.state) {
                case 'open':
                    statusSpan.style.color = "#ff8f8f";
                    break
                case 'closed':
                    statusSpan.style.color = "#8fff91";
                    break
            }

            let timeSpan = document.createElement("span");
            statusSpan.classList.add("issue-time");
            dataDiv.append(timeSpan);
            timeSpan.innerText = issue.updated_at;

            issueElems.push(issueDiv);
        }

        issuesHolderDiv.innerHTML = '';
        issueElems.forEach((i) => issuesHolderDiv.append(i))
    } else issuesDiv.setAttribute("hidden", "true");
}

window.updateLoop.push(updateIssues);