controlAsistenciaDocentes.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 = "";

    $("#tblAsistenciaDocentes").DataTable().destroy();
    $("#tblAsistenciaDocentes").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();
    
});