Skip to content

A
Asistencia
Commit b9f72db6 by Billy Larru
Options

mostrando registros en el proyectado comparativo

parent 9f6ee97a
Showing with 182 additions and 298 deletions
src/main/webapp/js/general.js
...@@ -28,6 +28,7 @@ const URI_POLICIA_MONTOS_AMANECIDAS = "montoAmanecidas"; ...@@ -28,6 +28,7 @@ const URI_POLICIA_MONTOS_AMANECIDAS = "montoAmanecidas";
const URI_POLICIA_CONCEPTOSEDES = "conceptoSedes"; const URI_POLICIA_CONCEPTOSEDES = "conceptoSedes";
const URI_POLICIA_REPORTE_MONTOS = "reporteMontosPolicias"; const URI_POLICIA_REPORTE_MONTOS = "reporteMontosPolicias";
const URI_POLICIA_PROYECCION = "proyeccion"; const URI_POLICIA_PROYECCION = "proyeccion";
const URI_POLICIA_PROYECTADO_COMPARATIVO = "proyectadoComparativo";
//</editor-fold> //</editor-fold>
...@@ -74,7 +75,7 @@ ajaxWebService.interceptors.response.use(function (response) { ...@@ -74,7 +75,7 @@ ajaxWebService.interceptors.response.use(function (response) {
message: response.data.message || `Operación exitosa`, message: response.data.message || `Operación exitosa`,
data: response.data.data || response.data data: response.data.data || response.data
}; };
console.log(respuesta, moment().format("YYYY/DD/MM HH:MM:SS s")) // console.log(respuesta, moment().format("YYYY/DD/MM HH:MM:SS s"))
return respuesta; return respuesta;
}, function (error) { }, function (error) {
// Do something with response error // Do something with response error
...@@ -425,3 +426,23 @@ const cleanQueryParams = (params = {}) => { ...@@ -425,3 +426,23 @@ const cleanQueryParams = (params = {}) => {
return params; return params;
} }
let initDatePicker = (...selectorName) => {
selectorName.forEach(id => {
let options = {
minDate: new Date(2000, 1 - 1, 1), maxDate: new Date(),
dateFormat: 'dd/mm/yy',
defaultDate: new Date(),
changeMonth: true,
changeYear: true,
yearRange: '-18:+0',
zIndexOffset: 3000,
onSelect: function () {
// $(this).valid();
}
}
$(id).datepicker(options);
$(id).datepicker('setDate', 'now');
});
}
\ No newline at end of file
src/main/webapp/js/pages/comparativo_proyeccion_policias.js
const URI_LISTAR_PROYECTADO_COMPARATIVO = ""; function getColumns() {
function initilizeData() { let columns = [
{
} title: `N°`,
data: `id`,
className: 'text-center'
function seleccionarCriterio() {
let criterio = $(this).val();
if (criterio === "PERIODO") {
let html = `<div class="col-md-8 form-group">
<label>Periodo</label>
<select id="cboPeriodo" class="form-control">
<option>JUNIO 2018 - 1° QUINCENA</option>
<option>JUNIO 2018 - 2° QUINCENA</option>
<option>JULIO 2018 - 1° QUINCENA</option>
<option>AGOSTO 2018 - 2° QUINCENA</option>
</select>
</div>`;
$("#divCriterio").html(html);
} else if (criterio === "FECHA") {
let html = `<div class="col-md-4 form-group">
<label>Fecha Inicio</label>
<div class="input-group">
<span class="input-group-addon"><i class="icon-calendar"></i></span>
<input type="text" class="form-control" id="dpFechaInicio" name="dpFechaInicio" placeholder="Fecha inicio &hellip;">
</div>
</div>
<div class="col-md-4 form-group">
<label>Fecha Fin</label>
<div class="input-group">
<span class="input-group-addon"><i class="icon-calendar"></i></span>
<input type="text" class="form-control" id="dpFechaFin" name="dpFechaFin" placeholder="Fecha fin &hellip;">
</div>
</div>`;
$("#divCriterio").html(html);
initDatePicker();
} else {
$("#divCriterio").html('');
}
}
function buscar() {
// let datos = [];
// let criterioPersonal = $("#cboCriterioPersonal").val();
// if (criterioPersonal === "dni" || criterioPersonal === "nombres") {
// let busquedaPersonal = $("#txtBusquedaPersonal").val();
// datos = _.filter(data, p => p[criterioPersonal].toLowerCase().startsWith(busquedaPersonal.toLowerCase()));
// debugger;
// } else {
// datos = data;
// }
// let numero = 1;
// datos.forEach(p => p["numeroFila"] = numero++);
$("#tblProyectadoComparativo").DataTable().destroy();
$("#tblProyectadoComparativo").DataTable({
"language": {
"lengthMenu": "Mostrar: _MENU_",
"zeroRecords": "&nbsp;&nbsp;&nbsp; No se encontraron resultados",
"info": "&nbsp;&nbsp;&nbsp; Mostrando del _START_ al _END_ de un total de _TOTAL_ registros",
"infoEmpty": "&nbsp;&nbsp;&nbsp; Mostrando 0 de 0 registros",
"search": "Filtrar:",
"loadingRecords": "Cargando...",
"processing": '<span style="width:100%;"><img src="http://www.snacklocal.com/images/ajaxload.gif"></span>',
"paginate": {
"first": "First",
"last": "Last",
"next": "Siguiente",
"previous": "Anterior"
}
}, },
"bSort": false, {
"bFilter": false, title: `DNI`,
"aaSorting": [], data: `policia_dni`,
"ordering": false, className: `text-center`,
"bLengthChange": false,
"bInfo": true,
"paging": true,
iDisplayLength: 20,
bStateSave: false,
autoWidth: false,
responsive: true,
stateSave: true,
columnDefs: [
{orderable: false, width: '5%', targets: 0, className: "text-center"},
{orderable: false, width: '5%', targets: 1},
{orderable: false, width: '30%', targets: 2, className: "text-center"},
{orderable: false, width: '7%', targets: 3, className: "text-center"},
{orderable: false, width: '7%', targets: 4, className: "text-center"},
{orderable: false, width: '10%', targets: 5, className: "text-center"},
{orderable: false, width: '8%', targets: 6, className: "text-center"},
{orderable: false, width: '8%', targets: 7, className: "text-center"},
{orderable: false, width: '8%', targets: 8, className: "text-center"},
{orderable: false, width: '8%', targets: 9, className: "text-center"},
{orderable: false, width: '8%', targets: 10, className: "text-center"},
{orderable: false, width: '8%', targets: 11, className: "text-center"},
{orderable: false, width: '8%', targets: 12, className: "text-center"},
{orderable: false, width: '8%', targets: 13, className: "text-center"},
{orderable: false, width: '8%', targets: 14, className: "text-center"}
],
dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
"processing": true,
ajax: {
contentType: 'application/json; charset=utf-8',
url: URI_LISTAR_PROYECTADO_COMPARATIVO,
// data: {
// busqueda: busqueda
// }
// ,
beforeSend: function () {
// cargando();
}, complete: function () {
// localStorage.removeItem("dniBuscar");
// dniBuscar=null;
// cerrar_cargando();
}
}, },
columns: [
{data: "numeroFila", className: "text-center"},
{data: "dni"},
{data: "nombres"},
{ {
data: "turno", title: `APELLIDOS Y NOMBRES`,
render: data => { data: `policia_nombres`,
let label; className: 'text-center'
switch (data) {
case "REGULAR":
label = "label label-primary";
break;
case "AMANECIDA 24H":
label = "label label-success border-success-700";
break;
case "AMANECIDA 12H":
label = "label label-warning border-warning-700";
break;
default:
label = "label label-default";
}
return `<span class="${label}">${data}</span>`;
}
}, },
{data: "sede", className: "text-center", render: sede => `<span class="label bg-brown-400 border-brown-700">${sede}</span>`},
{data: "costo", className: "text-center", render: costo => parseFloat(costo).toFixed(2)},
{data: "fecha_entrada", className: "text-center"},
{data: "entrada_proyectada", className: "text-center"},
{ {
data: "marcacion_entrada", title: `TURNO`,
className: "text-center", data: `tiporol_descripcion`,
render: data => { className: `text-center`,
let label;
console.log(data);
if (data === "0:00") {
data = "NO MARCÓ";
label = "text-danger";
}
return `<span class="${label}">${data}</span>`;
}
}, },
// {data: "diferencia_entrada", className: "text-center"},
{data: "fecha_salida", className: "text-center"},
{data: "salida_proyectada", className: "text-center"},
{ {
data: "marcacion_salida", title: `SEDE`,
className: 'text-center', data: `sede_descripcion`,
render: data => { className: `text-center`,
let label;
console.log(data);
if (data === "0:00") {
data = "NO MARCÓ";
label = "text-danger";
}
return `<span class="${label}">${data}</span>`;
}
}, },
// {data: "diferencia_salida", className: 'text-center'},
{data: "diferencia_total", className: 'text-center', render: data => `${data} min`},
{ {
data: "monto", title: `COSTO`,
className: 'text-center', data: `costo`,
render: monto => { className: `text-center`,
let label;
if (monto > 0) {
label = "text-sucess";
} else if (monto < 0) {
label = "text-danger";
} else {
label = "";
}
let numeroReal = parseFloat(monto).toFixed(2);
return `<label class="${label}">${numeroReal}</label>`;
}
}, },
{data: "observacion", className: 'text-center'}, {
], title: `FECHA ENTRADA`,
fnInitComplete: function (settings, data) { data: `fecha_entrada`,
$('th').removeClass('sorting_asc'); className: `text-center`,
// console.log(data); },
} {
}); title: `HORA ENTRADA`,
data: `entrada_proyectada`,
className: `text-center`,
},
{
title: `HORA ENTRADA REAL`,
data: `marcacion_entrada`,
className: `text-center`,
},
{
title: `DIFERENCIA ENTRADA(min)`,
data: `diferencia_entrada`,
className: `text-center`,
},
{
title: `FECHA SALIDA`,
data: `fecha_salida`,
className: `text-center`,
},
{
title: `HORA SALIDA`,
data: `salida_proyectada`,
className: `text-center`,
},
{
title: `HORA SALIDA REAL`,
data: `marcacion_salida`,
className: `text-center`,
},
{
title: `DIFERENCIA DE SALIDAS(min)`,
data: `diferencia_salida`,
className: `text-center`,
},
{
title: `DIFERENCIA TOTAL`,
data: `diferencia_total`,
className: `text-center`,
},
{
title: `MONTO`,
data: `monto`,
className: `text-center`,
},
{
title: `OBSERVACION`,
data: `observacion`,
className: `text-center`,
},
];
return columns;
} }
function getColumnDefs() {
let columnDefs = [
{orderable: false, width: '3%', targets: 0, className: "text-center"},
{orderable: false, width: '10%', targets: 1, className: "text-center"},
{orderable: false, width: '30%', targets: 2, className: "text-center"},
{orderable: false, width: '7%', targets: 3, className: "text-center"},
{orderable: false, width: '7%', targets: 4, className: "text-center"},
{orderable: false, width: '7%', targets: 5, className: "text-center"},
{orderable: false, width: '7%', targets: 6, className: "text-center"},
{orderable: false, width: '7%', targets: 7, className: "text-center"},
{orderable: false, width: '7%', targets: 8, className: "text-center"},
{orderable: false, width: '7%', targets: 9, className: "text-center"},
{orderable: false, width: '7%', targets: 10, className: "text-center"},
{orderable: false, width: '7%', targets: 11, className: "text-center"},
{orderable: false, width: '7%', targets: 12, className: "text-center"},
{orderable: false, width: '7%', targets: 13, className: "text-center"},
{orderable: false, width: '7%', targets: 14, className: "text-center"},
{orderable: false, width: '7%', targets: 15, className: "text-center"},
{orderable: false, width: '7%', targets: 16, className: "text-center"},
];
return columnDefs;
}
function initDatePicker() { function listarPolicias(selectorName) {
$("#dpFechaInicio").datepicker({ ajaxWebService.get(URI_POLICIAS).then((result) => {
minDate: new Date(2000, 1 - 1, 1), maxDate: new Date(), let policias = result.data;
dateFormat: 'dd/mm/yy', policias = _.orderBy(policias, p => p.nombres);
defaultDate: new Date(), let html = `<option value="">[TODOS]</option>`;
changeMonth: true, policias.forEach(p => html += `<option documento_identidad="${p.dni}" value="${p.id}">${p.nombres}</option>`);
changeYear: true, $(`${selectorName}`).html(html);
yearRange: '-18:+0', $('.select-search').select2();
onSelect: function () {
// $(this).valid();
}
});
$("#dpFechaInicio").datepicker('setDate', 'now');
$("#dpFechaFin").datepicker({
minDate: new Date(2000, 1 - 1, 1), maxDate: new Date(),
dateFormat: 'dd/mm/yy',
defaultDate: new Date(),
changeMonth: true,
changeYear: true,
yearRange: '-18:+0',
onSelect: function () {
// $(this).valid();
}
}); });
$("#dpFechaFin").datepicker('setDate', 'now');
} }
function pintarCriterioPersonal() { function verReporte(objParams = {}) {
let criterio = $(this).val(); ajaxWebService.get(URI_POLICIA_PROYECTADO_COMPARATIVO, objParams).then((response) => {
if (criterio === "dni") { let columns = getColumns();
let html = `<div class="col-md-8 form-group"> let columnDefs = getColumnDefs();
<label>DNI</label>
<input type="text" class="form-control" id="txtBusquedaPersonal"></input> let wrapsNameDatatable = `divDatatable`;
</div>`; let classNameForDatatable = `display table table-bordered`;
$("#divCriterioPersonal").html(html); let footer = false;
} else if (criterio === "nombres") {
let html = `<div class="col-md-8 form-group"> makeDatatable(
<label>Apellidos</label> {
<input type="text" class="form-control" id="txtBusquedaPersonal"></input> data: response.data,
</div>`; columns,
$("#divCriterioPersonal").html(html); columnDefs,
initDatePicker(); wrapsNameDatatable,
} else { classNameForDatatable,
$("#divCriterioPersonal").html(''); footer
}
)
} }
);
} }
$().ready(function () { $().ready(function () {
initilizeData(); let nameDatePickers = ["#dpFechaInicio", "#dpFechaFin"];
defaultConfigDatePicker(); initDatePicker(...nameDatePickers);
$("#cboCriterio").change(seleccionarCriterio); listarPolicias("#cboPolicias");
$("#btnBuscar").click(buscar); $("#btnVerReporte").click(verReporte);
$("#cboCriterioPersonal").change(pintarCriterioPersonal);
}); });
\ No newline at end of file
src/main/webapp/vistas/comparativoProyeccionPolicias.jsp
...@@ -6,94 +6,57 @@ ...@@ -6,94 +6,57 @@
<%@include file="templates/header.jsp" %> <%@include file="templates/header.jsp" %>
<!--template-core--> <!--template-core-->
<!--css de la pagina--> <!--css de la pagina-->
<link href="../css/lib/sweetalert2.min.css" rel="stylesheet" type="text/css"/>
<!--css--> <!--css-->
</head> </head>
<body> <body>
<%@include file="templates/header-body.jsp" %> <%@include file="templates/header-body.jsp" %>
<!-- content --> <!-- content -->
<div class="row">
<div class="col-md-4 col-md-offset-4"> <div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary"> <div class="panel panel-primary">
<div class="panel-heading"> <div class="panel-heading">
<h5 class="panel-title">Proyectado comparativo</h5> <h5 class="panel-title">Reporte comparativo de proyeccion</h5>
</div> </div>
<form id="frmComparativoProyectado" onsubmit="return false;" autocomplete="off">
<div class="panel-body"> <div class="panel-body">
<div class="row"> <div class="row">
<div class="col-md-4 form-group"> <div class="col-md-6 form-group">
<label>Busqueda por</label> <label>Fecha Inicio:</label>
<select class="form-control" id="cboCriterio"> <input type="text" class="form-control" id="dpFechaInicio">
<option>[SELECCIONE]</option>
<option>PERIODO</option>
<option>FECHA</option>
</select>
</div>
<div id="divCriterio">
</div> </div>
<div class="col-md-6 form-group">
<label>Fecha Fin</label>
<input type="text" class="form-control" id="dpFechaFin">
</div> </div>
<div class="row">
<div class="col-md-4">
<label>Personal</label>
<select class="form-control" id="cboCriterioPersonal">
<option>[SELECCIONE]</option>
<option value="dni">DNI</option>
<option value="nombres">APELLIDOS</option>
<option value="*">TODOS</option>
</select>
</div> </div>
<div id="divCriterioPersonal">
<div class="row">
<div class="col-md-12 form-group">
<label>Policia</label>
<select class="select-search form-control" id="cboPolicias"></select>
</div> </div>
</div> </div>
</div> </div>
<div class="panel-footer"> <div class="panel-footer">
<div class="text-center"> <div class="text-center">
<button class="btn btn-primary" id="btnBuscar"><i class="fa fa-search"></i> Buscar</button>&nbsp; <button class="btn btn-primary" id="btnVerReporte"><i class="icon-eye4"></i> Ver reporte</button>&nbsp;
<button class="btn btn-warning" id="btnLimpiar"><i class="fa fa-eraser"></i> Limpiar</button> </div>
</div> </div>
</div> </div>
</form>
</div> </div>
</div> </div>
<div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="panel panel-primary card-3" style="margin-top: 30px"> <div class="panel panel-primary card-3" style="margin-top: 30px">
<div class="panel-heading" style="padding: 8px 15px"> <div class="panel-heading" style="padding: 8px 15px">
<h6 class="panel-title" style="font-size: 15px; font-family: inherit"><i class="icon icon-search4"></i>&nbsp; PROYECCION</h6> <h6 class="panel-title" style="font-size: 15px; font-family: inherit"><i class="icon icon-search4"></i>&nbsp; Comparativo de proyeccion y marcacion</h6>
</div> </div>
<div> <div id="divDatatable"></div>
<table class="table dataTable table-striped table-hover table-sm table-bordered display" id="tblProyectadoComparativo">
<thead>
<tr>
<th class="text-center">Nº</th>
<th class="text-center">DNI</th>
<th class="text-center">APELLIDOS Y NOMBRES</th>
<th class="text-center">TURNO</th>
<th class="text-center">SEDE</th>
<th class="text-center">COSTO</th>
<th class="text-center">FECHA ENTRADA</th>
<th class="text-center">ENTRADA PROY.</th>
<th class="text-center">MARC. ENTRADA</th>
<!--<th class="text-center">DIF. ENTRADA(min)</th>-->
<th class="text-center">FECHA SALIDA</th>
<th class="text-center">SALIDA PROY.</th>
<th class="text-center">MARC. SALIDA</th>
<!--<th class="text-center">DIF. SALIDA(min)</th>-->
<th class="text-center">DIF. TOTAL</th>
<th class="text-center">MONTO</th>
<th class="text-center">OBS.</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
...@@ -104,10 +67,12 @@ ...@@ -104,10 +67,12 @@
<!--js de la pagina--> <!--js de la pagina-->
<script src="../plantilla/assets/js/plugins/tables/datatables/datatables.min.js" type="text/javascript"></script> <script src="../plantilla/assets/js/plugins/tables/datatables/datatables.min.js" type="text/javascript"></script>
<script src="../plantilla/assets/js/plugins/ui/moment/moment.min.js" type="text/javascript"></script> <script src="../plantilla/assets/js/plugins/ui/moment/moment.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../plantilla/assets/js/plugins/pickers/daterangepicker.js"></script> <script src="../plantilla/assets/js/plugins/pickers/daterangepicker.js"></script>
<script type="text/javascript" src="../plantilla/assets/js/core/libraries/jquery_ui/widgets.min.js"></script> <script src="../plantilla/assets/js/core/libraries/jquery_ui/widgets.min.js"></script>
<script src="../js/lib/lodash.js" type="text/javascript"></script> <script src="../js/lib/lodash.js" type="text/javascript"></script>
<script src="../js/lib/axios.min.js" type="text/javascript"></script> <script src="../js/lib/axios.min.js" type="text/javascript"></script>
<script src="../js/lib/sweetalert2.min.js" type="text/javascript"></script>
<script src="../plantilla/assets/js/plugins/forms/selects/select2.min.js"></script>
<script src="../js/pages/comparativo_proyeccion_policias.js" type="text/javascript"></script> <script src="../js/pages/comparativo_proyeccion_policias.js" type="text/javascript"></script>
<!--js--> <!--js-->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment