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

feat: limit to 2 routes and add slide animations to ETA card and banner

Browse Source
This commit is contained in:
Johan Samudio
2026-02-28 12:00:38 -05:00
parent 621da9e4c3
commit 25008054b3
2 changed files with 64 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -58,7 +58,6 @@ const alturaNavbar = ref(64);
// Search state
const stopSearchQuery = ref("");
const destinationQuery = ref("");
const originQuery = ref("Mi ubicación");
const filteredSearchResults = ref<BusStop[]>([]);
const showSearchDropdown = ref(false);
const showUberSearch = ref(false);
@ -87,15 +86,7 @@ watch([stopSearchQuery, destinationQuery], ([stopQuery, destQuery]) => {
}
});
function selectStopFromSearch(stop: BusStop) {
setCenter(stop.latitude, stop.longitude);
setZoom(17);
handleBusStopClick(stop);
stopSearchQuery.value = "";
destinationQuery.value = "";
showSearchDropdown.value = false;
showUberSearch.value = false;
}
// selectStopFromSearch removed as it was unused
function openUberSearch() {
showPromos.value = false; // Cerramos ofertas para evitar solapamiento
@ -163,6 +154,14 @@ const selectedBusStop = ref<BusStop | null>(null);
const showPromoModal = ref(false);
const selectedPromo = ref<any>(null);
const isBannerClosing = ref(false);
function animateAndReload() {
isBannerClosing.value = true;
setTimeout(() => {
reloadPage();
}, 450); // Mismo tiempo que la transición
}
// Close dropdown when clicking outside
function handleClickOutside(event: MouseEvent) {
@ -849,10 +848,11 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
</div>
<!-- Nuevo Banner de Parada Cercana Alineado (Redimensionado y con ETA) -->
<div
v-if="paradaCercana && routeStore.selectedRouteId && !showETACard"
class="best-stop-banner-compact"
>
<Transition name="banner-slide">
<div
v-if="paradaCercana && routeStore.selectedRouteId && !showETACard && !isBannerClosing"
class="best-stop-banner-compact"
>
<div class="banner-icon-bg">
<span class="material-icons text-white text-[16px]">directions_bus</span>
</div>
@ -867,7 +867,7 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
<div class="eta-loader"></div>
</template>
<template v-else-if="busesActivos.length > 0">
<span class="eta-value">{{ busesActivos[0].etaMinutos > 0 ? busesActivos[0].etaMinutos : '0' }}</span>
<span class="eta-value">{{ (busesActivos[0]?.etaMinutos ?? 0) > 0 ? busesActivos[0]?.etaMinutos : '0' }}</span>
<span class="eta-unit">min</span>
</template>
<template v-else>
@ -875,10 +875,11 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
</template>
</div>
<button @click.stop="reloadPage" class="ml-2 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
<span class="material-icons text-[18px] text-gray-400 hover:text-red-500">close</span>
</button>
</div>
<button @click.stop="animateAndReload" class="ml-2 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
<span class="material-icons text-[18px] text-gray-400 hover:text-red-500">close</span>
</button>
</div>
</Transition>
</div>
@ -1566,6 +1567,25 @@ html.light-theme .uber-search-trigger-compact {
border: 1px solid var(--border-color);
max-width: none;
pointer-events: auto;
z-index: 1200;
}
/* Animaciones del Banner (Slide de abajo hacia arriba per request) */
.banner-slide-enter-active,
.banner-slide-leave-active {
transition: all 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.banner-slide-enter-from,
.banner-slide-leave-to {
transform: translateY(20px);
opacity: 0;
}
.banner-slide-enter-to,
.banner-slide-leave-from {
transform: translateY(0);
opacity: 1;
}
.banner-icon-bg {