1

Que tal amigos tengo un sistema de restaurantes que actualmente tengo funcionando pero quiero mejorarlo en el aspecto de colocar las mesas en manera grafica y no en forma de lista, ya que actualmente despliego las mesas en una lista por medio de dataTables de la siguiente manera:

introducir la descripción de la imagen aquí

Este es el codigo de la vista en donde se despliegan las mesas como se muestra en la imagen anterior

<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>

Lo que yo necesito hacer es que se deplieguen de manera mas grafica algo asi:

introducir la descripción de la imagen aquí

y los botones para las acciones(opciones irian debajo de cada mesa) espero darme a entender.

3
  • 1
    y eso no seria como una tabla.. grande.. y con bordes grandes e invisibles?
    – gbianchi
    el 23 oct. 2018 a las 16:51
  • ¿Necesariamente tienes que usar tablas? porque puedes hacerlo con Grid o con Flexbox sin problema o si usas bootstrap podrías usar cards. el 23 oct. 2018 a las 18:00
  • @EdgarGutiérrez pero estoy mandando a traer por un array las ordenes si miras el codigo, entonces como podria hacerlo ya sin necesidad de las dataTables
    – WilsonicX
    el 23 oct. 2018 a las 18:53

2 respuestas 2

3

Entiendo que lo que necesitas es crear una tabla donde poner las mesas. Para la demostración utilizo un array mesasRy. Este array puede ser creado con PHP

1 Utilizando tablas:

// 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>

Sin embargo si quieres utilizar un grid en lugar de una tabla el código se simplifica bastante:

2 Utilizando el 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>

Espero que esto sea lo que necesitas.

3
  • Exactamente esto es lo que necesito pero en dado caso en vez de la forma ocupara alguna imagen png de una mesa?
    – WilsonicX
    el 29 oct. 2018 a las 14:27
  • Creo que no habrá ningún problema. ¿puedes editar tu pregunta y añadir unas cuantas líneas de HTML con lo que quieres que sea una mesa?
    – enxaneta
    el 29 oct. 2018 a las 14:36
  • Ahora lo hago permiteme sere lo mas detallista posible
    – WilsonicX
    el 29 oct. 2018 a las 16:12
0

Aprovechando que estás usando bootstrap, podrías crear un grid y dentro de cada columna del grid usar un card, al card le puedes dar diferentes estilos dependiendo de si la mesa está ocupada o libre

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.