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

fix(map): add 'Cerrar ruta' button to ETACard + show ArrivalBanner X in both eta/navigating phases

Browse Source
This commit is contained in:
Johan Samudio
2026-03-04 12:14:19 -05:00
parent c5e5946738
commit 9c7050436b
2 changed files with 19 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/map/ETACard.vue
View File

@ -22,10 +22,20 @@
@touchstart="onTouchStart" @touchstart="onTouchStart"
></div> ></div>
<!-- Indicador visual de que se puede arrastrar --> <!-- Barra superior: hint de drag + botón cerrar ruta -->
<p class="text-center text-[10px] text-gray-400 mt-1 mb-0 pointer-events-none"> <div class="flex items-center justify-between mt-1 mb-0">
Desliza hacia abajo para cerrar <p class="text-[10px] text-gray-400 pointer-events-none">
</p> Desliza hacia abajo para minimizar
</p>
<button
@click="$emit('close-route')"
class="flex items-center gap-1 px-2.5 py-1 rounded-full bg-red-50 dark:bg-red-900/30 text-red-500 dark:text-red-400 text-[11px] font-bold hover:bg-red-100 dark:hover:bg-red-900/50 transition-colors"
title="Cerrar ruta"
>
<span class="material-icons" style="font-size:14px">close</span>
Cerrar ruta
</button>
</div>
<!-- Cabecera de la parada --> <!-- Cabecera de la parada -->
<div v-if="stopName" class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800"> <div v-if="stopName" class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
@ -156,7 +166,8 @@ defineProps<{
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'close'): void; // drag hacia abajo → pasar a fase navigating (e: 'close'): void; // drag hacia abajo → pasar a fase navigating (minimizar)
(e: 'close-route'): void; // botón X → cerrar ruta completamente
(e: 'refresh'): void; (e: 'refresh'): void;
}>(); }>();

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

@ -631,8 +631,8 @@ watch([() => authStore.userProfile?.auto_location, isLoaded], ([canLocate, loade
> >
<template #extra-triggers> <template #extra-triggers>
<ArrivalBanner <ArrivalBanner
:is-visible="routePhase === 'navigating' && !!(paradaCercana && routeStore.selectedRouteId && !isBannerClosing)" :is-visible="(routePhase === 'navigating' || routePhase === 'eta') && !!(routeStore.selectedRouteId && !isBannerClosing)"
:stop-name="paradaCercana?.name || ''" :stop-name="paradaCercana?.name || routeStore.selectedRouteName || ''"
:is-loading="etaCargando" :is-loading="etaCargando"
:has-active-buses="busesActivos.length > 0" :has-active-buses="busesActivos.length > 0"
:eta-value="busesActivos[0]?.etaMinutos ?? 0" :eta-value="busesActivos[0]?.etaMinutos ?? 0"
@ -688,6 +688,7 @@ watch([() => authStore.userProfile?.auto_location, isLoaded], ([canLocate, loade
:buses="busesActivos" :buses="busesActivos"
:is-loading="etaCargando" :is-loading="etaCargando"
@close="handleETACardDismiss" @close="handleETACardDismiss"
@close-route="animateAndReload"
@refresh="paradaCercana && routeStore.selectedRouteId ? calcularETA(routeStore.selectedRouteId, paradaCercana) : null" @refresh="paradaCercana && routeStore.selectedRouteId ? calcularETA(routeStore.selectedRouteId, paradaCercana) : null"
/> />
</div> </div>