admin_transporte_frontend/src/pages/gtfs_archivo/ModalgtfsUpload.svelte

<script>
    import Modal from "../../components/Modal.svelte";
    import {
        getGtfsArchivo,
        createGtfsArchivo,
        updateGtfsArchivo,
        deleteGtfsArchivo,
    } from "$/services/gtfs_archivo";
    import { getRedTransporte } from "$/services/red_transporte";
    import { createEventDispatcher } from "svelte";
    import { storeSession } from "$/stores/global";
    const dispatch = createEventDispatcher();

    export let id_red = null;
    
    // fecha actual en formato yyyy-mm-dd
    let fecha_hoy = (new Date()).toISOString().substring(0,10);
    let form = { valid_from: fecha_hoy, id_red };
    let loading = false;
    let inputFile = null;

    let redes = [];
    
    getRedTransporte({ vigente: 1, ordering: 'nombre_red' })
        .then((data) => redes = data)
        .catch((error) => globalThis.toast.error(error));

    async function onSave() {
        try {
            loading = true;
            const archivo = inputFile.files[0]
            const vigente = form.valid_from >= fecha_hoy;
            await createGtfsArchivo({ ...form, vigente, archivo });

            globalThis.toast.success("Se ha cargado el Archivo");
            dispatch("refresh");
            dispatch("close");
        } catch (error) {
            if (error.detail) {
                globalThis.toast.success(error.detail);
            } else {
                globalThis.toast.success(JSON.stringify(error));
            }
        } finally {
            loading = false;
        }
    }
</script>

<form on:submit|preventDefault={onSave}>
    <Modal
        title={"Cargar Archivo GTFS"}
        size="lg"
        classBody="bg-white"
        on:close={() => dispatch("close")}
    >
        <div class="row">
            <div class="col-md">
                <div class="input-group mb-3">
                    <div class="input-group-text">Red de Transporte</div>
                    <select bind:value={form.id_red} class="form-select">
                        {#each redes as rt}
                            <option value={rt.id_red}>{rt.nombre_red}</option>
                        {/each}
                    </select>
                </div>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-3">Fecha Carga</div>
            <div class="col-md">
                <input type="date" class="form-control" disabled value={fecha_hoy}>
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-3">Valido desde</div>
            <div class="col-md">
                <input type="date" class="form-control" required bind:value={form.valid_from}>
            </div>
        </div>

        <div class="row mb-5">
            <div class="col-md-3">Cargado por</div>
            <div class="col-md">
                <div class="form-control bg-light">
                    {$storeSession.persona.nombres} {$storeSession.persona.apellido_a || ''} {$storeSession.persona.apellido_b || ''}
                </div>
            </div>
        </div>

        <div class="mb-3">
            <label for="formFile" class="form-label">Archivo ZIP</label>
            <input class="form-control" type="file" id="formFile" accept=".zip" required bind:this={inputFile}>
        </div>

        <svelte:fragment slot="buttons">
            <button type="submit" class="btn btn-primary" disabled={loading}>
                <i class="bi bi-save"></i> Subir Archivo ZIP
            </button>
        </svelte:fragment>
    </Modal>
</form>

<style>
    .disabled {
        pointer-events: none !important;
    }
</style>