control_asistencia_policias.js

let asistencias = [], sedes = [];
let htmlSedes;
function getColumns() {
	let columns = [
		{
			title: `N°`,
			data: `id`,
			className: 'text-center'
		},
		{
			title: `APELLIDOS Y NOMBRES`,
			data: `policia_nombres`
		},
		{
			title: `SEDE`,
			data: `sede_descripcion`,
			className: 'text-center'
		},
		{
			title: `HORARIO`,
			data: `horario`,
			className: 'text-center'
		},
		{
			title: `TIPO`,
			data: `tiporol_descripcion`,
			className: 'text-center'
		},
		{
			title: `FRECUENCIA`,
			data: `frecuencia_descripcion`,
			className: 'text-center'
		},
		{
			title: `FECHA ENTRADA`,
			data: `fecha_entrada`,
			className: 'text-center'
		},
		{
			title: `MARC. ENTRADA`,
			data: null,
			className: 'text-center',
			render: data => {
				let label = "";

				if (data.estado == 3 || data.estado == 4 || data.estado == 9) {
					return `-`;
				}

				if (data.huella_entrada === 1) {
					label = "text-migration font-weight-bold";
				} else if (data.huella_entrada === 0) {
					label = "text-default";
				}
				if (!data.marcacion_entrada) {
					return null;
				}


				return `<span class="${label}">${data.marcacion_entrada}</span>`;
			}
		},
		{
			title: `MARC. SALIDA`,
			data: null,
			className: 'text-center',
			render: (data) => {
				let label = "";

				if (data.estado == 3 || data.estado == 4 || data.estado == 9) {
					return `-`;
				}

				if (data.huella_salida === 1) {
					label = "text-migration font-weight-bold";
				} else if (data.huella_salida === 0) {
					label = "text-default";
				}

				if (!data.marcacion_salida) {
					return null;
				}

				return `<span class="${label}">${data.marcacion_salida}</span>`;
			}
		},
		{
			title: `FECHA SALIDA`,
			data: `fecha_salida`,
			className: 'text-center'
		},
		{
			title: `ESTADO`,
			data: null,
			className: 'text-center',
			render: (data) => {
				let label = "";
				let estado = "";

				switch (data.estado) {
					case 1:
						label = "label label-success";
						estado = "TEMPRANO";
						break;
					case 2:
						label = "label label-warning";
						estado = "TARDANZA";
						break;
					case 3:
						label = "label label-danger";
						estado = "FCA";
						break;
					case 4:
						label = "label label-danger";
						estado = "FSA";
						break;
					case 5:
						label = "label label-default";
						estado = "NO MARCÓ";
						break;
					case 9:
						label = "label label-info";
						estado = "LSGH";
						break;
					case 10:
						label = "label bg-purple";
						estado = "ENTRADA PENDIENTE";
						break;
					case 11:
						label = "label bg-purple";
						estado = "SALIDA PENDIENTE";
						break;
					case null:
					case "":
						label = "label bg-purple";
						estado = "PENDIENTE";
						break;
				}

				return `<span class="${label}">${estado}</span>`;
			}
		},
		{
			title: `ACCIONES`,
			data: null,
			render: (data) => {
				let acciones = "";

				switch (data.estado) {
					case 10:
					case 11:
					case null:
						let registrar = `<span data-toggle="tooltip" data-placement="left" title="Editar" style="cursor: pointer"> <i class='registrar icon-plus-circle2 text-success-700'></i>&nbsp;&nbsp; </span>`;
						let editar = `<span data-toggle="tooltip" data-placement="left" title="Editar" style="cursor: pointer"> <i class='editar icon-pencil text-slate-800'></i>&nbsp;&nbsp; </span>`;
						let aprobar = `<span data-toggle="tooltip" data-placement="left" title="Aprobar" style="cursor: pointer"> <i class='aprobar icon-checkmark-circle text-success-700'></i>&nbsp;&nbsp; </span>`;
						let anular = `<span data-toggle="tooltip" data-placement="left" title="Anular" style="cursor: pointer"> <i class='anular icon-cancel-circle2 text-danger-700'></i>&nbsp;&nbsp; </span>`;

						acciones = registrar;
						break;
				}

				return acciones;
			}
		}
	];

	return columns;
}

