app Carga GTFS

src/layouts/Sidebar.svelte

@@ -39,6 +39,11 @@
              
             <li class="sidebar-header">GTFS</li>
             
+            <SideLink to="/gtfs-upload">
+                <i class="align-middle bi bi-cloud-upload-fill fs-4" />                
+                <span class="align-middle">Cargar Archivos GTFS</span>
+            </SideLink>
+
             <SideLink to="/gtfs-archivo">
                 <i class="align-middle bi bi-card-list fs-4" />                
                 <span class="align-middle">Listado Archivos GTFS</span>

src/pages/gtfs_archivo/Admin.svelte

@@ -4,12 +4,12 @@
     import PageTitle from "$/components/PageTitle.svelte";    
     import { useLocation } from "svelte-navigator";
     import { getPermisosPath } from "$/services/usuarios";
-
+    import ModalgtfsUpload from "./ModalgtfsUpload.svelte";
 
     import { getRedTransporte } from "$/services/red_transporte";
     
     let id_red;  
- 
+    let escritura = false;
     
 
     const limit = 15;
@@ -23,9 +23,10 @@
     let gtfs = null    
     let location = useLocation()
     let loading = false;
+    let gtfsArchivo = null;
 
     getPermisosPath($location.pathname)
-        
+        .then(data => escritura = data.escritura)
         .catch(error => console.log({ error }))
 
     $: onPage(page)
@@ -71,15 +72,19 @@
         onPage(page);
     }
 
+    function onNuevo() {
+        gtfsArchivo = {}
+    }
 </script>
 
 <PageTitle {loading}>Listado Archivos GTFS</PageTitle>
 
+
  <div class="row">  
     <div class="col-md">
 
         <div class="input-group mb-3">
