From 169c0766deafa0e9aa81b2bafeb6aae8e5db3876 Mon Sep 17 00:00:00 2001
From: Francisco Sandoval <francisco.sandoval@crecic.cl>
Date: Mon, 24 Jul 2023 22:40:57 -0400
Subject: [PATCH] se agrega mapa paraderos

---
 package-lock.json                   | 15 --------
 package.json                        |  1 -
 src/components/GoogleMap.svelte     | 54 ++++++++++++++++++++++++++++
 src/components/IconLoading.svelte   |  3 ++
 src/components/PageTitle.svelte     | 15 +++++++-
 src/pages/aplicaciones/Admin.svelte |  6 +++-
 src/pages/comunas/Admin.svelte      | 11 ++++--
 src/pages/mapas/Paraderos.svelte    | 55 +++++++++++++++--------------
 src/pages/personas/Admin.svelte     |  7 +++-
 src/pages/personas/Persona.svelte   |  7 +++-
 src/pages/usuarios/Admin.svelte     |  6 +++-
 src/pages/usuarios/Usuario.svelte   |  8 +++--
 src/stores/global.js                |  1 +
 13 files changed, 138 insertions(+), 51 deletions(-)
 create mode 100644 src/components/GoogleMap.svelte
 create mode 100644 src/components/IconLoading.svelte

diff --git a/package-lock.json b/package-lock.json
index 63d5904..820cd82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
         "@adminkit/core": "^3.4.0",
         "bootstrap": "^5.3.0",
         "bootstrap-icons": "^1.10.5",
-        "google-maps": "^4.3.3",
         "history": "^5.3.0",
         "svelte-navigator": "^3.2.2",
         "svelte-pagination": "^0.0.1"
@@ -469,12 +468,6 @@
         "vite": "^4.0.0"
       }
     },
-    "node_modules/@types/googlemaps": {
-      "version": "3.43.3",
-      "resolved": "https://registry.npmjs.org/@types/googlemaps/-/googlemaps-3.43.3.tgz",
-      "integrity": "sha512-ZWNoz/O8MPEpiajvj7QiqCY8tTLFNqNZ/a+s+zTV58wFVNAvvqV4bdGfnsjTb5Cs4V6wEsLrX8XRhmnyYJ2Tdg==",
-      "deprecated": "Types for the Google Maps browser API have moved to @types/google.maps. Note: these types are not for the googlemaps npm package, which is a Node API."
-    },
     "node_modules/bootstrap": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz",
@@ -675,14 +668,6 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
-    "node_modules/google-maps": {
-      "version": "4.3.3",
-      "resolved": "https://registry.npmjs.org/google-maps/-/google-maps-4.3.3.tgz",
-      "integrity": "sha512-MQbEgBNQbGyV7mfS2tlFgW4EoGKLia24BvAl4a+kgsYWt4283kyPpaay/yKIsScQLr7nSUONaLNfOdMsCuJDEw==",
-      "dependencies": {
-        "@types/googlemaps": "^3.39.1"
-      }
-    },
     "node_modules/history": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
diff --git a/package.json b/package.json
index 97d5f21..395edfd 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "@adminkit/core": "^3.4.0",
     "bootstrap": "^5.3.0",
     "bootstrap-icons": "^1.10.5",
-    "google-maps": "^4.3.3",
     "history": "^5.3.0",
     "svelte-navigator": "^3.2.2",
     "svelte-pagination": "^0.0.1"
