se modifica front por cambio de estructura en base datos

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}

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) {

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 { getOperadores } from "$/services/operadores";
-    import { getRutasServicio } from "$/services/mapas";
+    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_operador, id_linea)
-    $: cargar_coordenadas(id_linea, id_servicio)
 
-    async function cargar_servicios() {
+    Promise.all([ getOperadores(), getLineas() ])
-        try {
+        .then(res => {
-            servicios = await getServicios()
+            operadores = res[0]
-            lineas = [ ...new Set(servicios.map(el => el.id_linea))]
+            lineas = res[1]
-        } catch (error) {
+        })
-            alert(error)
+        .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;
+            if (!id_operador || !id_linea) return;
-            const [ service_id, direction_id] = servicio_direccion.split('-');
+            const data = await getRutas({ id_linea})
-            const data = await getRutasServicio({ id_linea, service_id, direction_id })
             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>
+                    <div class="input-group-text">Operador</div>
-                    <select bind:value={id_linea} class="form-select" on:change={() => id_servicio = ''}>
+                    <select bind:value={id_operador} class="form-select" on:change={() => id_linea = ''}>
                         <option value=""></option>
-                        {#each lineas as linea}
+                        {#each operadores as operador}
-                            <option value={linea}>{linea}</option>
+                            <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>
+                    <div class="input-group-text">Linea</div>
-                    <select bind:value={id_servicio} class="form-select">
+                    <select bind:value={id_linea} class="form-select">
                         <option value=""></option>
-                        {#each servicios.filter(el => el.id_linea === id_linea) as servicio}
+                        {#each lineas.filter(el => el.id_operador === id_operador) as linea}
-                            <option value={`${servicio.service_id}-${servicio.direction_id}`}>{servicio.service_id} - {servicio.trip_headsign}</option>
+                            <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
+            <div class={id_linea ? "d-block" : "d-none"}>
-                {google_api_key}
+                <GoogleMap
-                on:start={ev => onPolyline(ev.detail)}
+                    {google_api_key}
-            />
+                    on:start={ev => onPolyline(ev.detail)}
+                />
+            </div>
         {/if}
     </div>
 </div>

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" }

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" }

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()
+}