app listado gtfs- Seleccion Red de Transporte

src/pages/gtfs_archivo/Admin.svelte

@@ -5,6 +5,13 @@
     import { useLocation } from "svelte-navigator";
     import { getPermisosPath } from "$/services/usuarios";
 
+
+    import { getRedTransporte } from "$/services/red_transporte";
+    
+    let id_red;  
+ 
+    
+
     const limit = 15;
     let page = 1;
     let offset = 0;
@@ -23,11 +30,26 @@
 
     $: onPage(page)
 
+    getRedTransporte({ vigente: 1 })
+        .then(data => data.sort((a,b) => a.nombre_red < b.nombre_red? -1 : 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) {
         try {
+            if (!id_red) {         
+                return;
+            }
             loading = true
             offset = (p - 1) * limit;
-            const data = await getGtfsArchivo({ offset, limit, ordering })
+            const data = await getGtfsArchivo({id_red, offset, limit, ordering })
             lista_gtfs = data.results;
             count = data.count;
         } catch (error) {
@@ -42,10 +64,38 @@
         ordering = ordering === field ? '-' + field : field;
         onPage(page)
     }
+
+    function onChangeRed() {
+              
+        page = 1; // Reinicia la paginación al cambiar de red
+        onPage(page);
+    }
+
 </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>
+            <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>
+
+
+
 <div class="card">
 
     <div class="card-body">