(function(){
$(document).ready(function(){
var arriba = $("#top");
// cuando hagamos scroll llamamos a la funcion
window.onscroll = function(){scrollFunction()};
// evento scroll
function scrollFunction(){
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20){
arriba.removeClass("top");
arriba.addClass("visible");
}else{
arriba.removeClass("visible");
arriba.addClass("top");
}
}
//script smooth scroll
$("a").on('click', function(event){
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
//fin smoothscroll
/* FUNCION PARA EL MENU MOVIL */
var boton = $("#boton");
var menuMovil = $("#menu-movil");
var cerrar = $("#cerrar");
boton.on('click', function(event){
menuMovil.removeClass("contenedorMenu");
menuMovil.addClass("visible");
});
cerrar.on('click', function(event){
menuMovil.removeClass("visible");
menuMovil.addClass("no-visible");
menuMovil.removeClass("no-visible");
menuMovil.addClass("contenedorMenu");
});
// validación formulario login
var botonLogin = $("#login");
var usuario = $("#usuario");
var contrasenna = $("#contraseña");
var formulario = $("#formulario-login");
botonLogin.on('click', function(event){
if(usuario.val() === "" || contrasenna.val() === ""){
alert("Usuario o contraseña vacios");
usuario.addClass("error-vacio");
contrasenna.addClass("error-vacio");
}else{
formulario.submit();
}
});
//funciones para listado
function listadoInstalaciones(){
var formularioInstalacion = $("#formulario").serialize();
$.ajax({
url: "/listadoInstalaciones",
data: formularioInstalacion,
type: "GET",
headers: {'X-CSRF-Token': '{{csrf_token()}}'},
success:function(data){
//Convertimos la respuesta en JSON
var datos = JSON.parse(data);
for(var item of datos){
$('#listado').append(`
<tr id="tr-${item.id}">
<td>${item.id}</td>
<td>${item.nombre}</td>
<td>${item.capacidad}</td>
<td><button><i class='fas fa-trash-alt'></i></button></td>
<td><button onclick='editarInstalaciones(${item.id});'><i class='fas fa-external-link-alt'></i></button></td>
</tr>
`);
}
},
error: function(){
alert('imposible listar instalaciones');
}
});
}
//funcion para editar Por parámetro recibe ID de instalación a modificar
function editarInstalaciones(itemId) {
// Obtener la fila
var fila = $("#tr-" + itemId);
// Solo si la fila existe
if(fila) {
// Buscar datos en la fila y asignar a campos del formulario:
// Primera columna (0) tiene ID, segunda (1) tiene nombre, tercera (2) capacidad
$("#id-instalacion").value() = fila.find("td:eq(0)").text();
$("#instalacion").value() = fila.find("td:eq(1)").text();
$("#capacidad").value() = fila.find("td:eq(2)").text();
// Mostrar modal
$('#editarInstalaciones').modal('show');
}
}
function listadoActividades(){
var formularioActividad = $("#formularioActividad").serialize();
$.ajax({
url: "/listadoActividades",
data: formularioActividad,
type: "GET",
headers: {'X-CSRF-Token': '{{csrf_token()}}'},
success:function(data){
//Convertimos la respuesta en JSON
var datos = JSON.parse(data);
for(let item of datos){
$('#listadoActividades').append("<tr>"+
"<td>"+item.id+"</td>" +
"<td>"+item.nombre+"</td>" +
"<td>"+item.precio+"</td>" +
"<td>"+item.apuntados+"</td>" +
"<td>"+item.instalacion+"</td>" +
"<td>"+item.fechaHora+"</td>" +
"<td>"+"<a href=''><i class='fas fa-trash-alt'></i></a>"+"</td>"+
"<td>"+"<a href=''><i class='fas fa-external-link-alt'></i></a>"+"</td>"+
"</tr>"
);
}
},
error: function(){
alert('imposible listar actividades');
}
});
}
function listadoUsuarios(){
var formularioUsarios = $("#formularioUsuarios").serialize();
$.ajax({
url: "/listadoUsuarios",
data: formularioUsarios,
type: "GET",
headers: {'X-CSRF-Token': '{{csrf_token()}}'},
success:function(data){
//Convertimos la respuesta en JSON
var datos = JSON.parse(data);
for(let item of datos){
$('#listadoUsuarios').append("<tr>"+
"<td>"+item.id+"</td>" +
"<td>"+item.name+"</td>" +
"<td>"+item.apellidos+"</td>" +
"<td>"+item.dni+"</td>" +
"<td>"+item.fechaNacimiento+"</td>" +
"<td>"+item.email+"</td>" +
"<td>"+item.direccion+"</td>" +
"<td>"+item.provincia+"</td>" +
"<td>"+item.telefono+"</td>" +
"<td>"+item.usertype+"</td>" +
"<td>"+"<a href=''><i class='fas fa-trash-alt'></i></a>"+"</td>"+
"<td>"+"<a href=''><i class='fas fa-external-link-alt'></i></a>"+"</td>"+
"</tr>"
);
}
},
error: function(){
alert('imposible listar usuarios');
}
});
}
function listadoMaquinas(){
var formularioMaquinas = $("#formularioMaquinas").serialize();
$.ajax({
url: "/listadoMaquinas",
data: formularioMaquinas,
type: "GET",
headers: {'X-CSRF-Token': '{{csrf_token()}}'},
success:function(data){
//Convertimos la respuesta en JSON
var datos = JSON.parse(data);
for(let item of datos){
$('#listadoMaquinas').append("<tr>"+
"<td>"+item.id+"</td>" +
"<td>"+item.nombreMaquina+"</td>" +
"<td>"+item.tipoMaquina+"</td>" +
"<td>"+item.dificultad+"</td>" +
"<td>"+item.pesoMaquina+"</td>" +
"<td>"+item.parteCuerpo+"</td>" +
"<td>"+item.instalacion+"</td>" +
"<td>"+"<a href=''><i class='fas fa-trash-alt'></i></a>"+"</td>"+
"<td>"+"<a href=''><i class='fas fa-external-link-alt'></i></a>"+"</td>"+
"</tr>"
);
}
},
error: function(){
alert('imposible listar máquinas');
}
});
}
//Función insertar
function insertarInstalaciones(){
event.preventDefault();
var nombreValor = $('#nombre-instalacion').val();
var capacidadValor = $('#capacidad-instalacion').val();
var tokenValor = $('#token').val();
// limpiamos la tabla
$('#listado tr').remove();
if(nombreValor === "" || capacidadValor === ""){
$('#nombre').addClass("error-vacio");
$('#capacidad').addClass("error-vacio");
}else{
//serelizamos el formulario
var serializado = $("#formulario").serialize();
// función Ajax
$.ajax({
url: "/crearInstalacion",
data: serializado,
type: "post",
headers: {'X-CSRF-Token': '{{csrf_token()}}'},
success:function(data){
listadoInstalaciones();
},
error: function(){
alert('imposible Crear');
}
});
}
}
//funcionalidad botón agregarInstalacion
var botonInstalacion = $('#agregarInstalacion');
botonInstalacion.on('click', function(event){
insertarInstalaciones();
});
//funcionalidad botón agregar Actividad
var agregarActividad = $('#agregarActividad');
agregarActividad.on('click', function(event){
insertarActividades();
});
//funcionalidad botón agregar Usuario
var agregarUsuario = $('#agregarUsuario');
agregarUsuario.on('click', function(event){
insertarUsuarios();
});
//funcionalidad botón agregar Maquinas
var agregarMaquina = $('#agregarMaquina');
agregarMaquina.on('click', function(event){
agregarMaquinas();
});
//cuando cargue la web
$(document).ready(listadoInstalaciones);
$(document).ready(listadoActividades);
$(document).ready(listadoUsuarios);
$(document).ready(listadoMaquinas);
});
}());
//funcion para editar Por parámetro recibe ID de instalación a modificar
function editarInstalaciones(itemId) {
// Obtener la fila
var fila = $("#tr-" + itemId);
// Solo si la fila existe
if(fila) {
// Buscar datos en la fila y asignar a campos del formulario:
// Primera columna (0) tiene ID, segunda (1) tiene nombre, tercera (2) capacidad
$("#id-instalacion").value() = fila.find("td:eq(0)").text();
$("#instalacion").value() = fila.find("td:eq(1)").text();
$("#capacidad").value() = fila.find("td:eq(2)").text();
// Mostrar modal
$('#editarInstalaciones').modal('show');
}
}
function listadoActividades(){
Comentar, que mi modal, no lo quiero a poder ser, en una plantilla blade a parte, lo quiero dentro de mi blade de cada función.
!-- Modal -->
<div class="modal fade" id="editarInstalaciones" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Editar</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="{{ route('modalEditarInstalaciones') }}" method="get" class="formulario" id="formulario">
{{ csrf_field() }}
<div class="campos1">
<label for="nombre">Nombre
<input type="text" name="nombre-instalacion" id="instalacion">
</div>
<div class="campos2">
<label for="capacidad">capacidad
<input type="text" name="capacidad-instalacion" id="capacidad">
<p id="idInstalacion"></p>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
<button type="button" class="btn btn-primary">Guardar Cambios</button>
</div>
</div>
</div>
</div>
Con eso consigo mostrar mi modal, pero ahora necesito mostrar los datos de cada registro que quiera modificar. Para ello uno esto.
//funcion para editar
$(document).on('click', '.editarInstalaciones', function(){
$('#editarInstalaciones').modal('show');
//pasamos los datos al modal
$('#instalacion').text();
$('#instalacion').val(item.nombre);
$('#capacidad').text();
$('#capacidad').val(item.capacidad);
});
//}());