56 lines
2.1 KiB
Vue
56 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { Airport } from "@/Types/types";
|
|
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
|
|
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
|
|
import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
|
|
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
|
|
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
|
|
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
|
|
import CountryRow from "@/Components/FlightsGoneBy/Tooltips/CountryRow.vue";
|
|
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
|
|
|
|
defineProps<{
|
|
airport: Airport
|
|
}>()
|
|
|
|
function formatElevation(ft: number | null): string | null {
|
|
if (ft === null) return null
|
|
return `${ft.toLocaleString()} ft`
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<GlassTooltip>
|
|
<template #activator="{ props: tooltipProps }">
|
|
<div v-bind="tooltipProps" style="cursor:pointer">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<div class="airport-tooltip">
|
|
<ToolTipHeader>{{ airport.name }}</ToolTipHeader>
|
|
|
|
<ToolTipName>
|
|
<InlineBadge v-if="airport.iata_code" variant="generic">{{ airport.iata_code }}</InlineBadge>
|
|
<InlineBadge v-if="airport.icao_code" variant="generic">{{ airport.icao_code }}</InlineBadge>
|
|
</ToolTipName>
|
|
|
|
<ToolTipDivider />
|
|
<ToolTipRows>
|
|
<ToolTipRow v-if="airport.municipality" label="City" :value="airport.municipality" />
|
|
<CountryRow :country="airport.region?.country" />
|
|
<ToolTipRow v-if="airport.elevation_ft !== null" label="Elevation" :value="formatElevation(airport.elevation_ft)" />
|
|
<ToolTipRow label="Timezone" :value="airport.timezone" />
|
|
<ToolTipRow label="Coordinates" :value="airport.latitude_deg.toFixed(4) + ', ' + airport.longitude_deg.toFixed(4)" />
|
|
</ToolTipRows>
|
|
</div>
|
|
</GlassTooltip>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.airport-tooltip {
|
|
display: contents;
|
|
}
|
|
</style>
|