From 28cac09f12174dd9117258967edf4d4e88c2c41e Mon Sep 17 00:00:00 2001
From: Francisco Sandoval <francisco.sandoval@crecic.cl>
Date: Fri, 21 Jul 2023 19:26:43 -0400
Subject: [PATCH] se agrega mapa de paraderos

---
 package-lock.json                | 15 +++++++++++++
 package.json                     |  1 +
 src/layouts/Sidebar.svelte       |  7 ++++++
 src/pages/mapas/Paraderos.svelte | 38 ++++++++++++++++++++++++++++++++
 src/routes/user.routes.js        |  2 ++
 src/services/mapas.js            | 11 +++++++++
 6 files changed, 74 insertions(+)
 create mode 100644 src/pages/mapas/Paraderos.svelte
 create mode 100644 src/services/mapas.js

diff --git a/package-lock.json b/package-lock.json
index 820cd82..63d5904 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@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"
@@ -468,6 +469,12 @@
         "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",
@@ -668,6 +675,14 @@
         "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 395edfd..97d5f21 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@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/layouts/Sidebar.svelte b/src/layouts/Sidebar.svelte
index 354a69a..edda386 100644
--- a/src/layouts/Sidebar.svelte
+++ b/src/layouts/Sidebar.svelte
@@ -25,6 +25,13 @@
                 <span class="align-middle">Perfil</span>
             </SideLink>
 
+            <li class="sidebar-header">Mapas</li>
+
+            <SideLink to="/mapas/paraderos">
+                <i class="align-middle bi bi-map fs-4" />
+                <span class="align-middle">Paraderos</span>
+            </SideLink>
+
             <li class="sidebar-header">Mantenedores</li>
 
             <SideLink to="/aplicaciones">
diff --git a/src/pages/mapas/Paraderos.svelte b/src/pages/mapas/Paraderos.svelte
new file mode 100644
index 0000000..fadd378
--- /dev/null
+++ b/src/pages/mapas/Paraderos.svelte
@@ -0,0 +1,38 @@
+<script>
+    import PageTitle from '$/components/PageTitle.svelte';
+    import {Loader} from 'google-maps';
+    import { getMarcasParaderos } from '$/services/mapas';
+
+    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 });
+
+            for (const mark of marks) {
+                const { lat, lng, title } = mark;
+                new google.maps.Marker({
+                    position: { lat, lng },
+                    map,
+                    title
+                });
+            }
+        } catch (error) {
+            alert(error)
+        }
+    }
+</script>
+
+<PageTitle>Paraderos</PageTitle>
+
+<div class="card">
+    <div class="card-body">
+        <div bind:this={my_map} style="height: 500px"></div>
+    </div>
+</div>
diff --git a/src/routes/user.routes.js b/src/routes/user.routes.js
index fa52403..f476565 100644
--- a/src/routes/user.routes.js
+++ b/src/routes/user.routes.js
@@ -9,6 +9,7 @@ import PageComunas from '$/pages/comunas/Admin.svelte'
 import PagePersonas from '$/pages/personas/Admin.svelte'
 import PagePersonaCreate from '$/pages/personas/Persona.svelte'
 import PagePersonaModifica from '$/pages/personas/Persona.svelte'
+import PageMapaParaderos from '$/pages/mapas/Paraderos.svelte'
 
 export const routes = [
     { path: '/', component: PageHome },
@@ -21,5 +22,6 @@ export const routes = [
     { path: '/personas', component: PagePersonas },
     { path: '/personas/nuevo', component: PagePersonaCreate },
     { path: '/personas/:rut', component: PagePersonaModifica },
+    { path: '/mapas/paraderos', component: PageMapaParaderos },
     { path: '*', component: PageError },
 ]
\ No newline at end of file
diff --git a/src/services/mapas.js b/src/services/mapas.js
new file mode 100644
index 0000000..ab7249b
--- /dev/null
+++ b/src/services/mapas.js
@@ -0,0 +1,11 @@
+
+import { base, getToken } from './_config'
+
+export async function getMarcasParaderos(params) {
+    const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
+    const res = await fetch(`${base}/mapas/paraderos/${query}`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
\ No newline at end of file