59 lines
1.8 KiB
Vue
59 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import MainLayout from "@/Layouts/MainLayout.vue";
|
|
import { Head } from '@inertiajs/vue3';
|
|
|
|
defineOptions({
|
|
layout: MainLayout
|
|
})
|
|
|
|
defineProps<{
|
|
user: {
|
|
id: number
|
|
name: string
|
|
email: string
|
|
}
|
|
flights: {
|
|
id: number
|
|
departure: string
|
|
arrival: string
|
|
flight_number: string
|
|
date: string
|
|
}[]
|
|
}>()
|
|
</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>
|
|
</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 }}</td>
|
|
<td class="border border-gray-300 px-4 py-2">{{ flight.arrival }}</td>
|
|
<td class="border border-gray-300 px-4 py-2">{{ flight.date }}</td>
|
|
</tr>
|
|
<tr v-if="flights.length === 0">
|
|
<td colspan="4" class="border border-gray-300 px-4 py-2 text-center text-gray-500">
|
|
No flights found.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|