Implemetar Script

Question

Implemetar Script

Navigation

#1 by (0 votes)

1

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:

Giventhatthegridcreatedbythisscriptrepresentstheplacesavailableinaroom,youwouldneedtoaddafunctiontoitwhenyoupressthe"search" button (for example between the dates 20-01-2017 and 27-01-2017 ILLUSTRATED UNDER CONSTRUCTION ) this one fills the squares with the colors according to the status of each place.

red for purchased place
yellow for reserved place
no color for available place

Thesereservationstatuseswouldbereturnedfromaphpfunction:

tbl_reserves(MYSQL)

id
name
email
phone
address
city
room(int)
place(int)
start_date(date)
end_date(date)
status(int)0or1or2

phpfunction-ANYTHINGOFTHISTYPE:

$sql=SELECT*FROMtbl_reservasWHERE(reservaestejaentreadataindicadaps:aindatenhodepensarcomovoufazeroalgoritmo")

return query($sql)

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

php javascript

asked by anonymous 17.01.2017 / 17:13

1 answer

divs diagonally how to do using after and skew? Error compiling the HM (HEVC Standard) software on linux virtual machine

score 0 · Answer 1

There is no way to program the whole solution for you, but you can give yourself a north, so you can already have a sense of what path is necessary to achieve that goal.

Let's first look at how you can retrieve these values from the database via AJAX. To make it easier, I'll assume that your PHP is returning JSON in response. Besides, I'll assume you'll always have 100 seats. Since your table does not make clear how the layout of the places will be and 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, let's put the grid of squares according to the javascript object returned. (As in the table there is no information about the layout of the places, let's assume it's 10x10, just like 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");
    }
  }
}

You are already simulating the room with the places you have indicated.

I made a simulation for you to 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><divclass="container"></div>

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

Finally, I hope I have clarified and at least gave you a direction.