avance de carga de archivo gtfs
Francisco Sandoval
parent
4376aaa184
commit
c03076a58b
|
|
@ -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 })
|
||||
.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
|
||||
}
|
||||
})
|
||||
getRedTransporte({ vigente: 1, ordering: 'nombre_red' })
|
||||
.then(data => redes = data)
|
||||
.then(() => id_red = redes[0]?.id_red || null)
|
||||
.then(() => onPage(1))
|
||||
.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="row">
|
||||
<div class="col-md">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{#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}
|
||||
<ModalgtfsUpload
|
||||
{gtfsArchivo}
|
||||
{escritura}
|
||||
{id_red}
|
||||
on:close={() => gtfsArchivo = null}
|
||||
/>
|
||||
{#if showUpload}
|
||||
<ModalgtfsUpload on:close={() => showUpload = false} {id_red} />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,160 +1,109 @@
|
|||
<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 {
|
||||
getGtfsArchivo,
|
||||
createGtfsArchivo,
|
||||
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))
|
||||
|
||||
|
||||
|
||||
|
||||
async function handleUpload() {
|
||||
if (!file) {
|
||||
toast.push('Por favor, seleccione un archivo para cargar.');
|
||||
return;
|
||||
}
|
||||
// fecha actual en formato yyyy-mm-dd
|
||||
let fecha_hoy = (new Date()).toISOString().substring(0,10);
|
||||
let form = { valid_from: fecha_hoy, id_red };
|
||||
let loading = false;
|
||||
let inputFile = null;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
let redes = [];
|
||||
|
||||
getRedTransporte({ vigente: 1, ordering: 'nombre_red' })
|
||||
.then((data) => redes = data)
|
||||
.catch((error) => globalThis.toast.error(error));
|
||||
|
||||
async function onSave() {
|
||||
try {
|
||||
loading = true;
|
||||
|
||||
form = await createGtfsArchivo(form)
|
||||
|
||||
globalThis.toast.success('Se ha cargado el Archivo')
|
||||
dispatch('refresh')
|
||||
dispatch('close')
|
||||
const archivo = inputFile.files[0]
|
||||
const vigente = form.valid_from >= fecha_hoy;
|
||||
await createGtfsArchivo({ ...form, vigente, archivo });
|
||||
|
||||
globalThis.toast.success("Se ha cargado el Archivo");
|
||||
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 >
|
||||
<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">
|
||||
<form on:submit|preventDefault={onSave}>
|
||||
<Modal
|
||||
title={"Cargar Archivo GTFS"}
|
||||
size="lg"
|
||||
classBody="bg-white"
|
||||
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={form.id_red} class="form-select">
|
||||
{#each redes as rt}
|
||||
<option value={rt.id_red}>{rt.nombre_red}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</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 class="row mb-3">
|
||||
<div class="col-md-3">Fecha Carga</div>
|
||||
<div class="col-md">
|
||||
<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>
|
||||
|
||||
</Modal>
|
||||
<div class="row mb-5">
|
||||
<div class="col-md-3">Cargado por</div>
|
||||
<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; }
|
||||
</style>
|
||||
.disabled {
|
||||
pointer-events: none !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
|
||||
body: form,
|
||||
headers: { "Authorization": `Bearer ${getToken()}` }
|
||||
})
|
||||
if (!res.ok) throw await res.json()
|
||||
return res.json()
|
||||
|
|
|
|||
Loading…
Reference in New Issue