Status of colors for inventories, PHP and JS

Question

Status of colors for inventories, PHP and JS

Navigation

#1 by (1 votes)

0

An inventory system is being developed, where after registration they appear in a table. In the registration form you must specify quantity , reorder_level (cantidad minimima) , 'target_Stock (maximum amount). By certain processes the amount can increase or decrease.

The user can unsubscribe or register any article when he wishes.

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

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

1 = the article is active, in quantity it is stable,   draw green dot.

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

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

By means of an api, I am making the changes.

        else if(isset($_POST['id']) && isset($_POST['x']))
{
        
   $connection = new MySqlServerConnection();
        
    $query1 = 'SELECT quantity-2, reorder_Level FROM inventory_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']));
       }
        else
        {
        $query = 'UPDATE Supplies SET status = 1 WHERE  id = ?';
        $result = $connection->executeNonQueryWithReturn($query,array($_POST['id']));
        }            
                if ($result == 1)
                {
                  echo json_encode(array(
                    'status' => '0',
                    'errorMessage' => 'articulo cambio status'
                  ));
                }
                else
                {
                  echo json_encode(array(
                    'status' => '2',
                    'errorMessage' => 'articulo no cambio status'
                  ));
                }
          }
    
    else if(isset($_POST['id']))
      {
    
    $connection = new MySqlServerConnection();
    $query1 = 'SELECT quantity, reorder_Level FROM inventory_list 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']));
    	}
    	else
    	{
    	$query = 'UPDATE inventory_list SET status = 0 WHERE  id = ?';
    	$result = $connection->executeNonQuery($query,array($_POST['id']));
    			}
    
          if ($result == 0)
          {
            echo json_encode(array(
              'status' => '0',
              'errorMessage' => 'articulo cambio status'
            ));
          }
          else
          {
            echo json_encode(array(
              'status' => '2',
              'errorMessage' => 'articulo no cambio status'
            ));
          }
    
    }

The querys I'm always comparing quantity , and reorder_level (minimum amount), in the first I'm trying to subtract 2 from my current amount.

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

If not, it means that your quantity is stable, so draw the green dot.

The following query is saying that if my quantity is less than or equal to reorder_level , it means that it is below your minimum, so you should change to status 3 and draw the point red.

If this is not the case, then it was written off on its own, so it is status 0 and draw the gray dot.

This is the js code that I use to put the colored points in the status row.

fa fa-circle text-navy - green dot.

fa fa-circle text-warning-yellow point.

fa fa-circle text-danger - red dot.

fa fa-circle dot - gray dot.

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

            //si es activo se dibuja el circulo verde en la tabla
            var status=document.createElement('i');
            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", "Item activo.");
            CellStatus.appendChild(status);
    }


    else if (articulos[i].status == 2)
    {

        //si es activo se dibuja el circulo amarillo en la tabla
            var status = document.createElement('i');
            status.setAttribute("class", "fa fa-circle text-warning"); 


            status.setAttribute("data-toggle", "tooltip");
            status.setAttribute("data-placement", "top");
            status.setAttribute("data-html", "true");
            status.setAttribute("title", "Ya es por terminarse.");

            CellStatus.appendChild(status);
    }
    else if (articulos[i].status == 3)
    {

        //si es activo se dibuja el circulo rojo en la tabla
        var status = document.createElement('i');
        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", "cantidad en 0.");
        CellStatus.appendChild(status);

    }

    else
    {
            //si es activo se dibuja el circulo gris en la tabla
            var status = document.createElement('i');
                //dibuja el circulo rojo de inactivo
            status.setAttribute("class", "fa fa-circle dot");
            status.setAttribute("data-toggle", "tooltip");
            status.setAttribute("data-placement", "top");
            status.setAttribute("data-html", "true");
            status.setAttribute("title", "Item inactivo.");
            CellStatus.appendChild(status);
    }


var CellAcciones = document.createElement('td');
CellAcciones.style.textAlign = "center";
var edit = document.createElement('button');
var editImg = document.createElement('img');


    /*Crea toda la celda de editar*/
    var editImg = document.createElement('i');
