232 lines
7.2 KiB
Vue
232 lines
7.2 KiB
Vue
<script setup lang="ts">
|
|
import FlightClassBadge from "@/Components/FlightsGoneBy/FlightClassBadge.vue";
|
|
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
|
|
import { Flight, SharedProps } from "@/Types/types";
|
|
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
|
|
import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
|
|
import AircraftToolTip from "@/Components/FlightsGoneBy/AircraftToolTip.vue";
|
|
import CrewTooltip from "@/Components/FlightsGoneBy/CrewTooltip.vue";
|
|
import Distance from "@/Components/Distance.vue";
|
|
import UserFlightContextMenu from "@/Components/FlightsGoneBy/UserFlightContextMenu.vue";
|
|
import { usePage } from "@inertiajs/vue3";
|
|
import { User } from "@/Types/types";
|
|
import Mono from "@/Components/FlightsGoneBy/Mono.vue";
|
|
import DayDifference from "@/Components/FlightsGoneBy/DayDifference.vue";
|
|
|
|
const props = defineProps<{
|
|
flight: Flight
|
|
user: User
|
|
canEdit: boolean
|
|
highlighted?: boolean
|
|
group?: 'upcoming' | 'departed'
|
|
isSorting?: boolean
|
|
columnsToShow: string[]
|
|
}>()
|
|
|
|
const page = usePage<SharedProps>()
|
|
const showColumn = (column: string) => props.columnsToShow.includes(column)
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<tr
|
|
class="v-data-table__tr"
|
|
:class="[
|
|
group && !isSorting ? `group-row--${group}` : '',
|
|
highlighted ? 'flight-row--highlighted' : '',
|
|
]"
|
|
:data-flight-id="flight.id"
|
|
>
|
|
<td v-if="showColumn('airline')" class="v-data-table__td airline-logo-cell">
|
|
<AirlineLogo size="32" :airline="flight.airline" class="airline-logo-img" />
|
|
</td>
|
|
|
|
<td v-if="showColumn('flight_number')" class="v-data-table__td flight-number-cell">
|
|
<div class="flight-cell">
|
|
<Mono class="flight-number">
|
|
{{ flight.flight_number }}
|
|
</Mono>
|
|
</div>
|
|
</td>
|
|
|
|
<td v-if="showColumn('from')" class="v-data-table__td">
|
|
<AirportToolTip :airport="flight.departure_airport">
|
|
<Mono class="iata">{{ flight.departure_airport.display_code }}</Mono><br/>
|
|
</AirportToolTip>
|
|
<span class="city-name">{{ flight.departure_airport.municipality }}</span>
|
|
</td>
|
|
|
|
<td v-if="showColumn('to')" class="v-data-table__td">
|
|
<AirportToolTip :airport="flight.arrival_airport">
|
|
<span class="iata"><Mono>{{ flight.arrival_airport.display_code }}</Mono></span><br/>
|
|
</AirportToolTip>
|
|
<span class="city-name" >{{ flight.arrival_airport.municipality }}</span>
|
|
</td>
|
|
|
|
<td v-if="showColumn('departure_date')" class="v-data-table__td">
|
|
<span class="date-cell"><Mono muted smaller>{{ flight.departure_date_display }}</Mono></span>
|
|
</td>
|
|
|
|
<td v-if="showColumn('departure_time')" class="v-data-table__td">
|
|
<span class="time-cell">
|
|
<Mono small>{{ flight.departure_time_display }}</Mono>
|
|
</span>
|
|
</td>
|
|
|
|
<td v-if="showColumn('arrival_time')" class="v-data-table__td arrival-time-cell">
|
|
<Mono small>{{ flight.arrival_time_display }}</Mono>
|
|
<DayDifference :value="flight.arrival_day_difference" />
|
|
</td>
|
|
|
|
<td v-if="showColumn('duration')" class="v-data-table__td duration-cell">
|
|
<Mono muted small>{{ flight.duration_display ?? '—' }}</Mono>
|
|
</td>
|
|
|
|
<td v-if="showColumn('distance')" class="v-data-table__td distance-cell">
|
|
<Mono muted small>
|
|
<Distance :unit="page.props.auth.user?.resolved_settings?.distance_unit" :value="Math.round(flight.distance)" />
|
|
</Mono>
|
|
</td>
|
|
|
|
<td v-if="showColumn('aircraft')" class="v-data-table__td aircraft-cell">
|
|
<AircraftToolTip v-if="flight.aircraft" :aircraft="flight.aircraft" :flight="flight">
|
|
<Mono muted small>{{ flight.aircraft?.designator }}</Mono>
|
|
</AircraftToolTip>
|
|
</td>
|
|
|
|
<td v-if="showColumn('registration')" class="v-data-table__td registration-cell">
|
|
<Mono muted smaller v-if="flight.aircraft_registration">{{ flight.aircraft_registration }}</Mono>
|
|
</td>
|
|
|
|
<td v-if="showColumn('class_seat_combined')" class="v-data-table__td class-badges-cell">
|
|
<span class="class-cell">
|
|
<CrewTooltip v-if="flight.flight_reason?.name == 'Crew'" :crew-type="flight.crew_type!">
|
|
<FlightClassBadge v-if="flight.flight_class?.internal_name === 'crew'" :flight="flight" />
|
|
<InlineBadge v-else variant="crew">Crew</InlineBadge>
|
|
</CrewTooltip>
|
|
<FlightClassBadge v-if="flight.flight_reason?.name !== 'Crew' || flight.flight_class?.internal_name !== 'crew'" :flight="flight" />
|
|
<InlineBadge v-if="flight.seat_number" variant="economy">{{ flight.seat_number }}</InlineBadge>
|
|
<InlineBadge v-if="flight.seat_type?.name && flight.seat_type?.name !== 'Unassigned'" variant="economy">{{ flight.seat_type?.name }}</InlineBadge>
|
|
</span>
|
|
</td>
|
|
|
|
<td class="v-data-table__td actions-cell">
|
|
<UserFlightContextMenu :profile-user="user" :can-edit="canEdit" :flight="flight" />
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.airline-logo-cell {
|
|
width: 50px !important;
|
|
min-width: 50px !important;
|
|
max-width: 50px !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
.city-name{
|
|
color: #556;
|
|
text-transform: uppercase;
|
|
letter-spacing: .05em;
|
|
font-size: .75rem;
|
|
}
|
|
|
|
.flight-number-cell {
|
|
padding-left: 0.5rem !important;
|
|
}
|
|
|
|
.flight-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.arrival-time-cell {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.class-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
vertical-align: middle;
|
|
gap: 0.5rem;
|
|
overflow-x: auto;
|
|
max-width: 160px;
|
|
/* Hide scrollbar but keep functionality */
|
|
scrollbar-width: none;
|
|
&::-webkit-scrollbar { display: none; }
|
|
}
|
|
|
|
.iata {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.class-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
vertical-align: middle;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.actions-cell {
|
|
width: 40px;
|
|
padding: 0 0.5rem !important;
|
|
text-align: right;
|
|
}
|
|
|
|
.flight-row--highlighted td {
|
|
background: rgba(255, 193, 7, 0.08) !important;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
:deep(.v-data-table__td) {
|
|
padding: 0 4px !important;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.arrival-time-cell {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.flight-number-cell {
|
|
padding-left: 4px !important;
|
|
}
|
|
|
|
.actions-cell {
|
|
padding: 0 2px !important;
|
|
}
|
|
|
|
.flight-number-cell,
|
|
.duration-cell,
|
|
.distance-cell,
|
|
.aircraft-cell,
|
|
.registration-cell {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.airline-logo-cell {
|
|
width: 36px !important;
|
|
min-width: 36px !important;
|
|
max-width: 36px !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.v-data-table__td.airline-logo-cell {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.class-badges-cell {
|
|
max-width: 140px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.class-cell > *:not(:first-child) {
|
|
display: none;
|
|
}
|
|
|
|
|
|
}
|
|
</style>
|