javascript – Color status for inventories, PHP and JS

An inventory system is under development. After registration, it appears in a table. In the registration form, you must specify amount, reorder_level (minimum amount), `target_Stock (maximum amount). By some methods, the quantity may increase or decrease.

The user can unsubscribe or save any item when he wishes.

What I need from you is that, depending on the current amount, the change status, that is,

0 = the article is inactive, draw a gray dot.

1 = the article is active, its quantity is stable,
draw a green dot.

2 = the article is about to finish, draw a yellow dot.

3 = the item is below its minimum, draw a red dot.

By means of an api, I make the changes.

                                else if (isset ($ _ POST['id']) && isset ($ _ POST)['x']))
{

$ connection = new MySqlServerConnection ();

$ query1 = SELECT quantity-2, reorder_Level FROMventary_list WHERE id =? ;;
$ result1 = $ connection-> executeQuery ($ query1, array ($ _ POST['id']));
echo $ result1[0][0];
echo $ result1[0][1];

if (intval ($ result1[0][0]) = intval ($ result1[0][1]))
{
$ query = UPDATE inventory_list SET status = 2 WHERE id =? ;;
$ result = $ connection-> executeNonQueryWithReturn ($ query, array ($ _ POST['id']));
}
if not
{
$ query = UPDATE Supplies SET status = 1 WHERE id =? & # 39 ;;
$ result = $ connection-> executeNonQueryWithReturn ($ query, array ($ _ POST['id']));
}
if ($ result == 1)
{
echo json_encode (array (
& # 39; status & # 39; => & # 39; 0 & # 39;
& # 39; errorMessage & # 39; => & # 39; change status of article & # 39;
));
}
if not
{
echo json_encode (array (
& # 39; status & # 39; => & # 39; 2 & # 39;
& # 39; errorMessage & # 39; => & # 39; article does not change the status & # 39;
));
}
}

else if (isset ($ _ POST['id']))
{

$ connection = new MySqlServerConnection ();
$ query1 = 'SELECT quantity', reorder_Level FROM Inventorylist WHERE id =? ';;
$ result1 = $ connection-> executeQuery ($ query1, array ($ _ POST['id']));

if (intval ($ result1[0][0]) <+ intval($result1[0][1]))
    	{
          $query = 'UPDATE inventory_list SET status = 3 WHERE  id = ?';
          $result = $connection >executeNonQuery ($ query, array ($ _ POST['id']));
}
if not
{
$ query = UPDATE inventory_list SET status = 0 WHERE id =? ;;
$ result = $ connection-> executeNonQuery ($ query, array ($ _ POST['id']));
}

if ($ result == 0)
{
echo json_encode (array (
& # 39; status & # 39; => & # 39; 0 & # 39;
& # 39; errorMessage & # 39; => & # 39; change status of article & # 39;
));
}
if not
{
echo json_encode (array (
& # 39; status & # 39; => & # 39; 2 & # 39;
& # 39; errorMessage & # 39; => & # 39; article does not change the status & # 39;
));
}

}

Each queries I always compare amountand reorder_level(minimum amount), in the first try to subtract 2 at my current amount.

Example if I have 2 as reorder_leveland in my current amount I've 4but subtracting 2 from the beginning this gives a result of 2, means that these are the same as the condition says and I have 2 difference and it is about to end, so that it will change to status 2 and draw in yellow dot.

If this is not the case, it means that your amount is stable, so draw the green dot.

In the following query, it says that if my amount is less than or equal to reorder_level, means that it's below its minimum, so it should go to status 3 and draw the red dot.

If it's not like that, then this one has come out on its own, so that's it status 0 and draw the gray dot.

That's the code js that I use to put in the row of status the colored dots.

fa fa-circle text-navy – green dot.

fa fa-circle text-warning-yellow point.

fa fa-circle text-danger – red dot.

dot fa-circle fa – gray dot.

if (articles[i].status == 1) {

// if active, the green circle is drawn on the table
var status = document.createElement (& # 39; i & # 39;);
status.setAttribute ("class", "fa fa-circle text-navy");
status.setAttribute ("data toggle", "tooltip");
status.setAttribute ("data-placement", "top");
status.setAttribute ("data-html", "true");
status.setAttribute ("title", "Active Element.");
CellStatus.appendChild (status);
}


otherwise (articles[i].status == 2)
{

// if active, the yellow circle is drawn on the table
var status = document.createElement (& # 39; i & # 39;);
status.setAttribute ("class", "fa-circle fa text warning");


status.setAttribute ("data toggle", "tooltip");
status.setAttribute ("data-placement", "top");
status.setAttribute ("data-html", "true");
status.setAttribute ("title", "It is about to end.");

CellStatus.appendChild (status);
}
otherwise (articles[i].status == 3)
{

// if active, the red circle is drawn on the table
var status = document.createElement (& # 39; i & # 39;);
status.setAttribute ("class", "fa fa-circle text-danger");
status.setAttribute ("data toggle", "tooltip");
status.setAttribute ("data-placement", "top");
status.setAttribute ("data-html", "true");
status.setAttribute ("title", "amount in 0.");
CellStatus.appendChild (status);

}

if not
{
// if active, the gray circle is drawn on the table
var status = document.createElement (& # 39; i & # 39;);
// draw the red circle of the inactive
status.setAttribute ("class", "fa-circle fa");
status.setAttribute ("data toggle", "tooltip");
status.setAttribute ("data-placement", "top");
status.setAttribute ("data-html", "true");
status.setAttribute ("title", "Inactive element.");
CellStatus.appendChild (status);
}


var CellActions = document.createElement (& # 39; td & # 39;);
CellActions.style.textAlign = "center";
var edit = document.createElement (& # 39; button);
var editImg = document.createElement (& # 39; img & # 39;);


/ * Create the entire edit cell * /
var editImg = document.createElement (& # 39; i & # 39;);
editImg.setAttribute ("class", "fa fa-pencil");
editImg.style.color = "# 000000";
edit.appendChild (editImg);
edit.className = & btn btn-w-m btn-warning & # 39 ;;
edit.style.minWidth = & # 39; 0px & # 39;
edit.setAttribute ("onclick", "editModal (& # 39;" + articles[i].cat_name + "& # 39;" +
articles[i].idSub + "& # 39;" +
articles[i].numFile + "& # 39;" + articles[i].description_item + "& # 39;" +
articles[i].price_item + "& # 39;," + articles[i].manufacturer + "& # 39;" +
articles[i].model_item + "& # 39;" + articles[i].reorder_Level + "& # 39;" +
articles[i].target_Stock + "& # 39;" + articles[i].image + "& # 39;" +
articles[i].commentt + "& # 39;" + articles[i].registerDate + "& # 39;" +
articles[i].id_category + "& # 39;" + articles[i].id_supplier + "& # 39;" +
articles[i].id_unit + "& # 39;" + articles[i].id_location + "& # 39;" + articles[i].id_engineer + "& # 39;" + articles[i].idSub "",) ");
edit.setAttribute ("data-toggle", "tooltip");
edit.setAttribute ("data-placement", "top");
edit.setAttribute ("data-html", "true");
edit.setAttribute ("title", "Click to edit the registration information for this item.");
CellActions.appendChild (edit);


// register
if (articles[i].status == 1) {
var remove = document.createElement (& # 39; button);
var removeImg = document.createElement (& # 39; i);
removeImg.setAttribute ("class", "fa fa-arrow-up");
removeImg.style.color = "# 000000";
remove.appendChild (removeImg);
remove.className = "btn btn -w-m btn-primary";
remove.style.minWidth = & # 39; 0px & # 39;
remove.style.marginLeft = "20px";
remove.setAttribute ("onclick", "changeStatusx2 (& # 39;" +
articles[i].numFile + "& # 39;" + articles[i].description_item + "& # 39;)");
// show the message above the button
remove.setAttribute ("data-toggle", "tooltip");
remove.setAttribute ("data-placement", "top");
remove.setAttribute ("data-html", "true");
remove.setAttribute ("title", "This item is active, click to change status");
CellActions.appendChild (remove)
}
if not {
/ * Unsubscribe * /
var remove = document.createElement (& # 39; button);
var removeImg = document.createElement (& # 39; i);
removeImg.setAttribute ("class", "fa fa-arrow-down");
removeImg.style.color = "# 000000";
remove.appendChild (removeImg);
remove.className = "btn btn -w -m btn-dot";
remove.style.minWidth = & # 39; 0px & # 39;
remove.style.marginLeft = "20px";
remove.setAttribute ("onclick", "changeStatus (& # 39;" +
articles[i].numFile + "& # 39;" + articles[i].description_item + "& # 39;)");
// show the message above the button
remove.setAttribute ("data-toggle", "tooltip");
remove.setAttribute ("data-placement", "top");
remove.setAttribute ("data-html", "true");
remove.setAttribute ("title", "This item is inactive, click to change status");
CellActions.appendChild (remove)
}

Depending on what the API gets, it will change the status and color of the point in the array, but as I said, the user can unsubscribe or add an item when he or she wish. I repeat the condition of status == 1but with others, this should change, if it is active.

The problem I have is that the colors red and yellow are agitated, they are not indicated when they are due. For other green and gray, there is no problem, it is successful.

I've done my api so, I do not know if it's okay, if I'm sure it's in the js where the points are drawn, it's wrong, but I do not know how to match them when they should.

Someone who can tell me how to do it?