TDTP
/
Sistema_Gestion_Transporte
mirror of https://gitlab.com/m3f_usm/T_digital_Transporte_USM.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

se agregan loading

develop/frontend
Francisco Sandoval 2023-11-19 14:30:16 -03:00
parent 146ab19f9a
commit fd182216b9
6 changed files with 107 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/pages/mapas/FormParadero.svelte
View File

@ -7,21 +7,26 @@
createParaderoImagen, createParaderoImagen,
deleteParaderoImagen, deleteParaderoImagen,
} from "$/services/paraderos"; } from "$/services/paraderos";
import IconLoading from "../../components/IconLoading.svelte";
export let parada = null; export let parada = null;
let form = {}; let form = {};
let imagenes = []; let imagenes = [];
let loading = false;
$: init(!!parada); $: init(!!parada);
async function init(show) { async function init(show) {
try { try {
if (parada) { if (parada) {
loading = true;
form = await getParadero(parada.id_paradero); form = await getParadero(parada.id_paradero);
imagenes = await getParaderoImagenes(parada.id_paradero); imagenes = await getParaderoImagenes(parada.id_paradero);
} }
} catch (error) { } catch (error) {
alert(error); alert(error);
} finally {
loading = false;
} }
} }
@ -58,15 +63,19 @@
} }
</script> </script>
{#if loading}
<IconLoading />
{/if}
<div> <div>
Coordenadas: Coordenadas:
<div class="input-group mb-3"> <div class="input-group mb-3">
<div class="input-group-text">Latitud</div> <div class="input-group-text">Latitud</div>
<div class="form-control">{form.stop_lat}</div> <div class="form-control">{form.stop_lat || '...'}</div>
</div> </div>
<div class="input-group mb-3"> <div class="input-group mb-3">
<div class="input-group-text">Longitud</div> <div class="input-group-text">Longitud</div>
<div class="form-control">{form.stop_lon}</div> <div class="form-control">{form.stop_lon || '...'}</div>
</div> </div>
Propiedades: Propiedades:
@ -76,7 +85,7 @@
<input <input
type="text" type="text"
disabled disabled
value={form.id_paradero} value={form.id_paradero || '...'}
class="form-control" class="form-control"
/> />
</div> </div>

29
src/pages/mapas/ModalLetreroLUR.svelte
View File

@ -3,49 +3,64 @@
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import { getLetreroLUR } from "../../services/letreros_lur"; import { getLetreroLUR } from "../../services/letreros_lur";
import IconLoading from "../../components/IconLoading.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let codigo = null; export let codigo = null;
let letrero = {}; let letrero = {};
let codigo_dividido = [] let codigo_dividido = []
let loading = false
$: fetchLetreroLUR(codigo) $: fetchLetreroLUR(codigo)
async function fetchLetreroLUR(codigo) { async function fetchLetreroLUR(codigo) {
try { try {
loading = true
letrero = await getLetreroLUR(codigo) || {} letrero = await getLetreroLUR(codigo) || {}
codigo_dividido = letrero.codigo.match(/\d+|[a-z]+/gi) codigo_dividido = letrero.codigo.match(/\d+|[a-z]+/gi)
} catch (error) { } catch (error) {
console.log({ error }) console.log({ error })
} finally {
loading = false;
} }
} }
</script> </script>
<Modal title="Letrero" classBody="bg-white" on:close={() => dispatch('close')}> <Modal title="Letrero" classBody="bg-white" on:close={() => dispatch('close')}>
<table class="m-auto" cellpadding="10" cellspacing="0" {#if loading}
<IconLoading />
{/if}
{#if !loading && letrero.codigo}
<table class="m-auto border border-secondary" cellpadding="10" cellspacing="0"
style="--bgcolor1: {letrero.bgcolor1}; --color1: {letrero.color1}; --bgcolor2: {letrero.bgcolor2}; --color2: {letrero.color2}" style="--bgcolor1: {letrero.bgcolor1}; --color1: {letrero.color1}; --bgcolor2: {letrero.bgcolor2}; --color2: {letrero.color2}"
> >
<tbody class="color1"> <tbody class="color1">
<tr> <tr>
<td rowspan="4" width="80" class="color2 text-center"> <td rowspan="4" width="80" class="color2 text-center">
<h1 class="m-0">{codigo_dividido[0]}</h1> <h1 class="m-0">{codigo_dividido[0] || ''}</h1>
<h1 class="m-0">{codigo_dividido[1]}</h1> <h1 class="m-0">{codigo_dividido[1] || ''}</h1>
</td> </td>
<td width="220">{letrero.linea1}</td> <td width="220">{letrero.linea1 || ''}</td>
</tr> </tr>
<tr> <tr>
<td>{letrero.linea2}</td> <td>{letrero.linea2 || ''}</td>
</tr> </tr>
<tr> <tr>
<td>{letrero.linea3}</td> <td>{letrero.linea3 || ''}</td>
</tr> </tr>
<tr class="color2"> <tr class="color2">
<td>{letrero.linea4}</td> <td>{letrero.linea4 || ''}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
{:else}
{#if !loading}
<p class="alert alert-warning p-3">Información del Letrero no registrada.</p>
{/if}
{/if}
</Modal> </Modal>
<style> <style>

13
src/pages/mapas/Rutas.svelte
View File

@ -17,6 +17,7 @@
let elMap = null let elMap = null
let operadores = [] let operadores = []
let lineas = [] let lineas = []
let lineas_operador = []
let id_operador = '' let id_operador = ''
let id_linea = '' let id_linea = ''
let loading = false let loading = false
@ -31,6 +32,9 @@
let codigo = null let codigo = null
$: codigo = lineas.find(el => el.id_linea === id_linea)?.route_short_name || null $: codigo = lineas.find(el => el.id_linea === id_linea)?.route_short_name || null
$: lineas_operador = id_operador ?
lineas.filter(el => el.id_operador === id_operador)
.sort((a,b) => a.route_short_name < b.route_short_name ? -1 : 1) : [];
getOperadores() getOperadores()
.then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1)) .then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1))
@ -120,8 +124,7 @@
<div class="row"> <div class="row">
<div class="col-md"> <div class="col-md">
<PageTitle> <PageTitle {loading}>
{#if loading}<IconLoading />{/if}
Rutas Rutas
</PageTitle> </PageTitle>
</div> </div>
@ -137,10 +140,10 @@
</select> </select>
<div class="input-group-text">Linea</div> <div class="input-group-text">Linea</div>
<select bind:value={id_linea} class="form-select"> <select bind:value={id_linea} class="form-select" style="font-family: monospace;">
<option value=""></option> <option value=""></option>
{#each lineas.filter(el => el.id_operador === id_operador) as linea} {#each lineas_operador as linea}
<option value={linea.id_linea}>{linea.route_short_name}</option> <option value={linea.id_linea}>{@html linea.route_short_name.padEnd(6).replace(/ /g,'&nbsp;')} {linea.route_long_name}</option>
{/each} {/each}
</select> </select>
</div> </div>

14
src/pages/rutas/FormRuta.svelte
View File

@ -48,7 +48,7 @@
<div class="input-group mb-3"> <div class="input-group mb-3">
<div class="input-group-text">Color Fondo 1</div> <div class="input-group-text">Color Fondo 1</div>
<input type="text" class="form-control" bind:value={form.bgcolor1}> <input type="text" class="form-control" bind:value={form.bgcolor1} required>
<div class="form-control"> <div class="form-control">
<input <input
type="color" type="color"
@ -60,7 +60,7 @@
<div class="input-group mb-3"> <div class="input-group mb-3">
<div class="input-group-text">Color Texto 1</div> <div class="input-group-text">Color Texto 1</div>
<input type="text" class="form-control" bind:value={form.color1}> <input type="text" class="form-control" bind:value={form.color1} required>
<div class="form-control"> <div class="form-control">
<input <input
type="color" type="color"
@ -72,7 +72,7 @@
<div class="input-group mb-3"> <div class="input-group mb-3">
<div class="input-group-text">Color Fondo 2</div> <div class="input-group-text">Color Fondo 2</div>
<input type="text" class="form-control" bind:value={form.bgcolor2}> <input type="text" class="form-control" bind:value={form.bgcolor2} required>
<div class="form-control"> <div class="form-control">
<input <input
type="color" type="color"
@ -84,7 +84,7 @@
<div class="input-group mb-3"> <div class="input-group mb-3">
<div class="input-group-text">Color Texto 2</div> <div class="input-group-text">Color Texto 2</div>
<input type="text" class="form-control" bind:value={form.color2}> <input type="text" class="form-control" bind:value={form.color2} required>
<div class="form-control"> <div class="form-control">
<input <input
type="color" type="color"
@ -97,7 +97,7 @@
</div> </div>
<div class="col-md"> <div class="col-md">
<table <table
class="m-auto" class="m-auto border border-secondary"
cellpadding="10" cellpadding="10"
cellspacing="0" cellspacing="0"
style="--bgcolor1: {form.bgcolor1}; --color1: {form.color1}; --bgcolor2: {form.bgcolor2}; --color2: {form.color2}" style="--bgcolor1: {form.bgcolor1}; --color1: {form.color1}; --bgcolor2: {form.bgcolor2}; --color2: {form.color2}"
@ -114,6 +114,7 @@
class="form-control" class="form-control"
placeholder="Linea 1" placeholder="Linea 1"
bind:value={form.linea1} bind:value={form.linea1}
required
/></td /></td
> >
</tr> </tr>
@ -124,6 +125,7 @@
class="form-control" class="form-control"
placeholder="Linea 2" placeholder="Linea 2"
bind:value={form.linea2} bind:value={form.linea2}
required
/></td /></td
> >
</tr> </tr>
@ -134,6 +136,7 @@
class="form-control" class="form-control"
placeholder="Linea 3" placeholder="Linea 3"
bind:value={form.linea3} bind:value={form.linea3}
required
/></td /></td
> >
</tr> </tr>
@ -144,6 +147,7 @@
class="form-control" class="form-control"
placeholder="Linea 4" placeholder="Linea 4"
bind:value={form.linea4} bind:value={form.linea4}
required
/></td /></td
> >
</tr> </tr>

15
src/pages/rutas/Home.svelte
View File

@ -10,29 +10,22 @@
async function onEdita({ linea: { id_linea } }) { async function onEdita({ linea: { id_linea } }) {
try { try {
loading = true
const linea = await getLinea(id_linea) const linea = await getLinea(id_linea)
const letrero = await getLetreroLUR(linea.route_short_name).catch(() => Promise.resolve({})) const letrero = await getLetreroLUR(linea.route_short_name).catch(() => Promise.resolve({}))
ruta = { ...linea, ...letrero } ruta = { ...linea, ...letrero }
} catch (error) { } catch (error) {
console.log({ error }) console.log({ error })
} finally {
loading = false
} }
} }
// function onNuevaRuta() {
// ruta = {}
// }
</script> </script>
<PageTitle {loading}>Rutas de Buses</PageTitle> <PageTitle {loading}>Rutas de Buses</PageTitle>
<TableRutas on:loading={ev => loading = ev.detail} on:select={ev => onEdita(ev.detail)}> <TableRutas on:loading={ev => loading = ev.detail} on:select={ev => onEdita(ev.detail)} />
<!-- <svelte:fragment slot="buttons">
<button class="btn btn-outline-secondary" on:click|preventDefault={() => onNuevaRuta()}>
<i class="bi bi-plus-lg"></i> Nuevo
</button>
</svelte:fragment> -->
</TableRutas>
{#if ruta} {#if ruta}
<ModalFormRuta {ruta} on:close={() => ruta = null} /> <ModalFormRuta {ruta} on:close={() => ruta = null} />

29
src/pages/rutas/ModalFormRuta.svelte
View File

@ -1,4 +1,5 @@
<script> <script>
import IconLoading from "../../components/IconLoading.svelte";
import Modal from "../../components/Modal.svelte"; import Modal from "../../components/Modal.svelte";
import { createLetreroLUR, deleteLetreroLUR } from "../../services/letreros_lur"; import { createLetreroLUR, deleteLetreroLUR } from "../../services/letreros_lur";
import { createLinea, deleteLinea, updateLinea } from "../../services/lineas"; import { createLinea, deleteLinea, updateLinea } from "../../services/lineas";
@ -8,12 +9,15 @@
export let ruta = null; export let ruta = null;
let form = {} let form = {}
let error_messages = null;
let loading = false
$: form = { ...ruta } $: form = { ...ruta }
async function onSave() { async function onSave() {
try { try {
console.log({ ruta }) loading = true
error_messages = null
const { id_linea } = ruta; const { id_linea } = ruta;
const { route_short_name, route_long_name, const { route_short_name, route_long_name,
linea1, linea2, linea3, linea4, linea1, linea2, linea3, linea4,
@ -33,7 +37,11 @@
}) })
dispatch('close') dispatch('close')
} catch (error) { } catch (error) {
console.log({ error }) const data = JSON.parse(error) || null
if (data) error_messages = data;
console.log({ data })
} finally {
loading = false
} }
} }
@ -49,14 +57,29 @@
// } // }
</script> </script>
<form on:submit|preventDefault={onSave}>
<Modal title="Ruta de Servicio" size="xl" <Modal title="Ruta de Servicio" size="xl"
on:close={() => dispatch('close')} on:close={() => dispatch('close')}
> >
<FormRuta {form} /> <FormRuta {form} />
{#if error_messages}
<div class="alert alert-danger">
<ul>
{#each Object.entries(error_messages) as [field, message]}
<li>{field}: {message[0]}</li>
{/each}
</ul>
</div>
{/if}
<svelte:fragment slot="buttons"> <svelte:fragment slot="buttons">
<button class="btn btn-primary" on:click|preventDefault={onSave}><i class="bi bi-save"></i> Guardar</button> <button class="btn btn-primary" type="submit" disabled={loading}><i class="bi bi-save"></i> Guardar</button>
<!-- {#if ruta.id_linea} <!-- {#if ruta.id_linea}
<button class="btn btn-danger" on:click|preventDefault={onDelete}><i class="bi bi-trash"></i> Eliminar</button> <button class="btn btn-danger" on:click|preventDefault={onDelete}><i class="bi bi-trash"></i> Eliminar</button>
{/if} --> {/if} -->
{#if loading}<IconLoading />{/if}
</svelte:fragment> </svelte:fragment>
</Modal> </Modal>
</form>