From 864b4bff1e1d5107f7ecc009c9ca604ae03b1c0e Mon Sep 17 00:00:00 2001
From: Francisco Sandoval <francisco.sandoval@crecic.cl>
Date: Sun, 27 Aug 2023 11:07:58 -0400
Subject: [PATCH] se modifica front por cambio de estructura en base datos

---
 src/pages/mapas/ModalParadero.svelte |  4 +-
 src/pages/mapas/Paraderos.svelte     |  4 +-
 src/pages/mapas/Rutas.svelte         | 66 ++++++++++++++--------------
 src/services/lineas.js               |  8 ----
 src/services/mapas.js                |  2 +-
 src/services/operadores.js           | 48 ++++++++++++++++++++
 6 files changed, 86 insertions(+), 46 deletions(-)
 create mode 100644 src/services/operadores.js

diff --git a/src/pages/mapas/ModalParadero.svelte b/src/pages/mapas/ModalParadero.svelte
index 3e96d75..92cb344 100644
--- a/src/pages/mapas/ModalParadero.svelte
+++ b/src/pages/mapas/ModalParadero.svelte
@@ -63,11 +63,11 @@
         </div>
         <div class="input-group mb-3">
             <div class="input-group-text">Latitud</div>
-            <input type="number" step="any" bind:value={form.stop_lat} class="form-control">
+            <input type="number" step="any" disabled value={form.stop_lat} class="form-control">
         </div>
         <div class="input-group mb-3">
             <div class="input-group-text">Longitud</div>
-            <input type="number" step="any" bind:value={form.stop_lon} class="form-control">
+            <input type="number" step="any" disabled value={form.stop_lon} class="form-control">
         </div>
 
         {#if form.id_paradero}
diff --git a/src/pages/mapas/Paraderos.svelte b/src/pages/mapas/Paraderos.svelte
index 10e0fb2..2880d0c 100644
--- a/src/pages/mapas/Paraderos.svelte
+++ b/src/pages/mapas/Paraderos.svelte
@@ -117,12 +117,12 @@
             google_marks.push(marker)
         }
 
-        map.setCenter(search_paraderos[0].position)
+        map && map.setCenter(search_paraderos[0].position)
 
         // aplicar zoom en base a las coordenadas
         const bounds = new google.maps.LatLngBounds();
         search_paraderos.forEach(el => bounds.extend(el.position))
