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,15 +13,34 @@ 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) {
|
||||
if (!props.busStop) return
|
||||
isLoading.value = true
|
||||
upcomingArrivals.value = []
|
||||
try {
|
||||
upcomingArrivals.value = await busStopsService.getNextBusArrivals(props.busStop.id)
|
||||
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 = []
|
||||
@ -29,6 +48,14 @@ async function loadArrivals() {
|
||||
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() {
|
||||
@ -37,17 +64,12 @@ function startInternalNavigation() {
|
||||
}
|
||||
}
|
||||
|
||||
// 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>
|
||||
<div class="route-texts">
|
||||
<span class="route-name">{{ arrival.routeName }}</span>
|
||||
<span class="departure-hint">Sale: {{ formatTo12Hour(arrival.departureTime) }}</span>
|
||||
</div>
|
||||
<div class="arrival-time">
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
@ -2,6 +2,41 @@
|
||||
import { supabase } from '@/supabase'
|
||||
import type { BusStop, Route } from '@/types'
|
||||
|
||||
// Map JS getDay() (0=Sun,6=Sat) to Spanish day names used in dias_operacion
|
||||
const DAY_MAP: Record<number, string> = {
|
||||
0: 'domingo',
|
||||
1: 'lunes',
|
||||
2: 'martes',
|
||||
3: 'miercoles',
|
||||
4: 'jueves',
|
||||
5: 'viernes',
|
||||
6: 'sabado'
|
||||
}
|
||||
|
||||
/** Convert "HH:MM:SS" time string to total minutes since midnight */
|
||||
function timeToMinutes(t: string): number {
|
||||
const parts = t.split(':')
|
||||
return parseInt(parts[0] || '0') * 60 + parseInt(parts[1] || '0')
|
||||
}
|
||||
|
||||
/** Convert total minutes since midnight back to "HH:MM" string */
|
||||
function minutesToTime(m: number): string {
|
||||
const safeM = ((m % 1440) + 1440) % 1440 // wrap around midnight
|
||||
const h = Math.floor(safeM / 60)
|
||||
const min = safeM % 60
|
||||
return `${h.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}`
|
||||
}
|
||||
|
||||
export interface BusArrival {
|
||||
routeName: string
|
||||
routeId: string
|
||||
arrivalTime: string // "HH:MM" when bus arrives at this stop
|
||||
waitMinutes: number | null // null = no GPS, raw schedule shown
|
||||
hasGps: boolean
|
||||
departureTime: string // "HH:MM" when bus departs origin
|
||||
alreadyPassed: boolean // true if bus has already passed this stop
|
||||
}
|
||||
|
||||
export const busStopsService = {
|
||||
/** Get all bus stops */
|
||||
async getAllBusStops(): Promise<BusStop[]> {
|
||||
@ -29,20 +64,121 @@ export const busStopsService = {
|
||||
return (data || []).map((row: any) => row.routes) as Route[]
|
||||
},
|
||||
|
||||
/** Get estimated next bus arrivals (Mock Data) */
|
||||
async getNextBusArrivals(_stopId: string): Promise<{ routeName: string; arrivalTime: string }[]> {
|
||||
// Mock delay to simulate network request
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
/**
|
||||
* Real-time bus arrival calculator for a specific stop.
|
||||
*
|
||||
* Logic:
|
||||
* 1. Get all routes passing through this stop + their travel_time_minutes to the stop
|
||||
* 2. Get today's published schedules for those routes
|
||||
* 3. For each schedule: arrivalAtStop = departure_time + travel_time_minutes
|
||||
* 4. With GPS: filter to buses not yet passed, calculate wait minutes
|
||||
* Without GPS: show all future arrivals as raw times for today (option A)
|
||||
* 5. Return sorted by arrivalTime asc, max 8 results within next 2 hours
|
||||
*/
|
||||
async getNextBusesForStop(stopId: string, userLat?: number, userLng?: number): Promise<BusArrival[]> {
|
||||
const hasGps = userLat !== undefined && userLng !== undefined
|
||||
|
||||
// Generate some random mock arrivals
|
||||
const mockArrivals = [
|
||||
{ routeName: "Ruta Boquete - David", arrivalTime: "5 min" },
|
||||
{ routeName: "Ruta David - Boquete", arrivalTime: "12 min" },
|
||||
{ routeName: "Ruta Circular", arrivalTime: "25 min" }
|
||||
];
|
||||
// ── STEP 1: Get route_stops entries for this stop (includes travel_time_minutes) ──
|
||||
const { data: routeStopsData, error: rsError } = await supabase
|
||||
.from('route_stops')
|
||||
.select('route_id, travel_time_minutes, stop_delay_minutes')
|
||||
.eq('stop_id', stopId)
|
||||
|
||||
// Randomly return 1-3 arrivals
|
||||
return mockArrivals.slice(0, Math.floor(Math.random() * 3) + 1);
|
||||
if (rsError) throw new Error(rsError.message)
|
||||
if (!routeStopsData || routeStopsData.length === 0) return []
|
||||
|
||||
const routeIds = routeStopsData.map((rs: any) => rs.route_id)
|
||||
|
||||
// Build a lookup: routeId → travel_time_minutes to THIS stop
|
||||
const travelTimeMap: Record<string, number> = {}
|
||||
for (const rs of routeStopsData as any[]) {
|
||||
travelTimeMap[rs.route_id] = (rs.travel_time_minutes || 0) + (rs.stop_delay_minutes || 0)
|
||||
}
|
||||
|
||||
// ── STEP 2: Get routes metadata (name) ──
|
||||
const { data: routesData, error: routesError } = await supabase
|
||||
.from('routes')
|
||||
.select('id, name')
|
||||
.in('id', routeIds)
|
||||
|
||||
if (routesError) throw new Error(routesError.message)
|
||||
const routeNameMap: Record<string, string> = {}
|
||||
for (const r of (routesData || []) as any[]) {
|
||||
routeNameMap[r.id] = r.name
|
||||
}
|
||||
|
||||
// ── STEP 3: Get today's schedules ──
|
||||
const now = new Date()
|
||||
const todayDay = DAY_MAP[now.getDay()]
|
||||
const nowMinutes = now.getHours() * 60 + now.getMinutes()
|
||||
|
||||
const { data: schedulesData, error: schError } = await supabase
|
||||
.from('bus_schedules')
|
||||
.select('route_id, departure_time, dias_operacion')
|
||||
.in('route_id', routeIds)
|
||||
.eq('is_published', true)
|
||||
.order('departure_time', { ascending: true })
|
||||
|
||||
if (schError) throw new Error(schError.message)
|
||||
if (!schedulesData || schedulesData.length === 0) return []
|
||||
|
||||
// ── STEP 4: Calculate arrival time for each schedule at THIS stop ──
|
||||
const arrivals: BusArrival[] = []
|
||||
|
||||
for (const sched of schedulesData as any[]) {
|
||||
// Check if this schedule runs today
|
||||
const diasOp: string[] = sched.dias_operacion || []
|
||||
if (!todayDay || !diasOp.includes(todayDay)) continue
|
||||
|
||||
|
||||
const depMinutes = timeToMinutes(sched.departure_time)
|
||||
const travelMins = travelTimeMap[sched.route_id] ?? 0
|
||||
const arrivalMinutes = depMinutes + travelMins
|
||||
|
||||
// Handle midnight crossover (e.g. departure 23:50 + 20min travel = 00:10 next day)
|
||||
const arrivalMinutesNormalized = arrivalMinutes % 1440
|
||||
|
||||
const alreadyPassed = arrivalMinutesNormalized < nowMinutes
|
||||
const waitMinutes = hasGps ? (arrivalMinutesNormalized - nowMinutes) : null
|
||||
|
||||
// Without GPS (option A): show all future arrivals as raw times
|
||||
// With GPS: only show buses that haven't passed yet
|
||||
if (hasGps && alreadyPassed) continue
|
||||
|
||||
// Skip buses more than 3 hours in the future to avoid showing the whole day
|
||||
if (hasGps && waitMinutes !== null && waitMinutes > 180) continue
|
||||
|
||||
// Without GPS: skip past arrivals but show up to next 3 hours anyway
|
||||
if (!hasGps && alreadyPassed && Math.abs(arrivalMinutesNormalized - nowMinutes) > 10) continue
|
||||
|
||||
arrivals.push({
|
||||
routeName: routeNameMap[sched.route_id] || 'Ruta desconocida',
|
||||
routeId: sched.route_id,
|
||||
arrivalTime: minutesToTime(arrivalMinutesNormalized),
|
||||
departureTime: minutesToTime(depMinutes),
|
||||
waitMinutes,
|
||||
hasGps,
|
||||
alreadyPassed
|
||||
})
|
||||
}
|
||||
|
||||
// Sort by arrival time ascending, return first 8
|
||||
arrivals.sort((a, b) => {
|
||||
const aMin = timeToMinutes(a.arrivalTime)
|
||||
const bMin = timeToMinutes(b.arrivalTime)
|
||||
return aMin - bMin
|
||||
})
|
||||
|
||||
return arrivals.slice(0, 8)
|
||||
},
|
||||
|
||||
/**
|
||||
* @deprecated Use getNextBusesForStop instead.
|
||||
* Kept for compatibility — calls the real engine without GPS context.
|
||||
*/
|
||||
async getNextBusArrivals(stopId: string): Promise<{ routeName: string; arrivalTime: string }[]> {
|
||||
const real = await this.getNextBusesForStop(stopId)
|
||||
return real.map(a => ({ routeName: a.routeName, arrivalTime: a.arrivalTime }))
|
||||
},
|
||||
|
||||
/** Create a new bus stop (Admin) */
|
||||
|
||||
Reference in New Issue
Block a user