Stable 2-ago-2023

js/auditoría.js

@@ -0,0 +1,160 @@
+import { createApp, reactive } from 'https://unpkg.com/petite-vue?module';
+const store = reactive({
+    loading: false,
+    current: {
+        comentario: '',
+        clase_vista: null,
+        empty: '',
+    },
+    facultades: {
+        data: [],
+        async fetch() {
+            this.data = [];
+            const res = await fetch('action/action_facultad.php');
+            this.data = await res.json();
+        },
+    },
+    filters: {
+        facultad_id: null,
+        fecha: null,
+        fecha_inicio: null,
+        fecha_fin: null,
+        profesor: null,
+        estados: [],
+        switchFecha: false,
+        switchFechas() {
+            $(function () {
+                store.filters.fecha_inicio = store.filters.fecha_fin = store.filters.fecha = null;
+                $("#fecha, #fecha_inicio, #fecha_fin").datepicker({
+                    minDate: -3,
+                    maxDate: new Date(),
+                    dateFormat: "yy-mm-dd",
+                    showAnim: "slide",
+                });
+                const fecha = $("#fecha"), inicio = $("#fecha_inicio"), fin = $("#fecha_fin");
+                inicio.on("change", function () {
+                    store.filters.fecha_inicio = inicio.val();
+                    fin.datepicker("option", "minDate", inicio.val());
+                });
+                fin.on("change", function () {
+                    store.filters.fecha_fin = fin.val();
+                    inicio.datepicker("option", "maxDate", fin.val());
+                });
+                fecha.on("change", function () {
+                    store.filters.fecha = fecha.val();
+                });
+            });
+        }
+    },
+    estados: {
+        data: [],
+        async fetch() {
+            this.data = [];
+            const res = await fetch('action/action_estado_supervisor.php');
+            this.data = await res.json();
+        },
+        getEstado(id) {
+            return this.data.find((estado) => estado.estado_supervisor_id === id);
+        },
+        printEstados() {
+            if (store.filters.estados.length > 0)
+                document.querySelector('#estados').innerHTML = store.filters.estados.map((estado) => `<span class="mx-2 badge badge-${store.estados.getEstado(estado).estado_color}">
+                    <i class="${store.estados.getEstado(estado).estado_icon}"></i> ${store.estados.getEstado(estado).nombre}
+                </span>`).join('');
+            else
+                document.querySelector('#estados').innerHTML = `Todos los registros`;
+        }
+    },
+    toggle(arr, element) {
+        const newArray = arr.includes(element) ? arr.filter((item) => item !== element) : [...arr, element];
+        // if all are selected, then unselect all
+        if (newArray.length === this.estados.data.length)
+            return [];
+        return newArray;
+    },
+});
+createApp({
+    store,
+    get clase_vista() {
+        return store.current.clase_vista;
+    },
+    registros: {
+        data: [],
+        async fetch() {
+            this.loading = true;
+            this.data = [];
+            const res = await fetch('action/action_auditoria.php');
+            this.data = await res.json();
+            this.loading = false;
+        },
+        invertir() {
+            this.data = this.data.reverse();
+        },
+        mostrarComentario(registro_id) {
+            const registro = this.data.find((registro) => registro.registro_id === registro_id);
+            store.current.comentario = registro.comentario;
+            $('#ver-comentario').modal('show');
+        },
+        get relevant() {
+            /*
+                facultad_id: null,
+                fecha: null,
+                fecha_inicio: null,
+                fecha_fin: null,
+                profesor: null,
+                asistencia: null,
+                estado_id: null,
+                if one of the filters is null, then it is not relevant
+    
+            */
+            const filters = Object.keys(store.filters).filter((filtro) => store.filters[filtro] || store.filters[filtro]?.length > 0);
+            return this.data.filter((registro) => {
+                return filters.every((filtro) => {
+                    switch (filtro) {
+                        case 'fecha':
+                            return registro.registro_fecha_ideal === store.filters[filtro];
+                        case 'fecha_inicio':
+                            return registro.registro_fecha_ideal >= store.filters[filtro];
+                        case 'fecha_fin':
+                            return registro.registro_fecha_ideal <= store.filters[filtro];
+                        case 'profesor':
+                            const textoFiltro = store.filters[filtro].toLowerCase();
+                            if (/^\([^)]+\)\s[\s\S]+$/.test(textoFiltro)) {
+                                const clave = registro.profesor_clave.toLowerCase();
+                                const filtroClave = textoFiltro.match(/\((.*?)\)/)?.[1];
+                                console.log(clave, filtroClave);
+                                return clave.includes(filtroClave);
+                            }
+                            else {
+                                const nombre = registro.profesor_nombre.toLowerCase();
+                                return nombre.includes(textoFiltro);
+                            }
+                        case 'facultad_id':
+                            return registro.facultad_id === store.filters[filtro];
+                        case 'estados':
+                            if (store.filters[filtro].length === 0)
+                                return true;
+                            return store.filters[filtro].includes(registro.estado_supervisor_id);
+                        default:
+                            return true;
+                    }
+                });
+            });
+        },
+    },
+    get profesores() {
+        return this.registros.data.map((registro) => ({
+            profesor_id: registro.profesor_id,
+            profesor_nombre: registro.profesor_nombre,
+            profesor_correo: registro.profesor_correo,
+            profesor_clave: registro.profesor_clave,
+            profesor_grado: registro.profesor_grado,
+        })).sort((a, b) => a.profesor_nombre.localeCompare(b.profesor_nombre));
+    },
+    async mounted() {
+        await this.registros.fetch();
+        await store.facultades.fetch();
+        await store.estados.fetch();
+        store.filters.switchFechas();
+    }
+}).mount('#app');

