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/AircraftToolTip.vue
+21 -79
View File
@@ -4,6 +4,11 @@ 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
@@ -26,99 +31,36 @@ function formatEngineType(type: string): string {
</div>
</template>
<div class="tooltip-header">
<span class="designator">{{ aircraft.manufacturer_code }} {{ aircraft.model_full_name }}</span>
<ToolTipHeader>
{{ aircraft.manufacturer_code }} {{ aircraft.model_full_name }}
</ToolTipHeader>
</div>
<div class="tooltip-name">
<ToolTipName>
<InlineBadge variant="generic">
{{aircraft.designator }}
</InlineBadge>
<InlineBadge variant="generic">
<WakeTurbulence :value="aircraft.wtc" />
</InlineBadge>
</div>
</ToolTipName>
<div class="tooltip-divider" />
<ToolTipDivider/>
<div class="tooltip-rows">
<div class="tooltip-row">
<span class="tooltip-label">Engines</span>
<span class="tooltip-value">{{ aircraft.engine_count }}x {{ formatEngineType(aircraft.engine_type) }}</span>
</div>
</div>
<ToolTipRows>
<ToolTipRow label="Engines" :value="aircraft.engine_count + 'x ' + formatEngineType(aircraft.engine_type)" />
</ToolTipRows>
<div class="tooltip-divider" v-if="flight?.livery_url" />
<div class="tooltip-rows" v-if="flight?.livery_url">
<ToolTipDivider v-if="flight?.livery_url" />
<ToolTipRows v-if="flight?.livery_url">
<LiveryImage :flight="flight" />
</div>
<div class="tooltip-divider" v-if="flight?.aircraft_registration" />
<div class="tooltip-rows" v-if="flight?.aircraft_registration">
<div class="tooltip-row">
<span class="tooltip-label">Registration</span>
<span class="tooltip-value">{{ flight.aircraft_registration}}</span>
</div>
</div>
</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>
.tooltip-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.designator {
color: #e8eaf0;
letter-spacing: 0.06em;
line-height: 1;
}
.badges {
display: flex;
gap: 0.3rem;
}
.tooltip-name {
display:flex;
gap: 4px;
margin-top: 0.2rem;
line-height: 1.3;
}
.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;
}
</style>
resources/js/Components/FlightsGoneBy/AirlineLogo.vue
+13 -54
View File
@@ -5,6 +5,11 @@ import {usePage} from "@inertiajs/vue3";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
const page = usePage<SharedProps>().props;
@@ -33,26 +38,21 @@ const size = computed(() => props.size ? props.size + 'px' : '30px');
</template>
<div class="airline-tooltip-content">
<div class="tooltip-header">
<ToolTipHeader>
<div class="logo-title">
<span class="airline-logo-tooltip" :style="logoStyle"></span>
<span class="airline-name">{{ airline.name }}</span>
</div>
<div v-if="airline.iata_code || airline.icao_code" class="codes">
</ToolTipHeader>
<ToolTipName v-if="airline.iata_code || airline.icao_code">
<InlineBadge v-if="airline.iata_code" variant="generic">{{ airline.iata_code }}</InlineBadge>
<InlineBadge v-if="airline.icao_code" variant="generic">{{ airline.icao_code }}</InlineBadge>
<AllianceLogo v-if="airline?.alliance" :alliance="airline?.alliance" size="24" />
</div>
</div>
<div class="tooltip-divider"></div>
<div class="tooltip-meta">
<span
v-if="airline.country"
:class="`fi fi-${airline.country.code.toLowerCase()}`"
class="country-flag"
></span>
<span v-if="airline.country" class="country-name">{{ airline.country.name }}</span>
</div>
</ToolTipName>
<ToolTipDivider />
<ToolTipRows v-if="airline.country">
<ToolTipRow label="Country" :value="airline.country.name" :countryCode="airline.country.code" />
</ToolTipRows>
</div>
</GlassTooltip>
<span v-else class="airline-logo"></span>
@@ -77,45 +77,4 @@ span.airline-logo {
align-items: center;
gap: 10px;
}
.codes{
width:100%;
display: flex;
gap: 4px;
padding-top:1em;
justify-content:flex-start;
}
.airline-name {
letter-spacing: 0.03em;
}
.tooltip-divider {
height: 1px;
background: var(--table-border);
}
.tooltip-meta {
display: flex;
align-items: center;
gap: 8px;
color: var(--muted);
}
.country-flag {
font-size: 1rem;
}
.country-name {
flex: 1;
font-size: 0.8rem;
}
.codes {
display: flex;
gap: 4px;
margin-left: auto;
}
</style>
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>
resources/js/Components/FlightsGoneBy/FlightMap.vue
+531 -315
View File
File diff suppressed because it is too large Load Diff
resources/js/Components/FlightsGoneBy/FlightStatsBar.vue
+3 -1
View File
@@ -40,7 +40,9 @@
</template>
<template v-if="upcomingDistanceKm">
<div :class="totalDistanceKm ? 'stat-upcoming' : 'stat-primary'">
<span :class="totalDistanceKm ? 'stat-upcoming-num' : 'stat-num'"><Distance :unit="page.auth?.user?.resolved_settings?.distance_unit" includeSpace :value="upcomingDistanceKm"/></span>
<span :class="totalDistanceKm ? 'stat-upcoming-num' : 'stat-num'"><Distance :unit="page.auth?.user?.resolved_settings?.distance_unit" includeSpace :value="upcomingDistanceKm"/>
<span :class="upcomingDistanceKm ? 'stat-upcoming-lbl' : 'unit'"> upcoming</span>
</span>
</div>
</template>
</div>
resources/js/Components/FlightsGoneBy/FlightToolTip.vue
+24 -74
View File
@@ -3,6 +3,12 @@ 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";
defineProps<{
flight: Flight
@@ -17,101 +23,45 @@ defineProps<{
</div>
</template>
<div class="tooltip-header">
<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>
</div>
</ToolTipHeader>
<div class="tooltip-name">
<ToolTipName>
<InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
<span class="arrow">→</span>
<InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
</div>
</ToolTipName>
<div class="tooltip-divider" />
<ToolTipDivider />
<div class="tooltip-rows">
<div class="tooltip-row">
<span class="tooltip-label">From</span>
<span class="tooltip-value">{{ flight.departure_airport.municipality }}</span>
</div>
<div class="tooltip-row">
<span class="tooltip-label">To</span>
<span class="tooltip-value">{{ flight.arrival_airport.municipality }}</span>
</div>
<div class="tooltip-row" v-if="flight.airline">
<span class="tooltip-label">Airline</span>
<span class="tooltip-value">{{ flight.airline.name }}</span>
</div>
<div class="tooltip-row" v-if="flight.aircraft">
<span class="tooltip-label">Aircraft</span>
<span class="tooltip-value">{{ flight.aircraft?.display_name_short }}</span>
</div>
<div class="tooltip-row">
<span class="tooltip-label">Date</span>
<span class="tooltip-value">{{ flight.departure_date_display }}</span>
</div>
</div>
<ToolTipRows v-if="flight.livery_url">
<LiveryImage :flight="flight" />
</ToolTipRows>
<ToolTipDivider v-if="flight.livery_url" />
<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>
</GlassTooltip>
</template>
<style scoped>
.tooltip-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.designator {
display:inline-flex;
color: #e8eaf0;
}
.tooltip-name {
display: flex;
align-items: center;
gap: 4px;
margin-top: 0.2rem;
line-height: 1.3;
}
.arrow {
font-size: 0.75rem;
color: var(--muted, #445566);
}
.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;
}
</style>
resources/js/Components/FlightsGoneBy/Panels/RoutePanel.vue
+1 -1
View File
@@ -13,7 +13,7 @@ defineProps<{
<template>
<Panel label="Route">
<div class="map-placeholder">
<FlightMap :flights="[flight]" />
<FlightMap :flights="[flight]" :showLegend="false" />
</div>
<DetailRows>
<DetailRow label="Distance" :value="flight.distance + 'km'" />
resources/js/Components/FlightsGoneBy/Tooltips/CountryRow.vue
+16
View File
@@ -0,0 +1,16 @@
<script setup lang="ts">
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
import {Country} from "@/Types/types";
defineProps<{
country: Country | null | undefined
}>()
</script>
<template>
<ToolTipRow label="Country" :value="country?.name ?? null" :countryCode="country?.code" />
</template>
<style scoped>
</style>
resources/js/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue
+14
View File
@@ -0,0 +1,14 @@
<script setup lang="ts">
</script>
<template>
<div class="tooltip-divider"></div>
</template>
<style scoped>
.tooltip-divider {
height: 1px;
background: var(--table-border, rgba(255,255,255,0.08));
}
</style>
resources/js/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue
+18
View File
@@ -0,0 +1,18 @@
<script setup lang="ts">
</script>
<template>
<div class="tooltip-header">
<slot />
</div>
</template>
<style scoped>
.tooltip-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
</style>
resources/js/Components/FlightsGoneBy/Tooltips/ToolTipName.vue
+19
View File
@@ -0,0 +1,19 @@
<script setup lang="ts">
</script>
<template>
<div class="tooltip-name">
<slot />
</div>
</template>
<style scoped>
.tooltip-name {
display: flex;
align-items: center;
gap: 4px;
margin-top: 0.2rem;
line-height: 1.3;
}
</style>
resources/js/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue
+46
View File
@@ -0,0 +1,46 @@
<script setup lang="ts">
defineProps<{
label: string
value: string | null
countryCode?: string
}>()
</script>
<template>
<div class="tooltip-row">
<span class="tooltip-label">{{label}}</span>
<span v-if="!countryCode" class="tooltip-value">{{value}}</span>
<span v-if="countryCode" class="tooltip-value">
<span class="fi" :class="`fi-${countryCode.toLowerCase()}`" /> {{value}}
</span>
</div>
</template>
<style scoped>
.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;
text-transform: uppercase;
}
.tooltip-value {
font-size: 0.78rem;
color: var(--text, #c8cdd8);
text-align: right;
}
.fi{
font-size: 1rem;
padding: 0.25rem;
}
</style>
resources/js/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue
+17
View File
@@ -0,0 +1,17 @@
<script setup lang="ts">
</script>
<template>
<div class="tooltip-rows">
<slot />
</div>
</template>
<style scoped>
.tooltip-rows {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
</style>