<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400" rel="stylesheet">
<link href="css/pushbar.css" rel="stylesheet" >
<link rel="stylesheet" href="css/estilos.css">
<link class="icon" rel="icon" href="img/Captura.ico"> <!--Icono-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<!--CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-datepicker.css"><!--css bootstrap calendario-->
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<link href="css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
<title>Insumo</title>
</head>
<body>
<div class="contenedor">
<header>
<h1>Clinica Odontologica VID</h1>
</header>
<main>
<nav>
<button class="btn-menu" data-pushbar-target="pushbar-menu"><i class="fas fa-bars"></i></button>
</nav>
</main>
<!-- Pushbars: Menu -->
<div data-pushbar-id="pushbar-menu" class="pushbar from_left pushbar-menu">
<div class="btn-cerrar">
<button data-pushbar-close><i class="fas fa-times"></i></button>
</div>
<nav class="menu">
<a href="index.html">Inicio</a>
<a href="kit.jsp">Registro del KIT</a>
<a href="insumo.jsp">Maestro Insumo</a>
<a href="planillaKit.jsp">Planilla del KIT</a>
</nav>
</div>
<!-- Formulario Modal -->
<div id="modalDatos" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Datos</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="formModal">
<div class="modal-body">
<div class="row">
<div class="form-group col-sm-6">
<label for="minsumo">COD del insumo</label>
<input readonly type="text" class="form-control" id="minsumo" placeholder="Ingrese codigo">
</div>
<div class="form-group col-sm-6">
<label for="mdescripcion">Descripcion</label>
<input required class="form-control" id="mdescripcion" placeholder="Ingrese el nombre del insumo">
</div>
<div class="container">
<div class="form-group col-sm-6">
<div class="row">
<div class="col-sm-4">
<label class="checkbox-inline">
<input id="mchkestadomaes" name="chkestadomaes" type="checkbox" checked data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-width="150" data-onstyle="info"> Estado
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<!--<button type="button" id="btnEliminar" class="btn btn-danger" data-dismiss="modal">Eliminar</button>-->
<button type="submit" class="btn btn-primary">Actualizar</button>
</div>
</form>
</div>
</div>
</div>
<!-- Formulario-->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h1>Maestro Insumo</h1>
</div>
</div>
<center>
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<form id="formulario">
<div class="row">
<div class="form-group col-sm-6">
<label for="txtinsumo">COD</label>
<input required type="text" required class="form-control" id="txtinsumo" placeholder="Ingrese Codigo de Insumo">
</div>
<div class="form-group col-sm-6">
<label for="txtdescripcion">Descripcion</label>
<input required class="form-control" id="txtdescripcion" placeholder="Ingrese el nombre del insumo">
</div>
<div class="container">
<div class="form-group">
<div class="col-sm-4">
Estado
<label class="checkbox-inline" for="chkestadomaes">
<input id="chkestadomaes" name="chkestadomaes" type="checkbox" checked data-toggle="toggle" data-on="Activo" data-off="Inactivo" data-width="150" data-onstyle="info">
</label>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-block btn-primary">Guardar</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6">
<table class="table display AllDataTables" id="tablaDatos">
<thead>
<tr>
<th>COD</th>
<th>Descripcion</th>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</center>
</div>
</div>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="js/pushbar.js"></script>
<script>
var pushbar = new Pushbar({ blur: true,
overlay: true
});
var listaInsumos;
$(document).ready(function () { loadDatos();
});
$("#formulario").submit(function (event) { event.preventDefault();
$.post("Formulario", { id_insumo: $("#txtinsumo").val(), descripcion: $("#txtdescripcion").val(), estado: $("#chkestadomaes").prop('checked') ? 1 : 0
}, function (data) { if (data.insertado) { loadDatos();
alert("Se han registrado los datos"); } else { alert("Hubo un error"); }
});
});
function loadDatos() { $.get("Formulario", function (data) { var txt = "";
listaInsumos = data.lista;
if (!$.isEmptyObject(listaInsumos)) { for (i = 0; i < data.lista.length; i++) { txt += "<tr>"
+ "<td><button type=\"button\" class=\"btn btn-info\" onclick=\"consultar('" + data.lista[i].id_insumo + "')\">" + data.lista[i].id_insumo + "</button></td>"
+ "<td>" + data.lista[i].nombre_insumo + "</td>"
+ "<td>" + data.lista[i].estado + "</td>"
+ "</tr>";
}
console.log("txt: " + txt); $("#tablaDatos > tbody").html(txt); }
});
}
function consultar(id) { $.get("Formulario", {id: id}, function (data) { if (data.encontrado) { $("#minsumo").val(data.id); $("#mdescripcion").val(data.nombre); //$("#mchkestadomaes").val(data.estado);
$("#mchkestadomaes").bootstrapToggle(data.estado === 1 ? 'on' : 'off');
$("#modalDatos").modal("show"); }
});
}
$("#formModal").submit(function (event) { event.preventDefault();
$.ajax({ url: "Formulario?"
+ "id_insumo=" + $("#minsumo").val() + "&descripcion=" + $("#mdescripcion").val() + "&estado=" + ($("#mchkestadomaes").prop('checked') ? 1 : 0),
type: "PUT",
success: function (data) { loadDatos();
alert(data.mensaje);
}
});
});
$("#btnEliminar").click(function(){ $.ajax({ url: "Formulario?id_insumo=" + $("#minsumo").val(), type: "DELETE",
success: function (data) { loadDatos();
alert(data.mensaje);
}
});
});
$(document).ready( function () { $('.AllDataTables').DataTable();
} );
</script>
</body>
</html>
Crear cuenta
