From 518d07d7366f8541646f00c21ea5f52c2a47c898 Mon Sep 17 00:00:00 2001
From: Francisco Sandoval <francisco.sandoval@crecic.cl>
Date: Tue, 15 Aug 2023 22:25:04 -0400
Subject: [PATCH] avance con muestra de rutas

---
 src/layouts/Sidebar.svelte   |  4 ++
 src/pages/mapas/Rutas.svelte | 92 ++++++++++++++++++++++++++++++++++++
 src/routes/user.routes.js    |  2 +
 src/services/lineas.js       | 56 ++++++++++++++++++++++
 src/services/mapas.js        |  9 ++++
 src/services/rutas.js        | 48 +++++++++++++++++++
 6 files changed, 211 insertions(+)
 create mode 100644 src/pages/mapas/Rutas.svelte
 create mode 100644 src/services/lineas.js
 create mode 100644 src/services/rutas.js

diff --git a/src/layouts/Sidebar.svelte b/src/layouts/Sidebar.svelte
index edda386..c43b03a 100644
--- a/src/layouts/Sidebar.svelte
+++ b/src/layouts/Sidebar.svelte
@@ -31,6 +31,10 @@
                 <i class="align-middle bi bi-map fs-4" />
                 <span class="align-middle">Paraderos</span>
             </SideLink>
+            <SideLink to="/mapas/rutas">
+                <i class="align-middle bi bi-map fs-4" />
+                <span class="align-middle">Rutas</span>
+            </SideLink>
 
             <li class="sidebar-header">Mantenedores</li>
 
diff --git a/src/pages/mapas/Rutas.svelte b/src/pages/mapas/Rutas.svelte
new file mode 100644
index 0000000..85c7138
--- /dev/null
+++ b/src/pages/mapas/Rutas.svelte
@@ -0,0 +1,92 @@
+<script>
+    import PageTitle from "$/components/PageTitle.svelte";
+    import GoogleMap from '$/components/GoogleMap.svelte'
+    import IconLoading from "$/components/IconLoading.svelte";
+    import { getServicios } from "$/services/lineas";
+    import { getRutasServicio } from "$/services/mapas";
+
+    let data_map = null
+    let lineas = []
+    let servicios = []
+    let id_linea = '';
+    let id_servicio = '';
+    let loading = false
+
+    cargar_servicios()
+    $: cargar_rutas(id_linea, id_servicio)
+
+    async function cargar_servicios() {
+        try {
+            servicios = await getServicios()
+            lineas = [ ...new Set(servicios.map(el => el.id_linea))]
+        } catch (error) {
+            alert(error)
+        }
+    }
+
+    async function cargar_rutas(id_linea, service_id) {
+        try {
+            if (!id_linea || !service_id) return;
+            const data = await getRutasServicio({ id_linea, service_id })
+            console.log({ data })
+        } catch (error) {
+            alert(error)
+        }
+    }
+
+    async function init_google_map(data_inicial) {
+    }
+
+</script>
+
+<PageTitle>Paraderos</PageTitle>
+
+<div class="card">
+    <div class="card-header">
+        <div class="row">
+            <div class="col-md-auto">
+                <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="col-md-auto">
+                <div class="input-group">
+                    <div class="input-group-text">Linea</div>
+                    <select bind:value={id_linea} class="form-select" on:change={() => id_servicio = ''}>
+                        <option value=""></option>
+                        {#each lineas as linea}
+                            <option value={linea}>{linea}</option>
+                        {/each}
+                    </select>
+                </div>
+            </div>
+            <div class="col-md-auto">
+                <div class="input-group">
+                    <div class="input-group-text">Comuna</div>
+                    <select bind:value={id_servicio} class="form-select">
+                        <option value=""></option>
+                        {#each servicios.filter(el => el.id_linea === id_linea) as servicio}
+                            <option value={servicio.service_id}>{servicio.service_id}</option>
+                        {/each}
+                    </select>
+                </div>
+            </div>
+            <div class="col-md">
+                {#if loading}
+                    <span>Cargando rutas...</span>
+                {/if}
+            </div>
+        </div>
+    </div>
+    <div class="card-body">
+        {#if data_map}
+            <GoogleMap
+                google_api_key={data_map.google_api_key}
+                center={data_map.center}
+                zoom={data_map.zoom}
+                marks={[]}
+                on:loading={ev => loading = ev.detail}
+            />
+        {:else}
+            <IconLoading />
+        {/if}
+    </div>
+</div>
diff --git a/src/routes/user.routes.js b/src/routes/user.routes.js
index f476565..d1f4d21 100644
--- a/src/routes/user.routes.js
+++ b/src/routes/user.routes.js
@@ -10,6 +10,7 @@ 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'
+import PageMapaRutas from '$/pages/mapas/Rutas.svelte'
 
 export const routes = [
     { path: '/', component: PageHome },
@@ -23,5 +24,6 @@ export const routes = [
     { path: '/personas/nuevo', component: PagePersonaCreate },
     { path: '/personas/:rut', component: PagePersonaModifica },
     { path: '/mapas/paraderos', component: PageMapaParaderos },
+    { path: '/mapas/rutas', component: PageMapaRutas },
     { path: '*', component: PageError },
 ]
\ No newline at end of file
diff --git a/src/services/lineas.js b/src/services/lineas.js
new file mode 100644
index 0000000..eab70be
--- /dev/null
+++ b/src/services/lineas.js
@@ -0,0 +1,56 @@
+
+import { base, getToken } from './_config'
+
+export async function getLineas(params) {
+    const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
+    const res = await fetch(`${base}/lineas/${query}`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function getServicios() {
+    const res = await fetch(`${base}/lineas/servicios/`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function getLinea(id) {
+    const res = await fetch(`${base}/lineas/${id}/`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function createLinea(data) {
+    const res = await fetch(`${base}/lineas/`, {
+        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 updateLinea({ id_paradero: id = null,  ...data }) {
+    const res = await fetch(`${base}/lineas/${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 deleteLinea(id) {
+    const res = await fetch(`${base}/lineas/${id}/`, {
+        method: 'DELETE',
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
diff --git a/src/services/mapas.js b/src/services/mapas.js
index ab7249b..2a9793c 100644
--- a/src/services/mapas.js
+++ b/src/services/mapas.js
@@ -8,4 +8,13 @@ export async function getMarcasParaderos(params) {
     })
     if (!res.ok) throw await res.text()
     return res.json()
+}
+
+export async function getRutasServicio(params) {
+    const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
+    const res = await fetch(`${base}/mapas/rutas/${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
diff --git a/src/services/rutas.js b/src/services/rutas.js
new file mode 100644
index 0000000..41956f2
--- /dev/null
+++ b/src/services/rutas.js
@@ -0,0 +1,48 @@
+
+import { base, getToken } from './_config'
+
+export async function getRutas(params) {
+    const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
+    const res = await fetch(`${base}/rutas/${query}`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function getRuta(id) {
+    const res = await fetch(`${base}/rutas/${id}/`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function createRuta(data) {
+    const res = await fetch(`${base}/rutas/`, {
+        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 updateRuta({ id_paradero: id = null,  ...data }) {
+    const res = await fetch(`${base}/rutas/${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 deleteRuta(id) {
+    const res = await fetch(`${base}/rutas/${id}/`, {
+        method: 'DELETE',
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}