85 lines
2.7 KiB
Vue
85 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import MainLayout from "@/Layouts/MainLayout.vue";
|
|
import {Head, Link} from "@inertiajs/vue3";
|
|
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
|
|
import {Achievement, Flight, User, UserAchievement} from "@/Types/types";
|
|
import BoardingPass from "@/Components/FlightsGoneBy/BoardingPass.vue";
|
|
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
|
|
import AirportPanel from "@/Components/FlightsGoneBy/Panels/AirportPanel.vue";
|
|
import AirlinePanel from "@/Components/FlightsGoneBy/Panels/AirlinePanel.vue";
|
|
import AircraftPanel from "@/Components/FlightsGoneBy/Panels/AircraftPanel.vue";
|
|
import RoutePanel from "@/Components/FlightsGoneBy/Panels/RoutePanel.vue";
|
|
import DetailRows from "@/Components/FlightsGoneBy/Panels/DetailRows.vue";
|
|
import ButtonLink from "@/Components/FlightsGoneBy/ButtonLink.vue";
|
|
|
|
defineOptions({ layout: MainLayout })
|
|
|
|
const props = defineProps<{
|
|
user: User
|
|
flight: Flight
|
|
flightCount: number
|
|
isFollowing: boolean
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<ProfileLayout
|
|
:user="user"
|
|
:is-following="isFollowing"
|
|
:flight-count="flightCount"
|
|
:loading="false">
|
|
<Head :title="`${flight.flight_number ?? user.name + '\'s Flight'}`" />
|
|
|
|
<div class="flight-profile">
|
|
<ButtonLink variant="flat" icon="mdi-arrow-left" :label="`Back to ${user.name}'s Flights`" :href="route('profile.departure-board', { user: user.name, flight: flight.id })" />
|
|
|
|
<!-- Main grid -->
|
|
<div class="profile-grid">
|
|
<RoutePanel :flight="flight" />
|
|
<Panel label="Flight Details">
|
|
<BoardingPass :showToolTips="false" style="width:100%;max-width:600px; margin:0 auto" :flight="flight"/>
|
|
<DetailRows>
|
|
|
|
</DetailRows>
|
|
</Panel>
|
|
<AircraftPanel :flight="flight"/>
|
|
<AirportPanel :airport="flight.departure_airport" label="Departure" />
|
|
<AirportPanel :airport="flight.arrival_airport" label="Arrival" />
|
|
<AirlinePanel :airline="flight.airline" v-if="flight.airline" />
|
|
</div>
|
|
</div>
|
|
</ProfileLayout>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.flight-profile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 0; /* removed padding */
|
|
font-family: 'Barlow', sans-serif;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* Grid */
|
|
.profile-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr; /* single column by default (mobile) */
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.profile-grid {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 900px) {
|
|
.profile-grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
</style>
|