paad/ts/reposiciones.ts

import { type } from "os";

declare function triggerMessage(message: string, title: string, type?: string): void;
declare const write: boolean;
declare const moment: any;
// from this 'horario_id', 'fecha', 'hora', 'duracion_id', 'descripcion', 'profesor_id', 'salon', 'unidad', 'periodo_id', 'fecha_clase' make a type of ReposicionParams
export interface ReposicionParams {
    horario_id: number;
    fecha: string;
    hora: string;
    duracion_id: number;
    descripcion: string;
    profesor_id: number;
    salon: string;
    unidad: number;
    periodo_id: number;
    fecha_clase: string;
}

type Horario = {
    id: number;
    carrera_id: number;
    materia_id: number;
    grupo: string;
    profesores: Profesor[];
    dia: string;
    hora: string;
    hora_final: string;
    salon: string;
    fecha_inicio: string;
    fecha_final: string;
    fecha_carga: string;
    nivel_id: number;
    periodo_id: number;
    facultad_id: number;
    materia: string;
    horas: number;
    minutos: number;
    duracion: number;
    retardo: boolean;
    original_id: number;
    last: boolean;
    bloques: number;
};

type Profesor = {
    id: number;
    clave: string;
    grado: string;
    profesor: string;
    nombre: string;
    facultad_id: number;
};
// Get references to the HTML elements
const form = document.getElementById('form') as HTMLFormElement;
const steps = Array.from(form.querySelectorAll('.step')) as HTMLElement[];

const nextButton = document.getElementById('next-button') as HTMLButtonElement;
const prevButton = document.getElementById('prev-button') as HTMLButtonElement;

let currentStep = 0;

// #clave_profesor on change => show step 2
const clave_profesor = document.getElementById('clave_profesor') as HTMLInputElement;
const horario_reponer = document.getElementById('horario_reponer') as HTMLInputElement;
const fechas_clase = document.getElementById('fechas_clase') as HTMLInputElement;

const fecha_reponer = $('#fecha_reponer') as JQuery<HTMLElement>;
const hora_reponer = $('#hora_reponer') as JQuery<HTMLElement>;
const minutos_reponer = $('#minutos_reponer') as JQuery<HTMLElement>;

clave_profesor.addEventListener('change', async () => {
    const step2 = document.getElementById('step-2') as HTMLElement;
    clave_profesor.disabled = true;
    // get option which value is the same as clave_profesor.value
    const option = document.querySelector(`option[value="${clave_profesor.value}"]`) as HTMLOptionElement;

    // make a form data with #form
    const profesor_id = document.getElementById('profesor_id') as HTMLInputElement;
    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 as Horario[];
    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] as HTMLInputElement[];
    switch (currentStep) {
        case 1:
        case 2:
        case 3:
            const step = document.getElementById(`step-${currentStep + 1}`) as HTMLElement;
            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') as HTMLElement;
            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}"]`) as HTMLOptionElement;
    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') as HTMLElement;
    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;
    }
    type Fecha = {
        fecha: string;
        dia_mes: number;
        day: number;
        month: number;
        year: number;
    }

    const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];

    const fechas = data.data as Fecha[];
    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') as HTMLElement;
    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') as HTMLElement;
            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') as HTMLButtonElement;
            // 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) {
    event.preventDefault();

    // Handle form submission
    // You can access the form data using the FormData API or serialize it manually
}