From 18b19902c7959e4297dfe9f4fd342453a71ac6e4 Mon Sep 17 00:00:00 2001
From: Francisco Sandoval <fesv1975@gmail.com>
Date: Fri, 27 Oct 2023 15:12:17 -0300
Subject: [PATCH] se agrega letrero en mapa de rutas

---
 src/components/Modal.svelte            |  6 ++-
 src/pages/mapas/FormParadero.svelte    |  9 ++++
 src/pages/mapas/ModalLetreroLUR.svelte | 60 ++++++++++++++++++++++++++
 src/pages/mapas/Paraderos.svelte       |  2 +-
 src/pages/mapas/Rutas.svelte           | 26 ++++++++---
 src/services/letreros_lur.js           | 48 +++++++++++++++++++++
 6 files changed, 143 insertions(+), 8 deletions(-)
 create mode 100644 src/pages/mapas/ModalLetreroLUR.svelte
 create mode 100644 src/services/letreros_lur.js

diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index f94e0ac..c1f112a 100644
--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -6,6 +6,8 @@
     export let className = "";
     export let classTitle = "";
     export let classHeader = "";
+    export let classBody = "";
+    export let classFooter = "";
     export let size = "";
 </script>
 
@@ -24,10 +26,10 @@
                     on:click|preventDefault={() => dispatch("close")}>
                 </button>
             </div>
-            <div class="modal-body">
+            <div class={"modal-body " + classBody}>
                 <slot />
             </div>
-            <div class="modal-footer">
+            <div class={"modal-footer " + classFooter}>
                 <slot name="buttons" />
                 <div class="me-auto" />
                 <button
diff --git a/src/pages/mapas/FormParadero.svelte b/src/pages/mapas/FormParadero.svelte
index ef764f3..4b29bef 100644
--- a/src/pages/mapas/FormParadero.svelte
+++ b/src/pages/mapas/FormParadero.svelte
@@ -73,6 +73,15 @@
 
     Propiedades:
     <form on:submit|preventDefault={onSave}>
+        <div class="input-group mb-3">
+            <div class="input-group-text">Identificador</div>
+            <input
+                type="text"
+                disabled
+                value={form.id_paradero}
+                class="form-control"
+            />
+        </div>
         <div class="input-group mb-3">
             <div class="input-group-text">Nombre</div>
             <input
diff --git a/src/pages/mapas/ModalLetreroLUR.svelte b/src/pages/mapas/ModalLetreroLUR.svelte
new file mode 100644
index 0000000..81388a1
--- /dev/null
+++ b/src/pages/mapas/ModalLetreroLUR.svelte
@@ -0,0 +1,60 @@
+<script>
+    import Modal from "../../components/Modal.svelte";
+
+    import { createEventDispatcher } from "svelte";
+    import { getLetreroLUR } from "../../services/letreros_lur";
+    const dispatch = createEventDispatcher();
+
+    export let codigo = null;
+
+    let letrero = {};
+    let codigo_dividido = []
+
+    $: fetchLetreroLUR(codigo)
+
+    async function fetchLetreroLUR(codigo) {
+        try {
+            letrero = await getLetreroLUR(codigo) || {}
+            codigo_dividido = letrero.codigo.match(/\d+|[a-z]+/gi)
+        } catch (error) {
+            console.log({ error })
+        }
+    }
+
+</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>
+</Modal>
+
+<style>
+    .color1 {
+        background-color: var(--bgcolor1);
+        color: var(--color1);
+    }
+    .color2 {
+        background-color: var(--bgcolor2);
+        color: var(--color2);
+    }
+</style>
\ No newline at end of file
diff --git a/src/pages/mapas/Paraderos.svelte b/src/pages/mapas/Paraderos.svelte
index 560b0f2..b1ac578 100644
--- a/src/pages/mapas/Paraderos.svelte
+++ b/src/pages/mapas/Paraderos.svelte
@@ -36,7 +36,7 @@
     })
 
     function create_map() {
-        if (!elMap) return;
+        if (!elMap || !globalThis.L) return;
         if (!L) L = globalThis.L;
         if (!iconParada) {
             iconParada = L.icon({
diff --git a/src/pages/mapas/Rutas.svelte b/src/pages/mapas/Rutas.svelte
index 83ab5fb..b312698 100644
--- a/src/pages/mapas/Rutas.svelte
+++ b/src/pages/mapas/Rutas.svelte
@@ -11,6 +11,7 @@
     import { getOperadores } from "$/services/operadores";
     import { getLineas } from "$/services/lineas";
     import { getRutas } from "$/services/mapas";
+    import ModalLetreroLUR from "./ModalLetreroLUR.svelte";
 
     let myMap = null
     let elMap = null
@@ -26,6 +27,11 @@
     let marker1 = null
     let marker2 = null
 
+    let showLetrero = false
+    let codigo = null
+
+    $: codigo = lineas.find(el => el.id_linea === id_linea)?.route_short_name || null
+
     getOperadores()
         .then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1))
         .then(data => operadores = data)
@@ -42,7 +48,7 @@
     })
 
     function create_map() {
-        if (!elMap) return;
+        if (!elMap || !globalThis.L) return;
         if (!L) L = globalThis.L;
         if (!iconPartida) {
             iconPartida = L.icon({
@@ -119,6 +125,7 @@
             Rutas
         </PageTitle>
     </div>
+
     <div class="col-md-auto">
         <div class="input-group">
             <div class="input-group-text">Operador</div>
@@ -128,10 +135,7 @@
                     <option value={operador.id_operador}>{operador.nombre_operador}</option>
                 {/each}
             </select>
-        </div>
-    </div>
-    <div class="col-md-auto">
-        <div class="input-group">
+
             <div class="input-group-text">Linea</div>
             <select bind:value={id_linea} class="form-select">
                 <option value=""></option>
@@ -141,6 +145,14 @@
             </select>
         </div>
     </div>
+
+    {#if id_operador && codigo}
+        <div class="col-auto">
+            <button class="btn btn-secondary"
+                on:click|preventDefault={() => showLetrero = true}
+            >Ver Letrero</button>
+        </div>
+    {/if}
 </div>
 
 <div class="card">
@@ -148,3 +160,7 @@
         <div bind:this={elMap} style="height: 100vh;"></div>
     </div>
 </div>
+
+{#if showLetrero}
+    <ModalLetreroLUR {codigo} on:close={() => showLetrero = false} />
+{/if}
\ No newline at end of file
diff --git a/src/services/letreros_lur.js b/src/services/letreros_lur.js
new file mode 100644
index 0000000..69e249e
--- /dev/null
+++ b/src/services/letreros_lur.js
@@ -0,0 +1,48 @@
+
+import { base, getToken } from './_config'
+
+export async function getLetrerosLUR(params) {
+    const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
+    const res = await fetch(`${base}/letreros-lur/${query}`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function getLetreroLUR(id) {
+    const res = await fetch(`${base}/letreros-lur/${id}/`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function createLetreroLUR(data) {
+    const res = await fetch(`${base}/letreros-lur/`, {
+        method: 'POST',
+        body: JSON.stringify(data),
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function updateLetreroLUR({ codigo: id = null,  ...data }) {
+    const res = await fetch(`${base}/letreros-lur/${id}/`, {
+        method: 'PATCH',
+        body: JSON.stringify(data),
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function deleteLetreroLUR(id) {
+    const res = await fetch(`${base}/letreros-lur/${id}/`, {
+        method: 'DELETE',
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}