avance de asistencia de policicas

src/main/webapp/js/pages/control_asistencia_policias.js

+let asistencias = [], sedes = [];
+
+function init(){
+    sedes.push({"codigo_sede":1, "nombre_sede": "LINCE"});
+    sedes.push({"codigo_sede":2, "nombre_sede": "AREQUIPA"});
+    sedes.push({"codigo_sede":3, "nombre_sede": "LINCE"});
+    sedes.push({"codigo_sede":4, "nombre_sede": "MONTESORI"});
+    
+}
+
+function listarSedes(){
+    let html = ``;
+    html +=`<label>Sede</label>
+            <select class="form-control" id="cboSedes">`;
+//    for(let i in sedes){
+//        html += `<option>${sedes[]}</option>`;
+//    }
+    
+    sedes.forEach(function(item){
+        html += `<option>${item.nombre_sede}</option>`;
+        
+    });
+    
+    html +=`</select>`;
+    return html;
+}
+
+
+
+function buscar() {
+    let busqueda = "";
+
+    $("#tblAsistenciaPolicias").DataTable().destroy();
+    $("#tblAsistenciaPolicias").DataTable({
+        iDisplayLength: 5,
+        bStateSave: false,
+        autoWidth: false,
+        responsive: true,
+        stateSave: true,
+        columnDefs: [{
+                orderable: false,
+                width: '100px',
+                targets: [8]
+            }],
+        dom: '<"datatable-header"fl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
+        "processing": true,
+        "serverSide": false,
+        "data": asistencias,
+        "columns": [{"data": "fila"},
+            {"data": "nombres"},
+            {"data": "dni"},
+            // {"data": "sede"},
+            {"data": "area"},
+            {"data": "cargo"},
+            {
+                "data": "fecha_asistencia",
+                "className": 'text-center'
+            },
+            {
+                "data": "hora_ingreso",
+                "className": 'text-center'
+            },
+            {
+                "data": "hora_salida",
+                "className": 'text-center'
+            },
+            {
+                "data": "observacion",
+                "className": 'text-center',
+                render: function (data) {
+                    let label = '';
+                    let obs = ['', 'Asistió', 'No marcó', 'Falta con aviso', 'Falta sin aviso', 'Tardanza', 'Vacaciones', 'Feriado', 'LSGH', 'LCGH'];
+                    debugger
+                    switch (data) {
+                        case "1"://Asistió
+                            label = "label label-success";
+                            break;
+                        case "2"://No marco
+                            label = 'label label-info';
+                            break;
+                        case "3"://'Falta con aviso'
+                        case "4"://'Falta sin aviso'
+                            label = 'label label-danger';
+                            break;
+                        case "5"://'Tardanza'
+                            label = 'label label-warning';
+                            break;
+                        case "6"://'Vacaciones'
+                        case "7"://'Feriado'
+                        case "8"://'LSGH'
+                        case "9"://'LCGH'
+                            label = 'label label-primary';
+                            break;
+                        default:
+                            label = 'label label-default';
+                    }
+
+                    debugger
+                    console.log(label);
+
+                    return `<span class="${label}" style="font-size: 12px">${obs[data]}</span>`;
+                }
+            }
+        ],
+        fnInitComplete: function (settings, data) {
+            console.log(data);
+        }
+    });
+
+}
+
+
+//$("#dp").datepicker({
+//    minDate: new Date(1900, 1 - 1, 1), maxDate: '-18Y',
+//    dateFormat: 'dd/mm/yy',
+//    defaultDate: new Date(1970, 1 - 1, 1),
+//    changeMonth: true,
+//    changeYear: true,
+//    yearRange: '-110:-18',
+//    onSelect: function () {
+//        $(this).valid();
+//    }
+//});
+
+
+
+//$("#dtpFechaInicio").datepicker('setDate', 'now');
+
+
+function seleccionCriterio() {
+    $("#cboCriterio").change(function () {
+        let criterio = $(this).val();
+        console.log(criterio);
+        debugger;
+        
+        if (criterio === 'SEDE') {
+            let html = listarSedes();
+            $('#divCriterio').html(html);
+            // debugger
+        } else if (criterio == 'APELLIDOS') {
+            let html = `<label id="lblCriterio">Apellidos</label>
+      <input type="text" class="form-control" id="busqueda" maxlength="50">`;
+            $('#divCriterio').html(html);
+            $('#busqueda').validCampo('abcdefghijklmnopqrstuvwxyzñABCDEFGHIJKLMNOPQRSTUVWXYZÑ ');
+        } else if (criterio == 'DNI') {
+            let html = `<label id="lblCriterio">DNI</label>
+    <div class="input-group" style="width:100%">
+      <input type="text" class="form-control" id="busqueda" maxlength="8">
+    </div>`;
+            $('#divCriterio').html(html);
+            $('#busqueda').validCampo('0123456789');
+        } else {
+            $('#divCriterio').html('');
+        }
+
+
+    });
+}
+
+
+
+$().ready(function () {
+    init();
+    defaultConfigDataTable();
+    $('.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"
+    });
+
+    $("#dpFechaInicio").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();
+        }
+    });
+    $("#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');
+
+    defaultConfigDatePicker();
+    
+    seleccionCriterio();
+    
+});
\ No newline at end of file