diff --git a/src/components/GoogleMap.svelte b/src/components/GoogleMap.svelte
new file mode 100644
index 0000000..8db34aa
--- /dev/null
+++ b/src/components/GoogleMap.svelte
@@ -0,0 +1,54 @@
+<script>
+    import { onMount } from 'svelte'
+    export let google_api_key = null;
+    export let center = null;
+    export let zoom = 4;
+    export let marks = [];
+
+    let mapEl = null;
+
+    onMount(() => {
+        console.log('onMount')
+        if (!globalThis.google) {
+            const el = document.createElement('script')
+            el.src = "https://maps.googleapis.com/maps/api/js?key=" + google_api_key + "&callback=initMap&v=weekly"
+            el.async = true;
+            el.onload = globalThis.initMap;
+            document.body.appendChild(el)
+        }
+
+        globalThis.initMap()
+    })
+
+    globalThis.initMap = function () {
+        const google = globalThis.google;
+        if (!google || !mapEl) return;
+
+        const map = new google.maps.Map(mapEl, { zoom, center });
+        const infoWindow = new google.maps.InfoWindow();
+
+        for (const mark of marks) {
+            const { position, title, location } = mark;
+            const marker = new google.maps.Marker({
+                position,
+                map,
+                title,
+            });
+
+            marker.addListener("click", () => {
+                infoWindow.close();
+                const html = `
+                    <h1>${title}</h1>
+                    <p>${location}</p>
+                `
+                infoWindow.setContent(html);
+                infoWindow.open(marker.getMap(), marker);
+            });
+        }
+        google.maps.event.addListener(map, "zoom_changed", function () {
+            console.log({ zoom: map.zoom });
+        });
+    };
+</script>
+
+<div bind:this={mapEl} style="height: 800px; max-height: 90vh;">Cargando...</div>
diff --git a/src/components/IconLoading.svelte b/src/components/IconLoading.svelte
new file mode 100644
index 0000000..a027832
--- /dev/null
+++ b/src/components/IconLoading.svelte
@@ -0,0 +1,3 @@
+<div class="spinner-border text-primary" role="status">
+    <span class="visually-hidden">Loading...</span>
+</div>
\ No newline at end of file
diff --git a/src/components/PageTitle.svelte b/src/components/PageTitle.svelte
index 6359dee..4f3701a 100644
--- a/src/components/PageTitle.svelte
+++ b/src/components/PageTitle.svelte
@@ -1,2 +1,15 @@
+<script>
+    import IconLoading from "./IconLoading.svelte";
+    export let loading = false;
+</script>
 
-<h3 class="h3 mb-3"><slot/></h3>
+<div class="row">
+    <div class="col-auto">
+        <h3 class="h3 mb-3"><slot/></h3>
+    </div>
+    {#if loading}
+        <div class="col">
+            <IconLoading />
+        </div>
+    {/if}
+</div>
diff --git a/src/pages/aplicaciones/Admin.svelte b/src/pages/aplicaciones/Admin.svelte
index bfb0157..107959b 100644
--- a/src/pages/aplicaciones/Admin.svelte
+++ b/src/pages/aplicaciones/Admin.svelte
@@ -11,17 +11,21 @@
     let ordering = 'id_aplicacion'
     let aplicaciones = []
     let aplicacion = null
+    let loading = false;
 
     $: onPage(page)
 
     async function onPage(p) {
         try {
+            loading = true
             offset = (p - 1) * limit;
             const data = await getAplicaciones({ offset, limit, ordering })
             aplicaciones = data.results;
             count = data.count;
         } catch (error) {
             alert(error)
+        } finally {
+            loading = false;
         }
     }
 
@@ -39,7 +43,7 @@
     }
 </script>
 
-<PageTitle>Aplicaciones</PageTitle>
+<PageTitle {loading}>Aplicaciones</PageTitle>
 
 <div class="card">
     <div class="card-header">
diff --git a/src/pages/comunas/Admin.svelte b/src/pages/comunas/Admin.svelte
index 173f67f..9bea80f 100644
--- a/src/pages/comunas/Admin.svelte
+++ b/src/pages/comunas/Admin.svelte
@@ -10,16 +10,20 @@
     let es_nuevo = true
     let comunas = { count: 0, results: [] }
     let page = 1
+    let loading = false;
     const limit = 15
 
     $: onPage(page)
 
     async function onPage(page) {
         try {
+            loading = true
             const offset = (page - 1) * limit;
             comunas = await getComunas({ offset, limit, ordering: 'id_region' })
         } catch(error) {
             alert(error.detail || error)
+        } finally {
+            loading = false
         }
     }
 
@@ -30,10 +34,13 @@
 
     async function onEditar({ id_comuna }) {
         try {
+            loading = true
             comuna = await getComuna(id_comuna)
             es_nuevo = false
         } catch (error) {
             alert(error.detail || error)
+        } finally {
+            loading = false
         }
     }
 
@@ -65,12 +72,12 @@
     }
 </script>
 
