In this my view diagram of sitting arangement.
VIEW:
<div class="card-body">
<label class="control-label">Seating Diagram</label>
<table id="seatsDiagram2">
<tr>
<td id="seat-1" data-name="1">1</td>
</tr>
<tr>
<td class="space"> </td>
</tr>
<tr>
<td id="seat-2" data-name="2">2</td>
<td id="seat-3" data-name="3">3</td>
<td class="space"> </td>
<td class="space"> </td>
<td id="seat-4" data-name="4">4</td>
<td id="seat-5" data-name="5">5</td>
<td class="space"> </td>
<td id="seat-6" data-name="6">6</td>
<td id="seat-7" data-name="7">7</td>
<td class="space"> </td>
<td class="space"> </td>
<td id="seat-8" data-name="8">8</td>
<td id="seat-9" data-name="9">9</td>
</tr>
<tr>
<td class="space"> </td>
</tr>
<tr>
<td id="seat-10" data-name="10">10</td>
</tr>
</table>
</div>
</div>
This is my script and I don’t know if my script is the reason why is not selecting automatic.
<script>
document.addEventListener('DOMContentLoaded', function() {
const sitNumbers = <?php echo json_encode(array_column($sit_numbers, 'pro_sitNumber'));?>;
const cells = document.querySelectorAll('#seatsDiagram2 td');
cells.forEach(cell => {
const name = cell.getAttribute('data-name');
if (sitNumbers.includes(name)) {
cell.classList.add('selected');
}
});
});
</script>
This is CONTROLLER:
$this->load->model('ProjectModel');
$data['sit_numbers'] = $this->ProjectModel->get_sit_numbers();
$this->load->view('project_view', $data);
This is MODEL:
$sql = "SELECT * FROM `project`";
$query=$this->db->query($sql);
$result = $query->result();
Or maybe i have forgot something to put here to show the selected table.
This is the CSS:
#seatsDiagram2 td,
#displaySeats2 td{
padding: 1rem;
text-align: center;
margin: 0.1rem;
height: 57px;
width: 60px;
border: 3px solid transparent;
display: inline-block;
background-color: #efefef;
border-radius: 4px;
margin-inline-start: 4px;
cursor: pointer;
}
#displaySeats2{
margin: 3rem auto 1rem auto;
}
#seatsDiagram2{
width: 100%;
margin-bottom: 1rem;
;
border: 1px solid gray;
}
#seatsDiagram2 td.selected{
background-color: yellowgreen;
-webkit-animation-name: rubberBand;
animation-name: rubberBand;
animation-duration: 300ms;
animation-fill-mode: both;
}
#seatsDiagram2 td.notAvailable,
#displaySeats2 td.notAvailable
{
color: white;
background-color: #db2619;
}
#seatsDiagram2 td:not(.space,.notAvailable):hover{
cursor: pointer;
border-color:yellowgreen;
}
#seatsDiagram2 .space,
#displaySeats2 .space{
background-color: white;
border: none;
}
enter image description here
This is i want to see(check the image) and this reservation with table seating arrangement, and then sample is the client already reserve with table number and already save in database, if i view her reservation the table selected will show selected in the diagram.
