Modify Plugin to meet our needs

App Development Data Builder
1

Let me begin by saying coding is not my strength.
I applied the following plugin to a table component.

/* START OF PLUGIN CODE FOR Dynamic Stopwatch for Table Rows */
TB.render(‘component_3’, function (data) {
if (!data.ele || typeof data.ele.find !== “function”) return;

function formatElapsedTime(hours, minutes, seconds) {
    let parts = [];
    if (hours > 0) parts.push(`${hours} hours`);
    if (minutes > 0) parts.push(`${minutes} minutes`);
    if (seconds > 0 || parts.length === 0) parts.push(`${seconds} seconds`);
    return parts.join(" "); 
}

function updateStopwatch() {
    let rows = data.ele.find("table tbody tr");
    let now = new Date();

    rows.each(function () {
        let row = $(this);
        let dateTimeCell = row.find(".component_3_field_134");
        if (!dateTimeCell.length) return;

        let startTime = new Date(dateTimeCell.attr("data-original-time")); 
        if (isNaN(startTime)) return;

        let elapsedMs = now - startTime;
        let elapsedSeconds = Math.floor(elapsedMs / 1000);
        let elapsedMinutes = Math.floor(elapsedSeconds / 60);
        let elapsedHours = Math.floor(elapsedMinutes / 60);

        elapsedMinutes %= 60;
        elapsedSeconds %= 60;

        let formattedTime = formatElapsedTime(elapsedHours, elapsedMinutes, elapsedSeconds);

        let totalMinutes = elapsedHours * 60 + elapsedMinutes;
        if (totalMinutes >= 45) {
            dateTimeCell.css("color", "#ff4d4d"); // Red
        } else if (totalMinutes >= 30) {
            dateTimeCell.css("color", "#ffc107"); // Yellow
        } else {
            dateTimeCell.css("color", "#28a745"); // Green
        }

        dateTimeCell.text(formattedTime);
    });
}

function storeOriginalTimestamps() {
    let rows = data.ele.find("table tbody tr");
    rows.each(function () {
        let row = $(this);
        let dateTimeCell = row.find(".component_3_field_134");
        if (!dateTimeCell.length) return;

        let originalTime = new Date(dateTimeCell.text().trim());
        if (!isNaN(originalTime)) {
            dateTimeCell.attr("data-original-time", originalTime.toISOString());
        }
    });
}

setTimeout(function () {
    storeOriginalTimestamps();
    setInterval(updateStopwatch);
});

});
/* END OF PLUGIN CODE FOR Dynamic Stopwatch for Table Rows */

Things I would like to modify and add.

  1. Intead of just changing the field text color, I would like to change the entire row.
  2. When another field is not blank, I like to hide column that has the stop watch if possible or atleast hide the text of the stop watch field.
    Any help is greatly appreciated
3

@remedina18
I think your answer is in today’s Tadabase update.