75 lines
2.8 KiB
Vue
75 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { Flight } from "@/Types/types";
|
|
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
|
|
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
|
|
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
|
|
import LiveryImage from "@/Components/FlightsGoneBy/LiveryImage.vue";
|
|
import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
|
|
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
|
|
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
|
|
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
|
|
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
|
|
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
|
|
|
|
defineProps<{
|
|
flight: Flight
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<GlassTooltip>
|
|
<template #activator="{ props: tooltipProps }">
|
|
<div style="display:inline; cursor:pointer" v-bind="tooltipProps">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<template #default="{ isActive }">
|
|
<ToolTipHeader>
|
|
<span class="designator">
|
|
<AirlineLogo hideTooltip :airline="flight.airline" size="24" />
|
|
{{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }}
|
|
</span>
|
|
</ToolTipHeader>
|
|
|
|
<ToolTipName>
|
|
<InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
|
|
<span class="arrow">→</span>
|
|
<InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
|
|
</ToolTipName>
|
|
|
|
|
|
<ToolTipRows v-if="isActive.value">
|
|
<FlightMap :flights="[flight]" :showLegend="false" />
|
|
</ToolTipRows>
|
|
|
|
<ToolTipDivider />
|
|
|
|
<ToolTipRows>
|
|
<ToolTipRow label="From" :value="flight.departure_airport.municipality" />
|
|
<ToolTipRow label="To" :value="flight.arrival_airport.municipality" />
|
|
<ToolTipRow label="Airline" :value="flight.airline.name" v-if="flight.airline" />
|
|
<ToolTipRow label="Aircraft" :value="flight.aircraft?.display_name_short" v-if="flight.aircraft" />
|
|
<ToolTipRow label="Date" :value="flight.departure_date_display" />
|
|
</ToolTipRows>
|
|
<ToolTipDivider v-if="flight.livery_url" />
|
|
<ToolTipRows v-if="flight.livery_url">
|
|
<LiveryImage :flight="flight" />
|
|
</ToolTipRows>
|
|
|
|
</template>
|
|
</GlassTooltip>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.designator {
|
|
display:inline-flex;
|
|
color: #e8eaf0;
|
|
}
|
|
|
|
.arrow {
|
|
font-size: 0.75rem;
|
|
color: var(--muted, #445566);
|
|
}
|
|
</style>
|