dredgy/FlightsAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started a flight view

Browse Source
This commit is contained in:
josh
2026-04-07 21:31:36 +10:00
parent 79469c02cf
commit 43f5c8ac3e
9 changed files with 384 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Pages/Dashboard.vue
+1 -1
View File
@@ -34,7 +34,7 @@ const name = computed(() => page?.props?.auth?.user?.name || 'there');
</v-btn>
</v-col>
<v-col cols="12" md="6">
<v-btn size="large" block href="#" prepend-icon="mdi-account-outline">
<v-btn size="large" block :href="`/u/${name}`" prepend-icon="mdi-account-outline">
View Profile
</v-btn>
</v-col>
resources/js/Pages/FlightProfile.vue
+2 -203
View File
@@ -4,6 +4,7 @@ import { Head } from '@inertiajs/vue3';
import { Flight } from "@/Types/types";
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
import FlightListTable from "@/Components/FlightsGoneBy/FlightListTable.vue";
defineOptions({
layout: MainLayout
@@ -18,16 +19,6 @@ defineProps<{
flights: Flight[]
}>()
const headers = [
{ title: 'FLIGHT', key: 'flight_number', sortable: true },
{ title: 'FROM', key: 'departure_airport', sortable: true },
{ title: 'TO', key: 'arrival_airport', sortable: true },
{ title: 'DATE', key: 'departure_date', sortable: true },
{ title: 'AIRLINE', key: 'airline', sortable: true },
{ title: 'AIRCRAFT', key: 'aircraft.designator', sortable: true },
{ title: 'CLASS', key: 'flight_class', sortable: true },
{ title: 'SEAT', key: 'seat_number', sortable: false },
]
</script>
<template>
@@ -45,65 +36,7 @@ const headers = [
</div>
</div>
<v-data-table
:headers="headers"
:items="flights"
:items-per-page="25"
class="departures-table"
hover
>
<!-- Flight number + logo -->
<template #item.flight_number="{ item }">
<div class="flight-cell">
<AirlineLogo size="32" :airline="item.airline" class="airline-logo-img" />
<span class="flight-number">{{ item.flight_number ?? '—' }}</span>
</div>
</template>
<!-- Departure -->
<template #item.departure_airport="{ item }">
<span class="iata">{{ item.departure_airport.iata_code }}</span><br/>
<span class="city-name">{{ item.departure_airport.municipality ?? '' }}</span>
</template>
<!-- Arrival -->
<template #item.arrival_airport="{ item }">
<span class="iata">{{ item.arrival_airport.iata_code }}</span><br/>
<span class="city-name">{{ item.arrival_airport.municipality ?? '' }}</span>
</template>
<!-- Date -->
<template #item.departure_date="{ item }">
<span class="date-cell">{{ item.departure_date }}</span>
</template>
<!-- Airline -->
<template #item.airline="{ item }">
<span class="airline-name">{{ item.airline?.name ?? '—' }}</span>
</template>
<!-- Aircraft -->
<template #item.aircraft="{ item }">
<span class="mono-tag">{{ item.aircraft?.designator ?? '—' }}</span>
</template>
<!-- Class -->
<template #item.flight_class="{ item }">
<FlightClassBadge :flight-class="item.flight_class" />
</template>
<!-- Seat -->
<template #item.seat_number="{ item }">
<span class="seat-cell">{{ item.seat_number ?? '—' }}</span>
</template>
<!-- Empty state -->
<template #no-data>
<div class="no-data">
<span>NO FLIGHTS ON RECORD</span>
</div>
</template>
</v-data-table>
<FlightListTable :flights="flights" />
</div>
</template>
@@ -167,139 +100,5 @@ const headers = [
color: #556;
}
/* ── Vuetify table overrides ── */
.departures-table {
background: transparent !important;
color: #c8cdd8 !important;
font-family: 'Barlow', sans-serif !important;
}
/* Header row */
:deep(.v-data-table-header__content) {
font-family: 'Share Tech Mono', monospace !important;
font-size: 0.68rem !important;
letter-spacing: 0.14em !important;
color: #ffc107 !important;
font-weight: 400 !important;
}
:deep(.v-data-table__th) {
background: transparent !important;
border-bottom: 1px solid rgba(255,193,7,0.15) !important;
padding: 0.75rem 1rem !important;
}
/* Body rows — alternating, no borders */
:deep(.v-data-table__tr:nth-child(odd)) {
background: rgba(255,255,255,0.025) !important;
}
:deep(.v-data-table__tr:nth-child(even)) {
background: transparent !important;
}
:deep(.v-data-table__tr:hover td) {
background: rgba(255,193,7,0.05) !important;
}
:deep(.v-data-table__td) {
border: none !important;
padding: 0.7rem 1rem !important;
font-size: 0.88rem !important;
color: #c8cdd8 !important;
}
/* Footer / pagination */
:deep(.v-data-table-footer) {
background: transparent !important;
border-top: 1px solid rgba(255,255,255,0.06) !important;
color: #556 !important;
font-family: 'Share Tech Mono', monospace !important;
font-size: 0.75rem !important;
}
:deep(.v-data-table-footer .v-btn) {
color: #778 !important;
}
:deep(.v-data-table-footer .v-btn--active) {
color: #ffc107 !important;
}
/* Sort icon colour */
:deep(.v-data-table-header__sort-icon) {
color: #ffc107 !important;
opacity: 0.5;
}
/* ── Cell styles ── */
.flight-cell {
display: flex;
align-items: center;
gap: 0.5rem;
}
.airline-logo-img {
opacity: 0.85;
flex-shrink: 0;
}
.flight-number {
font-family: 'Share Tech Mono', monospace;
font-size: 0.9rem;
color: #e8eaf0;
letter-spacing: 0.06em;
}
.iata {
display: inline-block;
font-family: 'Share Tech Mono', monospace;
font-size: 1rem;
font-weight: 600;
color: #e8eaf0;
letter-spacing: 0.08em;
margin-right: 0.35rem;
}
.city-name {
font-size: 0.75rem;
color: #556;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.date-cell {
font-family: 'Share Tech Mono', monospace;
font-size: 0.82rem;
color: #9aa;
letter-spacing: 0.04em;
}
.airline-name {
font-size: 0.85rem;
color: #b0b8c8;
}
.mono-tag {
font-family: 'Share Tech Mono', monospace;
font-size: 0.8rem;
color: #778899;
letter-spacing: 0.06em;
}
.seat-cell {
font-family: 'Share Tech Mono', monospace;
font-size: 0.85rem;
color: #c8cdd8;
}
/* ── Empty state ── */
.no-data {
padding: 3rem;
text-align: center;
font-family: 'Share Tech Mono', monospace;
font-size: 0.8rem;
letter-spacing: 0.2em;
color: #445;
}
</style>