se agregan loading

2023-11-19 14:30:16 -03:00 · 2023-11-19 14:30:16 -03:00 · fd182216b9
parent 146ab19f9a
commit fd182216b9
6 changed files with 107 additions and 60 deletions
--- a/src/pages/mapas/FormParadero.svelte
+++ b/src/pages/mapas/FormParadero.svelte
@ -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>
--- a/src/pages/mapas/ModalLetreroLUR.svelte
+++ b/src/pages/mapas/ModalLetreroLUR.svelte
@ -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"
-        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>
-                </td>
-                <td width="220">{letrero.linea1}</td>
-            </tr>
-            <tr>
-                <td>{letrero.linea2}</td>
-            </tr>
-            <tr>
-                <td>{letrero.linea3}</td>
-            </tr>
-            <tr class="color2">
-                <td>{letrero.linea4}</td>
-            </tr>
-        </tbody>
-    </table>
+    {#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>
+                    </td>
+                    <td width="220">{letrero.linea1 || ''}</td>
+                </tr>
+                <tr>
+                    <td>{letrero.linea2 || ''}</td>
+                </tr>
+                <tr>
+                    <td>{letrero.linea3 || ''}</td>
+                </tr>
+                <tr class="color2">
+                    <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>
--- a/src/pages/mapas/Rutas.svelte
+++ b/src/pages/mapas/Rutas.svelte
@ -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,'&nbsp;')} {linea.route_long_name}</option>
                {/each}
            </select>
        </div>
--- a/src/pages/rutas/FormRuta.svelte
+++ b/src/pages/rutas/FormRuta.svelte
@ -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>
--- a/src/pages/rutas/Home.svelte
+++ b/src/pages/rutas/Home.svelte
@ -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} />
--- a/src/pages/rutas/ModalFormRuta.svelte
+++ b/src/pages/rutas/ModalFormRuta.svelte
@ -1,5 +1,6 @@
 <script>
-    import Modal from "../../components/Modal.svelte";
+    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";
    import FormRuta from "./FormRuta.svelte";
@ -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>

-<Modal title="Ruta de Servicio" size="xl"
-    on:close={() => dispatch('close')}
->
-    <FormRuta {form} />
-    <svelte:fragment slot="buttons">
-        <button class="btn btn-primary" on:click|preventDefault={onSave}><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} -->
-    </svelte:fragment>
-</Modal>
+<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" 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>