1

Boas

O script embaixo serve para criar um grelha de quadrados numerados.

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:

output

Imaginado que a grelha criada por este script representa os lugares disponiveis numa sala, precisava de adicionar uma função para quando carregar no botão "pesquisar" (por exemplo entre as datas 20-01-2017 e 27-01-2017 ILUSTRADO EMBAIXO) este preenche-se os quadrados com as cores conforme os status de cada lugar.

  • vermelho para lugar comprado
  • amarelo para lugar reservado
  • sem cor para lugar disponível

inserir a descrição da imagem aqui

Esses "status" de reserva seriam retornados de uma função php:

tbl_reservas (MYSQL)

  • id
  • nome
  • email
  • phone
  • address
  • city
  • sala (int)
  • lugar (int)
  • start_date (date)
  • end_date (date)
  • status (int) 0 ou 1 ou 2

função php - QUALQUER COISA DESTE TIPO:

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

A minha dúvida é como posso alterar o script em cima escrito para fazer o que a ilustração mostra ?

6
  • Boa tarde Bernardo. Sua pergunta é muito ampla. Mas acredito que uma solução bem simples seria modificar esse script para atender melhor seus requisitos e a cada reserva, espera ou disponibilidade você altera os dados do banco através de uma requisição ajax. Commented 17/01/2017 às 16:42
  • Eu editei a pergunta para não parecer ampla. Commented 17/01/2017 às 18:39
  • Realmente precisa criar as os blocos usando javascript? Eu já vi a algum tempo uma função que interpretava o retorno de uma requisição AJAX podendo executar funções via .post()/.get()/.ajax(). No entanto não é uma boa prática, mas funcionaria Commented 17/01/2017 às 19:41
  • Qual seria a melhor prática para desenvolver este projecto ? Commented 17/01/2017 às 19:44
  • 1
    Editei o tópico para mostrar o objectivo do script. Commented 18/01/2017 às 0:40

1 Resposta 1

0

Não há possibilidades de programar a solução integral pra você, mas pode-se te dar um norte, dai você já pode ter uma noção de qual é o caminho necessário para atingir esse objetivo.

Vejamos, primeiramente como você pode recuperar esses valores do banco de dados via AJAX. Para facilitar, vou assumir que seu PHP está retornando JSON como resposta. Além do mais, vou assumir que você terá sempre 100 lugares. Já que na sua tabela não deixa claro como será a disposição dos lugares e ainda mais, quantos registros serão retornados.

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

Em seguida, vamos montar a grelha de quadrados conforme o objeto javascript retornado. (Como na tabela não há informações sobre a disposição dos lugares, vamos assumir que é 10x10, igual do exemplo)

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");
    }
  }
}

Pronto, você já está simulando a sala com os lugares que você indicou.

Fiz uma simulação pra você ver como ficaria:

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 QUE A FUNÇÃO gerarRetornoAleatorio() não deve ser usada, ao invés disso utilize o retorno vindo do banco de dados.

Enfim, espero ter esclarecido e pelo menos ter te dado uma direção.

1
  • Quero aproveitar o script quejá tenho escrito pois prefiro o output ("design") da grelha. Editei a pergunta inicial para, se você poder, ajudar-me melhor. Obrigado Commented 18/01/2017 às 0:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .