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 Usuario from "../usuarios/Usuario.svelte";
    import { createEventDispatcher } from "svelte";    
    const dispatch = createEventDispatcher();
    import { getRedTransporte } from "$/services/red_transporte";


    export let gtfsArchivo = {};
    export let escritura = false;
    export let id_red = null;
    let form = {}
    let loading = false;

 
  
    let redes = []
    let red = null
     
    let file; 
    let uploading = false;

    getRedTransporte({ vigente: 1 })
        .then(data => data.sort((a,b) => a.nombre_red < b.nombre_red? -1 : 1))
   
        .then(data => {
            redes = data;
        
        })
        .catch(error => globalThis.toast.error(error))

  
    
  
    async function handleUpload() {
        if (!file) {
            toast.push('Por favor, seleccione un archivo para cargar.');
            return;
        }

        const formData = new FormData();
        formData.append('filezip', file); // 'filezip' es la clave que se espera en el backend

        try {
            uploading = true;
            const response = await fetch('/api/upload_zip', {
                method: 'POST',
                body: formData, // Enviar los datos del formulario
                // No establecer 'Content-Type': 'multipart/form-data', 
                // fetch lo hará automáticamente con el boundary correcto
            });

            if (!response.ok) {
                throw new Error(`Error: ${response.statusText}`);
            }

            const result = await response.json();
            toast.push(result.message);
            onSave(); 
        } catch (error) {
            console.error('Error al subir el archivo:', error);
            toast.push(error.message);
        } finally {
            uploading = false;
        }
    }

    async function onSave() {
        try {
            loading = true;
          
            form = await createGtfsArchivo(form)
          
            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;
        }
    }
  const hoy = new Date();
  // Formatea la fecha como dd-mm-yyyy
  const fechaHoy = [
    String(hoy.getDate()).padStart(2, '0'), // Día
    String(hoy.getMonth() + 1).padStart(2, '0'), // Mes
    hoy.getFullYear(), // Año
  ].join('-');

  let valorFecha = fechaHoy;

</script>
 

<form >
<Modal title={'Cargar Archivo GTFS'} 
size="lg"
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={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="card">
    <div class="row mb-3">
        <div class="col-md-3">Fecha Carga</div>
        <div class="col-md">
            <input type="text" bind:value={valorFecha} disabled  required class="form-control">
        </div>
    </div>
    <div class="row mb-4">
        <div class="col-md-3">Valido desde</div>
        <div class="col-md">
            <input type="text" bind:value={valorFecha} disabled  required class="form-control">
        </div>
    </div>

    <div class="row mb-5">
        <div class="col-md-3">Cargado por (PONER EL USUARIO)</div>
        <div class="col-md">
            <input type="text" bind:value={id_red} disabled  required class="form-control">
        </div>
    </div>
 
    <div>
         
        <input type="file"   accept=".zip" on:change="{(e) => file = e.target.files[0]}" />
        {#if uploading}
            <p>Subiendo archivo...</p>
        {:else}
        <button class="primary sm"  on:click="{handleUpload}">
              Cargar
        </button>         
        {/if}
    </div>

</div>
  
</Modal>
</form>

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