editImg.setAttribute("class", "fa fa-pencil");
    editImg.style.color="#000000";
edit.appendChild(editImg);
edit.className = 'btn btn-w-m btn-warning';
edit.style.minWidth = '0px';
    edit.setAttribute("onclick", "editModal('" + articulos[i].cat_name +"', '" +
    articulos[i].idSub +"','" +
    articulos[i].numFile +"', '" + articulos[i].description_item +"', '" +
    articulos[i].price_item +"', '" + articulos[i].manufacturer +"', '"+
    articulos[i].model_item +"', '" +   articulos[i].reorder_Level +"','" +
    articulos[i].target_Stock +"','" + articulos[i].image +"','" +
    articulos[i].commentt +"','" + articulos[i].registerDate +"', '"+
    articulos[i].id_category +"','" + articulos[i].id_supplier +"','" +
    articulos[i].id_unit +"','" + articulos[i].id_location +"','" + articulos[i].id_engineer +"','" + articulos[i].idSub +"',)");
    edit.setAttribute("data-toggle", "tooltip");
    edit.setAttribute("data-placement", "top");
    edit.setAttribute("data-html", "true");
    edit.setAttribute("title", "Click para editar informacion de alta de este item.");
     CellAcciones.appendChild(edit);


            //Da de alta
            if (articulos[i].status == 1) {
                    var remove = document.createElement('button');
                    var removeImg = document.createElement('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 = '0px';
                    remove.style.marginLeft="20px";
                    remove.setAttribute("onclick", "changeStatusx2('" +
                    articulos[i].numFile + "', '" + articulos[i].description_item +"')");
                    //muestra el mensaje por arriba dle boton
                    remove.setAttribute("data-toggle", "tooltip");
                    remove.setAttribute("data-placement", "top");
                    remove.setAttribute("data-html", "true");
                    remove.setAttribute("title", "Este item se encuentra activo, click para cambiar estado");
                    CellAcciones.appendChild(remove)
            }
    else{
        /*dar de baja*/
        var remove = document.createElement('button');
        var removeImg = document.createElement('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 = '0px';
        remove.style.marginLeft="20px";
        remove.setAttribute("onclick", "changeStatus('" +
        articulos[i].numFile + "', '" + articulos[i].description_item +"')");
        //muestra el mensaje por arriba dle boton
        remove.setAttribute("data-toggle", "tooltip");
        remove.setAttribute("data-placement", "top");
        remove.setAttribute("data-html", "true");
        remove.setAttribute("title", "Este item se encuentra inactivo, click para cambiar estado");
        CellAcciones.appendChild(remove)
    }

Depending on what the api gets, it will change the status and color of the point in the table, but as I said the user can unsubscribe or add an item when he wants, so, I repeat the condition of status == 1 , but with the others should be changing, if active.

The problem I have is that the colors red and yellow are stirred, not indicated when they should be, for the other green and gray there is no problem this executes successfully.

My api was done that way, I do not know if it's correct, what I'm doing, but I'm sure that in the js where the points are drawn, it's wrong, but I do not know how to make them match when they should do it.

Someone who can tell me how to do it?

javascript php bootstrap api

asked by Pato 28.11.2018 в 23:38

source

1 answer

Assign two variables to a path in PHP _FILES How to perform an input operation using a checkbox

score 1 · Answer 1

You're drowning in a glass of water. You do not need four if to obtain each color according to the status (thank goodness they are not more colors, you would have an interminable and repetitive code).

This is solved very easily using an object that stores another object nested with pairs: key / value for both the color to be applied and the title. The key of each object will be the number that you will recover with articulos[i].status and then, depending on that number you will be able to find both the color and the title reading the property class and the property title .

The object would be this:

var refColors = {
  "1": {
    "class": "text-navy",
    "title": "Item activo"
  },
  "2": {
    "class": "text-warning",
    "title": "Ya es por terminarse"
  },
  "3": {
    "class": "text-danger",
    "title": "cantidad en 0"
  }
};

Note that dot does not appear here, because what follows from the logic you are implementing would be the default value.

Then what we will do is establish two variables with the values that would go by default (in case the number is not found), and those variables would only change within if .

By doing this, your code would be free of all if that you are implementing and, if in the future you add another color option you just have to place it in the object that stores the key / nested object pairs.

The complete code would then be like this:

var refColors = {
  "1": {
    "class": "text-navy",
    "title": "Item activo"
  },
  "2": {
    "class": "text-warning",
    "title": "Ya es por terminarse"
  },
  "3": {
    "class": "text-danger",
    "title": "cantidad en 0"
  }
};

var refStatus=articulos[i].status;
/*Valores por defecto*/
var theTitle = "Item inactivo";
var cssClass = "dot";
if (refColors.hasOwnProperty(refStatus)) {
  theTitle = refColors[refStatus].title;
  cssClass = 'fa fa-circle ${refColors[refStatus].class}';
}

var status = document.createElement('i');
/*Ojo aquí, cssClass tendrá lo que corresponda según el valor numérico hallado*/
status.setAttribute("class", cssClass); 
status.setAttribute("data-toggle", "tooltip");
status.setAttribute("data-placement", "top");
status.setAttribute("data-html", "true");
/*Aquí theTitle tendrá lo que corresponda según el valor numérico hallado*/
status.setAttribute("title", theTitle);
CellStatus.appendChild(status);

Let's see some tests with the possible values:

var refColors = {
  "1": {
    "class": "text-navy",
    "title": "Item activo"
  },
  "2": {
    "class": "text-warning",
    "title": "Ya es por terminarse"
  },
  "3": {
    "class": "text-danger",
    "title": "cantidad en 0"
  }
};

var refStatus = "1"; //articulos[i].status;
/*Valores por defecto*/
var theTitle = "Item inactivo";
var cssClass = "dot";
if (refColors.hasOwnProperty(refStatus)) {
  theTitle = refColors[refStatus].title;
  cssClass = 'fa fa-circle ${refColors[refStatus].class}';
}
console.log(cssClass);
console.log(theTitle);

/* ... */
var refStatus = "2"; //articulos[i].status;
/*Valores por defecto*/
var theTitle = "Item inactivo";
var cssClass = "dot";
if (refColors.hasOwnProperty(refStatus)) {
  theTitle = refColors[refStatus].title;
  cssClass = 'fa fa-circle ${refColors[refStatus].class}';
}
console.log(cssClass);
console.log(theTitle);

/* ... */
var refStatus = "3"; //articulos[i].status;
/*Valores por defecto*/
var theTitle = "Item inactivo";
var cssClass = "dot";
if (refColors.hasOwnProperty(refStatus)) {
  theTitle = refColors[refStatus].title;
  cssClass = 'fa fa-circle ${refColors[refStatus].class}';
}
console.log(cssClass);
console.log(theTitle);

/* ... */
var refStatus = "4"; //articulos[i].status;
/*Valores por defecto*/
var theTitle = "Item inactivo";
var cssClass = "dot";
if (refColors.hasOwnProperty(refStatus)) {
  theTitle = refColors[refStatus].title;
  cssClass = 'fa fa-circle ${refColors[refStatus].class}';
}
console.log(cssClass);
console.log(theTitle);

As I said before, the advantage of using an object as refColors is colors is that if in the future you need to add more options, you only add a new key in the object, for example if we extend the object like this, it will take the indicated values when the status is equal to 4 :

var refColors = {
  "1": {
    "class": "text-navy",
    "title": "Item activo"
  },
  "2": {
    "class": "text-warning",
    "title": "Ya es por terminarse"
  },
  "3": {
    "class": "text-danger",
    "title": "cantidad en 0"
  },
  "4": {
    "class": "text-primary",
    "title": "Nueva opción añadida"
  }
};

Also, suppose that any other attribute would be changing (for example, any of the attributes data- that you have). You only add it inside the nested object and you get it dynamically as it was done with theTitle or with cssClass .

I hope it serves you. If you have doubts or problems to implement it, you can say it in comments.