feat: motor de calculo real de llegadas de buses por parada - reemplaza datos mock con logica usando travel_time_minutes + horarios del dia, con soporte GPS para tiempos de espera en tiempo real
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import type { BusStop } from '@/types'
|
||||
import { busStopsService } from '@/services/busStopsService'
|
||||
import { busStopsService, type BusArrival } from '@/services/busStopsService'
|
||||
import FavoriteButton from '@/components/FavoriteButton.vue'
|
||||
import { formatTo12Hour } from '@/utils/timeFormatter'
|
||||
|
||||
@ -13,41 +13,63 @@ interface Props {
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits(['close', 'navigate'])
|
||||
|
||||
const upcomingArrivals = ref<{ routeName: string; arrivalTime: string }[]>([])
|
||||
const upcomingArrivals = ref<BusArrival[]>([])
|
||||
const isLoading = ref(false)
|
||||
const hasGps = ref(false)
|
||||
|
||||
// Try to get user GPS position (non-blocking)
|
||||
async function getUserPosition(): Promise<{ lat: number; lng: number } | null> {
|
||||
if (!navigator.geolocation) return null
|
||||
return new Promise((resolve) => {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
(pos) => resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
|
||||
() => resolve(null), // user denied or error → null (option A: show raw times)
|
||||
{ timeout: 5000, maximumAge: 60000 }
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
// Function to fetch arrivals
|
||||
async function loadArrivals() {
|
||||
if (props.busStop) {
|
||||
isLoading.value = true
|
||||
try {
|
||||
upcomingArrivals.value = await busStopsService.getNextBusArrivals(props.busStop.id)
|
||||
} catch (e) {
|
||||
console.error('Failed to load arrivals', e)
|
||||
upcomingArrivals.value = []
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
if (!props.busStop) return
|
||||
isLoading.value = true
|
||||
upcomingArrivals.value = []
|
||||
try {
|
||||
const pos = await getUserPosition()
|
||||
hasGps.value = pos !== null
|
||||
upcomingArrivals.value = await busStopsService.getNextBusesForStop(
|
||||
props.busStop.id,
|
||||
pos?.lat,
|
||||
pos?.lng
|
||||
)
|
||||
} catch (e) {
|
||||
console.error('Failed to load arrivals', e)
|
||||
upcomingArrivals.value = []
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
/** Format wait time as human label: "2 min", "1 h 5 min" */
|
||||
function formatWait(minutes: number): string {
|
||||
if (minutes < 1) return 'Llegando'
|
||||
if (minutes < 60) return `${Math.round(minutes)} min`
|
||||
const h = Math.floor(minutes / 60)
|
||||
const m = Math.round(minutes % 60)
|
||||
return m > 0 ? `${h}h ${m}min` : `${h}h`
|
||||
}
|
||||
|
||||
function startInternalNavigation() {
|
||||
if (props.busStop) {
|
||||
emit('navigate', props.busStop)
|
||||
}
|
||||
}
|
||||
|
||||
// Watch for changes in busStop or isOpen to reload data
|
||||
watch(() => props.busStop, async (newStop) => {
|
||||
if (newStop && props.isOpen) {
|
||||
await loadArrivals()
|
||||
}
|
||||
if (newStop && props.isOpen) await loadArrivals()
|
||||
})
|
||||
|
||||
watch(() => props.isOpen, async (isOpen) => {
|
||||
if (isOpen && props.busStop) {
|
||||
await loadArrivals()
|
||||
}
|
||||
if (isOpen && props.busStop) await loadArrivals()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -81,25 +103,32 @@ watch(() => props.isOpen, async (isOpen) => {
|
||||
<div v-if="busStop" class="amenities-container">
|
||||
<div v-if="busStop.has_shelter" class="amenity-chip" title="Shelter available">
|
||||
<span class="material-icons md-16">roofing</span>
|
||||
<span>Shelter</span>
|
||||
<span>Cubierta</span>
|
||||
</div>
|
||||
<div v-if="busStop.has_seating" class="amenity-chip" title="Seating available">
|
||||
<span class="material-icons md-16">event_seat</span>
|
||||
<span>Seating</span>
|
||||
<span>Asientos</span>
|
||||
</div>
|
||||
<div v-if="busStop.is_accessible" class="amenity-chip" title="Wheelchair accessible">
|
||||
<span class="material-icons md-16">accessible</span>
|
||||
<span>Accessible</span>
|
||||
<span>Accesible</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="modal-body">
|
||||
<h4 class="section-title">Next Arrivals</h4>
|
||||
<!-- Section header with GPS status badge -->
|
||||
<div class="arrivals-header">
|
||||
<h4 class="section-title">Próximos Buses</h4>
|
||||
<div v-if="!isLoading" class="gps-badge" :class="hasGps ? 'gps-on' : 'gps-off'">
|
||||
<span class="material-icons md-16">{{ hasGps ? 'gps_fixed' : 'gps_off' }}</span>
|
||||
<span>{{ hasGps ? 'Tiempo real' : 'Horario' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoading" class="loading-state">
|
||||
<span class="material-icons spin">refresh</span>
|
||||
<p>Loading arrivals...</p>
|
||||
<p>Obteniendo horarios...</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="upcomingArrivals.length > 0" class="arrivals-list">
|
||||
@ -107,20 +136,35 @@ watch(() => props.isOpen, async (isOpen) => {
|
||||
v-for="(arrival, index) in upcomingArrivals"
|
||||
:key="index"
|
||||
class="arrival-item"
|
||||
:style="{ animationDelay: `${index * 0.1}s` }"
|
||||
:style="{ animationDelay: `${index * 0.07}s` }"
|
||||
>
|
||||
<div class="route-info">
|
||||
<span class="material-icons bus-icon">directions_bus</span>
|
||||
<span class="route-name">{{ arrival.routeName }}</span>
|
||||
<div class="route-texts">
|
||||
<span class="route-name">{{ arrival.routeName }}</span>
|
||||
<span class="departure-hint">Sale: {{ formatTo12Hour(arrival.departureTime) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="arrival-time">
|
||||
|
||||
<!-- With GPS: show wait minutes + arrival time -->
|
||||
<div v-if="arrival.hasGps && arrival.waitMinutes !== null" class="arrival-time-block">
|
||||
<span class="wait-badge" :class="arrival.waitMinutes < 10 ? 'urgent' : 'normal'">
|
||||
{{ formatWait(arrival.waitMinutes) }}
|
||||
</span>
|
||||
<span class="arrival-clock">{{ formatTo12Hour(arrival.arrivalTime) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Without GPS: show raw schedule time -->
|
||||
<div v-else class="arrival-time">
|
||||
{{ formatTo12Hour(arrival.arrivalTime) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="empty-state">
|
||||
<p>No upcoming arrivals found.</p>
|
||||
<span class="material-icons">schedule</span>
|
||||
<p>Sin servicio disponible en este momento</p>
|
||||
<span class="empty-hint">Prueba más tarde o revisa el horario completo</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -128,11 +172,11 @@ watch(() => props.isOpen, async (isOpen) => {
|
||||
<div class="modal-footer">
|
||||
<button class="action-btn secondary" @click="startInternalNavigation">
|
||||
<span class="material-icons md-18">navigation</span>
|
||||
Navigate
|
||||
Cómo llegar
|
||||
</button>
|
||||
<button class="action-btn primary" @click="loadArrivals">
|
||||
<span class="material-icons md-18">refresh</span>
|
||||
Refresh
|
||||
Actualizar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -237,13 +281,42 @@ watch(() => props.isOpen, async (isOpen) => {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.arrivals-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
margin: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.gps-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
padding: 3px 8px;
|
||||
border-radius: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
.gps-badge.gps-on {
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
color: #22c55e;
|
||||
border: 1px solid rgba(34, 197, 94, 0.3);
|
||||
}
|
||||
.gps-badge.gps-off {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.arrivals-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -263,19 +336,74 @@ watch(() => props.isOpen, async (isOpen) => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.route-texts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bus-icon {
|
||||
color: var(--header-bg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.route-name {
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.departure-hint {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Raw time (no GPS) */
|
||||
.arrival-time {
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
color: var(--active-color, green);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* GPS mode: wait badge + clock */
|
||||
.arrival-time-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.wait-badge {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 800;
|
||||
padding: 2px 8px;
|
||||
border-radius: 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.wait-badge.urgent {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
color: #ef4444;
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
.wait-badge.normal {
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
color: #22c55e;
|
||||
border: 1px solid rgba(34, 197, 94, 0.25);
|
||||
}
|
||||
|
||||
.arrival-clock {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Amenities Styles */
|
||||
@ -393,4 +521,33 @@ watch(() => props.isOpen, async (isOpen) => {
|
||||
}
|
||||
|
||||
@keyframes spin { 100% { transform: rotate(360deg); } }
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 24px 16px;
|
||||
text-align: center;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-state .material-icons {
|
||||
font-size: 2.5rem;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user