src/main/webapp/vistas/controlAsistenciaDocentes.jsp

@@ -83,7 +83,6 @@
                         <div class="text-center">
                             <button class="btn btn-primary" id="btnBuscar"><i class="fa fa-search"></i> Buscar</button>&nbsp;
                             <button class="btn btn-warning" id="btnLimpiar"><i class="fa fa-eraser"></i> Limpiar</button>
-                            <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#modal_default">Launch <i class="icon-play3 position-right"></i></button>
                         </div>
                     </div>
 

src/main/webapp/vistas/controlAsistenciaPolicias.jsp

@@ -4,20 +4,289 @@
 <html>
     <head>
         <%@include file="templates/header.jsp" %>
-         <!--template-core-->
+        <!--template-core-->
         <!--css de la pagina-->
 
         <!--css-->
     </head>
     <body>
         <%@include file="templates/header-body.jsp" %>
-               <!--  content -->
+        <!--  content -->
+        <div class="col-md-6 col-md-offset-3">
+            <div class="panel panel-primary">
+                <div class="panel-heading">
+                    <h5 class="panel-title">Control de Asistencia de Policias</h5>
+                </div>
 
-               <!-- / content -->
+                <form id="frmAsistenciaPolicias" onsubmit="return false;" autocomplete="off">
+                    <div class="panel-body">
+                        <div class="row">
+                            <div class="col-md-3 form-group">
+                                <label>Busqueda por</label>
+                                <select class="form-control" id="cboCriterio">
+                                    <option>SEDE</option>
+                                    <option>APELLIDOS</option>
+                                    <option>DNI</option>
+                                </select>
+                            </div>
+                            <div class="col-md-9 form-group">
+                                <!--                                <label>Busqueda</label>
+                                                                <input type="text" class="form-control"/>-->
+                                <div id="divCriterio"><label>Sede</label>
+                                    <select class="form-control" id="cboSedes">
+                                        <option>LINCE</option>
+                                        <option>AREQUIPA</option>
+                                        <option>LINCE</option>
+                                        <option>MONTESORI</option>
+                                    </select>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="row">
+                            <div class="col-md-6 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-6 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>
+                        </div>
+
+
+                        <div class="row">
+                            <div class="col-md-10 form-group">
+                                <label>Estado</label>
+                                <select class="selectpicker form-control" name="cboSedes" id="cboSedes" multiple>
+                                    <option>PENDIENTE</option>
+                                    <option>FCA</option>
+                                    <option>FSA</option>
+                                    <option>TEMPRANO</option>
+                                    <option>TARDANZA</option>
+                                    <option>NO MARCÓ</option>
+                                </select>
+                            </div>
+                        </div>
+
+                    </div>
+                    <div class="panel-footer">
+                        <div class="text-center">
+                            <button class="btn btn-primary" id="btnBuscar"><i class="fa fa-search"></i> Buscar</button>&nbsp;
+                            <button class="btn btn-warning" id="btnLimpiar"><i class="fa fa-eraser"></i> Limpiar</button>
+                        </div>
+                    </div>
+
+                </form>
+
+            </div>
+        </div>
+
+
+        <div class="col-md-12">
+            <div class="panel panel-primary card-3" style="margin-top: 30px"> 
+                <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; LISTADO DE ASISTENCIAS</h6>
+                </div>
+                <div>
+                    <table class="table dataTable table-striped table-hover table-sm table-bordered" id="tblAsistenciaPolicias">                                                 
+                        <thead>
+                            <tr>
+                                <th>Nº</th>
+                                <!--<th>SEDE</th>-->
+                                <th>APELLIDOS Y NOMBRES</th>
+                                <th>FECHA</th>
+                                <th>HORARIO</th>
+                                <th>TIPO</th>
+                                <th>FRECUENCIA</th>
+                                <th>MARC. ENTRADA</th>
+                                <th>MARC. SALIDA</th>
+                                <th>ESTADO</th>
+                                <th>ACCIONES</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>1</td>
+                                <td>HUAMANI TAIPE, FRANCISCO</td>
+                                <td>26/06/2018</td>
+                                <td>07:00 - 17:00</td>
+                                <td>REGULAR</td>
+                                <td>IMPAR</td>
+                                <td class="text-center">
+                                    <span class="text-success font-weight-bold">06:32</span>
+                                </td>
+                                <td class="text-center">17:23</td>
+                                <td><span class="label label-success">TEMPRANO</span></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>2</td>
+                                <td>LEON GOMEZ, MARIO JOSIMAR</td>
+                                <td>26/06/2018</td>
+                                <td>19:00 - 07:00</td>
+                                <td>AMANECIDA 12H</td>
+                                <td>IMPAR</td>
+                                <td class="text-center">19:07</td>
+                                <td class="text-center">07:02</td>
+                                <td><span class="label label-warning">TARDANZA</span></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>3</td>
+                                <td>ALVITES MARIN, VICTOR MANUEL</td>
+                                <td>26/06/2018</td>
+                                <td>07:00- 17:00</td>
+                                <td>REGULAR</td>
+                                <td>DIARIO</td>
+                                <td class="text-center">-</td>
+                                <td class="text-center">-</td>
+                                <td><span class="label label-danger">FCA</span></td>
+                                <td></td>
+
+                            </tr>
+                            <tr>
+                                <td>4</td>
+                                <td>ALVITES MARIN, VICTOR MANUEL</td>
+                                <td>26/06/2018</td>
+                                <td>07:00- 17:00</td>
+                                <td>REGULAR</td>
+                                <td>PAR</td>
+                                <td class="text-center">-</td>
+                                <td class="text-center">-</td>
+                                <td><span class="label label-danger">FSA</span></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>5</td>
+                                <td>ALVITES MARIN, VICTOR MANUEL</td>
+                                <td>26/06/2018</td>
+                                <td>07:00 - 07:00</td>
+                                <td>AMANECIDA 24H</td>
+                                <td>IMPAR</td>
+                                <td class="text-center">07:24</td>
+                                <td class="text-center">06:58</td>
+                                <td><span class="label label-default">NO MARCÓ</span></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>6</td>
+                                <td>ALVITES MARIN, VICTOR MANUEL</td>
+                                <td>26/06/2018</td>
+                                <td>07:00 - 07:00</td>
+                                <td>AMANECIDA 24H</td>
+                                <td>PAR</td>
+                                <td class="text-center">-</td>
+                                <td class="text-center">-</td>
+                                <td><span class="label label-info">VAC</span></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>7</td>
+                                <td>ALVITES MARIN, VICTOR MANUEL</td>
+                                <td>26/06/2018</td>
+                                <td>07:00 - 17:00</td>
+                                <td>AMANECIDA 24H</td>
+                                <td>DIARIO</td>
+                                <td class="text-center">-</td>
+                                <td class="text-center">-</td>
+                                <td><span class="label label-info">FER</span></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>8</td>
+                                <td>ALVITES MARIN, VICTOR MANUEL</td>
+                                <td>26/06/2018</td>
+                                <td>07:50 - 17:00</td>
+                                <td>REGULAR</td>
+                                <td>UN SOLO DÍA</td>
+                                <td class="text-center">-</td>
+                                <td class="text-center">-</td>
+                                <td><span class="label label-info">LCGH</span></td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td>9</td>
+                                <td>ALVITES MARIN, VICTOR MANUEL</td>
+                                <td>26/06/2018</td>
+                                <td>07:00 - 17:00</td>
+                                <td>REGULAR</td>
+                                <td>IMPAR</td>
+                                <td class="text-center"></td>
+                                <td class="text-center">17:13</td>
+                                <td><span class="label bg-purple">ENTRADA PENDIENTE</span></td>
+                                <td>
+                                    <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>
+                                    <span data-toggle="tooltip" data-placement="left" title="Editar" style="cursor: pointer"> <i class='editar icon-pencil text-slate-800'></i>&nbsp;&nbsp; </span>
+                                    <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>
+                                    <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>
+
+
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>10</td>
+                                <td>ALVITES MARIN, VICTOR MANUEL</td>
+                                <td>26/06/2018</td>
+                                <td>07:00 - 17:00</td>
+                                <td>REGULAR</td>
+                                <td>IMPAR</td>
+                                <td class="text-center">07:28</td>
+                                <td></td>
+                                <td><span class="label bg-purple">SALIDA PENDIENTE</span></td>
+                                <td>
+                                    <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>
+                                    <span data-toggle="tooltip" data-placement="left" title="Editar" style="cursor: pointer"> <i class='editar icon-pencil text-slate-800'></i>&nbsp;&nbsp; </span>
+                                    <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>
+                                    <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>
+
+
+                                </td>
+                            </tr>
+                            <tr>
+                                <td>11</td>
+                                <td>ALVITES MARIN, VICTOR MANUEL</td>
+                                <td>26/06/2018</td>
+                                <td>07:50 - 14:30</td>
+                                <td>REGULAR</td>
+                                <td>DIARIO</td>
+                                <td class="text-center"></td>
+                                <td></td>
+                                <td><span class="label bg-purple">PENDIENTE</span></td>
+                                <td>
+                                    <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>
+                                    <span data-toggle="tooltip" data-placement="left" title="Editar" style="cursor: pointer"> <i class='editar icon-pencil text-slate-800'></i>&nbsp;&nbsp; </span>
+                                    <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>
+                                    <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>
+
+
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+        <!-- / content -->
 
         <%@include file="templates/footer-body.jsp"%>
         <!--js de la pagina-->
 
+
+        <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
+        <script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
+        <script src="../js/lib/bootstrap-select/bootstrap-select.min.js" type="text/javascript"></script>
+        <script type="text/javascript" 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="../js/pages/control_asistencia_policias.js" type="text/javascript"></script>
         <!--js-->   
 
     </body>