forked from TDTP/admin_transporte_frontend
app Carga GTFS
Ronald Morales
parent
7671735f40
commit
230db0db94
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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="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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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}
|
||||
|
|
@ -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}
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -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 },
|
||||
|
|
|
|||
Loading…
Reference in New Issue