Estoy haciendo un aplicación web "para" una aerolinea, usando Laravel, necesito crear tablas, por lo cual utilizo Bootstrap-table. Estas tablas, tienen contenido, y tiene un evento que se activa cada que se hace click en alguna fila. Al hacer click paso los datos que tengo en la tabla, gracias a una consulta; claro que la consulta puede tener otros campos pero no necesariamente mostrarlos en la tabla, tal como en mi caso, yo tendría eso, "oculto" el ID de determinado vuelo, dicho ID me servirá para que en una consulta, yo consiga todos los asientos que tengan dicho ID foráneo y que además su estado sea disponible. Dicha consulta lógicamente lo que haría sería regresarme el número del asiento. Y con un foreach crear los options del select.
Al hacer click en la fila me muestra un modal, en el modal tendría metido el código del Select, así como, por ejemplo, en mi tabla tengo los campos de Destino, Origen, Costo, etc, los cuales se pasan en el evento click, y dentro del modal, se asignan dichos valores en un Input. Pero la consulta para saber los asientos disponibles de dicho vuelo, NO SÉ DONDE HACERLA. Si necesitan código de mi modelo utilizado, lo que tengo en mi controlador y mi vista, lo puedo proporcionar.
El código de mi modal:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Make the reservation</h4>
</div>
<div class="modal-body">
<form method="post" action="/reservations" id="frm-update">
<input type="hidden" name="id_user" id="id_user" value="">
<input type="hidden" name="accion" value="register">
<div class="form-group">
<label for="dep" class="control-label">Departure:</label>
<input type="text" class="form-control" placeholder="Departure" id="dep" name="dep" readonly="true"></input>
</div>
<div class="form-group">
<label for="dest" class="control-label">Destination:</label>
<input type="text" class="form-control" placeholder="Destination" id="dest" name="dest" readonly="true"></input>
</div>
<div class="form-group">
<label for="date" class="control-label">Date:</label>
<input type="text" class="form-control" placeholder="Date and Hour" id="date" name="date" readonly="true"></input>
</div>
<div class="form-group">
<label for="seats" class="control-label">Aviable Seats:</label>
<select class="" name="seats">
</select>
</div>
<div class="form-group">
<label for="money" class="control-label">Cost:</label>
<input type="text" class="form-control" placeholder="Cost ($)" id="costo" name="costo" readonly="true"></input>
</div>
<div class="form-group">
<label for="money" class="control-label">Aviable Money:</label>
<input type="text" class="form-control" placeholder="Your aviable money" id="money" name="money" readonly="true"></input>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" id="evento-update" class="btn btn-primary">Make reservation</button>
</div>
</div>
</div>
</div> <!-- Modal -->
El código de mi bootstrap
<section class="row">
<div class="col-lg-12">
<h1 class="page-header">List of aviable flights<br> <small>Choose a flight to see details</small></h1>
</div>
<section class="row">
<section class="col-md-12">
<table id="tabla-pagos" data-search="false" style="background-color: #0288D1">
<thead>
<tr>
<th data-field="userid" data-sortable="true">ID</th>
<th data-field="date" data-sortable="false">Date and Time</th>
<th data-field="number" data-sortable="false">Flight Number</th>
<th data-field="seats" data-sortable="false">Airplane Seats</th>
<th data-field="departure" data-sortable="false">Departure</th>
<th data-field="destination" data-sortable="false">Destination</th>
</tr>
</thead>
</table>
</section>
</section>
</section> <br>
Por otro lado, el javascript, en donde se hace uso de una petición ajax para llenar la tabla, y tras dar click a la fila, pasar los datos al modal.
<script type="text/javascript" charset="utf-8">
$(function(){
var $table = $("#tabla-pagos");
$table.bootstrapTable();//convertir una tabla en un objeto de bootstrap table
$.ajax({
url: '/reservations',
type: 'POST',
dataType: 'json',
data: {accion: 'consulta'},
})
.done(function(response) {
$table.bootstrapTable('showLoading');
if(response.length>0){
$table.bootstrapTable('destroy');
$table.bootstrapTable({data: response});
}
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
$table.bootstrapTable('hideLoading');
console.log("complete");
})
$table.on('click-row.bs.table', function(row, $element){
$('#myModal').modal('toggle');
$('#id_user').val($element.userid);
$('#dep').val($element.departure)
$('#dest').val($element.destination)
$('#date').val($element.date)
$('#costo').val($element.costo)
});
$("#evento-update").on('click', function(event){
event.preventDefault();
event.stopPropagation();
$('#frm-update').submit();
})
});
</script>
En mi controlador, tengo 2 funciones
public function reservation() {
if (Request::method() == 'GET'){
return View::make('user.reservation');
}
else {
switch (Input::get('accion')) {
case 'consulta':
return $this->consultaReservations();
break;
case 'register':
$idu = Auth::id();
$user = Pasajero::where('usuarios_id','=', $idu)->first();
$Id = $user->id;
$reservation = new Reservation();
$reservation->vuelo_id = Input::get('id_user');
$reservation->pasajeros_id = $Id;
$reservation->save();
return Redirect::back()
->with('reser', "You have made a reservation");
break;
default:
return array();
break;
}
}
}
//Consulta de todos los vuelos disponibles para el usuario
private function consultaReservations(){
$id = Auth::id();
$consulta = DB::table('vuelos')
->join('origenes', 'origenes.id', '=', 'vuelos.origen_id')
->join('destinos', 'destinos.id', '=', 'vuelos.destino_id')
->join('aviones', 'aviones.id', '=', 'vuelos.avion_id')
->select('vuelos.id as userid','vuelos.fecha as date', 'vuelos.numero_vuelo as number', 'vuelos.costo as costo',
'aviones.num_asientos as seats', 'origenes.nombre_origen as departure', 'destinos.nombre_destino as destination')
->get();
return $consulta;
}
ACTUALIZACIÓN:
El código de la consulta que me traería los asientos disponibles ya la tengo, es esta:
select asientos.numero_asiento as num_asiento from vuelos
join origenes on origenes.id = vuelos.origen_id
join destinos on destinos.id = vuelos.destino_id
join aviones on aviones.id = vuelos.avion_id
join asientos on asientos.aviones_id = aviones.id
where asientos.estado_aciento = "Disponible"
and vuelos.id = 1;
El punto es aquí
where asientos.estado_aciento = "Disponible" and vuelos.id = 1;
Sé que en donde tengo el 1, debería de mandarle el ID obtenido una vez dado click a la fila, y así con esa consulta, poder generar los options del slect.