Display tables on a grid

Navigation
1

How about friends I have a restaurant system that I currently have working but I want to improve it in the aspect of placing the tables in a graphical way and not in the form of a list, since I currently display the tables in a list by means of dataTables of the following way:

This is the code of the view where the tables are displayed as shown in the previous image 

<table id="mesas" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Fecha</th>
      <th>Mesas</th>
      <th>Opciones</th>
    </tr>
  </thead>
  <tbody>
    <?php if(!empty($ordenes)):?>
    <?php foreach($ordenes as $orden):?>
    <tr>
      <td>
        <?php echo $orden->id;?>
      </td>
      <td>
        <?php echo $orden->fecha;?>
      </td>

      <?php 
       $mesas = "";
       foreach ($orden->mesas as $mesa){
           $mesas .= $mesa->numero.","; 
       } 
      ?>
      <td>
        <?php echo substr($mesas, 0, -1);?>
        <!-- <button type="button" class="btn btn-link btn-mesa">Cambiar o Unir Mesas</button></td> -->
      <td>
        <div class="btn-group">
          <button type="button" class="btn btn-primary btn-info-pedido" data-toggle="modal" data-target="#modal-venta" value="<?php echo $orden->id;?>"><span class="fa fa-search"></span></button>
          <a href="<?php echo base_url()?>movimientos/ordenes/edit/<?php echo $orden->id;?>" class="btn btn-warning"><span class="fa fa-pencil"></span></a>
          <?php if($permisos->delete == 1):?>
          <a href="<?php echo base_url();?>movimientos/ordenes/pay/<?php echo $orden->id;?>" class="btn btn-success"><i class="fa fa-credit-card" aria-hidden="true"></i></a>

          <a href="<?php echo base_url();?>movimientos/ordenes/delete/<?php echo $orden->id;?>" class="btn btn-danger btn-delete"><i class="fa fa-times" aria-hidden="true"></i></a>
          <?php endif;?>
        </div>
      </td>
    </tr>
    <?php endforeach;?>
    <?php endif;?>
  </tbody>
</table>

What I need to do is to deploy more graphically something like this:

and the buttons for the actions (options would go under each table) I hope to make myself understood.

    
asked by WilsonicX 23.10.2018 в 18:49
source

2 answers

3

I understand that what you need is to create a table where to put the tables. For the demonstration I use an array mesasRy . This array can be created with PHP

1 Using tables: 

// numero de mesas per fila
// prueba cambiar este número!
let num = 4;


let mesasRy = [
  {"id": 1,"libre":true},
  {"id": 2,"libre":true},
  {"id": 3,"libre":true},
  {"id": 4,"libre":true},
  {"id": 5,"libre":true}, 
  {"id": 6,"libre":true},
  {"id": 7,"libre":false},
  {"id": 8,"libre":false}
]

// si tengo 8 mesas y pongo 5 mesas per fila me quedan dos <td>s vacias
let vacias = (num-(mesasRy.length % num))%num; 
// calcula el numasro de filas necesarias
let filas = Math.ceil(mesasRy.length / num);

// crea un fragmento HTML para poner el contenido de la tabla
let fragment = document.createDocumentFragment();

for(let fila = 0; fila < filas; fila++){
  // para cada fila crea un nuevo elemento <tr>
  let tr = document.createElement("tr");
  for(let mesa = 0; mesa < num; mesa++){
   // dentro de cada tr crea las <td>s necesarias
   let td = document.createElement("td");
   // calcula el index de la mesa dentro del array de las mesas
   let indexMesa = fila*num + mesa;
   // si hay una mesa en esta posición
   if(mesasRy[indexMesa]) {
   // crea un <div> para esta mesa
    let mesaDiv = document.createElement("div");
    // crea el HTML necesario
    let _innerHTML = '<p>mesa ${mesasRy[indexMesa].id}<br>';
    if(mesasRy[indexMesa].libre == false){
     mesaDiv.setAttribute("class","ocupada");
     _innerHTML +="OCUPADA</p>"
   }else{
     _innerHTML +="LIBRE</p>";
   }

     mesaDiv.innerHTML = _innerHTML;
     // agrega la mesa al td
     td.appendChild(mesaDiv);
   } 
    //agrega el td a la fila tr
    tr.appendChild(td);
}
  // agrega la fila al fragmento
  fragment.appendChild(tr)
}

// agrega el contenido del fragmento a la tabla #mesas
mesas.appendChild(fragment)
#mesas td{border:1px solid;padding:1em;}
#mesas div{
  width:100px;
  height:100px;
  border-radius:10px;
  background:#6ab150;
  text-align:center;
  overflow:hidden;
  line-height:25px;
}
#mesas div.ocupada{background:#dd6600;}
<table id="mesas"></table>

However if you want to use a grid instead of a table the code is simplified enough:

2 Using the grid layout: 

let mesasRy = [
  { id: 1, libre: true },
  { id: 2, libre: true },
  { id: 3, libre: true },
  { id: 4, libre: true },
  { id: 5, libre: true },
  { id: 6, libre: true },
  { id: 7, libre: false },
  { id: 8, libre: false }
];

let fragment = document.createDocumentFragment();

for (let mesa = 0; mesa < mesasRy.length; mesa++) {
  let td = document.createElement("div");
  td.setAttribute("class", "td");

  if (mesasRy[mesa]) {
    let mesaDiv = document.createElement("div");
    let _innerHTML = '<p>mesa ${mesasRy[mesa].id}<br>';
    if (mesasRy[mesa].libre == false) {
      mesaDiv.setAttribute("class", "ocupada");
      _innerHTML += "OCUPADA</p>";
    } else {
      _innerHTML += "LIBRE</p>";
    }

    mesaDiv.innerHTML = _innerHTML;
    td.appendChild(mesaDiv);
  }

  fragment.appendChild(td);
}

mesas.appendChild(fragment);
#mesas {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  grid-template-rows: max-content;
  grid-gap: 1em;
}
#mesas .td {
  padding: 1em;
  border:1px solid;
}
#mesas .td div {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background: #6ab150;
  text-align: center;
  overflow: hidden;
  line-height: 25px;
}
#mesas div.ocupada {
  background: #dd6600;
}
<div id="mesas"></div>

I hope this is what you need.

    
answered by 27.10.2018 в 12:02
0

Taking advantage of the fact that you are using bootstrap, you could create a grid and within each column of the grid use a card, you can give the card different styles depending on whether the table is occupied or free

    
answered by 27.10.2018 в 12:41
How to change the height of my layout programmatically? What is FileStream for?