js/client.js

@@ -0,0 +1,120 @@
+// @ts-ignore Import module
+import { createApp, reactive } from 'https://unpkg.com/petite-vue?module';
+const webServices = {
+    getPeriodosV1: async () => {
+        try {
+            const response = await fetch('periodos.v1.php');
+            return await response.json();
+        }
+        catch (error) {
+            console.log(error);
+            return [];
+        }
+    },
+    getPeriodosV2: async () => {
+        try {
+            const response = await fetch('periodos.v2.php');
+            return await response.json();
+        }
+        catch (error) {
+            console.log(error);
+            return [];
+        }
+    }
+};
+const store = reactive({
+    periodosV1: [],
+    periodosV2: [],
+    errors: [],
+    fechas(idPeriodo) {
+        const periodo = this.periodosV2.find((periodo) => periodo.IdPeriodo === idPeriodo);
+        return {
+            inicio: periodo ? periodo.FechaInicio : '',
+            fin: periodo ? periodo.FechaFin : ''
+        };
+    },
+    periodov1(idPeriodo) {
+        return this.periodosV1.find((periodo) => periodo.IdPeriodo === idPeriodo);
+    },
+    periodov2(idPeriodo) {
+        return this.periodosV2.filter((periodo) => periodo.IdPeriodo === idPeriodo);
+    },
+    async addPeriodo(periodo) {
+        try {
+            const result = await fetch('backend/periodos.php', {
+                method: 'POST',
+                body: JSON.stringify({
+                    ...periodo,
+                    ...this.fechas(periodo.IdPeriodo)
+                }),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).then((response) => response.json());
+            if (result.success) {
+                this.periodosV1 = this.periodosV1.map((periodoV1) => {
+                    if (periodoV1.IdPeriodo === periodo.IdPeriodo) {
+                        periodoV1.in_db = true;
+                    }
+                    return periodoV1;
+                });
+                return result;
+            }
+            else {
+                this.errors.push(result.message);
+            }
+        }
+        catch (error) {
+            this.errors.push(error);
+        }
+    },
+    async addCarreras(idPeriodo) {
+        try {
+            const periodoV1 = this.periodov1(idPeriodo);
+            const periodoV2 = this.periodov2(idPeriodo);
+            const data = periodoV2.map(({ ClaveCarrera, NombreCarrera }) => ({
+                ClaveCarrera: ClaveCarrera,
+                NombreCarrera: NombreCarrera,
+                IdNivel: periodoV1.IdNivel,
+            }));
+            const result = await fetch('backend/carreras.php', {
+                method: 'POST',
+                body: JSON.stringify(data),
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            }).then((response) => response.json());
+            if (result.success) {
+                await webServices.getPeriodosV1().then((periodosV1) => {
+                    this.periodosV1 = periodosV1;
+                });
+                await webServices.getPeriodosV2().then((periodosV2) => {
+                    this.periodosV2 = periodosV2;
+                });
+            }
+        }
+        catch (error) {
+            this.errors.push(error);
+        }
+    }
+});
+createApp({
+    store,
+    info(IdPeriodo) {
+        const periodo = store.periodosV2.find((periodo) => periodo.IdPeriodo === IdPeriodo &&
+            periodo.FechaInicio != '' && periodo.FechaFin != '');
+        return periodo;
+    },
+    complete(IdPeriodo) {
+        const info = this.info(IdPeriodo);
+        return info !== undefined;
+    },
+    mounted: async () => {
+        await webServices.getPeriodosV1().then((periodosV1) => {
+            store.periodosV1 = periodosV1;
+        });
+        await webServices.getPeriodosV2().then((periodosV2) => {
+            store.periodosV2 = periodosV2;
+        });
+    }
+}).mount();

js/datalist.js

@@ -70,7 +70,7 @@ $(function () {
     $.each($(".datalist").find('ul li:not(.not-selectable)'), function () {
         if ($(this).hasClass("selected")) {
             var elementRoot = $(this).parents('.datalist');
-            elementRoot.find('.datalist-input').text($(this).html().replace(/[\t\n]+/g, ' ').trim());
+            elementRoot.find('.datalist-input').html($(this).html().replace(/[\t\n]+/g, ' ').trim());
             var cid = $(this).data('id');
             elementRoot.find("input[type=hidden]").val(cid);
         }
@@ -82,7 +82,7 @@ $(function () {
 
 $(document).on('click', '.datalist-select > ul li:not(.not-selectable)', function () {
     var elementRoot = $(this).parents('.datalist');
-    elementRoot.find('.datalist-input').text($(this).html().replace(/[\t\n]+/g, ' ').trim());
+    elementRoot.find('.datalist-input').html($(this).html().replace(/[\t\n]+/g, ' ').trim());
     // $(this).parent('ul').siblings('input[type="text"]').blur();
     ocultaList({ "data": { "padre": elementRoot } });
     var cid = $(this).data('id');

js/horario_profesor.js

@@ -0,0 +1,414 @@
+const compareHours = (hora1, hora2) => {
+    const [h1, m1] = hora1.split(":").map(Number);
+    const [h2, m2] = hora2.split(":").map(Number);
+    if (h1 !== h2) {
+        return h1 > h2 ? 1 : -1;
+    }
+    if (m1 !== m2) {
+        return m1 > m2 ? 1 : -1;
+    }
+    return 0;
+};
+let horarios = [];
+const table = document.querySelector("table");
+if (!(table instanceof HTMLTableElement)) {
+    triggerMessage("No se ha encontrado la tabla", "Error", "error");
+    throw new Error("No se ha encontrado la tabla");
+}
+[...Array(16).keys()].map(x => x + 7).forEach(hora => {
+    // add 7 rows for each hour
+    [0, 15, 30, 45].map((minute) => `${minute}`.padStart(2, '0')).forEach((minute) => {
+        const tr = document.createElement("tr");
+        tr.id = `hora-${hora}:${minute}`;
+        tr.classList.add(hora > 13 ? "tarde" : "mañana");
+        if (minute == "00") {
+            const th = document.createElement("th");
+            th.classList.add("text-center");
+            th.scope = "row";
+            th.rowSpan = 4;
+            th.innerText = `${hora}:00`;
+            th.style.verticalAlign = "middle";
+            tr.appendChild(th);
+        }
+        ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado"].forEach(día => {
+            const td = document.createElement("td");
+            td.id = `hora-${hora}:${minute}-${día}`;
+            tr.appendChild(td);
+        });
+        const tbody = document.querySelector("tbody#horario");
+        if (!(tbody instanceof HTMLTableSectionElement)) {
+            throw new Error("No se ha encontrado el tbody");
+        }
+        tbody.appendChild(tr);
+    });
+});
+const empty_table = table.cloneNode(true);
+document.querySelectorAll('.hidden').forEach((element) => {
+    element.style.display = "none";
+});
+// hide the table
+table.style.display = "none";
+function moveHorario(id, día, hora) {
+    const formData = new FormData();
+    formData.append("id", id);
+    formData.append("hora", hora);
+    formData.append("día", día);
+    fetch("action/action_horario_update.php", {
+        method: "POST",
+        body: formData
+    }).then(res => res.json()).then(response => {
+        if (response.status == "success") {
+            triggerMessage("Horario movido", "Éxito", "success");
+        }
+        else {
+            triggerMessage(response.message, "Error");
+        }
+    }).then(() => {
+        renderHorario();
+    }).catch(err => {
+        triggerMessage(err, "Error");
+    });
+}
+function renderHorario() {
+    if (horarios.length == 0) {
+        triggerMessage("Este profesor hay horarios para mostrar", "Error", "info");
+        table.style.display = "none";
+        document.querySelectorAll('.hidden').forEach((element) => element.style.display = "none");
+        return;
+    }
+    // show the table
+    table.style.display = "table";
+    document.querySelectorAll('.hidden').forEach((element) => element.style.display = "block");
+    // clear the table
+    table.innerHTML = empty_table.outerHTML;
+    function conflicts(horario1, horario2) {
+        const { hora: hora_inicio1, hora_final: hora_final1, dia: dia1 } = horario1;
+        const { hora: hora_inicio2, hora_final: hora_final2, dia: dia2 } = horario2;
+        if (dia1 !== dia2) {
+            return false;
+        }
+        const compareInicios = compareHours(hora_inicio1, hora_inicio2);
+        const compareFinales = compareHours(hora_final1, hora_final2);
+        if (compareInicios >= 0 && compareInicios <= compareFinales ||
+            compareFinales >= 0 && compareFinales <= -compareInicios) {
+            return true;
+        }
+        return false;
+    }
+    // remove the next 5 cells
+    function removeNextCells(horas, minutos, dia, cells = 5) {
+        for (let i = 1; i <= cells; i++) {
+            const minute = minutos + i * 15;
+            const nextMinute = (minute % 60).toString().padStart(2, "0");
+            const nextHour = horas + Math.floor(minute / 60);
+            const cellId = `hora-${nextHour}:${nextMinute}-${dia}`;
+            const cellElement = document.getElementById(cellId);
+            if (cellElement) {
+                cellElement.remove();
+            }
+            else {
+                console.log(`No se ha encontrado la celda ${cellId}`);
+                break;
+            }
+        }
+    }
+    function newBlock(horario, edit = false) {
+        function move(horario, cells = 5) {
+            const [horas, minutos] = horario.hora.split(":").map(Number);
+            const cell = document.getElementById(`hora-${horas}:${minutos.toString().padStart(2, "0")}-${horario.dia}`);
+            const { top, left } = cell.getBoundingClientRect();
+            const block = document.getElementById(`block-${horario.id}`);
+            block.style.top = `${top}px`;
+            block.style.left = `${left}px`;
+            removeNextCells(horas, minutos, horario.dia, cells);
+        }
+        const [horas, minutos] = horario.hora.split(":").map(x => parseInt(x));
+        const hora = `${horas}:${minutos.toString().padStart(2, "0")}`;
+        horario.hora = hora;
+        const cell = document.getElementById(`hora-${horario.hora}-${horario.dia}`);
+        if (!cell)
+            return;
+        cell.dataset.ids = `${horario.id}`;
+        const float_menu = edit ?
+            `<div class="menu-flotante p-2" style="opacity: .7;">
+            <a class="mx-2" href="#" data-toggle="modal" data-target="#modal-editar">
+                <i class="ing-editar ing"></i>
+            </a>
+            <a class="mx-2" href="#" data-toggle="modal" data-target="#modal-borrar">
+                <i class="ing-basura ing"></i>
+            </a>
+        </div>`
+            : '';
+        cell.innerHTML =
+            `<div style="overflow-y: auto; overflow-x: hidden; height: 100%;" id="block-${horario.id}" class="position-absolute w-100 h-100">
+            <small class="text-gray">${horario.hora}</small>
+            <b class="title">${horario.materia}</b> <br>
+            <br><span>Salón: </span>${horario.salon} <br>
+            <small class="my-2">
+              ${horario.profesores.map((profesor) => ` <span class="ing ing-formacion mx-1"></span>${profesor.grado ?? ''} ${profesor.profesor}`).join("<br>")}
+            </small>
+        </div>
+          ${float_menu}`;
+        cell.classList.add("bloque-clase", "position-relative");
+        cell.rowSpan = horario.bloques;
+        // draggable
+        cell.draggable = write;
+        if (horario.bloques > 0) {
+            removeNextCells(horas, minutos, horario.dia, horario.bloques - 1);
+        }
+    }
+    function newConflictBlock(horarios, edit = false) {
+        const first_horario = horarios[0];
+        const [horas, minutos] = first_horario.hora.split(":").map(x => parseInt(x));
+        const hora = `${horas}:${minutos.toString().padStart(2, "0")}`;
+        const ids = horarios.map(horario => horario.id);
+        const cell = document.getElementById(`hora-${hora}-${first_horario.dia}`);
+        if (cell == null) {
+            console.error(`Error: No se encontró la celda: hora-${hora}-${first_horario.dia}`);
+            return;
+        }
+        cell.dataset.ids = ids.join(",");
+        // replace the content of the cell
+        cell.innerHTML = `
+          <small class='text-danger'>
+            ${hora}
+          </small>
+          <div class="d-flex justify-content-center align-items-center mt-4">
+            <div class="d-flex flex-column justify-content-center align-items-center">
+              <span class="ing ing-importante text-danger" style="font-size: 2rem;"></span>
+              <b class='text-danger'>
+                Empalme de ${ids.length} horarios
+              </b>
+              <hr>
+              <i class="text-danger">Ver horarios &#8230;</i>
+            </div>
+          </div>
+        `;
+        // Add classes and attributes
+        cell.classList.add("conflict", "bloque-clase");
+        cell.setAttribute("role", "button");
+        // Add event listener for the cell
+        cell.addEventListener("click", () => {
+            $("#modal-choose").modal("show");
+            const ids = cell.getAttribute("data-ids").split(",").map(x => parseInt(x));
+            const tbody = document.querySelector("#modal-choose tbody");
+            tbody.innerHTML = "";
+            horarios.filter(horario => ids.includes(horario.id)).sort((a, b) => compareHours(a.hora, b.hora)).forEach(horario => {
+                tbody.innerHTML += `
+              <tr data-ids="${horario.id}">
+                <td><small>${horario.hora.slice(0, -3)}-${horario.hora_final.slice(0, -3)}</small></td>
+                <td>${horario.materia}</td>
+                <td>
+                  ${horario.profesores.map(({ grado, profesor }) => `${grado ?? ''} ${profesor}`).join(", ")}
+                </td>
+                <td>${horario.salon}</td>
+                ${edit ? `
+                  <td class="text-center">
+                    <button class="btn btn-sm btn-primary dismiss-editar" data-toggle="modal" data-target="#modal-editar">
+                      <i class="ing-editar ing"></i>
+                    </button>
+                  </td>
+                  <td class="text-center">
+                    <button class="btn btn-sm btn-danger dismiss-editar" data-toggle="modal" data-target="#modal-borrar">
+                      <i class="ing-basura ing"></i>
+                    </button>
+                  </td>
+                ` : ""}
+              </tr>`;
+            });
+            document.querySelectorAll(".dismiss-editar").forEach(btn => {
+                btn.addEventListener("click", () => $("#modal-choose").modal("hide"));
+            });
+        });
+        function getDuration(hora_i, hora_f) {
+            const [horas_i, minutos_i] = hora_i.split(":").map(x => parseInt(x));
+            const [horas_f, minutos_f] = hora_f.split(":").map(x => parseInt(x));
+            const date_i = new Date(0, 0, 0, horas_i, minutos_i);
+            const date_f = new Date(0, 0, 0, horas_f, minutos_f);
+            const diffInMilliseconds = date_f.getTime() - date_i.getTime();
+            const diffInMinutes = diffInMilliseconds / (1000 * 60);
+            const diffIn15MinuteIntervals = diffInMinutes / 15;
+            return Math.floor(diffIn15MinuteIntervals);
+        }
+        const maxHoraFinal = horarios.reduce((max, horario) => {
+            const [horas, minutos] = horario.hora_final.split(":").map(x => parseInt(x));
+            const date = new Date(0, 0, 0, horas, minutos);
+            return date > max ? date : max;
+        }, new Date(0, 0, 0, 0, 0));
+        const horaFinalMax = new Date(0, 0, 0, maxHoraFinal.getHours(), maxHoraFinal.getMinutes());
+        const blocks = getDuration(first_horario.hora, `${horaFinalMax.getHours()}:${horaFinalMax.getMinutes()}`);
+        cell.setAttribute("rowSpan", blocks.toString());
+        removeNextCells(horas, minutos, first_horario.dia, blocks - 1);
+    }
+    const conflictBlocks = horarios.filter((horario, index, arrayHorario) => arrayHorario.filter((_, i) => i != index).some(horario2 => conflicts(horario, horario2)))
+        .sort((a, b) => compareHours(a.hora, b.hora));
+    const classes = horarios.filter(horario => !conflictBlocks.includes(horario));
+    const conflictBlocksPacked = []; // array of sets
+    conflictBlocks.forEach(horario => {
+        const setIndex = conflictBlocksPacked.findIndex(set => set.some(horario2 => conflicts(horario, horario2)));
+        if (setIndex === -1) {
+            conflictBlocksPacked.push([horario]);
+        }
+        else {
+            conflictBlocksPacked[setIndex].push(horario);
+        }
+    });
+    classes.forEach(horario => newBlock(horario, write));
+    conflictBlocksPacked.forEach(horarios => newConflictBlock(horarios, write));
+    // remove the elements that are not in the limits
+    let max_hour = Math.max(...horarios.map(horario => {
+        const lastMoment = moment(horario.hora, "HH:mm").add(horario.bloques * 15, "minutes");
+        const lastHour = moment(`${lastMoment.hours()}:00`, "HH:mm");
+        const hourInt = parseInt(lastMoment.format("HH"));
+        return lastMoment.isSame(lastHour) ? hourInt - 1 : hourInt;
+    }));
+    let min_hour = Math.min(...horarios.map(horario => parseInt(horario.hora.split(":")[0])));
+    document.querySelectorAll("tbody#horario tr").forEach(hora => {
+        const hora_id = parseInt(hora.id.split("-")[1].split(":")[0]);
+        (hora_id < min_hour || hora_id > max_hour) ? hora.remove() : null;
+    });
+    // if there is no sábado, remove the column
+    if (!horarios.some(horario => horario.dia == "sábado")) {
+        document.querySelectorAll("tbody#horario td").forEach(td => {
+            if (td.id.split("-")[2] == "sábado") {
+                td.remove();
+            }
+        });
+        // remove the header (the last)
+        document.querySelector("#headers").lastElementChild.remove();
+    }
+    // adjust width
+    const ths = document.querySelectorAll("tr#headers th");
+    ths.forEach((th, key) => th.style.width = (key == 0) ? "5%" : `${95 / (ths.length - 1)}%`);
+    // search item animation
+    const menúFlontantes = document.querySelectorAll(".menu-flotante");
+    menúFlontantes.forEach((element) => {
+        element.classList.add("d-none");
+        element.parentElement.addEventListener("mouseover", () => element.classList.remove("d-none"));
+        element.parentElement.addEventListener("mouseout", (e) => element.classList.add("d-none"));
+    });
+    // droppables
+    // forall the .bloque-elements add the event listeners for drag and drop
+    document.querySelectorAll(".bloque-clase").forEach(element => {
+        function dragStart() {
+            this.classList.add("dragging");
+        }
+        function dragEnd() {
+            this.classList.remove("dragging");
+        }
+        element.addEventListener("dragstart", dragStart);
+        element.addEventListener("dragend", dragEnd);
+    });
+    // forall the cells that are not .bloque-clase add the event listeners for drag and drop
+    document.querySelectorAll("td:not(.bloque-clase)").forEach(element => {
+        function dragOver(e) {
+            e.preventDefault();
+            this.classList.add("dragging-over");
+        }
+        function dragLeave() {
+            this.classList.remove("dragging-over");
+        }
+        function drop() {
+            this.classList.remove("dragging-over");
+            const dragging = document.querySelector(".dragging");
+            const id = dragging.getAttribute("data-ids");
+            const hora = this.id.split("-")[1];
+            const días = ["lunes", "martes", "miércoles", "jueves", "viernes", "sábado"];
+            let día = this.id.split("-")[2];
+            día = días.indexOf(día) + 1;
+            //  rowspan
+            const bloques = parseInt(dragging.getAttribute("rowspan"));
+            const horaMoment = moment(hora, "HH:mm");
+            const horaFin = horaMoment.add(bloques * 15, "minutes");
+            const limit = moment('22:00', 'HH:mm');
+            if (horaFin.isAfter(limit)) {
+                triggerMessage("No se puede mover el bloque a esa hora", "Error");
+                // scroll to the top
+                window.scrollTo(0, 0);
+                return;
+            }
+            // get the horario
+            // remove the horario
+            const bloque = document.querySelector(`.bloque-clase[data-ids="${id}"]`);
+            // remove all children
+            while (bloque.firstChild) {
+                bloque.removeChild(bloque.firstChild);
+            }
+            // prepend a loading child
+            const loading = `<div class="spinner-border" role="status" style="width: 3rem; height: 3rem;">
+                                <span class="sr-only">Loading...</span>
+                            </div>`;
+            bloque.insertAdjacentHTML("afterbegin", loading);
+            // add style vertical-align: middle
+            bloque.style.verticalAlign = "middle";
+            bloque.classList.add("text-center");
+            // remove draggable
+            bloque.removeAttribute("draggable");
+            moveHorario(id, día, hora);
+        }
+        element.addEventListener("dragover", dragOver);
+        element.addEventListener("dragleave", dragLeave);
+        element.addEventListener("drop", drop);
+    });
+}
+const form = document.getElementById('form');
+if (!(form instanceof HTMLFormElement)) {
+    triggerMessage('No se ha encontrado el formulario', 'Error', 'danger');
+    throw new Error("No se ha encontrado el formulario");
+}
+form.querySelector('#clave_profesor').addEventListener('input', function (e) {
+    const input = form.querySelector('#clave_profesor');
+    const option = form.querySelector(`option[value="${input.value}"]`);
+    if (input.value == "") {
+        input.classList.remove("is-invalid", "is-valid");
+        return;
+    }
+    if (!option) {
+        input.classList.remove("is-valid");
+        input.classList.add("is-invalid");
+    }
+    else {
+        const profesor_id = form.querySelector('#profesor_id');
+        profesor_id.value = option.dataset.id;
+        input.classList.remove("is-invalid");
+        input.classList.add("is-valid");
+    }
+});
+form.addEventListener('submit', async function (e) {
+    e.preventDefault();
+    const input = form.querySelector('#clave_profesor');
+    if (input.classList.contains("is-invalid")) {
+        triggerMessage('El profesor no se encuentra registrado', 'Error', 'danger');
+        return;
+    }
+    const formData = new FormData(form);
+    try {
+        const buttons = document.querySelectorAll("button");
+        buttons.forEach(button => {
+            button.disabled = true;
+            button.classList.add("disabled");
+        });
+        const response = await fetch('action/action_horario_profesor.php', {
+            method: 'POST',
+            body: formData,
+        });
+        const data = await response.json();
+        buttons.forEach(button => {
+            button.disabled = false;
+            button.classList.remove("disabled");
+        });
+        if (data.status == 'success') {
+            horarios = data.data;
+            renderHorario();
+        }
+        else {
+            triggerMessage(data.message, 'Error en la consulta', 'warning');
+        }
+    }
+    catch (error) {
+        triggerMessage('Fallo al consutar los datos ', 'Error', 'danger');
+        console.log(error);
+    }
+});
+const input = form.querySelector('#clave_profesor');
+const option = form.querySelector(`option[value="${input.value}"]`);

js/horarios_profesor.js

@@ -1,20 +0,0 @@
-document.getElementById('form').addEventListener('submit', async function (e) {
-    e.preventDefault();
-    const formData = new FormData(this);
-    try {
-        const response = await fetch('action/action_horario_profesor.php', {
-            method: 'POST',
-            body: formData,
-        });
-        const data = await response.json();
-        
-        if (data.status == 'ok') {
-            
-        }
-        else {
-            triggerMessage(data.message, 'Error en la consulta', 'warning');
-        }
-    } catch (error) {
-        triggerMessage('Fallo al consutar los datos ', 'Error', 'danger');
-    }
-});

js/jquery-ui.touch-punch.min.js

@@ -0,0 +1,11 @@
+/*!
+ * jQuery UI Touch Punch 0.2.3
+ *
+ * Copyright 2011–2014, Dave Furfero
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ *
+ * Depends:
+ *  jquery.ui.widget.js
+ *  jquery.ui.mouse.js
+ */
+!function (a) { function f(a, b) { if (!(a.originalEvent.touches.length > 1)) { a.preventDefault(); var c = a.originalEvent.changedTouches[0], d = document.createEvent("MouseEvents"); d.initMouseEvent(b, !0, !0, window, 1, c.screenX, c.screenY, c.clientX, c.clientY, !1, !1, !1, !1, 0, null), a.target.dispatchEvent(d) } } if (a.support.touch = "ontouchend" in document, a.support.touch) { var e, b = a.ui.mouse.prototype, c = b._mouseInit, d = b._mouseDestroy; b._touchStart = function (a) { var b = this; !e && b._mouseCapture(a.originalEvent.changedTouches[0]) && (e = !0, b._touchMoved = !1, f(a, "mouseover"), f(a, "mousemove"), f(a, "mousedown")) }, b._touchMove = function (a) { e && (this._touchMoved = !0, f(a, "mousemove")) }, b._touchEnd = function (a) { e && (f(a, "mouseup"), f(a, "mouseout"), this._touchMoved || f(a, "click"), e = !1) }, b._mouseInit = function () { var b = this; b.element.bind({ touchstart: a.proxy(b, "_touchStart"), touchmove: a.proxy(b, "_touchMove"), touchend: a.proxy(b, "_touchEnd") }), c.call(b) }, b._mouseDestroy = function () { var b = this; b.element.unbind({ touchstart: a.proxy(b, "_touchStart"), touchmove: a.proxy(b, "_touchMove"), touchend: a.proxy(b, "_touchEnd") }), d.call(b) } } }(jQuery);

js/reposiciones.js

@@ -0,0 +1,178 @@
+// 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 {};