TDTP
/
admin_transporte_frontend
mirror of https://gitlab.com/m3f_usm/admin_transporte/frontend
3
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

muestro un loading cuando cargo posicion de buses

francisco/photos
Francisco Sandoval 2023-12-13 10:16:57 -03:00
parent add1eadaae
commit 8e132fac2d
2 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/pages/mapas/FiltroRutas.svelte
View File

@ -7,6 +7,7 @@
export let codigo;
export let ver_buses;
export let ver_paraderos;
export let loading = false;
let operadores = []
let lineas = []
@ -82,5 +83,11 @@
<label class="form-check-label" for="check-ver-paraderos">Ver Paraderos</label>
</div>
{#if loading}
<div class="spinner-grow spinner-grow-sm text-danger" role="status">
<span class="visually-hidden">Loading...</span>
</div>
{/if}
</div>
</div>

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

@ -37,6 +37,8 @@
let markers_paraderos = []
let markers_buses = []
let timeInterval = null
let fileproto = null
let loading_proto = false
onMount(() => {
create_map()
@ -161,25 +163,37 @@
return;
}
const buses = await getBusesLinea(id_linea)
loading_proto = true
try {
const { fileproto: nuevoNombre, buses } = await getBusesLinea(id_linea)
if (nuevoNombre !== fileproto) {
// guardo el nombre del archivo proto
fileproto = nuevoNombre
// 1. eliminar marcadores anteriores
markers_buses.forEach(marker => marker.remove())
// 1. eliminar marcadores anteriores
markers_buses.forEach(marker => marker.remove())
// 2. crear marcadores
for (let mark of buses) {
const { latitude: lat, longitude: lng } = mark
const marker = L.marker([lat, lng], { icon: iconAutobus }).addTo(myMap)
const html = `${mark.Patente_vehiculo}<br>Velocidad: ${mark.speed}`
marker.bindTooltip(html)
markers_buses.push(marker)
// 2. crear marcadores
for (let mark of buses) {
const { latitude: lat, longitude: lng } = mark
const marker = L.marker([lat, lng], { icon: iconAutobus }).addTo(myMap)
const html = `${mark.Patente_vehiculo}<br>Velocidad: ${mark.speed}`
marker.bindTooltip(html)
markers_buses.push(marker)
}
}
} catch (error) {
console.log({ error })
} finally {
loading_proto = false
}
// actualizar posicion de buses cada 30 segundos
// actualizar posicion de buses cada 45 segundos
if (!timeInterval) {
timeInterval = globalThis.setInterval(() => onMostrarBuses(true), 30000)
timeInterval = globalThis.setInterval(() => onMostrarBuses(true), 45000)
}
}
@ -209,7 +223,9 @@
bind:codigo={codigo}
bind:ver_buses={ver_buses}
bind:ver_paraderos={ver_paraderos}
loading={loading_proto}
/>
</div>
{#if id_operador && codigo}