dredgy/FlightsAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated Map View

Browse Source
This commit is contained in:
josh
2026-06-16 11:16:32 +10:00
parent a270913931
commit 3aba428d2a
19 changed files with 790 additions and 654 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/FlightsGoneBy/AirportToolTip.vue
+20 -116
View File
@@ -2,6 +2,12 @@
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
@@ -12,9 +18,6 @@ function formatElevation(ft: number | null): string | null {
return `${ft.toLocaleString()} ft`
}
function formatType(type: string): string {
return type.replace(/_/g, ' ').replace(/\b\w/g, c => c.toUpperCase())
}
</script>
<template>
@@ -26,46 +29,21 @@ function formatType(type: string): string {
</template>
<div class="airport-tooltip">
<!-- Header -->
<div class="tooltip-header">
<div class="tooltip-codes">
<div><span class="iata">{{ airport.name }}</span></div>
<div class="code-badges">
<InlineBadge v-if="airport.iata_code" variant="generic">{{ airport.iata_code }}</InlineBadge>
<InlineBadge v-if="airport.icao_code" variant="generic">{{ airport.icao_code }}</InlineBadge>
</div>
</div>
</div>
<div class="tooltip-divider" />
<ToolTipHeader>{{ airport.name }}</ToolTipHeader>
<!-- Details -->
<div class="tooltip-rows">
<div v-if="airport.municipality" class="tooltip-row">
<span class="tooltip-label">City</span>
<span class="tooltip-value">{{ airport.municipality }}</span>
</div>
<div v-if="airport.municipality" class="tooltip-row">
<span class="tooltip-label">Country</span>
<span class="tooltip-value" v-if="airport.region?.country">
<span>{{airport.region.country.name}}&nbsp;</span>
<span class="fi" :class="`fi-${airport.region.country.code.toLowerCase()}`"></span>
</span>
</div>
<div v-if="airport.elevation_ft !== null" class="tooltip-row">
<span class="tooltip-label">Elevation</span>
<span class="tooltip-value">{{ formatElevation(airport.elevation_ft) }}</span>
</div>
<div class="tooltip-row">
<span class="tooltip-label">Timezone</span>
<span class="tooltip-value tz">{{ airport.timezone }}</span>
</div>
<div class="tooltip-row">
<span class="tooltip-label">Coordinates</span>
<span class="tooltip-value coords">
{{ airport.latitude_deg.toFixed(4) }}, {{ airport.longitude_deg.toFixed(4) }}
</span>
</div>
</div>
<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>
@@ -74,78 +52,4 @@ function formatType(type: string): string {
.airport-tooltip {
display: contents;
}
.fi{
padding:0.25em;
}
.tooltip-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
}
.iata{
font-size:1.2em;
}
.tooltip-codes {
display: flex;
flex-direction: column;
align-items: baseline;
gap: 0.5rem;
flex-wrap: wrap;
}
.code-badges {
display: flex;
gap: 0.3rem;
flex-wrap: wrap;
}
.tooltip-divider {
height: 1px;
background: var(--table-border, rgba(255,255,255,0.08));
}
.tooltip-rows {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.tooltip-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
}
.tooltip-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.6rem;
letter-spacing: 0.15em;
color: var(--muted, #445566);
flex-shrink: 0;
}
.tooltip-value {
font-size: 0.78rem;
color: var(--text, #c8cdd8);
text-align: right;
}
.tz {
font-family: 'Share Tech Mono', monospace;
font-size: 0.7rem;
letter-spacing: 0.03em;
}
.coords {
font-family: 'Share Tech Mono', monospace;
font-size: 0.68rem;
color: var(--muted, #556677);
letter-spacing: 0.03em;
}
</style>