b8906efc80
Some checks failed
ci / ci (22, ubuntu-latest) (push) Has been cancelled
Nuxt 4 + Supabase + Flightics API. Incluye búsqueda de vuelos, inspiraciones, watchlist, tracking de precios y mapa interactivo. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
58 lines
1.8 KiB
Vue
58 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { Trip } from '~/server/utils/flightics'
|
|
|
|
const props = defineProps<{
|
|
from: string
|
|
to: string
|
|
}>()
|
|
|
|
const { trips, loading, fetchRouteFlights } = useRouteFlights()
|
|
|
|
onMounted(() => {
|
|
if (props.from && props.to) {
|
|
fetchRouteFlights(props.from, props.to)
|
|
}
|
|
})
|
|
|
|
function formatTime(d: string) {
|
|
return new Date(d).toLocaleTimeString('es-ES', { hour: '2-digit', minute: '2-digit' })
|
|
}
|
|
|
|
function formatDate(d: string) {
|
|
return new Date(d).toLocaleDateString('es-ES', { day: 'numeric', month: 'short' })
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="loading || trips.length > 0">
|
|
<h3 class="font-semibold mb-3">Otros vuelos {{ from }} → {{ to }}</h3>
|
|
<div v-if="loading" class="space-y-2">
|
|
<USkeleton v-for="i in 3" :key="i" class="h-12" />
|
|
</div>
|
|
<div v-else class="space-y-2">
|
|
<div
|
|
v-for="(trip, i) in trips.slice(0, 5)"
|
|
:key="i"
|
|
class="flex items-center justify-between px-3 py-2 rounded-lg border border-neutral-200 dark:border-neutral-700 text-sm"
|
|
>
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-medium">
|
|
{{ formatTime(trip.legs[0]?.segments[0]?.departureDate) }}
|
|
→
|
|
{{ formatTime(trip.legs[0]?.segments.at(-1)?.arrivalDate || '') }}
|
|
</span>
|
|
<span class="text-muted">
|
|
{{ formatDate(trip.legs[0]?.segments[0]?.departureDate) }}
|
|
</span>
|
|
<span class="text-xs text-muted">
|
|
{{ trip.legs[0]?.segments[0]?.company?.code }}{{ trip.legs[0]?.segments[0]?.number }}
|
|
</span>
|
|
</div>
|
|
<span class="font-bold text-primary-600 dark:text-primary-400">
|
|
{{ trip.totalCost.toFixed(0) }}€
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|