function getColumnDefs() {
	let columnDefs = [
		{orderable: false, width: '1%', targets: 0, className: "text-center"},
		{orderable: false, width: '13%', targets: 1},
		{orderable: false, width: '8%', targets: 2, className: "text-center"},
		{orderable: false, width: '5%', targets: 3, className: "text-center"},
		{orderable: false, width: '7%', targets: 4, className: "text-center"},
		{orderable: false, width: '5%', targets: 5, className: "text-center"},
		{orderable: false, width: '6%', targets: 6, className: "text-center"},
		{orderable: false, width: '3%', targets: 7, className: "text-center"},
		{orderable: false, width: '3%', targets: 8, className: "text-center"},
		{orderable: false, width: '6%', targets: 9, className: "text-center"},
		{orderable: false, width: '5%', targets: 10, className: "text-center"},
		{orderable: false, width: '8%', targets: 11, className: "text-center"},
	];
	return columnDefs;
}


function inicializarInputsModal(data = {}){
	$("#spanNombres").html(data.policia_nombres);
	$("#dpAsistencia").datepicker({
		minDate: new Date(2000, 1 - 1, 1), maxDate: new Date(),
		dateFormat: 'dd/mm/yy',
		setDate: 'now',
		changeMonth: true,
		changeYear: true,
		yearRange: '-18:+0',
		onSelect: function () {
//        $(this).valid();
		}
	});
	$("#dpAsistencia").datepicker('setDate', data.fecha_entrada);
	$("#cboTipoRegistro").change(cambioTipoRegistro);
}

function mostrarMensajeResultadoModal(result = {}) {
	if (result.value) {
		swal({
			type: 'success',
			title: '¡Asistencia registrada!',
			showConfirmButton: false,
			timer: 1500
		})
}
}

function mostrarModalRegistroAsistencia(data = {}) {
	ajaxModal.get("policias/controlAsistencia/registrarAsistencia.jspf").then((response) => {
		swal({
			title: '<strong>Registrar Asistencia</strong>',
			html: response.data,
			showCloseButton: true,
			showCancelButton: true,
			focusConfirm: false,
			confirmButtonText: '<i class="fa fa-thumbs-up"></i> Registrar asistencia',
			confirmButtonAriaLabel: 'Thumbs up, great!',
			cancelButtonText: 'Cancelar',
			cancelButtonAriaLabel: 'Thumbs down',
			width: '30%',
			onOpen: () => {
				inicializarInputsModal(data);
			}
		}).then((result) => {
			mostrarMensajeResultadoModal(result);
		});
	});
}
function listarAsistencias(objParams = {}) {
	ajaxWebService.get(URI_POLICIAS_ASISTENCIA, objParams).then((response) => {
		let columns = getColumns();
		let columnDefs = getColumnDefs();
		let wrapsNameDatatable = `divAsistencias`;
		let classNameForDatatable = `display table table-bordered`;
		debugger
		makeDatatable(
		  wrapsNameDatatable,
		  {
			  data: response.data,
			  columns,
			  columnDefs,
		  },
		  classNameForDatatable
		  ).then((nodes) => {
			nodes.container
			  .off()
			  .on("click", ".registrar", function () {
				  let data = nodes.datatable.DataTable().row($(this).parents("tr")).data();
				  mostrarModalRegistroAsistencia(data);
			  });
		});
	}
	);
}
function listarPolicias(selectorName) {
	ajaxWebService.get(URI_POLICIAS).then((result) => {
		let policias = result.data;
		policias = _.orderBy(policias, p => p.nombres);
		let html = `<option value="">[TODOS]</option>`;
		policias.forEach(p => html += `<option documento_identidad="${p.dni}" value="${p.id}">${p.nombres}</option>`);
		$(`${selectorName}`).html(html);
		$('.select-search').select2();
	});
}


