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

Decouple route selection: Map uses persistent store state, Schedules uses local state. Map selection only persists on Map banner.

Browse Source
This commit is contained in:
Johan Samudio
2026-03-01 12:38:04 -05:00
parent b8577a512b
commit 59de2c7c23
3 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/views/SchedulesView.vue
View File

@ -15,6 +15,11 @@ const routeStore = useRouteStore()
const dropdownOpen = ref(false)
const dayFilter = ref<'all' | 'today' | 'tomorrow'>('today')
// SIBU | Estado local para independizar el selector de horarios del mapa
const localSelectedRouteId = ref<string | null>(null)
const localSelectedRouteName = ref<string | null>(null)
const hasLocalSelection = computed(() => localSelectedRouteId.value !== null)
// ── Tipos de día
const DAY_TYPES: Record<string, string> = {
'weekday': t('schedules.types.weekday'),
@ -123,7 +128,10 @@ function pickRoute(id: string, name: string) {
item_id: name,
properties: { route_id: id }
})
routeStore.selectRoute(id, name)
// SIBU | Solo actualizamos estado local (Independiente del mapa)
localSelectedRouteId.value = id
localSelectedRouteName.value = name
scheduleStore.loadRouteSchedules(id)
}
@ -146,8 +154,13 @@ onMounted(async () => {
const found = routeStore.allRoutes.find(r => r.id === queryRouteId)
if (found) pickRoute(found.id, found.name)
} else if (routeStore.selectedRouteId) {
// SIBU | Si venimos de otra vista (Mapa) con una ruta, cargamos sus horarios
scheduleStore.loadRouteSchedules(routeStore.selectedRouteId)
// SIBU | Inicializamos con la ruta del mapa, pero a partir de aquí son independientes
const mapRoute = routeStore.allRoutes.find(r => r.id === routeStore.selectedRouteId)
if (mapRoute) {
localSelectedRouteId.value = mapRoute.id
localSelectedRouteName.value = mapRoute.name
scheduleStore.loadRouteSchedules(mapRoute.id)
}
}
})
@ -173,7 +186,7 @@ onUnmounted(() => {
<!-- ── HEADER ── -->
<header class="sch-header">
<h1 class="sch-title">{{ t('schedules.title') }}</h1>
<p class="sch-subtitle" v-if="!routeStore.hasSelectedRoute">
<p class="sch-subtitle" v-if="!hasLocalSelection">
{{ t('schedules.selectRoute') }}
</p>
</header>
@ -185,7 +198,7 @@ onUnmounted(() => {
<!-- Botón disparador -->
<button
class="selector-trigger"
:class="{ 'selector-trigger--active': routeStore.hasSelectedRoute }"
:class="{ 'selector-trigger--active': hasLocalSelection }"
@click.stop="dropdownOpen = !dropdownOpen"
:disabled="routeStore.isLoadingRoutes"
>
@ -193,8 +206,8 @@ onUnmounted(() => {
<div class="trigger-icon">
<span class="material-icons">directions_bus</span>
</div>
<span class="trigger-text" :class="{ 'trigger-text--selected': routeStore.hasSelectedRoute }">
{{ routeStore.isLoadingRoutes ? t('schedules.loadingRoutes') : (routeStore.selectedRouteName || t('schedules.placeholder')) }}
<span class="trigger-text" :class="{ 'trigger-text--selected': hasLocalSelection }">
{{ routeStore.isLoadingRoutes ? t('schedules.loadingRoutes') : (localSelectedRouteName || t('schedules.placeholder')) }}
</span>
</div>
<span class="material-icons trigger-arrow" :class="{ 'trigger-arrow--up': dropdownOpen }">
@ -217,12 +230,12 @@ onUnmounted(() => {
v-for="r in routeStore.allRoutes"
:key="r.id"
class="dropdown-item"
:class="{ 'dropdown-item--active': r.id === routeStore.selectedRouteId }"
:class="{ 'dropdown-item--active': r.id === localSelectedRouteId }"
@click.stop="pickRoute(r.id, r.name)"
>
<span class="material-icons dropdown-item-icon">directions_bus</span>
<span class="dropdown-item-name">{{ r.name }}</span>
<span v-if="r.id === routeStore.selectedRouteId" class="material-icons dropdown-item-check">check</span>
<span v-if="r.id === localSelectedRouteId" class="material-icons dropdown-item-check">check</span>
</button>
<div v-if="routeStore.allRoutes.length === 0" class="dropdown-empty">
{{ t('schedules.noRoutesAvailable') }}
@ -234,7 +247,7 @@ onUnmounted(() => {
</div>
<!-- ── ESTADO VACÍO — sin ruta seleccionada ── -->
<div v-if="!routeStore.hasSelectedRoute" class="empty-state">
<div v-if="!hasLocalSelection" class="empty-state">
<div class="empty-illustration">
<svg width="80" height="80" viewBox="0 0 80 80" fill="none">
<circle cx="40" cy="38" r="24" stroke="var(--active-color)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="6 4"/>
@ -304,7 +317,7 @@ onUnmounted(() => {
</span>
<span v-if="i === 0 && getBusStatus(schedule.departure_time) === 'departing'" class="departing-pulse">{{ t('schedules.departing') || 'SALIENDO' }}</span>
</div>
<p class="route-name">{{ routeStore.selectedRouteName }}</p>
<p class="route-name">{{ localSelectedRouteName }}</p>
<p class="card-detail">
<span class="material-icons card-detail-icon">schedule</span>
{{ DAY_TYPES[schedule.schedule_type] || schedule.schedule_type }}