Implemetar Script

Question

Good

The script below serves to create a grid of numbered squares.

index php.

 <script>
var lastClicked;
var grid = clickableGrid(5,22,function(el,row,col,i){
    console.log("You clicked on element:",el);
    console.log("You clicked on row:",row);
    console.log("You clicked on col:",col);
    console.log("You clicked on item #:",i);

    el.className='clicked';
    if (lastClicked) lastClicked.className='';
    lastClicked = el;
});

document.body.appendChild(grid);
</script>

<script>
  $('td').click(function(e) {
    var cell = e.target;
    var selected_number = $(e.target).text();

    //alert(selected_number); (====>  AQUI É O MEU PROBLEMA   <====) 
  });
</script>

clickable-grid.css

.grid { margin:1em auto; border-collapse:collapse }
.grid td {
    cursor:pointer;
    width:30px; height:30px;
    border:1px solid #ccc;
    text-align:center;
    font-family:sans-serif; font-size:13px
}
.grid td.clicked {
    background-color:yellow;
    font-weight:bold; color:red;
}

clickable-grid.js

function clickableGrid( rows, cols, callback ){
    var i=0;
    var grid = document.createElement('table');
    grid.className = 'grid';
    for (var r=0;r<rows;++r){
        var tr = grid.appendChild(document.createElement('tr'));
        for (var c=0;c<cols;++c){
            var cell = tr.appendChild(document.createElement('td'));
            cell.innerHTML = ++i;
            cell.addEventListener('click',(function(el,r,c,i){
                return function(){
                    callback(el,r,c,i);
                }
            })(cell,r,c,i),false);
        }
    }
    return grid;
}

OUTPUT:

Since the grid created by this script represents the available places in a room, you needed to add a function for when to press the "search" button (for example between the dates 20-01-2017 and 27-01-2017 ILLUSTRATED BELOW) this one fills the squares with the colors according to the status of each place.

• red to purchased place
• yellow for private seat
• no color for available place

These reserve "status" would be returned from a php function:

tbl_reservations (MYSQL)

• id
• name
• email
• phone
• address
• city
• room (int)
• place (int)
• start_date (date)
• end_date (date)
• status (int) 0 or 1 or 2

php function - ANYTHING OF THIS KIND:

$sql = SELECT * FROM tbl_reservas WHERE (reserva esteja entre a data indicada ps: ainda tenho de pensar como vou fazer o algoritmo")

return query($sql)

My question is how can I change the script above written to do what the illustration shows ?

Answer 1

There is no possibility of programming the integral solution for you, but you can give yourself a north, hence you can already have a notion of what is the necessary way to achieve this goal.

Let’s see, first how you can recover these values from the database via AJAX. To make it easier, I’ll assume that your PHP is returning JSON as a response. Furthermore, I’ll assume you’ll always have 100 seats. Since in your table it does not make clear how will be the layout of the places and even more, how many records will be returned.

var sala;
$.get("link-para-aplicacao", function(data){
  sala = data; //sala irá conter um objeto javascript com todos os lugares e status
}, "json");

Next, we will assemble the grid of squares according to the returned javascript object. (As in the table there is no information on the seating arrangements, let’s assume it is 10x10, same as in the example)

var grelha = $("<table></table>");
$("body").append(grelha);
for(var i = 0; i < 10; i++){
  var linha = $("<tr></tr>");
  grelha.append(linha);
  for(var j = 0; j < 10; j++){
    var coluna = $("<td></td");
    linha.append(coluna);
    var status = sala.reservas[(j+1)*(i+1)].status;
    if(status == 0){
      coluna.addClass("verde");
    } else if(status == 1) {
      coluna.addClass("amarelo");
    } else if(status == 2) {
      coluna.addClass("vermelho");
    }
  }
}

Ready, you’re already simulating the room with the places you indicated.

I ran a simulation so you could see how it would look:

function gerarRetornoAleatorio() {
  var sala = {};
  sala.reservas = [];

  for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
      var lugar = {};
      lugar.id = i * 10 + (j + 1);
      lugar.lugar = lugar.id;
      lugar.status =
        Math.floor(Math.random() * 3);
      sala.reservas.push(lugar);
    }
  }

  return sala;
}

var sala = gerarRetornoAleatorio();
var grelha = $("<table></table>");
$(".container").append(grelha);
for (var i = 0; i < 10; i++) {
  var linha = $("<tr></tr>");
  grelha.append(linha);
  for (var j = 0; j < 10; j++) {
    var coluna = $("<td></td>");
    linha.append(coluna);
    coluna.text(sala.reservas[(i * 10 + (j + 1)) - 1].lugar);
    var status = sala.reservas[(i * 10 + (j + 1)) - 1].status;
    if (status == 0) {
      coluna.addClass("verde");
    } else if (status == 1) {
      coluna.addClass("amarelo");
    } else if (status == 2) {
      coluna.addClass("vermelho");
    }
  }
}

.verde {
  background-color: green;
}
.amarelo {
  background-color: yellow;
}
.vermelho {
  background-color: red;
}
body {
  color: white;
  font-weight: bolder;
}
td {
  padding: 10px;
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

NOTE THAT THE FUNCTION gerarRetornoAleatorio() should not be used, instead use the return from the database.

Anyway, I hope I’ve cleared it up and at least given you a direction.