-<PageTitle>Comunas</PageTitle>
+<PageTitle {loading}>Comunas</PageTitle>
 
 <div class="card">
     <div class="card-header">
         <div class="mb-3 d-flex">
-            <button class="btn btn-primary"
+            <button class="btn btn-primary me-3"
                 on:click|preventDefault={onNuevo}>
                 <i class="bi bi-plus-lg"></i> Nuevo
             </button>
diff --git a/src/pages/mapas/Paraderos.svelte b/src/pages/mapas/Paraderos.svelte
index fadd378..b000b8c 100644
--- a/src/pages/mapas/Paraderos.svelte
+++ b/src/pages/mapas/Paraderos.svelte
@@ -1,38 +1,41 @@
 <script>
-    import PageTitle from '$/components/PageTitle.svelte';
-    import {Loader} from 'google-maps';
-    import { getMarcasParaderos } from '$/services/mapas';
+    import PageTitle from "$/components/PageTitle.svelte";
+    import { getMarcasParaderos } from "$/services/mapas";
+    import { storeParaderos } from "$/stores/global";
+    import GoogleMap from '$/components/GoogleMap.svelte'
+    import IconLoading from "$/components/IconLoading.svelte";
 
-    const options = { language: 'es', region: 'CL' };
-    let my_map = null
-    
-    $: start()
-    
-    async function start() {
-        try {
-            const { api_key_google, zoom, center, marks } = await getMarcasParaderos()
-            const loader = new Loader(api_key_google, options);
-            const google = await loader.load();
-            const map = new google.maps.Map(my_map, { center, zoom });
+    let my_map = null;
+    let data_map = null
 
-            for (const mark of marks) {
-                const { lat, lng, title } = mark;
-                new google.maps.Marker({
-                    position: { lat, lng },
-                    map,
-                    title
-                });
-            }
-        } catch (error) {
-            alert(error)
-        }
+    $: init_google_map($storeParaderos)
+    $: console.log({ data_map })
+
+    async function init_google_map(data_inicial) {
+        const paraderos = data_inicial || await getMarcasParaderos()
+        storeParaderos.set(paraderos);
+        data_map = paraderos;
     }
+
+
 </script>
 
 <PageTitle>Paraderos</PageTitle>
 
 <div class="card">
+    <div class="card-header">
+        <button class="btn btn-outline-secondary" on:click|preventDefault={() => init_google_map(null)}><i class="bi bi-arrow-repeat"></i> Refrescar</button>
+    </div>
     <div class="card-body">
-        <div bind:this={my_map} style="height: 500px"></div>
+        {#if data_map}
+            <GoogleMap
+                google_api_key={data_map.google_api_key}
+                center={data_map.center}
+                zoom={data_map.zoom}
+                marks={data_map.marks}
+            />
+        {:else}
+            <IconLoading />
+        {/if}
     </div>
 </div>
diff --git a/src/pages/personas/Admin.svelte b/src/pages/personas/Admin.svelte
index fd3e179..064686f 100644
--- a/src/pages/personas/Admin.svelte
+++ b/src/pages/personas/Admin.svelte
@@ -2,23 +2,28 @@
     import { Link } from 'svelte-navigator'
     import Paginate from '$/components/Paginate.svelte'
     import { getPersonas } from '$/services/personas';
+    import PageTitle from '$/components/PageTitle.svelte';
     let page = 1;
     let limit = 15;
     let personas = { results: [], count: 0 };
+    let loading = false;
 
     $: onPage(page)
 
     async function onPage(page) {
         try {
+            loading = true
             const offset = (page - 1) * limit;
             personas = await getPersonas({ offset, limit })
         } catch (error) {
             alert(error.detail || error)
+        } finally {
+            loading = false;
         }
     }
 </script>
 
-<h2 class="h3 mb-3">Personas</h2>
+<PageTitle {loading}>Personas</PageTitle>
 
 <div class="card">
     <div class="card-header">
diff --git a/src/pages/personas/Persona.svelte b/src/pages/personas/Persona.svelte
index d9b4e92..155b36b 100644
--- a/src/pages/personas/Persona.svelte
+++ b/src/pages/personas/Persona.svelte
@@ -4,6 +4,7 @@
     import FormPersona from './Form.svelte'
     import { Link, useParams, useNavigate } from 'svelte-navigator';
     import { getPersona, createPersona, updatePersona } from '$/services/personas';
+    import PageTitle from '../../components/PageTitle.svelte';
 
     onMount(() => {
         $storeLayout.showSidebar = false;
@@ -16,6 +17,7 @@
     const navigate = useNavigate()
     let es_nuevo = true;
     let form = {}
+    let loading = false;
 
     $: es_nuevo = !$params.rut
     $: begin($params)
@@ -23,9 +25,12 @@
     async function begin({ rut = null }) {
         try {
             if (!rut) return; // si es nuevo, no busco informacion
+            loading = true
             form = await getPersona(rut)
         } catch (error) {
             alert(error.detail || error)
+        } finally {
+            loading = false
         }
     }
 
@@ -45,7 +50,7 @@
     }
 </script>
 
-<h3 class="h3 mb-3">{es_nuevo ? 'Nuevo Persona': 'Editar Persona'}</h3>
+<PageTitle {loading}>{es_nuevo ? 'Nuevo Persona': 'Editar Persona'}</PageTitle>
 
 <form action="" on:submit|preventDefault={onSave}>
     <div class="card">
diff --git a/src/pages/usuarios/Admin.svelte b/src/pages/usuarios/Admin.svelte
index 7e674b7..4a028ac 100644
--- a/src/pages/usuarios/Admin.svelte
+++ b/src/pages/usuarios/Admin.svelte
@@ -7,20 +7,24 @@
     let usuarios = { count: 0, results: [] }
     let page = 1
     const limit = 15
+    let loading = false
 
     $: onPage(page)
 
     async function onPage(page) {
         try {
+            loading = true
             const offset = (page - 1) * limit;
             usuarios = await getUsuarios({ offset, limit, ordering: 'login' })
         } catch(error) {
             alert(error.detail || error)
+        } finally {
+            loading = false;
         }
     }
 </script>
 
-<PageTitle>Usuarios</PageTitle>
+<PageTitle {loading}>Usuarios</PageTitle>
 
 <div class="card">
     <div class="card-header">
diff --git a/src/pages/usuarios/Usuario.svelte b/src/pages/usuarios/Usuario.svelte
index 882d4bd..cd84957 100644
--- a/src/pages/usuarios/Usuario.svelte
+++ b/src/pages/usuarios/Usuario.svelte
@@ -1,6 +1,7 @@
 <script>
     import { onMount } from 'svelte'
     import { storeLayout } from '$/stores/global'
+    import PageTitle from '$/components/PageTitle.svelte';
     import FormPersona from '../personas/Form.svelte'
     import FormUsuario from './Form.svelte'
     import { Link, useParams, useNavigate } from 'svelte-navigator';
@@ -20,20 +21,23 @@
     let form_persona = {}
     let form_usuario = {}
     let clave2 = ''
+    let loading = false;
 
     $: es_nuevo = !$params.login
     $: begin($params)
-    $: console.log({ form_persona })
 
     async function begin({ login = null }) {
         try {
             if (!login) return; // si es nuevo, no busco informacion
+            loading = true
             const { persona, ...data } = await getUsuario(login)
             form_persona = persona;
             form_usuario = data;
         } catch (error) {
             console.error(error)
             alert(error.detail || error)
+        } finally {
+            loading = false;
         }
     }
 
@@ -68,7 +72,7 @@
     }
 </script>
 
-<h3 class="h3 mb-3">{es_nuevo ? 'Nuevo Usuario': 'Editar Usuario'}</h3>
+<PageTitle {loading}>{es_nuevo ? 'Nuevo Usuario': 'Editar Usuario'}</PageTitle>
 
 <form action="" on:submit|preventDefault={onSave}>
     <div class="card">
diff --git a/src/stores/global.js b/src/stores/global.js
index 53aacc2..23a1db0 100644
--- a/src/stores/global.js
+++ b/src/stores/global.js
@@ -1,5 +1,6 @@
 import { writable } from 'svelte/store'
 
 export const storeMessages = writable([]);
+export const storeParaderos = writable(null);
 export const storeSession = writable({});
 export const storeLayout = writable({ showSidebar: true });
\ No newline at end of file