37 lines
1.7 KiB
Vue
37 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
|
|
import DetailRows from "@/Components/FlightsGoneBy/Panels/DetailRows.vue";
|
|
import DetailRow from "@/Components/FlightsGoneBy/Panels/DetailRow.vue";
|
|
import type {Flight} from "@/Types/types";
|
|
import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
|
|
import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";
|
|
|
|
defineProps<{
|
|
flight: Flight
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<Panel label="Aircraft">
|
|
<div class="livery" v-if="flight.livery_url" :style="{ backgroundImage: `url('${flight.livery_url}')` }">
|
|
</div>
|
|
<PanelHeader>{{ flight.aircraft?.display_name_short }}</PanelHeader>
|
|
<PanelSubHeader v-if="flight.aircraft?.manufacturer_code">{{ flight.aircraft.manufacturer_code }}</PanelSubHeader>
|
|
<DetailRows>
|
|
<DetailRow v-if="flight.aircraft?.designator" label="Designator" :value="flight.aircraft.designator" variant="Badge" />
|
|
<DetailRow v-if="flight.aircraft_registration" label="Registration" :value="flight.aircraft_registration" />
|
|
<DetailRow class="detail-row" v-if="flight.aircraft?.engine_type" label="Engine Type" :value="flight.aircraft?.engine_type" />
|
|
<DetailRow class="detail-row" v-if="flight.aircraft?.engine_count" label="No. of Engines" :value="flight.aircraft?.engine_count.toString()" />
|
|
<DetailRow class="detail-row" v-if="flight.aircraft?.wtc" label="Wake Turbulence Category" variant="WTC" :value="flight.aircraft?.wtc" />
|
|
</DetailRows>
|
|
</Panel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.livery{
|
|
width: 100%;
|
|
aspect-ratio: 16/9;
|
|
background-size: cover;
|
|
}
|
|
</style>
|