asistencia/js/reposiciones.js

// Get references to the HTML elements
const form = document.getElementById('form');
const steps = Array.from(form.querySelectorAll('.step'));
const nextButton = document.getElementById('next-button');
const prevButton = document.getElementById('prev-button');
let currentStep = 0;
// #clave_profesor on change => show step 2
const clave_profesor = document.getElementById('clave_profesor');
const horario_reponer = document.getElementById('horario_reponer');
const fechas_clase = document.getElementById('fechas_clase');
const fecha_reponer = $('#fecha_reponer');
const hora_reponer = $('#hora_reponer');
const minutos_reponer = $('#minutos_reponer');
clave_profesor.addEventListener('change', async () => {
    const step2 = document.getElementById('step-2');
    clave_profesor.disabled = true;
    // get option which value is the same as clave_profesor.value
    const option = document.querySelector(`option[value="${clave_profesor.value}"]`);
    // make a form data with #form
    const profesor_id = document.getElementById('profesor_id');
    profesor_id.value = option.dataset.id;
    const formData = new FormData(form);
    const response = await fetch(`./action/action_horario_profesor.php`, {
        method: 'POST',
        body: formData
    });
    const data = await response.json();
    if (data['success'] === false) {
        const message = "Hubo un error al obtener los horarios del profesor.";
        const title = 'Error';
        const color = 'danger';
        triggerMessage(message, title, color);
        return;
    }
    const horarios = data.data;
    const initial = document.createElement('option');
    initial.value = '';
    initial.textContent = 'Seleccione un horario';
    initial.selected = true;
    initial.disabled = true;
    horario_reponer.innerHTML = '';
    horario_reponer.appendChild(initial);
    horarios.forEach((horario) => {
        const dias = ['Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado', 'Domingo'];
        const option = document.createElement('option');
        option.value = `${horario.id}`;
        // materia máx 25 caracteres, if materia.length > 25 then slice(0, 20)
        const max = 25;
        option.textContent = `${horario.materia.slice(0, max) + (horario.materia.length > max ? '...' : '')} - Grupo: ${horario.grupo} - ${horario.hora.slice(0, 5)}-${horario.hora_final.slice(0, 5)} - Salon: ${horario.salon} - ${horario.dia}`;
        option.dataset.materia = `${horario.materia}`;
        option.dataset.grupo = `${horario.grupo}`;
        option.dataset.hora = `${horario.hora.slice(0, 5)}`; // slice(0, 5) => HH:MM
        option.dataset.hora_final = `${horario.hora_final.slice(0, 5)}`;
        option.dataset.salon = `${horario.salon}`;
        option.dataset.dia = `${horario.dia}`;
        option.dataset.id = `${horario.id}`;
        horario_reponer.appendChild(option);
    });
    currentStep = 1;
    step2.style.display = 'block';
    prevButton.disabled = false;
});
// disable clave_profesor
// from second step to first step
prevButton.addEventListener('click', () => {
    const inputs = [clave_profesor, horario_reponer, fechas_clase, fecha_reponer, hora_reponer];
    switch (currentStep) {
        case 1:
        case 2:
        case 3:
            const step = document.getElementById(`step-${currentStep + 1}`);
            step.style.display = 'none';
            inputs[currentStep - 1].disabled = false;
            inputs[currentStep - 1].value = '';
            if (--currentStep === 0) {
                prevButton.disabled = true;
            }
            break;
        case 4:
            const step5 = document.getElementById('step-5');
            step5.style.display = 'none';
            fecha_reponer.prop('disabled', false);
            fecha_reponer.val('');
            hora_reponer.parent().removeClass('disabled');
            hora_reponer.siblings('.datalist-input').text('hh');
            hora_reponer.val('');
            minutos_reponer.parent().removeClass('disabled');
            minutos_reponer.siblings('.datalist-input').text('mm');
            minutos_reponer.val('');
            currentStep--;
            break;
    }
    nextButton.disabled = true;
});
// #horario_reponer on change => show step 3
horario_reponer.addEventListener('change', async () => {
    const selected = horario_reponer.querySelector(`option[value="${horario_reponer.value}"]`);
    horario_reponer.title = `Materia: ${selected.dataset.materia} - Grupo: ${selected.dataset.grupo} - Horario: ${selected.dataset.hora}-${selected.dataset.hora_final} - Salon: ${selected.dataset.salon} - Día: ${selected.dataset.dia}`;
    const step3 = document.getElementById('step-3');
    horario_reponer.disabled = true;
    // make a form data with #form
    const response = await fetch(`./action/action_fechas_clase.php?horario_id=${horario_reponer.value}`, {
        method: 'GET',
    });
    const data = await response.json();
    if (data['success'] === false) {
        const message = "Hubo un error al obtener las fechas de clase.";
        const title = 'Error';
        const color = 'danger';
        triggerMessage(message, title, color);
        return;
    }
    const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
    const fechas = data.data;
    const initial = document.createElement('option');
    initial.value = '';
    initial.textContent = 'Seleccione la fecha de la falta';
    initial.selected = true;
    initial.disabled = true;
    fechas_clase.innerHTML = '';
    fechas_clase.appendChild(initial);
    fechas_clase.title = 'Seleccione la fecha de la falta';
    fechas.forEach((fecha) => {
        const option = document.createElement('option');
        option.value = `${fecha}`;
        option.textContent = `${fecha.dia_mes} de ${meses[fecha.month - 1]} de ${fecha.year}`;
        fechas_clase.appendChild(option);
    });
    step3.style.display = 'block';
    currentStep = 2;
});
// #fechas_clase on change => show step 4
fechas_clase.addEventListener('change', () => {
    const step4 = document.getElementById('step-4');
    step4.style.display = 'block';
    fechas_clase.disabled = true;
    currentStep = 3;
});
// when both #fecha_reponer and #hora_reponer are selected => show step 5
const lastStep = () => {
    // timeout to wait for the value to be set 
    setTimeout(() => {
        if (fecha_reponer.val() !== '' && hora_reponer.val() !== '' && minutos_reponer.val() !== '') {
            const step5 = document.getElementById('step-5');
            step5.style.display = 'block';
            // disable both
            fecha_reponer.prop('disabled', true);
            hora_reponer.parent().addClass('disabled');
            minutos_reponer.parent().addClass('disabled');
            const nextButton = document.getElementById('next-button');
            // remove property disabled
            nextButton.removeAttribute('disabled');
            currentStep = 4;
        }
    }, 100);
};
fecha_reponer.on('change', lastStep);
// on click on the sibling ul>li of #hora_reponer and #minutos_reponer
hora_reponer.siblings('ul').children('li').on('click', lastStep);
minutos_reponer.siblings('ul').children('li').on('click', lastStep);
// Initialize the form
hideSteps();
showCurrentStep();
function hideSteps() {
    steps.forEach((step) => {
        step.style.display = 'none';
    });
}
function showCurrentStep() {
    steps[currentStep].style.display = 'block';
    prevButton.disabled = currentStep === 0;
}
function handleSubmit(event) {
    event.preventDefault();
    // Handle form submission
    // You can access the form data using the FormData API or serialize it manually
}
export {};