-            <div class="input-group-text">Redes de Transporte</div>
+            <div class="input-group-text">Red de Transporte</div>
             <select bind:value={id_red} class="form-select" on:change={onChangeRed}>
                 <option value=""></option>
                 {#each redes as rt}
@@ -104,11 +109,11 @@
                 <thead>
                     <tr class="table-light">
                         <th style="width: 5%">Nro</th>
-                        <th style="width: 5%">
+                       <!-- <th style="width: 5%">
                             <a href={"#"} on:click|preventDefault={() => onOrderBy('id_gtfs')}>ID</a>
                             {#if ordering === 'id_gtfs'}<i class="bi bi-caret-up-fill"></i>{/if}
                             {#if ordering === '-id_gtfs'}<i class="bi bi-caret-down-fill"></i>{/if}
-                        </th>
+                        </th>-->
                         <th>
                             <a href={"#"} on:click|preventDefault={() => onOrderBy('nombre_red')}>Archivo</a>
                             {#if ordering === 'archivo'}<i class="bi bi-caret-up-fill"></i>{/if}
@@ -138,7 +143,7 @@
                     {#each lista_gtfs as app, index}
                     <tr>
                         <td class="table-light">{offset + index + 1}</td>
-                        <td>{app.id_red}</td>
+                        <!--<td>{app.id_gtfs}</td>-->
                         <td><a href={app.archivo}>{app.archivo}</a></td>
                         <td>{app.created}</td>
                         <td>{app.status}</td>
@@ -159,7 +164,24 @@
         />
     </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}
+<ModalgtfsUpload
+    {gtfsArchivo}
+    {escritura}
+    {id_red}
+    on:close={() => gtfsArchivo = null}     
+/>
+{/if}
 
 <style>
     .table-responsive {

src/pages/gtfs_archivo/FiltroRedTransporte.svelte

@@ -1,54 +0,0 @@
-<script>
-    import { getRedTransporte } from "$/services/red_transporte";
-    import { getGtfsArchivo } from "$/services/gtfs_archivo";
-    export let id_red;  
-    export let id_archivo; 
-    
-    export let loading = false;
-
-    
-    let redes= []
-    let archivos = []
-    let redes_archivos = []
-
-    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))
-    
-    getGtfsArchivo()
-        .then(data => data.sort((a,b) => a.archivo < b.archivo? -1 : 1))
-        .then(data => redes= data)
-        .catch(error => globalThis.toast.error(error))
-
-    function onChangeRed() {
-        id_archivo = ''        
-        if (!id_archivo) {
-            redes_archivos = []
-        } else {
-            const archivos_filtrados = archivos.filter(el => el.id_red === id_red);
-            const archivos_ordenados = archivos_filtrados.sort((a,b) => a.archivo < b.archivo ? -1 : 1);
-            redes_archivos = archivos_ordenados;
-        }
-    }
-  
-</script>
-
-<div class="row">
-    <div class="col-md">
-
-        <div class="input-group mb-3">
-            <div class="input-group-text">Redes de Transporte</div>
-            <select bind:value={id_red} class="form-select" on:change={onChangeRed}>
-                <option value=""></option>
-                {#each redes as rt}
-                    <option value={rt.id_red}>{rt.nombre_red}</option>
-                {/each}
-            </select>
-        </div>
-
-        
-
-    </div>
-     
-</div>

src/pages/gtfs_archivo/ModalgtfsUpload.svelte

@@ -0,0 +1,160 @@
+<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>

src/pages/gtfs_upload/Admin.svelte

@@ -0,0 +1,73 @@
+<script>
+    import Paginate from "$/components/Paginate.svelte";
+    import { getGtfsArchivo } from "$/services/gtfs_archivo";
+    import PageTitle from "$/components/PageTitle.svelte";    
+    import { useLocation } from "svelte-navigator";
+    import ModalgtfsUpload from "./ModalgtfsUpload.svelte";
+    import { getPermisosPath } from "$/services/usuarios";
+    import { getRedTransporte } from "$/services/red_transporte";
+    
+    
+    let loading = false;
+    let escritura = false;
+    let location = useLocation()
+    let redes = []
+    let red = null
+    let id_red;  
+    let file; 
+    let uploading = false;
+    let gtfsArchivo = null;
+
+    getPermisosPath($location.pathname)
+        
+        .catch(error => console.log({ error }))
+
+   
+  
+    function onNuevo() {
+        gtfsArchivo = {}
+    }
+
+     
+  
+</script>
+
+<PageTitle {loading}>Cargar Archivo GTFS</PageTitle>
+     
+
+
+<div class="card">
+    <p size="base"> El archivo debe tener extensión .zip<br>
+    Verifique que contiene los siguientes archivos TXT </p>
+    <ul>
+                
+        <li>Agency</li>
+        <li>Calendar</li>
+        <li>Feed_info</li>
+        <li>Routes</li>
+        <li>Shapes</li>
+        <li>Stops</li>
+        <li>Stop_times</li>
+        <li>Trips</li>
+        
+    </ul>
+     
+  
+</div>
+<div class="row">
+    <div class="col-md">
+        
+        <button class="btn btn-primary" on:click|preventDefault={onNuevo}>
+          Cargar GTFS
+     </button>
+    
+</div>
+</div>
+  
+{#if gtfsArchivo}
+<ModalgtfsUpload
+    {gtfsArchivo}
+    {escritura}
+    on:close={() => gtfsArchivo = null}     
+/>
+{/if}

src/pages/gtfs_upload/Admin.svelte.old

@@ -0,0 +1,125 @@
+<script>
+    import Paginate from "$/components/Paginate.svelte";
+    import { getGtfsArchivo } from "$/services/gtfs_archivo";
+    import PageTitle from "$/components/PageTitle.svelte";    
+    import { useLocation } from "svelte-navigator";
+    import ModalgtfsUpload from "./ModalgtfsUpload.svelte";
+    import { getPermisosPath } from "$/services/usuarios";
+    import { getRedTransporte } from "$/services/red_transporte";
+    
+    
+    let loading = false;
+    let escritura = false;
+    let location = useLocation()
+    let redes = []
+    let red = null
+    let id_red;  
+    let file; 
+    let uploading = false;
+    let gtfsArchivo = null;
+
+    getPermisosPath($location.pathname)
+        
+        .catch(error => console.log({ error }))
+
+  
+
+    getRedTransporte({ vigente: 1 })
+        .then(data => data.sort((a,b) => a.nombre_red < b.nombre_red? -1 : 1))
+   
+        .then(data => {
+            redes = data;
+            if (redes.length > 0) {
+                id_red = redes[0].id_red;                 
+            }
+        })
+        .catch(error => globalThis.toast.error(error))
+
+  
+    function onNuevo() {
+        gtfsArchivo = {}
+    }
+
+    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);
+        } catch (error) {
+            console.error('Error al subir el archivo:', error);
+            toast.push(error.message);
+        } finally {
+            uploading = false;
+        }
+    }
+  
+</script>
+
+<PageTitle {loading}>Cargar GTFS</PageTitle>
+     
+<div class="row">
+    <div class="col-md">
+        
+        <button class="btn btn-primary" on:click|preventDefault={onNuevo}>
+         <i class="bi bi-plus-lg"></i> Nuevo
+     </button>
+         
+        <div class="input-group mb-3">
+            <div class="input-group-text">Redes 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>
+         
+        <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>
+
+  
+{#if gtfsArchivo}
+<ModalgtfsUpload
+    {gtfsArchivo}
+    {escritura}
+    on:close={() => gtfsArchivo = null}     
+/>
+{/if}

src/pages/gtfs_upload/ModalgtfsUpload.svelte

@@ -0,0 +1,112 @@
+
+
+<script>
+
+    import { getRedTransporte } from "$/services/red_transporte";
+    import Modal from "../../components/Modal.svelte";
+    import { getGtfsArchivo, createGtfsArchivo, updateGtfsArchivo, deleteGtfsArchivo } from "$/services/gtfs_archivo";
+    import { createEventDispatcher } from "svelte";
+    const dispatch = createEventDispatcher();
+
+//    export let gtfsArchivo = {};
+    export let escritura = false;
+    let form = {}
+    let loading = false;
+
+ 
+  
+    let redes = []
+    let red = null
+    let id_red;  
+    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;
+            if (redes.length > 0) {
+                id_red = redes[0].id_red;                 
+            }
+        })
+        .catch(error => globalThis.toast.error(error))
+
+  
+    function onNuevo() {
+        operador = {}
+    }
+
+    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);
+        } catch (error) {
+            console.error('Error al subir el archivo:', error);
+            toast.push(error.message);
+        } finally {
+            uploading = false;
+        }
+    }
+ 
+</script>
+ 
+
+<form >
+    <Modal title={'Cargar Archivo GTFS'}> 
+      
+<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>
+         
+        <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>
+
+ 

src/routes/user.routes.js

@@ -5,6 +5,7 @@ import PageAplicaciones from '$/pages/aplicaciones/Admin.svelte'
 import PageOperador from '$/pages/operadores/Admin.svelte'
 import PageRedTransporte from '$/pages/red_transporte/Admin.svelte'
 import PageArchivoGTFS from '$/pages/gtfs_archivo/Admin.svelte'
+import PageCargaArchivoGTFS from '$/pages/gtfs_upload/Admin.svelte'
 import PageUsuarios from '$/pages/usuarios/Admin.svelte'
 import PageUsuarioCreate from '$/pages/usuarios/Usuario.svelte'
 import PageUsuarioModifica from '$/pages/usuarios/Usuario.svelte'
@@ -26,6 +27,7 @@ export const routes_base = [
     { path: '/aplicaciones', component: PageAplicaciones },
     { path: '/red-transporte', component: PageRedTransporte },
     { path: '/gtfs-archivo', component: PageArchivoGTFS },    
+   // { path: '/gtfs-upload', component: PageCargaArchivoGTFS },
     { path: '/operadores', component: PageOperador },
     { path: '/usuarios', component: PageUsuarios },
     { path: '/usuarios/nuevo', component: PageUsuarioCreate },