-        google_map.fitBounds(bounds);
+        google_map && google_map.fitBounds(bounds);
     }
 
     globalThis.onEditaParada = function(id_paradero) {
diff --git a/src/pages/mapas/Rutas.svelte b/src/pages/mapas/Rutas.svelte
index 09bccc5..68362e1 100644
--- a/src/pages/mapas/Rutas.svelte
+++ b/src/pages/mapas/Rutas.svelte
@@ -2,44 +2,43 @@
     import PageTitle from "$/components/PageTitle.svelte";
     import GoogleMap from '$/components/MyMap.svelte'
     import IconLoading from "$/components/IconLoading.svelte";
-    import { getServicios } from "$/services/lineas";
-    import { getRutasServicio } from "$/services/mapas";
+    import { getOperadores } from "$/services/operadores";
+    import { getLineas } from "$/services/lineas";
+    import { getRutas } from "$/services/mapas";
 
-    let data_map = null
+    let operadores = []
     let lineas = []
-    let servicios = []
     let positions = []
+    let id_operador = '';
     let id_linea = '';
-    let id_servicio = '';
     let loading = false;
     let google_api_key = null;
     let google_map = null;
     let polyline = null;
 
-    cargar_servicios()
-    $: cargar_coordenadas(id_linea, id_servicio)
+    $: cargar_coordenadas(id_operador, id_linea)
 
-    async function cargar_servicios() {
-        try {
-            servicios = await getServicios()
-            lineas = [ ...new Set(servicios.map(el => el.id_linea))]
-        } catch (error) {
-            alert(error)
-        }
-    }
+    Promise.all([ getOperadores(), getLineas() ])
+        .then(res => {
+            operadores = res[0]
+            lineas = res[1]
+        })
+        .catch(error => alert(error))
 
-    async function cargar_coordenadas(id_linea, servicio_direccion) {
+
+    async function cargar_coordenadas(id_operador, id_linea) {
         try {
             loading = true
             polyline && polyline.setMap(null);
             polyline = null;
 
-            if (!id_linea || !servicio_direccion) return;
-            const [ service_id, direction_id] = servicio_direccion.split('-');
-            const data = await getRutasServicio({ id_linea, service_id, direction_id })
+            if (!id_operador || !id_linea) return;
+            const data = await getRutas({ id_linea})
             if (!google_api_key) google_api_key = data.google_api_key;
             
-            positions = data.positions.map(el => ({ lat: el.shape_pt_lat, lng: el.shape_pt_lon }))
+            positions = data.positions
+                // .sort((a,b) => a.shape_pt_sequence < b.shape_pt_sequence? -1 : 1)
+                .map(el => ({ lat: el.shape_pt_lat, lng: el.shape_pt_lon }))
         } catch (error) {
             alert(error)
         } finally {
@@ -49,7 +48,6 @@
 
     function onPolyline(map) {
         google_map = map;
-        // map.setZoom(8)
         map.setZoom(0)
         onMostrarCoordenadas(positions)
     }
@@ -103,22 +101,22 @@
         <div class="row">
             <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 = ''}>
+                    <div class="input-group-text">Operador</div>
+                    <select bind:value={id_operador} class="form-select" on:change={() => id_linea = ''}>
                         <option value=""></option>
-                        {#each lineas as linea}
-                            <option value={linea}>{linea}</option>
+                        {#each operadores as operador}
+                            <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">Servicio</div>
-                    <select bind:value={id_servicio} class="form-select">
+                    <div class="input-group-text">Linea</div>
+                    <select bind:value={id_linea} class="form-select">
                         <option value=""></option>
-                        {#each servicios.filter(el => el.id_linea === id_linea) as servicio}
-                            <option value={`${servicio.service_id}-${servicio.direction_id}`}>{servicio.service_id} - {servicio.trip_headsign}</option>
+                        {#each lineas.filter(el => el.id_operador === id_operador) as linea}
+                            <option value={linea.id_linea}>{linea.route_short_name}</option>
                         {/each}
                     </select>
                 </div>
@@ -133,10 +131,12 @@
     </div>
     <div class="card-body">
         {#if google_api_key}
-            <GoogleMap
-                {google_api_key}
-                on:start={ev => onPolyline(ev.detail)}
-            />
+            <div class={id_linea ? "d-block" : "d-none"}>
+                <GoogleMap
+                    {google_api_key}
+                    on:start={ev => onPolyline(ev.detail)}
+                />
+            </div>
         {/if}
     </div>
 </div>
diff --git a/src/services/lineas.js b/src/services/lineas.js
index eab70be..66fd3ac 100644
--- a/src/services/lineas.js
+++ b/src/services/lineas.js
@@ -10,14 +10,6 @@ export async function getLineas(params) {
     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" }
diff --git a/src/services/mapas.js b/src/services/mapas.js
index 2a9793c..c8812a0 100644
--- a/src/services/mapas.js
+++ b/src/services/mapas.js
@@ -10,7 +10,7 @@ export async function getMarcasParaderos(params) {
     return res.json()
 }
 
-export async function getRutasServicio(params) {
+export async function getRutas(params) {
     const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
     const res = await fetch(`${base}/mapas/rutas/${query}`, {
         headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
diff --git a/src/services/operadores.js b/src/services/operadores.js
new file mode 100644
index 0000000..e01da0e
--- /dev/null
+++ b/src/services/operadores.js
@@ -0,0 +1,48 @@
+
+import { base, getToken } from './_config'
+
+export async function getOperadores(params) {
+    const query = !params ? '' : '?' + (new URLSearchParams(params).toString());
+    const res = await fetch(`${base}/operadores/${query}`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function getOperador(id) {
+    const res = await fetch(`${base}/operadores/${id}/`, {
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}
+
+export async function createOperador(data) {
+    const res = await fetch(`${base}/operadores/`, {
+        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 updateOperador({ id_operador: id = null,  ...data }) {
+    const res = await fetch(`${base}/operadores/${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 deleteOperador(id) {
+    const res = await fetch(`${base}/operadores/${id}/`, {
+        method: 'DELETE',
+        headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" }
+    })
+    if (!res.ok) throw await res.text()
+    return res.json()
+}