From fd182216b980d2e287a0398bd04c4b2cdd1a7338 Mon Sep 17 00:00:00 2001
From: Francisco Sandoval <fesv1975@gmail.com>
Date: Sun, 19 Nov 2023 14:30:16 -0300
Subject: [PATCH] se agregan loading

---
 src/pages/mapas/FormParadero.svelte    | 15 +++++--
 src/pages/mapas/ModalLetreroLUR.svelte | 59 ++++++++++++++++----------
 src/pages/mapas/Rutas.svelte           | 13 +++---
 src/pages/rutas/FormRuta.svelte        | 14 +++---
 src/pages/rutas/Home.svelte            | 15 ++-----
 src/pages/rutas/ModalFormRuta.svelte   | 51 ++++++++++++++++------
 6 files changed, 107 insertions(+), 60 deletions(-)

diff --git a/src/pages/mapas/FormParadero.svelte b/src/pages/mapas/FormParadero.svelte
index 9a12709..70bbc80 100644
--- 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>
diff --git a/src/pages/mapas/ModalLetreroLUR.svelte b/src/pages/mapas/ModalLetreroLUR.svelte
index 81388a1..3fcf7d4 100644
--- 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>
diff --git a/src/pages/mapas/Rutas.svelte b/src/pages/mapas/Rutas.svelte
index b312698..895fc90 100644
--- 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>
diff --git a/src/pages/rutas/FormRuta.svelte b/src/pages/rutas/FormRuta.svelte
index 61048db..59bbcf7 100644
--- 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>
diff --git a/src/pages/rutas/Home.svelte b/src/pages/rutas/Home.svelte
index 1080482..1fd9016 100644
--- 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} />
diff --git a/src/pages/rutas/ModalFormRuta.svelte b/src/pages/rutas/ModalFormRuta.svelte
index e05bb19..a6eecb8 100644
--- 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>
\ No newline at end of file
+<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>
\ No newline at end of file