108 lines
3.3 KiB
Vue
108 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import MainLayout from "@/Layouts/MainLayout.vue";
|
|
import { Head } from '@inertiajs/vue3';
|
|
|
|
defineOptions({
|
|
layout: MainLayout
|
|
})
|
|
|
|
interface Airport {
|
|
id: number
|
|
name: string
|
|
iata_code: string
|
|
}
|
|
|
|
interface Airline {
|
|
id: number
|
|
name: string
|
|
iata_code: string
|
|
}
|
|
|
|
interface Aircraft {
|
|
id: number
|
|
model_full_name: string
|
|
designator: string
|
|
}
|
|
|
|
interface SeatType {
|
|
id: number
|
|
name: string
|
|
}
|
|
|
|
interface FlightReason {
|
|
id: number
|
|
name: string
|
|
}
|
|
|
|
interface FlightClass {
|
|
id: number
|
|
name: string
|
|
}
|
|
|
|
interface Flight {
|
|
id: number
|
|
flight_number: string | null
|
|
departure_date: string
|
|
arrival_date: string
|
|
aircraft_registration: string | null
|
|
seat_number: string | null
|
|
note: string | null
|
|
departure_airport: Airport
|
|
arrival_airport: Airport
|
|
airline: Airline | null
|
|
aircraft: Aircraft | null
|
|
seat_type: SeatType | null
|
|
flight_reason: FlightReason | null
|
|
flight_class: FlightClass | null
|
|
}
|
|
|
|
defineProps<{
|
|
user: {
|
|
id: number
|
|
name: string
|
|
email: string
|
|
}
|
|
flights: Flight[]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<Head :title="`${user.name}'s Flights`" />
|
|
|
|
<div class="p-6">
|
|
<h1 class="text-2xl font-bold mb-6">{{ user.name }}'s Flights</h1>
|
|
|
|
<table class="w-full border-collapse border border-gray-300">
|
|
<thead>
|
|
<tr class="bg-gray-100">
|
|
<th class="border border-gray-300 px-4 py-2 text-left">Flight</th>
|
|
<th class="border border-gray-300 px-4 py-2 text-left">Departure</th>
|
|
<th class="border border-gray-300 px-4 py-2 text-left">Arrival</th>
|
|
<th class="border border-gray-300 px-4 py-2 text-left">Date</th>
|
|
<th class="border border-gray-300 px-4 py-2 text-left">Airline</th>
|
|
<th class="border border-gray-300 px-4 py-2 text-left">Aircraft</th>
|
|
<th class="border border-gray-300 px-4 py-2 text-left">Class</th>
|
|
<th class="border border-gray-300 px-4 py-2 text-left">Seat</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="flight in flights" :key="flight.id" class="hover:bg-gray-50">
|
|
<td class="border border-gray-300 px-4 py-2">{{ flight.flight_number ?? '—' }}</td>
|
|
<td class="border border-gray-300 px-4 py-2">{{ flight.departure_airport.iata_code }}</td>
|
|
<td class="border border-gray-300 px-4 py-2">{{ flight.arrival_airport.iata_code }}</td>
|
|
<td class="border border-gray-300 px-4 py-2">{{ flight.departure_date }}</td>
|
|
<td class="border border-gray-300 px-4 py-2">{{ flight.airline?.name ?? '—' }}</td>
|
|
<td class="border border-gray-300 px-4 py-2">{{ flight.aircraft?.designator ?? '—' }}</td>
|
|
<td class="border border-gray-300 px-4 py-2">{{ flight.flight_class?.name ?? '—' }}</td>
|
|
<td class="border border-gray-300 px-4 py-2">{{ flight.seat_number ?? '—' }}</td>
|
|
</tr>
|
|
<tr v-if="flights.length === 0">
|
|
<td colspan="8" class="border border-gray-300 px-4 py-2 text-center text-gray-500">
|
|
No flights found.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|