Coloring a line based on conditions

Questions related to customising nuBuilder Forte with Javascript or PHP.

Coloring a line based on conditions

Postby marcvander » Wed Feb 06, 2019 2:18 am

Hey there,

I have managed, thanks to help here on the forum, to change the color of a line in a browse form based on conditions. Here is the code:

Code: Select all
if (nuFormType() == 'browse') {

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();

if(dd<10) {
    dd = '0'+dd
}

if(mm<10) {
    mm = '0'+mm
}

today = yyyy + '-' + mm + '-' + dd;

    $('[data-nu-column="0"]').each(function (index) {

        var cellId = $(this).attr('id');
        var cellValue = $('#' + cellId).html();
        var rowNum = String(cellId).split('_')[1];

        if ((cellValue < today) {
            $("div[id^='nucell_" + rowNum + "']").css("color", "red");
        }
        if (cellValue == today) {
            $("div[id^='nucell_" + rowNum + "']").css("color", "green");
        }
    });
}


The interesting part of the code is the 2nd part, after the value of "today" is gotten.

The results:

Capture d’écran 2019-02-05 à 17.39.50.png
Capture d’écran 2019-02-05 à 17.39.50.png (25.94 KiB) Viewed 143 times


Now I'm trying to add a 2nd condition: whether or not the values of another column are equal to 0 or 1 (in my case the column is the 2nd one from left).

My new code (without the 1st part that is not interesting here):

Code: Select all
$('[data-nu-column="0"]').each(function (index) {

        var important = $('[data-nu-column="1"]').html();
        var cellId = $(this).attr('id');
        var cellValue = $('#' + cellId).html();
        var rowNum = String(cellId).split('_')[1];

        if ((cellValue < today) && (important === 1)) {
            $("div[id^='nucell_" + rowNum + "']").css("color", "red");
        }
        if ((cellValue < today) && (important === 0)) {
            $("div[id^='nucell_" + rowNum + "']").css("color", "orange");
        }
        if (cellValue == today) {
            $("div[id^='nucell_" + rowNum + "']").css("color", "green");
        }
    });


But my lines are not colored in red anymore, nor in orange. I have no error in console. I'm sure it is due to how I get the value "important". Any idea on how to do it?

Thanks

Marc
Config:
nuBuilder v4 on a dedicated LAMP server:
-Ubuntu 14.04.5 LTS
-Apache 2.4.7
-MySQL 14.14 Distrib 5.7.22
-PHP 5.5.9-1ubuntu4.23
marcvander
 
Posts: 101
Joined: Tue Mar 27, 2018 1:27 am

Re: Coloring a line based on conditions

Postby kev1n » Wed Feb 06, 2019 5:52 am

Hi,

Try this:

Code: Select all
function getDateToday() {
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth() + 1; //January is 0!
    var yyyy = today.getFullYear();
    if(dd < 10) {
        dd = '0' + dd
    }
    if(mm < 10) {
        mm = '0' + mm
    }
    return new Date(yyyy + '-' + mm + '-' + dd);
}

var colDate      = 0; // column with date (1st column)
var colImportant = 1; // column important (2nd column)

var today = getDateToday();

$('[data-nu-column="'+colDate+'"]').each(function (index) {
 
    var idDate = $(this).attr('id'); // id of column date
    var idImportant = idDate.substring(0, idDate.lastIndexOf('_') + 1) + colImportant;
    var important = $('#' + idImportant).html(); // value of column important
    var date = new Date($('#' + idDate).html()); // date value of column date
 
    var color = 'black'; // default color
    if(date < today && important == '1') {
        color = 'red';
    } else
    if(date < today && important == '0') {
        color = 'orange';
    } else
    if(date == today) {
        color = 'green';
    }
    // color the entire row
    $("div[id^='nucell_" + index + "']").css("color", color);
 
});
kev1n
 
Posts: 125
Joined: Mon Oct 15, 2018 2:13 am

Re: Coloring a line based on conditions

Postby marcvander » Thu Feb 07, 2019 4:16 am

Hey Kevin,

thanks for your reply. I tried your code, and it colors in red or orange. But the rows matching today's date are not colored in green anymore. I don't have any error in console.

See for instance the result:

Capture d’écran 2019-02-06 à 19.43.23.png
Capture d’écran 2019-02-06 à 19.43.23.png (28.9 KiB) Viewed 127 times
Config:
nuBuilder v4 on a dedicated LAMP server:
-Ubuntu 14.04.5 LTS
-Apache 2.4.7
-MySQL 14.14 Distrib 5.7.22
-PHP 5.5.9-1ubuntu4.23
marcvander
 
Posts: 101
Joined: Tue Mar 27, 2018 1:27 am

Re: Coloring a line based on conditions

Postby kev1n » Thu Feb 07, 2019 5:54 am

OK. New attempt:
Code: Select all
var colDate      = 0; // column with date (1st column)
var colImportant = 1; // column important (2nd column)

var today = (new Date()).toISOString().split('T')[0];
$('[data-nu-column="'+colDate+'"]').each(function (index) {
 
    var idDate = $(this).attr('id'); // id of column date
    var idImportant = idDate.substring(0, idDate.lastIndexOf('_') + 1) + colImportant;
    var important = $('#' + idImportant).html(); // value of column important
   
    var date = $('#' + idDate).html(); // date value of column date 
    var color = 'black'; // default color
    if(date < today && important == '1') {
        color = 'red';
    } else
    if(date < today && important == '0') {
        color = 'orange';
    } else
    if(date == today) {
        color = 'green';
    }
   
    // color the entire row
    $("div[id^='nucell_" + index + "']").css("color", color);
 
});
kev1n
 
Posts: 125
Joined: Mon Oct 15, 2018 2:13 am

Re: Coloring a line based on conditions

Postby marcvander » Thu Feb 07, 2019 6:48 am

This time it worked :)

Thanks a lot Kevin !
Config:
nuBuilder v4 on a dedicated LAMP server:
-Ubuntu 14.04.5 LTS
-Apache 2.4.7
-MySQL 14.14 Distrib 5.7.22
-PHP 5.5.9-1ubuntu4.23
marcvander
 
Posts: 101
Joined: Tue Mar 27, 2018 1:27 am

Re: Coloring a line based on conditions

Postby kev1n » Sat Feb 09, 2019 1:17 am

marcvander wrote:This time it worked :)

Thanks a lot Kevin !


You're welcome!
kev1n
 
Posts: 125
Joined: Mon Oct 15, 2018 2:13 am


Return to Custom Code



cron