Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(map): fix race conditions and async issues with atomic GPS/Data fetch

Browse Source
This commit is contained in:
Johan Samudio
2026-03-02 19:22:58 -05:00
parent 4f8096f425
commit 767667b1b6
3 changed files with 61 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/src/composables/useFlujoPrincipal.ts
View File

@ -27,7 +27,7 @@ export const useFlujoPrincipal = () => {
const procesarSeleccionDeRuta = async (
_ruta: { id: string },
paradas: BusStop[],
paradasExistentes: BusStop[],
map: google.maps.Map | undefined,
addCleanMarker: Function,
skipGuidedZoom = false,
@ -36,16 +36,32 @@ export const useFlujoPrincipal = () => {
if (!map) return
try {
// ── PASO 1: Limpiar todo lo que había antes ──────────
limpiarMapa()
// ── PASO 1: Inicio Atómico ──
cargando.value = true
limpiarMapa()
const routeStore = useRouteStore()
// ── PASO 2: Obtener ubicación ──
// ── PASO 2: Sincronización (Promise.all) ──
// Disparamos Supabase (paradas) y GPS al mismo tiempo
console.log('SIBU | Iniciando carga síncrona de Datos + GPS...');
const [ubicacionRes, paradasRes] = await Promise.allSettled([
obtenerUbicacion(),
paradasExistentes.length > 0 ? Promise.resolve(paradasExistentes) : routeStore.loadRouteStops(_ruta.id)
]);
// ── PASO 3: Asignación Segura ──
let ubicacion: { lat: number, lng: number } | null = null;
try {
ubicacion = await obtenerUbicacion();
} catch (err) {
console.warn('SIBU | No se pudo obtener ubicación', err);
if (ubicacionRes.status === 'fulfilled') {
ubicacion = ubicacionRes.value;
} else {
console.warn('SIBU | GPS falló o fue denegado');
}
let paradas: BusStop[] = [];
if (paradasRes.status === 'fulfilled') {
// Si loadRouteStops no devolviera los datos directamente, los tomamos del store
paradas = paradasRes.value || routeStore.selectedRouteStops;
}
const paradasFormateadas = paradas.map((p, i) => ({
@ -56,17 +72,24 @@ export const useFlujoPrincipal = () => {
orden: i
}));
if (paradasFormateadas.length < 2) return;
if (!ubicacion) {
await trazarRuta(paradasFormateadas, map, false);
if (paradasFormateadas.length < 2) {
console.warn('SIBU | No hay suficientes paradas para trazar ruta');
return;
}
// ── PASO 3: Dibujar ruta completa (fondo, gris tenue) ─
// Si no detectamos GPS, trazamos la ruta completa sin zoom guiado
if (!ubicacion) {
await trazarRuta(paradasFormateadas, map, false);
const bounds = new google.maps.LatLngBounds()
paradasFormateadas.forEach(p => bounds.extend(new google.maps.LatLng(p.latitud, p.longitud)))
map.fitBounds(bounds, { top: 100, bottom: 100, left: 60, right: 60 })
return;
}
// ── PASO 4: Dibujar y Renderizar ──
// Dibujar ruta completa (fondo)
await trazarRuta(paradasFormateadas, map, true);
// ── PASO 4: Calcular parada más cercana (Omitir si skipGuidedZoom) ───────────────
if (skipGuidedZoom) {
const bounds = new google.maps.LatLngBounds()
paradasFormateadas.forEach(p => bounds.extend(new google.maps.LatLng(p.latitud, p.longitud)))
@ -78,10 +101,7 @@ export const useFlujoPrincipal = () => {
const paradaCercanaFound = paradaCercana.value
if (!paradaCercanaFound) return;
const routeStore = useRouteStore()
if (routeStore.selectedRouteId !== _ruta.id) return;
// ── PASO 5: Dibujar tramo relevante (Amarillo Vivo) ───────
// Dibujar tramo relevante
const idx = paradasFormateadas.findIndex(p => {
const samePos = Math.abs(p.longitud - paradaCercanaFound.longitude) < 0.0001 &&
Math.abs(p.latitud - paradaCercanaFound.latitude) < 0.0001;
@ -95,7 +115,7 @@ export const useFlujoPrincipal = () => {
}
}
// ── PASO 6: Dibujar marcadores de todas las paradas ──────────
// Renderizado Condicional de Marcadores
paradasFormateadas.forEach((p, i) => {
const esCercana = i === idx;
const esPasada = idx !== -1 && i < idx;
@ -112,13 +132,13 @@ export const useFlujoPrincipal = () => {
);
});
// ── PASO 7: Zoom centrado en usuario + parada cercana ─
hacerZoomAlTramoRelevante(ubicacion, paradaCercanaFound, map)
} catch (error) {
console.error('SIBU | Error procesando ruta:', error)
errorMsg.value = 'No se pudo cargar la ruta'
} finally {
// Apagar estado de carga
cargando.value = false
}
}

13
frontend/src/stores/route.ts
View File

@ -43,29 +43,31 @@ export const useRouteStore = defineStore('route', () => {
}
}
async function loadRouteStops(routeId: string, force = false) {
async function loadRouteStops(routeId: string, force = false): Promise<BusStop[]> {
const CACHE_TIME = 1000 * 60 * 15; // 15 minutos
const now = Date.now();
if (isLoadingStops.value) return;
if (!force && stopsCache.value.has(routeId)) {
if (stopsCache.value.has(routeId) && !force) {
const cacheEntry = stopsCache.value.get(routeId)!;
if (now - cacheEntry.fetchedAt < CACHE_TIME) {
selectedRouteStops.value = cacheEntry.stops;
return;
return cacheEntry.stops;
}
}
if (isLoadingStops.value) return [];
isLoadingStops.value = true
error.value = null
try {
const stops = await routesService.getRouteStops(routeId)
selectedRouteStops.value = stops
stopsCache.value.set(routeId, { fetchedAt: now, stops })
return stops
} catch (e) {
error.value = e instanceof Error ? e.message : 'Failed to load route stops'
console.error('Error loading route stops:', e)
selectedRouteStops.value = []
return []
} finally {
isLoadingStops.value = false
}
@ -75,8 +77,7 @@ export const useRouteStore = defineStore('route', () => {
if (selectedRouteId.value === routeId) return
selectedRouteId.value = routeId
selectedRouteName.value = routeName
selectedRouteStops.value = [] // Clear old stops immediately
await loadRouteStops(routeId)
selectedRouteStops.value = [] // Limpia para forzar recarga atómica en la vista
}
function clearSelection() {

25
frontend/src/views/MapView.vue
View File

@ -37,7 +37,7 @@ const { estasCargando: estasCargandoRuta, errorRuta } = useDirectionsRoute();
const { encontrarParadaCercana, paradaCercana, distanciaMetros, duracionCaminata, limpiarCaminata } = useParadaCercana();
const { calcularETA, busesActivos, cargando: etaCargando } = useETA();
const { procesarSeleccionDeRuta } = useFlujoPrincipal();
const { procesarSeleccionDeRuta, cargando: flujoCargando } = useFlujoPrincipal();
const { limpiarMapa: limpiarTodoCentralizado } = useMapState();
const showETACard = ref(false);
@ -237,20 +237,22 @@ function reDrawUserMarker() {
async function updateMapMarkers(skipZoom = false) {
if (!isLoaded.value || !map.value || isUpdatingMarkers.value) return;
isUpdatingMarkers.value = true;
const currentRequestRouteId = routeStore.selectedRouteId;
const stops = [...routeStore.selectedRouteStops];
if (!currentRequestRouteId) {
clearMapMarkers();
return;
}
isUpdatingMarkers.value = true;
try {
if (!currentRequestRouteId || stops.length === 0) {
clearMapMarkers();
return;
}
const selectedRouteObj = routeStore.allRoutes.find(r => r.id === currentRequestRouteId) || { id: currentRequestRouteId, short_name: currentRequestRouteId };
// ── PASO ATÓMICO: Procesar con carga paralela de GPS y Paradas ──
// Pasamos [] a paradasExistentes para forzar que procesarSeleccionDeRuta maneje el Promise.all
await procesarSeleccionDeRuta(
selectedRouteObj,
stops as BusStop[],
routeStore.selectedRouteStops, // El composable decidirá si necesita recargar en paralelo
map.value,
addCleanMarker,
skipZoom,
@ -326,6 +328,7 @@ function selectRouteAndClose(route: any) {
highlightOptimalStopForRoute();
return;
}
showUberSearch.value = false;
routeStore.wasSelectedFromMap = true;
routeStore.selectRoute(route.id, route.name);
@ -476,8 +479,8 @@ watch([() => authStore.userProfile?.auto_location, isLoaded], ([canLocate, loade
<div class="split-view">
<div class="map-side">
<div class="map-view">
<div v-if="estasCargandoRuta || errorRuta" class="status-indicator">
<div v-if="estasCargandoRuta" class="loading-pill">{{ t('map.calculatingRoute') }}</div>
<div v-if="flujoCargando || estasCargandoRuta || errorRuta" class="status-indicator">
<div v-if="flujoCargando || estasCargandoRuta" class="loading-pill">{{ t('map.calculatingRoute') }}</div>
<div v-if="errorRuta" class="error-pill">{{ errorRuta }}</div>
</div>