paad/ts/faltas.ts

import { createApp, reactive } from 'https://unpkg.com/petite-vue?module';
// define that $ has type any
declare const $: any;

const filter = reactive({
    facultad: -1,
    profesor: '',
    porcentaje: 0
});
const app = createApp({
    filter,
    facultades: [],
    profesores: [],

    faltas: [],
    openModal() {
        const modal = document.getElementById('cargando');
        $(modal).modal('show');
    },
    closeModal() {
        const modal = document.getElementById('cargando');
        $(modal).modal('hide');
    },

    async refresh() {
        alert(`Facultad: ${filter.facultad} - Profesor: ${filter.profesor} - Porcentaje: ${filter.porcentaje}%`
        if(filter.facultad == -1 || filter.porcetaje < 10) {
            return;
        }

        this.openModal();
        this.faltas = await fetch(`action/profesor_faltas.php?facultad=${this.filter.facultad}&profesor=${this.filter.profesor}&porcentaje=${this.filter.porcentaje}`).then(res => res.json());
        this.closeModal();
    },
    async mounted() {
        this.facultades = await fetch('action/action_facultad.php').then(res => res.json());
        this.profesores = await fetch('action/action_profesor.php').then(res => res.json());
    }
}).mount('#app');