diff --git a/src/assets/autobus.png b/src/assets/autobus.png new file mode 100644 index 0000000..d89a719 Binary files /dev/null and b/src/assets/autobus.png differ diff --git a/src/assets/parada-de-autobus.png b/src/assets/parada.png similarity index 100% rename from src/assets/parada-de-autobus.png rename to src/assets/parada.png diff --git a/src/assets/partida.png b/src/assets/partida.png index 15de289..505d734 100644 Binary files a/src/assets/partida.png and b/src/assets/partida.png differ diff --git a/src/assets/termino.png b/src/assets/termino.png index 492e708..8aa0094 100644 Binary files a/src/assets/termino.png and b/src/assets/termino.png differ diff --git a/src/pages/mapas/FiltroRutas.svelte b/src/pages/mapas/FiltroRutas.svelte new file mode 100644 index 0000000..d1ddb53 --- /dev/null +++ b/src/pages/mapas/FiltroRutas.svelte @@ -0,0 +1,86 @@ + + +
+
+ +
+
Operador
+ +
+ +
+
Linea
+ +
+ +
+
+ +
+ + +
+ +
+ + +
+ +
+
diff --git a/src/pages/mapas/Paraderos.svelte b/src/pages/mapas/Paraderos.svelte index b1ac578..830ddec 100644 --- a/src/pages/mapas/Paraderos.svelte +++ b/src/pages/mapas/Paraderos.svelte @@ -12,7 +12,7 @@ // libs import { onMount } from 'svelte' import { storeParaderos } from "$/stores/global" - import imagenParada from '$/assets/parada-de-autobus.png' + import imagenParada from '$/assets/parada.png' let myMap = null let elMap = null @@ -41,9 +41,9 @@ if (!iconParada) { iconParada = L.icon({ iconUrl: imagenParada, - iconSize: [64, 64], - iconAnchor: [32, 64], - popupAnchor: [0, -32] + iconSize: [32, 32], + iconAnchor: [16, 32], + popupAnchor: [0, -16] }) } if (!myMap) { diff --git a/src/pages/mapas/Rutas.svelte b/src/pages/mapas/Rutas.svelte index ba90f18..feba301 100644 --- a/src/pages/mapas/Rutas.svelte +++ b/src/pages/mapas/Rutas.svelte @@ -2,54 +2,40 @@ // componentes import PageTitle from "$/components/PageTitle.svelte"; - import IconLoading from "$/components/IconLoading.svelte"; import imagenPartida from '$/assets/partida.png' import imagenTermino from '$/assets/termino.png' + import imagenParada from '$/assets/parada.png' + import imagenAutobus from '$/assets/autobus.png' import { onMount } from "svelte"; // servicios - import { getOperadores } from "$/services/operadores"; - import { getLineas } from "$/services/lineas"; import { getRutas } from "$/services/mapas"; import ModalLetreroLUR from "./ModalLetreroLUR.svelte"; + import FiltroRutas from "./FiltroRutas.svelte"; + import { getBusesLinea, getParaderosLinea } from "$/services/lineas"; let myMap = null let elMap = null - let operadores = [] - let lineas = [] - let lineas_operador = [] - let id_operador = '' - let id_linea = '' + let loading = false let polyline = null let iconPartida = null let iconTermino = null - let L = null + let iconParada = null + let L = null // leaflet.js let marker1 = null let marker2 = null let showLetrero = false + + let id_operador = '' + let id_linea = '' let codigo = null + let ver_buses = false + let ver_paraderos = false + let markers = [] - $: codigo = lineas.find(el => el.id_linea === id_linea)?.route_short_name || null - $: lineas_operador = id_operador ? - lineas.filter(el => el.id_operador === id_operador) - .sort((a,b) => a.route_short_name < b.route_short_name ? -1 : 1) : []; - - getOperadores({ vigente: 1 }) - .then(data => data.sort((a,b) => a.nombre_operador < b.nombre_operador? -1 : 1)) - .then(data => operadores = data) - .catch(error => alert(error)) - getLineas({ vigente: 1 }) - .then(data => data.sort((a,b) => a.nombre_linea < b.nombre_linea? -1 : 1)) - .then(data => lineas = data) - .catch(error => alert(error)) - - $: cargar_coordenadas(id_operador, id_linea) - - onMount(() => { - create_map() - }) + onMount(() => { create_map() }) function create_map() { if (!elMap || !globalThis.L) return; @@ -66,10 +52,18 @@ iconTermino = L.icon({ iconUrl: imagenTermino, iconSize: [64, 64], - iconAnchor: [32, 64], + iconAnchor: [0, 64], popupAnchor: [0, -32] }) } + if (!iconParada) { + iconParada = L.icon({ + iconUrl: imagenParada, + iconSize: [32, 32], + iconAnchor: [16, 32], + popupAnchor: [0, -16] + }) + } if (!myMap) { myMap = L.map(elMap) L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', @@ -88,8 +82,7 @@ ) } - - async function cargar_coordenadas(id_operador, id_linea) { + async function onMostrarRuta(id_operador, id_linea) { try { loading = true polyline && polyline.remove() @@ -105,7 +98,9 @@ if (coordenadas) { marker1 = L.marker(coordenadas[0], { icon: iconPartida }).addTo(myMap) + marker1.bindTooltip('Inicio') marker2 = L.marker(coordenadas[coordenadas.length -1], { icon: iconTermino }).addTo(myMap) + marker2.bindTooltip('Termino') } } catch (error) { @@ -114,6 +109,54 @@ loading = false; } } + + + async function onMostrarParaderos(ver_paraderos) { + // 1. eliminar marcadores anteriores + markers.forEach(marker => marker.remove()) + + if (!ver_paraderos || !id_linea) return; + + const paraderos = await getParaderosLinea(id_linea) + + // 2. crear marcadores + for (let mark of paraderos) { + const { stop_lat: lat, stop_lon: lng } = mark + const marker = L.marker([lat, lng], { icon: iconParada }).addTo(myMap) + const { id_paradero: title, stop_name: location } = mark; + const html = `${title}
${location}` + + marker.bindTooltip(html) + markers.push(marker) + } + } + + async function onMostrarBuses(ver_buses) { + // 1. eliminar marcadores anteriores + // markers.forEach(marker => marker.remove()) + + if (!ver_buses || !id_linea) return; + + const buses = await getBusesLinea(id_linea) + console.log({ buses }) + + // 2. crear marcadores + // for (let mark of paraderos) { + // const { stop_lat: lat, stop_lon: lng } = mark + // const marker = L.marker([lat, lng], { icon: iconParada }).addTo(myMap) + // const { id_paradero: title, stop_name: location } = mark; + // const html = `${title}
${location}` + + // marker.bindTooltip(html) + // markers.push(marker) + // } + } + + + + $: onMostrarRuta(id_operador, id_linea) + $: onMostrarParaderos(ver_paraderos) + $: onMostrarBuses(ver_buses) @@ -123,37 +166,27 @@
-
+
Rutas
-
-
-
Operador
- - -
Linea
- -
+
+
{#if id_operador && codigo}
- +
{/if}
diff --git a/src/services/lineas.js b/src/services/lineas.js index c536415..e59c08b 100644 --- a/src/services/lineas.js +++ b/src/services/lineas.js @@ -46,3 +46,19 @@ export async function deleteLinea(id) { if (!res.ok) throw await res.text() return res.json() } + +export async function getParaderosLinea(id_linea) { + const res = await fetch(`${base}/lineas/${id_linea}/paraderos`, { + headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" } + }) + if (!res.ok) throw await res.text() + return res.json() +} + +export async function getBusesLinea(id_linea) { + const res = await fetch(`${base}/lineas/${id_linea}/buses`, { + headers: { "Authorization": `Bearer ${getToken()}`, "Content-Type": "application/json" } + }) + if (!res.ok) throw await res.text() + return res.json() +}