function listarEstadoAsistencia() {
	ajaxWebService.get(URI_ESTADO_ASISTENCIA).then((response) => {
		let estados = response.data;
		let html = "";
		estados.forEach(e => html += `<option value="${e.codigo}">${e.nombre}</option>`);
		$("#cboEstadoAsistencia").html(html);
		$("#cboEstadoAsistencia").selectpicker('refresh');
		$('.selectpicker').selectpicker({
			style: 'btn-info',
			size: 4
		});
		$(".btn.dropdown-toggle.bs-placeholder").removeClass("btn-info");
		$(".btn.dropdown-toggle.bs-placeholder").css({
			border: "1px solid #ddd",
			backgroundColor: "#fff"
		});
	});
}

function cambioTipoRegistro() {
	debugger
	let criterio = $(this).val();
	console.log(criterio);
	if (criterio == 0) {
		let html = ``;
		$("#divFiltroModal").html(html);
	}
	if (criterio == 1 || criterio == 2) {
		let html =
		  `<div class=''>                        
                        <div class="form-group col-md-6">                                            
                           <label style="font-size: small">
                               Marcación: 
                           </label>
                           <span class="text-danger"> (*)</span>
                           <select id="cboTipoAsistencia" class="form-control">
                                        <option value="0">[SELECCIONE]</option>
                                        <option value="1">ENTRADA</option>
                                        <option value="2">SALIDA</option>
                            </select>                                            
                       </div>
                       <div class="form-group col-md-6">                                            
                           <label style="font-size: small">
                               Hora: 
                           </label>
                           <span class="text-danger"> (*)</span>
                           <input type="time" id="txtHora" name="txtHora" value="" class="form-control" placeholder="Ingrese la hora" style="text-transform:uppercase;">                                            
                       </div> 
                    </div>`;
		$("#divFiltroModal").html(html);
	} else if (criterio == 3 || criterio == 4) {
		let html =
		  `<div class='col-md-12'>
                       <div class="form-group">                                            
                           <label style="font-size: small">
                               Observación: 
                           </label>
                           <span class="text-danger"> (*)</span>
                           <textarea type="text" id="txtObservacion" name="txtObservacion" value="" class="form-control" placeholder="Ingrese el motivo de la falta" rows="3" style="resize: none;"/>                                            
                       </div> 
                   </div>`;
		$("#divFiltroModal").html(html);
	}
}


function buscar() {
	debugger
	let policia_id = $("#cboPoliciasFiltro").val();
	let sede_id = $("#cboSedesFiltro").val();
	let estadoAsistencia = $("#cboEstadoAsistencia").val();
	let fechaInicio = $("#dpFechaInicio").val();
	let fechaFin = $("#dpFechaFin").val();

	let rangoFechas = generarFechas(fechaInicio, fechaFin);

	let params = cleanQueryParams({
		policia_id,
		sede_id,
		fecha_entrada: rangoFechas,
		estado: estadoAsistencia
	});
	debugger
	listarAsistencias({params});
}

$().ready(function () {
	defaultConfigDatePicker();
	listarEstadoAsistencia();
	listarPolicias("#cboPoliciasFiltro");
	listarSedes("#cboSedesFiltro");
	$('.selectpicker').selectpicker({
		style: 'btn-info',
		size: 4
	});


	$(".btn.dropdown-toggle.bs-placeholder").removeClass("btn-info");
	$(".btn.dropdown-toggle.bs-placeholder").css({
		border: "1px solid #ddd",
		backgroundColor: "#fff"
	});

	initDatePicker("#dpFechaInicio", "#dpFechaFin");
	$("#btnVerTodos").click(listarAsistencias);
	$("#btnAplicarFiltro").click(buscar);
});