paad/ts/client.ts

// @ts-ignore Import module
import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

export interface PeridoV1 {
    IdNivel: number;
    IdPeriodo: number;
    NombreNivel: string;
    NombrePeriodo: string;
    in_db: boolean;
    linked: boolean;
}


export interface PeridoV2 {
    ClaveCarrera: string;
    FechaFin: string;
    FechaInicio: string;
    IdPeriodo: number;
    NombreCarrera: string;
}

const webServices = {
    getPeriodosV1: async (): Promise<PeridoV1[]> => {
        try {
            const response = await fetch('periodos.v1.php');
            return await response.json();
        } catch (error) {
            console.log(error);
            return [];
        }
    },
    getPeriodosV2: async (): Promise<PeridoV2[]> => {
        try {
            const response = await fetch('periodos.v2.php');
            return await response.json();
        } catch (error) {
            console.log(error);
            return [];
        }
    }
}

const store = reactive({
    periodosV1: [] as PeridoV1[],
    periodosV2: [] as PeridoV2[],

    errors: [] as string[],
    fechas(idPeriodo: number): { inicio: string, fin: string } {
        const periodo = this.periodosV2.find((periodo: PeridoV2) => periodo.IdPeriodo === idPeriodo);
        return {
            inicio: periodo ? periodo.FechaInicio : '',
            fin: periodo ? periodo.FechaFin : ''
        }
    },
    periodov1(idPeriodo: number): PeridoV1 | undefined {
        return this.periodosV1.find((periodo: PeridoV1) => periodo.IdPeriodo === idPeriodo);
    },
    periodov2(idPeriodo: number): PeridoV2[] {
        return this.periodosV2.filter((periodo: PeridoV2) => periodo.IdPeriodo === idPeriodo);
    },
    async addPeriodo(periodo: PeridoV1 | PeridoV2) {
        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: PeridoV1) => {
                    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: number) {
        try {
            const periodoV1 = this.periodov1(idPeriodo) as PeridoV1;
            const periodoV2 = this.periodov2(idPeriodo) as PeridoV2[];

            const data = periodoV2.map(({ ClaveCarrera, NombreCarrera }: PeridoV2) =>
            ({
                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: number): PeridoV2 {
        const periodo = store.periodosV2.find((periodo: PeridoV2) => periodo.IdPeriodo === IdPeriodo &&
            periodo.FechaInicio != '' && periodo.FechaFin != '');
        return periodo
    },
    complete(IdPeriodo: number): boolean {
        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()