avance de carga de archivo gtfs

src/pages/gtfs_archivo/Admin.svelte

@@ -10,7 +10,6 @@
     
     let id_red;  
     let escritura = false;
-    
 
     const limit = 15;
     let page = 1;
@@ -18,29 +17,19 @@
     let count = 0;
     let ordering = 'id_archivo'
     let redes = []
-    let red = null
     let lista_gtfs = []
-    let gtfs = null    
     let location = useLocation()
     let loading = false;
-    let gtfsArchivo = null;
+    let showUpload = null;
 
     getPermisosPath($location.pathname)
         .then(data => escritura = data.escritura)
         .catch(error => console.log({ error }))
 
-    $: onPage(page)
+    getRedTransporte({ vigente: 1, ordering: 'nombre_red' })
-
+        .then(data => redes = data)
-    getRedTransporte({ vigente: 1 })
+        .then(() => id_red = redes[0]?.id_red || null)
-        .then(data => data.sort((a,b) => a.nombre_red < b.nombre_red? -1 : 1))
+        .then(() => onPage(1))
-        //.then(data => redes = data )
-        .then(data => {
-            redes = data;
-            if (redes.length > 0) {
-                id_red = redes[0].id_red; // Establece la primera red como seleccionada por defecto
-                onPage(1); // Carga los archivos GTFS para la red seleccionada por defecto
-            }
-        })
         .catch(error => globalThis.toast.error(error))
 
     async function onPage(p) {
@@ -60,28 +49,32 @@
         }
     }
 
-    
     function onOrderBy(field) {
         ordering = ordering === field ? '-' + field : field;
         onPage(page)
     }
 
     function onChangeRed() {
-              
         page = 1; // Reinicia la paginación al cambiar de red
         onPage(page);
     }
 
     function onNuevo() {
-        gtfsArchivo = {}
+        showUpload = true
     }
 </script>
 
 <PageTitle {loading}>Listado Archivos GTFS</PageTitle>
 
-
+<div class="card">
- <div class="row">  
+    <div class="card-header">
-    <div class="col-md">
+        {#if escritura}
+            <button class="btn btn-primary" on:click|preventDefault={onNuevo}>
+                Cargar Archivo GTFS
+            </button>
+        {/if}
+    </div>
+    <div class="card-body">
 
         <div class="input-group mb-3">
             <div class="input-group-text">Red de Transporte</div>
@@ -93,17 +86,6 @@
             </select>
         </div>
 
-        
-
-    </div>
-     
-</div>
-
-
-
-<div class="card">
-
-    <div class="card-body">
         <div class="table-responsive">
             <table class="table table-sm table-bordered">
                 <thead>
@@ -164,23 +146,9 @@
         />
     </div>
 </div>
-<div class="row">
-    <div class="card-header">
-        {#if escritura}
-            <button class="btn btn-primary" on:click|preventDefault={onNuevo}>
-                Cargar Archivo GTFS
-            </button>
-        {/if}
-    </div>
-</div>
 
-{#if gtfsArchivo}
+{#if showUpload}
-<ModalgtfsUpload
+    <ModalgtfsUpload on:close={() => showUpload = false} {id_red} />
-    {gtfsArchivo}
-    {escritura}
-    {id_red}
-    on:close={() => gtfsArchivo = null}     
-/>
 {/if}
 
 <style>

src/pages/gtfs_archivo/ModalgtfsUpload.svelte

@@ -1,160 +1,109 @@
 <script>
     import Modal from "../../components/Modal.svelte";
-    import { getGtfsArchivo, createGtfsArchivo, updateGtfsArchivo, deleteGtfsArchivo } from "$/services/gtfs_archivo";
+    import {
-   // import Usuario from "../usuarios/Usuario.svelte";
+        getGtfsArchivo,
-    import { createEventDispatcher } from "svelte";    
+        createGtfsArchivo,
-    const dispatch = createEventDispatcher();
+        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 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))
-
-  
     
-  
+    // fecha actual en formato yyyy-mm-dd
-    async function handleUpload() {
+    let fecha_hoy = (new Date()).toISOString().substring(0,10);
-        if (!file) {
+    let form = { valid_from: fecha_hoy, id_red };
-            toast.push('Por favor, seleccione un archivo para cargar.');
+    let loading = false;
-            return;
+    let inputFile = null;
-        }
 
-        const formData = new FormData();
+    let redes = [];
-        formData.append('filezip', file); // 'filezip' es la clave que se espera en el backend
+    
-
+    getRedTransporte({ vigente: 1, ordering: 'nombre_red' })
-        try {
+        .then((data) => redes = data)
-            uploading = true;
+        .catch((error) => globalThis.toast.error(error));
-            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;
-          
+            const archivo = inputFile.files[0]
-            form = await createGtfsArchivo(form)
+            const vigente = form.valid_from >= fecha_hoy;
-          
+            await createGtfsArchivo({ ...form, vigente, archivo });
-            globalThis.toast.success('Se ha cargado el Archivo')
+
-            dispatch('refresh')
+            globalThis.toast.success("Se ha cargado el Archivo");
-            dispatch('close')
+            dispatch("refresh");
+            dispatch("close");
         } catch (error) {
             if (error.detail) {
-                globalThis.toast.success(error.detail)
+                globalThis.toast.success(error.detail);
             } else {
-                globalThis.toast.success(JSON.stringify(error))
+                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 >
+<form on:submit|preventDefault={onSave}>
-<Modal title={'Cargar Archivo GTFS'} 
+    <Modal
-size="lg"
+        title={"Cargar Archivo GTFS"}
-on:close={() => dispatch('close')}>  
+        size="lg"
-<div class="row">
+        classBody="bg-white"
-    <div class="col-md">
+        on:close={() => dispatch("close")}
-
+    >
-        <div class="input-group mb-3">
+        <div class="row">
-            <div class="input-group-text">Red de Transporte</div>
+            <div class="col-md">
-            <select bind:value={id_red} class="form-select">                 
+                <div class="input-group mb-3">
-                {#each redes as rt}
+                    <div class="input-group-text">Red de Transporte</div>
-                    <option value={rt.id_red}>{rt.nombre_red}</option>
+                    <select bind:value={form.id_red} class="form-select">
-                {/each}
+                        {#each redes as rt}
-            </select>
+                            <option value={rt.id_red}>{rt.nombre_red}</option>
-        </div> 
+                        {/each}
-
+                    </select>
-    </div>
+                </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="row mb-3">
-        <div class="col-md-3">Cargado por (PONER EL USUARIO)</div>
+            <div class="col-md-3">Fecha Carga</div>
-        <div class="col-md">
+            <div class="col-md">
-            <input type="text" bind:value={id_red} disabled  required class="form-control">
+                <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>
- 
-    <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>
+        <div class="row mb-5">
-  
+            <div class="col-md-3">Cargado por</div>
-</Modal>
+            <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; }
+    .disabled {
-</style>
+        pointer-events: none !important;
+    }
+</style>

src/services/gtfs_archivo.js

@@ -18,10 +18,20 @@ export async function getGtfsArchivoId(id) {
 }
 
 export async function createGtfsArchivo(data) {
+    const form = new FormData()
+    for (let key in data) {
+        if (key === 'archivo') {
+            const file = data[key]
+            form.append(key, file, file.name)
+        } else {
+            form.append(key, data[key])
+        }
+    }
+
     const res = await fetch(`${base}/gtfs-archivo/`, {
         method: 'POST',
-        body: JSON.stringify(data),
+        body: form,
-        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+        headers: { "Authorization": `Bearer ${getToken()}` }
     })
     if (!res.ok) throw await res.json()
     return res.json()