se agregan loading
Francisco Sandoval
parent
146ab19f9a
commit
fd182216b9
|
|
@ -7,21 +7,26 @@
|
|||
createParaderoImagen,
|
||||
deleteParaderoImagen,
|
||||
} from "$/services/paraderos";
|
||||
import IconLoading from "../../components/IconLoading.svelte";
|
||||
|
||||
export let parada = null;
|
||||
let form = {};
|
||||
let imagenes = [];
|
||||
let loading = false;
|
||||
|
||||
$: init(!!parada);
|
||||
|
||||
async function init(show) {
|
||||
try {
|
||||
if (parada) {
|
||||
loading = true;
|
||||
form = await getParadero(parada.id_paradero);
|
||||
imagenes = await getParaderoImagenes(parada.id_paradero);
|
||||
}
|
||||
} catch (error) {
|
||||
alert(error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,15 +63,19 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
{#if loading}
|
||||
<IconLoading />
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
Coordenadas:
|
||||
<div class="input-group mb-3">
|
||||
<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 class="input-group mb-3">
|
||||
<div class="input-group-text">Longitud</div>
|
||||
<div class="form-control">{form.stop_lon}</div>
|
||||
<div class="form-control">{form.stop_lon || '...'}</div>
|
||||
</div>
|
||||
|
||||
Propiedades:
|
||||
|
|
@ -76,7 +85,7 @@
|
|||
<input
|
||||
type="text"
|
||||
disabled
|
||||
value={form.id_paradero}
|
||||
value={form.id_paradero || '...'}
|
||||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,49 +3,64 @@
|
|||
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { getLetreroLUR } from "../../services/letreros_lur";
|
||||
import IconLoading from "../../components/IconLoading.svelte";
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let codigo = null;
|
||||
|
||||
let letrero = {};
|
||||
let codigo_dividido = []
|
||||
let loading = false
|
||||
|
||||
$: fetchLetreroLUR(codigo)
|
||||
|
||||
async function fetchLetreroLUR(codigo) {
|
||||
try {
|
||||
loading = true
|
||||
letrero = await getLetreroLUR(codigo) || {}
|
||||
codigo_dividido = letrero.codigo.match(/\d+|[a-z]+/gi)
|
||||
} catch (error) {
|
||||
console.log({ error })
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<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}"
|
||||
>
|
||||
<tbody class="color1">
|
||||
<tr>
|
||||
<td rowspan="4" width="80" class="color2 text-center">
|
||||
<h1 class="m-0">{codigo_dividido[0]}</h1>
|
||||
<h1 class="m-0">{codigo_dividido[1]}</h1>
|
||||
<h1 class="m-0">{codigo_dividido[0] || ''}</h1>
|
||||
<h1 class="m-0">{codigo_dividido[1] || ''}</h1>
|
||||
</td>
|
||||
<td width="220">{letrero.linea1}</td>
|
||||
<td width="220">{letrero.linea1 || ''}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{letrero.linea2}</td>
|
||||
<td>{letrero.linea2 || ''}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{letrero.linea3}</td>
|
||||
<td>{letrero.linea3 || ''}</td>
|
||||
</tr>
|
||||
<tr class="color2">
|
||||
<td>{letrero.linea4}</td>
|
||||
<td>{letrero.linea4 || ''}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{:else}
|
||||
{#if !loading}
|
||||
<p class="alert alert-warning p-3">Información del Letrero no registrada.</p>
|
||||
{/if}
|
||||
{/if}
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
let elMap = null
|
||||
let operadores = []
|
||||
let lineas = []
|
||||
let lineas_operador = []
|
||||
let id_operador = ''
|
||||
let id_linea = ''
|
||||
let loading = false
|
||||
|
|
@ -31,6 +32,9 @@
|
|||
let codigo = 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()
|
||||
.then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1))
|
||||
|
|
@ -120,8 +124,7 @@
|
|||
|
||||
<div class="row">
|
||||
<div class="col-md">
|
||||
<PageTitle>
|
||||
{#if loading}<IconLoading />{/if}
|
||||
<PageTitle {loading}>
|
||||
Rutas
|
||||
</PageTitle>
|
||||
</div>
|
||||
|
|
@ -137,10 +140,10 @@
|
|||
</select>
|
||||
|
||||
<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>
|
||||
{#each lineas.filter(el => el.id_operador === id_operador) as linea}
|
||||
<option value={linea.id_linea}>{linea.route_short_name}</option>
|
||||
{#each lineas_operador as linea}
|
||||
<option value={linea.id_linea}>{@html linea.route_short_name.padEnd(6).replace(/ /g,' ')} {linea.route_long_name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
<div class="input-group mb-3">
|
||||
<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">
|
||||
<input
|
||||
type="color"
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
|
||||
<div class="input-group mb-3">
|
||||
<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">
|
||||
<input
|
||||
type="color"
|
||||
|
|
@ -72,7 +72,7 @@
|
|||
|
||||
<div class="input-group mb-3">
|
||||
<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">
|
||||
<input
|
||||
type="color"
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
|
||||
<div class="input-group mb-3">
|
||||
<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">
|
||||
<input
|
||||
type="color"
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
</div>
|
||||
<div class="col-md">
|
||||
<table
|
||||
class="m-auto"
|
||||
class="m-auto border border-secondary"
|
||||
cellpadding="10"
|
||||
cellspacing="0"
|
||||
style="--bgcolor1: {form.bgcolor1}; --color1: {form.color1}; --bgcolor2: {form.bgcolor2}; --color2: {form.color2}"
|
||||
|
|
@ -114,6 +114,7 @@
|
|||
class="form-control"
|
||||
placeholder="Linea 1"
|
||||
bind:value={form.linea1}
|
||||
required
|
||||
/></td
|
||||
>
|
||||
</tr>
|
||||
|
|
@ -124,6 +125,7 @@
|
|||
class="form-control"
|
||||
placeholder="Linea 2"
|
||||
bind:value={form.linea2}
|
||||
required
|
||||
/></td
|
||||
>
|
||||
</tr>
|
||||
|
|
@ -134,6 +136,7 @@
|
|||
class="form-control"
|
||||
placeholder="Linea 3"
|
||||
bind:value={form.linea3}
|
||||
required
|
||||
/></td
|
||||
>
|
||||
</tr>
|
||||
|
|
@ -144,6 +147,7 @@
|
|||
class="form-control"
|
||||
placeholder="Linea 4"
|
||||
bind:value={form.linea4}
|
||||
required
|
||||
/></td
|
||||
>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -10,29 +10,22 @@
|
|||
|
||||
async function onEdita({ linea: { id_linea } }) {
|
||||
try {
|
||||
loading = true
|
||||
const linea = await getLinea(id_linea)
|
||||
const letrero = await getLetreroLUR(linea.route_short_name).catch(() => Promise.resolve({}))
|
||||
ruta = { ...linea, ...letrero }
|
||||
} catch (error) {
|
||||
console.log({ error })
|
||||
} finally {
|
||||
loading = false
|
||||
}
|
||||
}
|
||||
|
||||
// function onNuevaRuta() {
|
||||
// ruta = {}
|
||||
// }
|
||||
</script>
|
||||
|
||||
|
||||
<PageTitle {loading}>Rutas de Buses</PageTitle>
|
||||
|
||||
<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>
|
||||
<TableRutas on:loading={ev => loading = ev.detail} on:select={ev => onEdita(ev.detail)} />
|
||||
|
||||
{#if ruta}
|
||||
<ModalFormRuta {ruta} on:close={() => ruta = null} />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import IconLoading from "../../components/IconLoading.svelte";
|
||||
import Modal from "../../components/Modal.svelte";
|
||||
import { createLetreroLUR, deleteLetreroLUR } from "../../services/letreros_lur";
|
||||
import { createLinea, deleteLinea, updateLinea } from "../../services/lineas";
|
||||
|
|
@ -8,12 +9,15 @@
|
|||
|
||||
export let ruta = null;
|
||||
let form = {}
|
||||
let error_messages = null;
|
||||
let loading = false
|
||||
|
||||
$: form = { ...ruta }
|
||||
|
||||
async function onSave() {
|
||||
try {
|
||||
console.log({ ruta })
|
||||
loading = true
|
||||
error_messages = null
|
||||
const { id_linea } = ruta;
|
||||
const { route_short_name, route_long_name,
|
||||
linea1, linea2, linea3, linea4,
|
||||
|
|
@ -33,7 +37,11 @@
|
|||
})
|
||||
dispatch('close')
|
||||
} 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>
|
||||
|
||||
<form on:submit|preventDefault={onSave}>
|
||||
<Modal title="Ruta de Servicio" size="xl"
|
||||
on:close={() => dispatch('close')}
|
||||
>
|
||||
<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">
|
||||
<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}
|
||||
<button class="btn btn-danger" on:click|preventDefault={onDelete}><i class="bi bi-trash"></i> Eliminar</button>
|
||||
{/if} -->
|
||||
|
||||
{#if loading}<IconLoading />{/if}
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
</form>
|
||||
Loading…
Reference in New Issue