TDTP
/
Sistema_Gestion_Transporte
mirror of https://gitlab.com/m3f_usm/T_digital_Transporte_USM.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

se modifica front por cambio de estructura en base datos

master/frontend-google-map
Francisco Sandoval 2023-08-27 11:07:58 -04:00
parent 50c6f252b3
commit 864b4bff1e
6 changed files with 86 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/mapas/ModalParadero.svelte
View File

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

4
src/pages/mapas/Paraderos.svelte
View File

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

66
src/pages/mapas/Rutas.svelte
View File

@ -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>

8
src/services/lineas.js
View File

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

2
src/services/mapas.js
View File

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

48
src/services/operadores.js 100644
View File

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