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

Updated logo API

Browse Source
This commit is contained in:
josh
2026-04-23 00:53:19 +10:00
parent bd8ef98d30
commit 110ed5b984
17 changed files with 142 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/FlightsGoneBy/AirlineLogo.vue
+1 -2
View File
@@ -10,8 +10,7 @@ const props = defineProps<{
size?: number | string;
}>();
const page = usePage<SharedProps>().props;
const logoUrl = computed(() => `url('${page.logo_api_url}/airlines/logos/tail/name/${props.airline?.internal_name}')`);
const logoUrl = computed(() => `url('${props.airline?.logo_url}')`);
const logoStyle = computed(() => ({
width: size.value,
height: size.value,
resources/js/Components/FlightsGoneBy/AirlineSearchBox.vue
+4 -4
View File
@@ -5,13 +5,13 @@ import {usePage} from "@inertiajs/vue3";
import type {SharedProps} from "@/Types/types";
const props = defineProps<{
prefilledOptions: { value: number, title: string }[]
prefilledOptions: { value: number, title: string, logo_url: string }[]
errorMessages?: string[] | string
}>()
const page = usePage<SharedProps>().props
const model = defineModel<{ value: number, title: string } | null>()
const model = defineModel<{ value: number, title: string, logo_url: string } | null>()
const airlineOptions = ref(props.prefilledOptions ?? [])
const autocompleteRef = ref<any>(null)
@@ -58,13 +58,13 @@ const searchAirlines = async (query: string) => {
style="padding: 0.25em"
width="40"
height="40"
:src="`${page.logo_api_url}/airlines/logos/tail/id/${model.value}`"
:src="`${model.logo_url}`"
/>
</template>
<template #item="{ item, props: itemProps }">
<v-list-item v-bind="itemProps">
<template #prepend>
<img style="padding:0.25em" width="40" height="40" :src="`${page.logo_api_url}/airlines/logos/tail/id/${item.value}`" alt=""/>
<img style="padding:0.25em" width="40" height="40" :src="`${item.logo_url}`" alt=""/>
</template>
</v-list-item>
resources/js/Components/FlightsGoneBy/Charts/TopAircraftChart.vue
+64
View File
@@ -0,0 +1,64 @@
<script setup lang="ts">
import { computed } from 'vue'
import { FlightStats } from "@/Composables/useFlightStats"
import { useChartTooltip } from '@/Composables/useChartTooltip'
import ScrollingHorizontalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue"
import ChartTooltip from "@/Components/FlightsGoneBy/Charts/ChartTooltip.vue"
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue"
interface AircraftItem {
label: string
id: number
past: number
upcoming: number
designator: string
}
const props = defineProps<{
flightStats: FlightStats
}>()
const { tooltipItem, onMouseMove, onMouseLeave } = useChartTooltip<AircraftItem>()
const aircraft = computed(() => props.flightStats.topAircraft.value.aircraft)
const chartEvents = computed(() => ({
mouseMove: (_e: MouseEvent, _chart: unknown, config: { dataPointIndex: number }) => {
if (config.dataPointIndex < 0) { tooltipItem.value = null; return }
tooltipItem.value = aircraft.value[config.dataPointIndex] ?? null
},
mouseLeave: () => { tooltipItem.value = null },
}))
</script>
<template>
<ScrollingHorizontalBarChart
title="Top aircraft"
:series="flightStats.topAircraft.value.series"
:categories="aircraft.map(a => a.label)"
:footer-value="aircraft.length"
footer-label="total aircraft"
:events="chartEvents"
@mousemove="onMouseMove"
@mouseleave="onMouseLeave"
>
<template #tooltip="{ visible, x, y, index }">
<ChartTooltip :visible="visible" :x="x" :y="y">
<div class="ct-name">
{{ index !== null ? aircraft[index].label : '' }}
</div>
<div class="ct-row">
<InlineBadge v-if="index !== null" variant="generic">{{ aircraft[index].designator }}</InlineBadge>
</div>
<div class="ct-row">
<span class="ct-label">Flights</span>
<span class="ct-val">{{ index !== null ? aircraft[index].past : '' }}</span>
</div>
<div v-if="index !== null && aircraft[index].upcoming" class="ct-row">
<span class="ct-label">Upcoming</span>
<span class="ct-val">{{ aircraft[index].upcoming }}</span>
</div>
</ChartTooltip>
</template>
</ScrollingHorizontalBarChart>
</template>
resources/js/Components/FlightsGoneBy/Charts/TopAirlinesChart.vue
+2 -1
View File
@@ -12,6 +12,7 @@ interface AirlineItem {
past: number
upcoming: number
id: number
logo_url: string
}
const props = defineProps<{
@@ -46,7 +47,7 @@ const chartEvents = computed(() => ({
<template #tooltip="{ visible, x, y, index }">
<ChartTooltip :visible="visible" :x="x" :y="y">
<div class="ct-name">
<img :src="`${page.logo_api_url}/airlines/logos/tail/id/${index !== null ? airlines[index].id : ''}`" width="24" height="24"/>
<img :src="`${index !== null ? airlines[index].logo_url : ''}`" width="24" height="24"/>
{{ index !== null ? airlines[index].name : '' }}
</div>
<div class="ct-row">
resources/js/Components/FlightsGoneBy/Charts/TopRoutesChart.vue
+1 -1
View File
@@ -30,7 +30,7 @@ const series = computed(() => props.flightStats.topRoutes.value.series)
:categories="routes.map(r => r.label)"
:footer-value="routes.length"
footer-label="total routes"
:max-visible="18"
:max-visible="12"
>
<template #tooltip="{ visible, x, y, index }">
<ChartTooltip :visible="visible" :x="x" :y="y">
resources/js/Components/FlightsGoneBy/FlightCharts.vue
+2
View File
@@ -14,6 +14,7 @@ import TopAirportsChart from '@/Components/FlightsGoneBy/Charts/TopAirportsChart
import TopRoutesChart from '@/Components/FlightsGoneBy/Charts/TopRoutesChart.vue'
import FlightTypeChart from '@/Components/FlightsGoneBy/Charts/FlightTypeChart.vue'
import {FlightStats} from "@/Composables/useFlightStats";
import TopAircraftChart from "@/Components/FlightsGoneBy/Charts/TopAircraftChart.vue";
defineProps<{
flightStats: FlightStats
@@ -61,6 +62,7 @@ defineProps<{
<!-- Routes + International vs Domestic -->
<div class="flight-charts glass charts-row">
<TopRoutesChart :flight-stats="flightStats" />
<TopAircraftChart :flight-stats="flightStats" />
</div>
</div>
</template>
resources/js/Components/FlightsGoneBy/FlightFilter.vue
+7 -7
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import type { Flight } from '@/Types/types'
import type {Airline, Flight} from '@/Types/types'
import { ref } from 'vue'
import { usePage } from '@inertiajs/vue3'
@@ -20,9 +20,11 @@ const emit = defineEmits<{
// ── Available options ─────────────────────────────────────────────────────────
type AirlineData = { id: number; name: string, airline: Airline }
function buildOptions(flights: Flight[]) {
const years = new Set<number>()
const airlines = new Map<number, { id: number; name: string }>()
const airlines = new Map<number, AirlineData>()
const countries = new Map<string, { code: string; name: string }>()
const continents = new Map<string, { code: string; name: string }>()
const classes = new Map<number, { id: number; name: string }>()
@@ -31,8 +33,8 @@ function buildOptions(flights: Flight[]) {
flights.forEach(f => {
years.add(new Date(f.departure_date).getFullYear())
if (f.airline?.id && f.airline?.name)
airlines.set(f.airline.id, { id: f.airline.id, name: f.airline.name })
if (f.airline)
airlines.set(f.airline.id, { id: f.airline.id, name: f.airline.name, airline: f.airline })
const dep = f.departure_airport.region
const arr = f.arrival_airport.region
@@ -82,8 +84,6 @@ function emitFilters() {
// ── Helpers ───────────────────────────────────────────────────────────────────
const page = usePage()
const airlineLogoUrl = (internal_name: string) =>
`${page.props.logo_api_url}/airlines/logos/tail/name/${internal_name}`
const countryFlagClass = (code: string) =>
`fi fi-${code.toLowerCase()}`
@@ -123,7 +123,7 @@ const countryFlagClass = (code: string) =>
</template>
<template #title>
<img
:src="airlineLogoUrl((item as any).internal_name)"
:src="(item as AirlineData).airline.logo_url"
width="32" height="32"
style="object-fit: contain; margin-right: 8px; vertical-align: middle;"
alt=""
resources/js/Components/FlightsGoneBy/FlightMap.vue
+1 -1
View File
@@ -115,7 +115,7 @@ function routePopupHTML(historical: Flight[], future: Flight[]): string {
const label = `${f.departure_airport.municipality} to ${f.arrival_airport.municipality}`
if (!dirs.has(key)) dirs.set(key, { label, airlines: [] })
const airline = f.airline ? `<span style="display:inline-flex;align-items:center;gap:6px;">
<img src="${logoApiUrl}/airlines/logos/tail/id/${f.airline?.id}" width="24" height="24" alt="${f.airline?.IATA_code}" style="flex-shrink:0;" />
<img src="${f.airline?.logo_url}" width="24" height="24" alt="${f.airline?.IATA_code}" style="flex-shrink:0;" />
${f.airline?.name}
</span>` : ''
if (airline && !dirs.get(key)!.airlines.includes(airline)) {
resources/js/Composables/useFlightStats.ts
+8 -7
View File
@@ -202,11 +202,11 @@ export function getContinents(flights: Flight[]) {
// ── Airlines ──────────────────────────────────────────────────────────────────
function countAirlines(flights: Flight[]) {
const counts = new Map<string, { count: number; id: number }>()
const counts = new Map<string, { count: number; id: number, logo_url: string }>()
flights.forEach(f => {
const airline = f.airline
if (!airline?.name) return
const existing = counts.get(airline.name) ?? { count: 0, id: airline.id }
const existing = counts.get(airline.name) ?? { count: 0, id: airline.id, logo_url: airline.logo_url }
existing.count++
counts.set(airline.name, existing)
})
@@ -225,6 +225,7 @@ export function getTopAirlines(flights: Flight[], upcomingFlights: Flight[]) {
id: (past.get(name) ?? upcoming.get(name))!.id,
past: past.get(name)?.count ?? 0,
upcoming: upcoming.get(name)?.count ?? 0,
logo_url: (past.get(name) ?? upcoming.get(name))!.logo_url,
}))
.sort((a, b) => (b.past + b.upcoming) - (a.past + a.upcoming))
@@ -323,17 +324,17 @@ interface AircraftItem {
id: number
past: number
upcoming: number
designator: string
}
export function getTopAircraft(flights: Flight[], upcomingFlights: Flight[]) {
console.time('getTopAircraft')
function countAircraft(list: Flight[]) {
const counts = new Map<string, { count: number; id: number }>()
const counts = new Map<string, { count: number; id: number; displayName: string; designator: string }>()
list.forEach(f => {
const aircraft = f.aircraft
if (!aircraft?.designator) return
const existing = counts.get(aircraft.designator) ?? { count: 0, id: aircraft.id }
const existing = counts.get(aircraft.designator) ?? { count: 0, id: aircraft.id, displayName: aircraft.display_name_short, designator: aircraft.designator }
existing.count++
counts.set(aircraft.designator, existing)
})
@@ -346,7 +347,8 @@ export function getTopAircraft(flights: Flight[], upcomingFlights: Flight[]) {
const sorted: AircraftItem[] = [...allNames]
.map(name => ({
label: name,
label: (past.get(name) ?? upcoming.get(name))!.displayName,
designator: (past.get(name) ?? upcoming.get(name))!.designator,
id: (past.get(name) ?? upcoming.get(name))!.id,
past: past.get(name)?.count ?? 0,
upcoming: upcoming.get(name)?.count ?? 0,
@@ -360,7 +362,6 @@ export function getTopAircraft(flights: Flight[], upcomingFlights: Flight[]) {
{ name: 'Upcoming', data: sorted.map(s => s.upcoming) },
],
}
console.timeEnd('getTopAircraft')
return result
}
resources/js/Types/types.d.ts
Vendored
+4 -4
View File
@@ -81,17 +81,16 @@ export interface Airline {
id: number
IATA_code: string | null
ICAO_code: string | null
name: string | null
internal_name: string | null
name: string
internal_name: string
active: boolean
logo: string | null
country_id: number
country?: Country
display_name: string
logo_url: string
}
export interface Aircraft {
id: number
designator: string
@@ -104,6 +103,7 @@ export interface Aircraft {
created_at: string | null
updated_at: string | null
display_name: string
display_name_short: string
}
export interface SeatType {