67 lines
2.2 KiB
Vue
67 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import {Aircraft, Airline, Flight} from "@/Types/types";
|
|
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
|
|
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
|
|
import WakeTurbulence from "@/Components/FlightsGoneBy/WakeTurbulence.vue";
|
|
import LiveryImage from "@/Components/FlightsGoneBy/LiveryImage.vue";
|
|
import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
|
|
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
|
|
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
|
|
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
|
|
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
|
|
|
|
defineProps<{
|
|
aircraft: Aircraft
|
|
flight?: Flight
|
|
showTooltips?: boolean
|
|
}>()
|
|
|
|
|
|
|
|
function formatEngineType(type: string): string {
|
|
return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<GlassTooltip>
|
|
<template #activator="{ props: tooltipProps }">
|
|
<div style="cursor:pointer" v-bind="tooltipProps">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<ToolTipHeader>
|
|
{{ aircraft.manufacturer_code }} {{ aircraft.model_full_name }}
|
|
</ToolTipHeader>
|
|
|
|
<ToolTipName>
|
|
<InlineBadge variant="generic">
|
|
{{aircraft.designator }}
|
|
</InlineBadge>
|
|
<InlineBadge variant="generic">
|
|
<WakeTurbulence :value="aircraft.wtc" />
|
|
</InlineBadge>
|
|
</ToolTipName>
|
|
|
|
<ToolTipDivider/>
|
|
|
|
<ToolTipRows>
|
|
<ToolTipRow label="Engines" :value="aircraft.engine_count + 'x ' + formatEngineType(aircraft.engine_type)" />
|
|
</ToolTipRows>
|
|
|
|
<ToolTipDivider v-if="flight?.livery_url" />
|
|
<ToolTipRows v-if="flight?.livery_url">
|
|
<LiveryImage :flight="flight" />
|
|
</ToolTipRows>
|
|
<ToolTipDivider v-if="flight?.aircraft_registration" />
|
|
<ToolTipRows v-if="flight?.aircraft_registration">
|
|
<ToolTipRow label="Registration" :value="flight.aircraft_registration" />
|
|
</ToolTipRows>
|
|
</GlassTooltip>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|