checadores/js/checador.js

var msgTime = 0;
var modalVisible = false;
var ultimos = [];
var checkInterval = null;

function az(i) {
    return `${i < 10 ? '0' : ''}${i}`;
}
function init() {
    setInterval(function () {
        var current_time = new Date().getTime();
        var excecution_time = parseInt((current_time - started_at) / 1000);

        var s = new Date((server_time + excecution_time) * 1000);
        drawClock(az(s.getHours()), az(s.getMinutes()));
        drawFecha(az(s.getDate()), s.getDay(), s.getMonth(), s.getFullYear());
    }, 1000);
}

function drawClock(hora, min) {
    $('#min').text(min);
    $('#hr').text(hora);
}

function drawFecha(dd, dnum, mm, yyyy) {
    var meses = ['Ene', 'Feb', 'Mzo', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'];
    $('#fecha').text(' ' + meses[mm] + ' ' + dd);
    $('#ano').text(yyyy);
}

function modalTimer() {
    if (checkInterval === null) {//no es error de internet
        setTimeout(function () {
            $(".sub-bloque ").addClass("d-none");
            $("#registro").removeClass("d-none");
            $("#cve").focus();
        }
            , 7000 + msgTime);
    }
}

//--Sin conexión de internet ---
function checadorAlive() {
    if (checkInterval == null) {
        checkInterval = setInterval(isAlive, 2500);
    }
}
function isAlive() {
    var alive = false;
    try {
        $.ajax({
            url: 'checador_alive.php',
            type: 'POST',
            dataType: 'json',
            async: false,
            timeout: 500,/*ms*/
            success: function (result) {
                if (result["ok"] != "" && result["ok"] !== undefined) {
                    cambiaVista('.sub-bloque', '#registro');
                    $('#db-error').text(result.error);
                    $("#cve").focus();
                    alive = true;
                    clearInterval(checkInterval);
                    checkInterval = null;
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log("Sin internet");
            }
        });//ajax*/
    } catch (e) {
        console.log("error! ", e);
    }
    return alive;
}
//--Fin sin conexión de internet ---

function cambiaVista(objHide, objShow) {
    $(objHide).addClass("d-none");
    $(objShow).removeClass("d-none");
}

function showAviso(avisos) {
    cambiaVista('#registro', '#avisos');

    const lista = document.querySelector('#lista-avisos');
    lista.innerHTML = '';
    avisos.forEach(({ aviso_texto: texto }) => {
        const li = document.createElement('li');
        li.innerHTML = texto;
        lista.appendChild(li);
    });
}
/*
$('#formaChecador').on('submit', function (e) {
    e.preventDefault();
    var clave = $("#cve").val();
    console.log("clave: ", clave);
    $.ajax({
        url: 'checador_action.php',
        type: 'POST',
        dataType: 'json',
        data: { cve: $("#cve").val(), facultad: $("#facultad_id").val() },
        timeout: 3500,
        success: function (result) {
            if ((result?.error ?? "") != "") {
                console.log(result["error"]);
                // avisos

                // alert("here")
                if (result.nombre != undefined && result.ok == undefined) {
                    showAviso(result.avisos);
                    return
                    cambiaVista('#registro', '#result_no');
                    $("#nombre-profesor").text(result["nombre"]);
                    $('#result_no .clave').text(clave);
                    $("#last-error").text(result["error"]);
                }
                else if(result.nombre == undefined) {
                        cambiaVista('#registro', '#not_in_db');
                        $('#clave-no-encontrada').html(clave);
                } else
                
                cambiaVista('#registro', '#internet');

                return;
            }

            $("#list-result").find(".mat-desc").html("");
            $("#list-result").find(".mat-fecha").html("");
            $("#list-result").find(".mat-salon").html("");
            $("#list-result").find(".mat-gpo").html("");

            $("#nombre").html(result["nombre"]);

            var rows = $("#list-result > li").length;//limpia tabla actual
            var resultRows = 0;
            //nuevas
            if (result["result"] !== undefined && result["result"] != null) resultRows += result["result"].length;
            //viejas
            if (result["asistencias"] !== undefined && result["asistencias"] != null) resultRows += result["asistencias"].length;

            if (rows > resultRows) {//sobran
                //borrar renglones extra (rows - result.length) pero dejar al menos 1
                while (rows > resultRows && rows > 1) {
                    $("#list-result li:last-child").remove();
                    rows--;
                }
            } else {//faltan, clonar
                for (var i = rows; i < resultRows; i++) {
                    $("#list-result li:first-child").clone(true).appendTo("#list-result");
                }
            }

            //----------
            var retardo = false;
            //hay elementos checado nuevo?
            if (result["result"] !== undefined && result["result"] != null && result["result"].length != 0) {
                cambiaVista('#registro', '#result_ok');
                $("#list-result").children().each(function (index) {
                    if (index < result["result"].length) {//llenar info
                        if (result["result"][index]["grupo"] != "") {
                            if (result["result"][index]["retardo"]) {
                                retardo = true;
                            } else {
                                retardo = false;
                            }
                            $(this).find(".mat-gpo").html("<b>Grupo:</b> " + result["result"][index]["grupo"]);
                        }
                        $(this).find(".mat-desc").html(result["result"][index]["materia"]);
                        $(this).find(".mat-fecha").html("Inicia " + result["result"][index]["hora_inicio"]);
                        if (result["result"][index]["salon"] != "")
                            $(this).find(".mat-salon").html("<b>Salón:</b> " + result["result"][index]["salon"]);
                        //else $(this).find(".mat-salon").html("");
                    }
                });
            }
            var texto = "";
            //hay elementos checado anterior?
            if (result["asistencias"] !== undefined && result["asistencias"] != null && result["asistencias"].length != 0) {
                cambiaVista('#registro', '#result_ok');
                $("#list-result").children().each(function (index) {
                    if (index < result["asistencias"].length) {//llenar info
                        if (result["asistencias"][index]["grupo"] != "") {
                            if (result["asistencias"][index]["retardo"]) {
                                retardo = true;
                            } else {
                                retardo = false;
                            }
                            $(this).find(".mat-gpo").html("<b>Grupo:</b> " + result["asistencias"][index]["grupo"]);
                        }
                        $(this).find(".mat-desc").html(result["asistencias"][index]["materia"]);
                        $(this).find(".mat-fecha").html("Inicia " + result["asistencias"][index]["hora_inicio"]);
                        texto = "<span style=font-size:50%>" +
                                "Ya estaba registrada" +
                                "</span>"
                        if (result["asistencias"][index]["salon"] !== undefined && result["asistencias"][index]["salon"] != "")
                            $(this).find(".mat-salon").html("<b>Salón:</b> " + result["asistencias"][index]["salon"]);
                    }
                });
            }
            console.log(texto);
            if (retardo) {
                $("#estado").find("img").prop("src", "imagenes/retardo.svg");
                $("#estado").find("h2").text("Retardo").removeClass("text-success text-blue").addClass("text-warning");
            } else {
                $("#estado").find("img").prop("src", "imagenes/asistencia.svg");
                if (texto == "")
                    $("#estado").find("h2").text("Asistencia").removeClass("text-warning text-blue").addClass("text-success");
                else
                    $("#estado").find("h2").html("Asistencia<br>" + texto).removeClass("text-warning text-success").addClass("text-blue");
            }


            if (result.nombre.replace(/ /g, '') == "") {
                // if (false) {
                console.log(clave)
                cambiaVista('#registro', '#not_in_db');
                $("#clave-no-encontrada").html(clave);
            } else if (resultRows == 0) {
                console.log(result)
                //$("#nombre-profesor").text(result["nombre"]);
                cambiaVista('#registro', '#result_no');
            }
            
        },
        error: function (jqXHR, textStatus, errorThrown) {
            cambiaVista('#registro', '#internet');
            $('#db-error').text(textStatus);
            checadorAlive();//Muestra mensaje sin internet y comienza a checar hasta que haya
        },
        complete: function (jqXHR, textStatus) {
            $("#cve").val('');
            modalTimer();
        }
    });
});
 */

document.querySelector('#formaChecador').addEventListener('submit', async (e) => {
    e.preventDefault();
    const clave = document.querySelector('#cve');
    if (clave.value == '') {
        clave.focus(); return;
    }

    const data = new FormData();
    data.append('cve', clave.value);

    const btn = document.querySelector('#btnChecar');
    // remove btn
    btn.classList.add('disabled');
    // add spinner
    btn.insertAdjacentHTML('afterbegin', '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');

    try {
        const result = await fetch('action_checador.php', {
            method: 'POST',
            body: data
        }).then(response => response.json());

        if (!result.ok) {
            function not_int_db(clave) {
                cambiaVista('#registro', '#not_in_db');
                document.querySelector('#clave-no-encontrada').innerHTML = clave;
            }
            function not_has_horario(nombre_profesor, from = '#registro') {
                cambiaVista(from, '#result_no');
                document.querySelector('#nombre-profesor').innerHTML = nombre_profesor;
            }

            switch (result.failure) {
                case 'profesor':
                    not_int_db(clave.value);
                    break;
                case 'horario':
                    let from;
                    if (result.avisos.length > 0) {
                        await show_avisos(result.avisos)
                        from = '#avisos';
                    }
                    else
                        from = '#registro';
                    not_has_horario(result.nombre, from);
                    break;
                default:
                    alert('La clave no es válida');
                    location.reload();

            }
            setTimeout(() => {
                location.reload();
            }, 5000);
            return;
        }

        function show_avisos(avisos) {
            return new Promise(resolve => {
                if (avisos.length == 0) {
                    resolve();
                    return;
                }

                const lista_avisos = document.querySelector('#lista-avisos');
                avisos.forEach(aviso => lista_avisos.innerHTML += `<p>${aviso}</p><hr>`);
                cambiaVista('#registro', '#avisos');
                //$('#btn-aceptar-avisos').focus();
                document.querySelector('#btn-aceptar-avisos').addEventListener('click', () => {
                    lista_avisos.innerHTML = '';
                    resolve();
                });
            });
        }

        function show_asistencia(nombre, horarios, from) {
            cambiaVista(from, '#result_ok');
            document.querySelector('#nombre').innerHTML = nombre;

            const list_result = document.querySelector('#list-result');
            const li_facultad_nombre = list_result.children[0];
            const li_element = list_result.children[1];
            list_result.innerHTML = '';
            // foreach key is facultad (string), value
            for (let facultad_nombre in horarios) {
                let facultad = li_facultad_nombre.cloneNode(true);
                facultad.innerHTML = facultad_nombre;
                facultad = list_result.appendChild(facultad);
                horarios[facultad_nombre].forEach(horario => {
                    console.log(horario);
                    let li = li_element.cloneNode(true);
                    li = list_result.appendChild(li);
                    li.querySelector(".mat-desc").innerHTML = horario.materia;
                    li.querySelector(".mat-fecha").innerHTML = `Inicia ${horario.horario_hora.slice(0, -3)}`;

                    li.querySelector(".salon").innerHTML = horario.salon;
                    li.querySelector(".mat-gpo").innerHTML = horario.horario_grupo;
                })
            }
            const estado = document.querySelector('#estado');
            //estado.querySelector('img').src = 'imagenes/asistencia.svg';
            $('#icon_retardo').hide();
            $('#icon_duplicada').hide();
            $('#icon_asistencia').show();
            const h2 = estado.querySelector('.text-big');
            h2.innerHTML = `Asistencia registrada`;
            h2.classList.remove('text-warning', 'text-success');
        }


        function show_duplicadas(nombre, horarios, from) {
            show_asistencia(nombre, horarios, from);
            texto = `<span style=font-size:50%>
                        Ya estaba registrada
                    </span>`

            //document.querySelector('#estado').querySelector('img').src = 'imagenes/asistencia.svg';
            $('#icon_retardo').hide();
            $('#icon_asistencia').hide();
            $('#icon_duplicada').show();
            $("#estado").find(".text-big").html("Asistencia<br>" + texto).removeClass("text-warning text-success").addClass("text-blue");
            const estado = document.querySelector('#estado');
            const h2 = estado.querySelector('.text-big');

            h2.innerHTML = `Asistencia<br>${texto}`;
            h2.classList.remove('text-warning', 'text-success');
        }

        function show_retardos(nombre, horarios, from) {
            show_asistencia(nombre, horarios, from);
            texto = `Retardo`;

            const estado = document.querySelector('#estado');
            const h2 = estado.querySelector('.text-big');

            h2.innerHTML = `Retardo`;
            h2.classList.remove('text-success', 'text-blue');
            h2.classList.add('text-warning');

            //estado.querySelector('img').src = 'imagenes/retardo.svg';
            $('#icon_asistencia').hide();
            $('#icon_duplicada').hide();
            $('#icon_retardo').show();
        }

        const { horarios, duplicadas, avisos } = result;
        const { profesor_nombre } = result.profesor;
        let retardos = {}, asistencia = {};
        // if any horario has retardo = true horarios is an object with facultad as key
        if (Object.values(horarios).some(horario => horario.some(h => h.registro_retardo)))
            retardos = horarios;
        // if any horario has duplicada = true horarios is an object with facultad as key
        else
            asistencia = horarios;

        console.log(retardos, asistencia, avisos, duplicadas);

        // Mostrar avisos
        await show_avisos(avisos);
        const from = avisos.length > 0 ? '#avisos' : '#registro';

        // IF DUPLICADAS HAS ELEMENTS (JSON OBJECT)
        if (Object.keys(duplicadas).length > 0)
            show_duplicadas(profesor_nombre, duplicadas, from);
        else if (Object.keys(retardos).length > 0)
            show_retardos(profesor_nombre, retardos, from);
        else
            show_asistencia(profesor_nombre, asistencia, from);

        // setTimeout(() => {
        //     location.reload();
        // }, 5000);


    } catch (error) {
        console.log(error);
        cambiaVista('.sub-bloque', '#internet');
        checadorAlive(); //Muestra mensaje sin internet y comienza a checar hasta que haya
    }
    finally {
        setTimeout(() => {
            location.reload();
        }, 5000);
    }
});

async function test(type) {
    let url;
    switch (type) {
        case 'retardo':
            url = 'json/retardo.json';
            break;
        case 'duplicada':
            url = 'json/duplicada.json';
            break;
        case 'asistencia':
            url = 'json/asistencia.json';
            break;
        case 'sin_servicio':
            url = 'json/no-internet.json';
            break;
        case 'error':
            url = 'json/error.json';
            break;
        case 'internet':
            url = 'json/internet.json';
            break;
        case 'sin_horario':
            url = 'json/sin-horario.json';
            break;
        case 'clave':
            url = 'json/clave-no-encontrada.json';
            break;
        case 'ok':
            url = 'json/asistencia-aviso.json';
            break;
        case 'sin_horario_aviso':
            url = 'json/sin-horario-aviso.json';
            break;

    }
    try {
        const result = await fetch(url).then(response => response.json());

        if (!result.ok) {
            const clave = { value: '123456' }
            function not_int_db(clave) {
                cambiaVista('#registro', '#not_in_db');
                document.querySelector('#clave-no-encontrada').innerHTML = clave;
            }
            function not_has_horario(nombre_profesor, from = '#registro') {
                cambiaVista(from, '#result_no');
                document.querySelector('#nombre-profesor').innerHTML = nombre_profesor;
            }

            switch (result.failure) {
                case 'profesor':
                    not_int_db(clave.value);
                    break;
                case 'horario':
                    let from;
                    if (result.avisos.length > 0) {
                        await show_avisos(result.avisos)
                        from = '#avisos';
                    }
                    else
                        from = '#registro';
                    not_has_horario(result.nombre, from);
                    break;
                case 'internet':
                    cambiaVista('#registro', '#internet');
                    break;
            }
            setTimeout(() => {
                location.reload();
            }, 5000);
            return;
        }

        function show_avisos(avisos) {
            return new Promise(resolve => {
                if (avisos.length == 0) {
                    resolve();
                    return;
                }

                const lista_avisos = document.querySelector('#lista-avisos');
                avisos.forEach(aviso => lista_avisos.innerHTML += `<p>${aviso}</p><hr>`);
                cambiaVista('#registro', '#avisos');
                //$('#btn-aceptar-avisos').focus();
                document.querySelector('#btn-aceptar-avisos').addEventListener('click', () => {
                    lista_avisos.innerHTML = '';
                    resolve();
                });
            });
        }

        function show_asistencia(nombre, horarios, from) {
            cambiaVista(from, '#result_ok');
            document.querySelector('#nombre').innerHTML = nombre;

            const list_result = document.querySelector('#list-result');
            const li_facultad_nombre = list_result.children[0];
            const li_element = list_result.children[1];
            list_result.innerHTML = '';
            // foreach key is facultad (string), value
            for (let facultad_nombre in horarios) {
                console.log(horarios[facultad_nombre]);

                let facultad = li_facultad_nombre.cloneNode(true);
                facultad.innerHTML = facultad_nombre;
                facultad = list_result.appendChild(facultad);
                horarios[facultad_nombre].forEach(horario => {
                    let li = li_element.cloneNode(true);
                    li = list_result.appendChild(li);
                    li.querySelector(".mat-desc").innerHTML = horario.materia;
                    li.querySelector(".mat-fecha").innerHTML = `Inicia ${horario.horario_hora.slice(0, -3)}`;

                    li.querySelector(".salon").innerHTML = horario.horario_salon;
                    li.querySelector(".mat-gpo").innerHTML = horario.horario_grupo;
                })
            }
            const estado = document.querySelector('#estado');
            //estado.querySelector('img').src = 'imagenes/asistencia.svg';
            $('#icon_retardo').hide();
            $('#icon_duplicada').hide();
            $('#icon_asistencia').show();
            const h2 = estado.querySelector('.text-big');
            h2.innerHTML = `Asistencia registrada`;
            h2.classList.remove('text-warning', 'text-success', 'txt-blue');
            h2.classList.add('text-success');
        }


        function show_duplicadas(nombre, horarios, from) {
            show_asistencia(nombre, horarios, from);
            texto = `<span style=font-size:50%>
                        Ya estaba registrada
                    </span>`

            //document.querySelector('#estado').querySelector('img').src = 'imagenes/duplicada.svg';
            $('#icon_retardo').hide();
            $('#icon_asistencia').hide();
            $('#icon_duplicada').show();
            $("#estado").find(".text-big").html("Asistencia<br>" + texto).removeClass("text-warning text-success").addClass("text-blue");
            const estado = document.querySelector('#estado');
            const h2 = estado.querySelector('.text-big');

            h2.innerHTML = `Asistencia<br>${texto}`;
            h2.classList.remove('text-warning', 'text-success');
        }

        function show_retardos(nombre, horarios, from) {
            show_asistencia(nombre, horarios, from);
            texto = `Retardo`;

            const estado = document.querySelector('#estado');
            const h2 = estado.querySelector('.text-big');

            h2.innerHTML = `Retardo`;
            h2.classList.remove('text-success', 'text-blue');
            h2.classList.add('text-warning');

            $('#icon_asistencia').hide();
            $('#icon_duplicada').hide();
            $('#icon_retardo').show();
            //estado.querySelector('img').src = 'imagenes/retardo.svg';
        }

        const { horarios, duplicadas, avisos } = result;
        const { nombre } = result.profesor;
        let retardos = {}, asistencia = {};
        // if any horario has retardo = true horarios is an object with facultad as key
        if (Object.values(horarios).some(horario => horario.some(h => h.retardo)))
            retardos = horarios;
        // if any horario has duplicada = true horarios is an object with facultad as key
        else
            asistencia = horarios;

        console.log(retardos, asistencia, avisos, duplicadas);

        // Mostrar avisos
        await show_avisos(avisos);
        const from = avisos.length > 0 ? '#avisos' : '#registro';

        // IF DUPLICADAS HAS ELEMENTS (JSON OBJECT)
        if (Object.keys(duplicadas).length > 0)
            show_duplicadas(nombre, duplicadas, from);
        else if (Object.keys(retardos).length > 0)
            show_retardos(nombre, retardos, from);
        else
            show_asistencia(nombre, asistencia, from);

        // setTimeout(() => {
        //     location.reload();
        // }, 5000);


    } catch (error) {
        console.log(error);
        cambiaVista('.sub-bloque', '#error_bd');
        checadorAlive(); //Muestra mensaje sin internet y comienza a checar hasta que haya
    }
    finally {
        setTimeout(() => {
            location.reload();
        }, 5000);
    }
}