Updated logo API

2026-04-23 00:53:19 +10:00
parent bd8ef98d30
commit 110ed5b984
17 changed files with 142 additions and 59 deletions
@@ -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,
@@ -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>
@@ -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>
@@ -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">
@@ -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">
@@ -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>
@@ -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=""
@@ -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)) {