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

Added Crew and General Aviation Filters

Browse Source
This commit is contained in:
josh
2026-04-20 22:30:34 +10:00
parent e007824fa9
commit a57775e141
26 changed files with 559 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+16
View File
@@ -119,6 +119,22 @@ body {
overflow: hidden;
}
.class-general_aviation-global {
background: rgba(34, 197, 94, 0.15);
border: 1px solid rgba(34, 197, 94, 0.3);
color: #22c55e;
position: relative;
overflow: hidden;
}
.class-crew-global {
background: rgba(198, 120, 110, 0.15);
border: 1px solid rgba(198, 120, 110, 0.3);
color: #c6786e;
position: relative;
overflow: hidden;
}
/* ── First: Platinum ── */
.class-first-global {
background: linear-gradient(
resources/js/Components/FlightsGoneBy/BoardingPass.vue
+2 -9
View File
@@ -8,19 +8,12 @@ defineProps<{
flight: Flight
}>()
function classKey(flight: Flight): string {
const n = flight.flight_class?.name?.toLowerCase() ?? ''
if (n.includes('private')) return 'private'
if (n.includes('first')) return 'first'
if (n.includes('business')) return 'business'
if (n.includes('premium')) return 'premium'
return 'economy'
}
</script>
<template>
<div class="boarding-pass">
<div class="pass-header" :class="`class-${classKey(flight)}-global`">
<div class="pass-header" :class="`class-${flight.flight_class?.internal_name}-global`">
<span v-if="flight.flight_class?.name !== 'Unspecified'" class="pass-header-class">
{{ flight.flight_class?.name }}
</span>
resources/js/Components/FlightsGoneBy/Charts/ChartTypes/DonutChart.vue
+1 -1
View File
@@ -22,7 +22,7 @@ const chartOptions = computed(() => ({
},
theme: { mode: 'dark' },
labels: props.labels,
colors: ['#4da6ff', '#ffc107', '#a150d5', '#22c55e', '#f97316', '#e11d48', '#06b6d4'],
colors: ['#4da6ff', '#ffc107', '#a150d5', '#22c55e', '#f97316', '#e11d48', '#06b6d4', 'pink'],
dataLabels: {
enabled: true,
formatter: (val: number) => `${Math.round(val)}%`,
resources/js/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue
+45 -17
View File
@@ -1,12 +1,7 @@
<script setup lang="ts">
import { computed, ref } from 'vue'
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue"
import VueApexCharts from "vue3-apexcharts"
interface TooltipItem {
[key: string]: unknown
}
const props = defineProps<{
title: string
series: { name: string; data: number[] }[]
@@ -17,18 +12,36 @@ const props = defineProps<{
barHeight?: number
colors?: string[]
options?: object
events?: object
}>()
const BAR_HEIGHT = computed(() => props.barHeight ?? 32)
const BAR_HEIGHT = computed(() => props.barHeight ?? 32)
const MAX_VISIBLE = computed(() => props.maxVisible ?? 12)
const chartHeight = computed(() => props.categories.length * BAR_HEIGHT.value + 40)
const chartHeight = computed(() => props.categories.length * BAR_HEIGHT.value + 40)
const scrollHeight = computed(() => {
const visible = Math.min(props.categories.length, MAX_VISIBLE.value)
return `${visible * BAR_HEIGHT.value + 40}px`
})
// ── Tooltip state (exposed to parent via scoped slot) ─────────────────────────
const tooltipVisible = ref(false)
const tooltipX = ref(0)
const tooltipY = ref(0)
const hoveredIndex = ref<number | null>(null)
function onMouseMove(e: MouseEvent) {
tooltipX.value = e.clientX + 14
tooltipY.value = e.clientY + 14
}
function onMouseLeave() {
tooltipVisible.value = false
hoveredIndex.value = null
}
// ── Chart options ─────────────────────────────────────────────────────────────
const chartOptions = computed(() => ({
chart: {
type: 'bar',
@@ -38,6 +51,16 @@ const chartOptions = computed(() => ({
animations: { enabled: false },
stacked: true,
animation: { enabled: false },
events: {
dataPointMouseEnter: (_e: unknown, _ctx: unknown, config: { dataPointIndex: number }) => {
tooltipVisible.value = true
hoveredIndex.value = config.dataPointIndex
},
dataPointMouseLeave: () => {
tooltipVisible.value = false
hoveredIndex.value = null
},
},
},
theme: { mode: 'dark' },
plotOptions: {
@@ -68,12 +91,11 @@ const chartOptions = computed(() => ({
markers: { width: 8, height: 8, radius: 2 },
itemMargin: { horizontal: 8 },
},
tooltip: { theme: 'dark', shared: true, intersect: false },
tooltip: { enabled: false },
states: {
hover: { filter: { type: 'lighten', value: 0.1 } },
},
}))
</script>
<template>
@@ -81,7 +103,12 @@ const chartOptions = computed(() => ({
<div class="chart-title">{{ title }}</div>
<div v-if="categories.length" class="chart-outer">
<div class="chart-scroll" :style="{ height: scrollHeight }">
<div
class="chart-scroll"
:style="{ height: scrollHeight }"
@mousemove="onMouseMove"
@mouseleave="onMouseLeave"
>
<VueApexCharts
type="bar"
:height="chartHeight"
@@ -90,8 +117,13 @@ const chartOptions = computed(() => ({
/>
</div>
<!-- Optional slot for custom tooltip -->
<slot name="tooltip" />
<slot
name="tooltip"
:visible="tooltipVisible"
:x="tooltipX"
:y="tooltipY"
:index="hoveredIndex"
/>
<div v-if="footerValue !== undefined" class="chart-footer">
<span class="total-count">{{ footerValue }}</span>
@@ -166,8 +198,4 @@ const chartOptions = computed(() => ({
:deep(svg) {
outline: none;
}
.chart-hidden {
visibility: hidden;
}
</style>
resources/js/Components/FlightsGoneBy/Charts/CountriesChart.vue
+7 -7
View File
@@ -42,19 +42,19 @@ const chartEvents = computed(() => ({
@mousemove="onMouseMove"
@mouseleave="onMouseLeave"
>
<template #tooltip>
<ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
<template #tooltip="{ visible, x, y, index }">
<ChartTooltip :visible="visible" :x="x" :y="y">
<div class="ct-name">
<span :class="`fi fi-${tooltipItem?.code.toLowerCase()}`" />
{{ tooltipItem?.name }}
<span v-if="index !== null" :class="`fi fi-${countries[index].code.toLowerCase()}`" />
{{ index !== null ? countries[index].name : '' }}
</div>
<div class="ct-row">
<span class="ct-label">Flights</span>
<span class="ct-val">{{ tooltipItem?.past }}</span>
<span class="ct-val">{{ index !== null ? countries[index].past : '' }}</span>
</div>
<div class="ct-row" v-if="tooltipItem?.upcoming">
<div v-if="index !== null && countries[index].upcoming" class="ct-row">
<span class="ct-label">Upcoming</span>
<span class="ct-val">{{ tooltipItem?.upcoming }}</span>
<span class="ct-val">{{ countries[index].upcoming }}</span>
</div>
</ChartTooltip>
</template>
resources/js/Components/FlightsGoneBy/Charts/TopAirlinesChart.vue
+7 -7
View File
@@ -43,19 +43,19 @@ const chartEvents = computed(() => ({
@mousemove="onMouseMove"
@mouseleave="onMouseLeave"
>
<template #tooltip>
<ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
<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/${tooltipItem?.id}`" width="24" height="24"/>
{{ tooltipItem?.name }}
<img :src="`${page.logo_api_url}/airlines/logos/tail/id/${index !== null ? airlines[index].id : ''}`" width="24" height="24"/>
{{ index !== null ? airlines[index].name : '' }}
</div>
<div class="ct-row">
<span class="ct-label">Flights</span>
<span class="ct-val">{{ tooltipItem?.past }}</span>
<span class="ct-val">{{ index !== null ? airlines[index].past : '' }}</span>
</div>
<div class="ct-row" v-if="tooltipItem?.upcoming">
<div v-if="index !== null && airlines[index].upcoming" class="ct-row">
<span class="ct-label">Upcoming</span>
<span class="ct-val">{{ tooltipItem?.upcoming }}</span>
<span class="ct-val">{{ airlines[index].upcoming }}</span>
</div>
</ChartTooltip>
</template>
resources/js/Components/FlightsGoneBy/Charts/TopAirportsChart.vue
+9 -8
View File
@@ -4,6 +4,7 @@ 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 AirportItem {
label: string
@@ -42,21 +43,21 @@ const chartEvents = computed(() => ({
@mousemove="onMouseMove"
@mouseleave="onMouseLeave"
>
<template #tooltip>
<ChartTooltip :visible="!!tooltipItem" :x="tooltipX" :y="tooltipY">
<div class="ct-name">{{ tooltipItem?.fullName }}</div>
<div class="ct-sub">{{ tooltipItem?.label }}</div>
<template #tooltip="{ visible, x, y, index }">
<ChartTooltip :visible="visible" :x="x" :y="y">
<div class="ct-name">{{ index !== null ? airports[index].fullName : '' }}</div>
<div class="ct-sub"><InlineBadge variant="generic">{{ index !== null ? airports[index].label : '' }}</InlineBadge></div>
<div class="ct-row">
<span class="ct-label">Departures</span>
<span class="ct-val">{{ tooltipItem?.departures }}</span>
<span class="ct-val">{{ index !== null ? airports[index].departures : '' }}</span>
</div>
<div class="ct-row">
<span class="ct-label">Arrivals</span>
<span class="ct-val">{{ tooltipItem?.arrivals }}</span>
<span class="ct-val">{{ index !== null ? airports[index].arrivals : '' }}</span>
</div>
<div v-if="tooltipItem?.upcoming" class="ct-row">
<div v-if="index !== null && airports[index].upcoming" class="ct-row">
<span class="ct-label">Upcoming</span>
<span class="ct-val">{{ tooltipItem?.upcoming }}</span>
<span class="ct-val">{{ airports[index].upcoming }}</span>
</div>
</ChartTooltip>
</template>
resources/js/Components/FlightsGoneBy/Charts/TopRoutesChart.vue
+43 -5
View File
@@ -1,11 +1,49 @@
<script setup lang="ts">
import { computed } from 'vue'
import { FlightStats } from "@/Composables/useFlightStats"
import ScrollingHorizontalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue"
import ChartTooltip from "@/Components/FlightsGoneBy/Charts/ChartTooltip.vue"
import { useChartTooltip } from "@/Composables/useChartTooltip"
interface RouteItem {
label: string
depLabel: string
arrLabel: string
past: number
upcoming: number
}
const props = defineProps<{
flightStats: FlightStats
}>()
const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<RouteItem>()
const routes = computed(() => props.flightStats.topRoutes.value.routes)
const series = computed(() => props.flightStats.topRoutes.value.series)
</script>
<template>
<ScrollingHorizontalBarChart
title="Top Routes"
:series="series"
:categories="routes.map(r => r.label)"
:footer-value="routes.length"
footer-label="total routes"
:max-visible="18"
>
<template #tooltip="{ visible, x, y, index }">
<ChartTooltip :visible="visible" :x="x" :y="y">
<div class="ct-name">{{ index !== null ? routes[index].label : '' }}</div>
<div class="ct-row">
<span class="ct-label">Flights</span>
<span class="ct-val">{{ index !== null ? routes[index].past : '' }}</span>
</div>
<div v-if="index !== null && routes[index].upcoming" class="ct-row">
<span class="ct-label">Upcoming</span>
<span class="ct-val">{{ routes[index].upcoming }}</span>
</div>
</ChartTooltip>
</template>
</ScrollingHorizontalBarChart>
</template>
<style scoped>
</style>
resources/js/Components/FlightsGoneBy/CrewTooltip.vue
+54
View File
@@ -0,0 +1,54 @@
<script setup lang="ts">
import { CrewType } from "@/Types/types";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
defineProps<{
crewType: CrewType
}>()
</script>
<template>
<GlassTooltip>
<template #activator="{ props: tooltipProps }">
<div v-bind="tooltipProps" style="cursor:pointer">
<slot />
</div>
</template>
<div class="tooltip-rows">
<div class="tooltip-row">
<span class="tooltip-label">Position</span>
<span class="tooltip-value">{{ crewType.name }}</span>
</div>
</div>
</GlassTooltip>
</template>
<style scoped>
.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/DepartureBoard.vue
+8 -3
View File
@@ -9,6 +9,8 @@ import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
import AircraftToolTip from "@/Components/FlightsGoneBy/AircraftToolTip.vue";
import {FlightStats} from "@/Composables/useFlightStats";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
import CrewTooltip from "@/Components/FlightsGoneBy/CrewTooltip.vue";
const props = defineProps<{
flightStats: FlightStats
@@ -225,9 +227,12 @@ watch(
<td class="v-data-table__td ">
<span class="class-cell">
<FlightClassBadge :flight="(item as Flight)" />
<InlineBadge v-if="(item as Flight).seat_number" variant="economy">{{(item as Flight).seat_number}}</InlineBadge>
<InlineBadge v-if="(item as Flight).seat_type?.name && (item as Flight).seat_type?.name !== 'Unassigned'" variant="economy">{{(item as Flight).seat_type?.name}}</InlineBadge>
<CrewTooltip v-if="(item as Flight).flight_reason?.name == 'Crew'" :crew-type="(item as Flight).crew_type!">
<FlightClassBadge :flight="(item as Flight)" />
</CrewTooltip>
<FlightClassBadge v-else :flight="(item as Flight)" />
<InlineBadge v-if="(item as Flight).seat_number" variant="economy">{{(item as Flight).seat_number}}</InlineBadge>
<InlineBadge v-if="(item as Flight).seat_type?.name && (item as Flight).seat_type?.name !== 'Unassigned'" variant="economy">{{(item as Flight).seat_type?.name}}</InlineBadge>
</span>
</td>
resources/js/Components/FlightsGoneBy/FlightCharts.vue
+1 -3
View File
@@ -60,9 +60,7 @@ defineProps<{
<!-- Routes + International vs Domestic -->
<div class="flight-charts glass charts-row">
<!--
<TopRoutesChart :flights="[...flights, ...upcomingFlights]" :upcoming-flights="upcomingFlights" />
-->
<TopRoutesChart :flight-stats="flightStats" />
</div>
</div>
</template>
resources/js/Components/FlightsGoneBy/FlightClassBadge.vue
+2 -12
View File
@@ -1,26 +1,16 @@
<script setup lang="ts">
import {Flight} from "@/Types/types";
import {BadgeVariant, Flight} from "@/Types/types";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
const props = defineProps<{
flight: Flight
}>();
type BadgeVariant = 'first' | 'business' | 'premium' | 'economy' | 'private' | 'unspecified';
function classVariant(name?: string | null): BadgeVariant {
const n = name?.toLowerCase() ?? '';
if (n.includes('private')) return 'private';
if (n.includes('first')) return 'first';
if (n.includes('business')) return 'business';
if (n.includes('premium')) return 'premium';
if (n.includes('economy')) return 'economy';
return 'unspecified';
}
</script>
<template>
<InlineBadge :variant="classVariant(flight.flight_class?.name)">
<InlineBadge :variant="flight.flight_class?.internal_name ?? 'generic'">
{{ flight.flight_class?.name }}
</InlineBadge>
</template>
resources/js/Components/FlightsGoneBy/FlightFilter.vue
+26 -2
View File
@@ -14,12 +14,11 @@ const emit = defineEmits<{
countries: string[]
continents: string[]
flightClasses: number[]
crewTypes: number[]
}]
}>()
// ── Available options ─────────────────────────────────────────────────────────
// flights is server-rendered and never mutated client-side, so we build options
// once as a plain value rather than a reactive computed.
function buildOptions(flights: Flight[]) {
const years = new Set<number>()
@@ -27,6 +26,7 @@ function buildOptions(flights: Flight[]) {
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 }>()
const crewTypes = new Map<number, { id: number; name: string }>()
flights.forEach(f => {
years.add(new Date(f.departure_date).getFullYear())
@@ -44,6 +44,9 @@ function buildOptions(flights: Flight[]) {
if (f.flight_class?.id && f.flight_class?.name)
classes.set(f.flight_class.id, { id: f.flight_class.id, name: f.flight_class.name })
if (f.crew_type?.id && f.crew_type?.name)
crewTypes.set(f.crew_type.id, { id: f.crew_type.id, name: f.crew_type.name })
})
return {
@@ -52,6 +55,7 @@ function buildOptions(flights: Flight[]) {
countries: [...countries.values()].sort((a, b) => a.name.localeCompare(b.name)),
continents: [...continents.values()].sort((a, b) => a.name.localeCompare(b.name)),
classes: [...classes.values()].sort((a, b) => a.name.localeCompare(b.name)),
crewTypes: [...crewTypes.values()].sort((a, b) => a.name.localeCompare(b.name)),
}
}
@@ -63,6 +67,7 @@ const selectedAirlines = ref<number[]>([])
const selectedCountries = ref<string[]>([])
const selectedContinents = ref<string[]>([])
const selectedFlightClasses = ref<number[]>([])
const selectedCrewTypes = ref<number[]>([])
function emitFilters() {
emit('change', {
@@ -71,6 +76,7 @@ function emitFilters() {
countries: selectedCountries.value,
continents: selectedContinents.value,
flightClasses: selectedFlightClasses.value,
crewTypes: selectedCrewTypes.value,
})
}
@@ -196,6 +202,24 @@ const countryFlagClass = (code: string) =>
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedFlightClasses.length - 2 }}</span>
</template>
</v-select>
<v-select
v-if="availableOptions.crewTypes.length > 0"
v-model="selectedCrewTypes"
:items="availableOptions.crewTypes"
item-title="name" item-value="id"
label="Crew Type"
multiple clearable hide-details
density="compact" variant="outlined"
@update:model-value="emitFilters"
>
<template #selection="{ item, index }">
<span v-if="index < 2" class="v-select__selection-text">
{{ (item as any).name }}<span v-if="index < Math.min(selectedCrewTypes.length, 2) - 1">,&nbsp;</span>
</span>
<span v-if="index === 2" class="text-caption text-medium-emphasis">+{{ selectedCrewTypes.length - 2 }}</span>
</template>
</v-select>
</div>
</template>
resources/js/Components/FlightsGoneBy/FlightMap.vue
+2 -2
View File
@@ -114,10 +114,10 @@ function routePopupHTML(historical: Flight[], future: Flight[]): string {
const key = `${f.departure_airport.id}-${f.arrival_airport.id}`
const label = `${f.departure_airport.municipality} to ${f.arrival_airport.municipality}`
if (!dirs.has(key)) dirs.set(key, { label, airlines: [] })
const airline = `<span style="display:inline-flex;align-items:center;gap:6px;">
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;" />
${f.airline?.name}
</span>`
</span>` : ''
if (airline && !dirs.get(key)!.airlines.includes(airline)) {
dirs.get(key)!.airlines.push(airline)
}
resources/js/Components/FlightsGoneBy/FlightMapAndCharts.vue
+1
View File
@@ -22,6 +22,7 @@ const emit = defineEmits<{
countries: string[]
continents: string[]
flightClasses: number[]
crewTypes: number[]
}]
}>()
resources/js/Components/FlightsGoneBy/InlineBadge.vue
+3 -1
View File
@@ -1,6 +1,8 @@
<script setup lang="ts">
import {BadgeVariant} from "@/Types/types";
defineProps<{
variant?: 'first' | 'business' | 'premium' | 'economy' | 'private' | 'unspecified' | 'generic';
variant?: BadgeVariant
}>();
</script>
resources/js/Composables/useFlightStats.ts
+105 -4
View File
@@ -6,8 +6,6 @@ const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturda
const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
// ── Date part cache ───────────────────────────────────────────────────────────
// Intl.DateTimeFormat is expensive. We compute each flight's date parts once
// and cache them for the lifetime of the page.
const dateCache = new Map<number, { year: number; month: number; day: number }>()
@@ -318,6 +316,107 @@ export function getTopAirports(flights: Flight[], upcomingFlights: Flight[]) {
return result
}
// ── Aircraft ──────────────────────────────────────────────────────────────────
interface AircraftItem {
label: string
id: number
past: number
upcoming: number
}
export function getTopAircraft(flights: Flight[], upcomingFlights: Flight[]) {
console.time('getTopAircraft')
function countAircraft(list: Flight[]) {
const counts = new Map<string, { count: number; id: number }>()
list.forEach(f => {
const aircraft = f.aircraft
if (!aircraft?.designator) return
const existing = counts.get(aircraft.designator) ?? { count: 0, id: aircraft.id }
existing.count++
counts.set(aircraft.designator, existing)
})
return counts
}
const past = countAircraft(flights)
const upcoming = countAircraft(upcomingFlights)
const allNames = new Set([...past.keys(), ...upcoming.keys()])
const sorted: AircraftItem[] = [...allNames]
.map(name => ({
label: name,
id: (past.get(name) ?? upcoming.get(name))!.id,
past: past.get(name)?.count ?? 0,
upcoming: upcoming.get(name)?.count ?? 0,
}))
.sort((a, b) => (b.past + b.upcoming) - (a.past + a.upcoming))
const result = {
aircraft: sorted,
series: [
{ name: 'Flights', data: sorted.map(s => s.past) },
{ name: 'Upcoming', data: sorted.map(s => s.upcoming) },
],
}
console.timeEnd('getTopAircraft')
return result
}
// ── Routes ────────────────────────────────────────────────────────────────────
interface RouteItem {
label: string
depLabel: string
arrLabel: string
past: number
upcoming: number
}
export function getTopRoutes(flights: Flight[], upcomingFlights: Flight[]) {
function countRoutes(list: Flight[]) {
const counts = new Map<string, { count: number; depLabel: string; arrLabel: string }>()
list.forEach(f => {
const dep = airportLabel(f.departure_airport)
const arr = airportLabel(f.arrival_airport)
if (!dep || !arr) return
const key = `${dep}-${arr}`
const existing = counts.get(key) ?? { count: 0, depLabel: dep, arrLabel: arr }
existing.count++
counts.set(key, existing)
})
return counts
}
const past = countRoutes(flights)
const upcoming = countRoutes(upcomingFlights)
const allKeys = new Set([...past.keys(), ...upcoming.keys()])
const sorted: RouteItem[] = [...allKeys]
.map(key => {
const meta = (past.get(key) ?? upcoming.get(key))!
return {
label: key,
depLabel: meta.depLabel,
arrLabel: meta.arrLabel,
past: past.get(key)?.count ?? 0,
upcoming: upcoming.get(key)?.count ?? 0,
}
})
.sort((a, b) => (b.past + b.upcoming) - (a.past + a.upcoming))
const result = {
routes: sorted,
series: [
{ name: 'Flights', data: sorted.map(s => s.past) },
{ name: 'Upcoming', data: sorted.map(s => s.upcoming) },
],
}
return result
}
// ── Flight types ──────────────────────────────────────────────────────────────
export function getFlightTypes(flights: Flight[]) {
@@ -346,8 +445,6 @@ export type FlightStats = ReturnType<typeof useFlightStats>
export function useFlightStats(flights: Ref<Flight[]>) {
const now = new Date()
// Pre-warm the date cache as soon as flights are available so the first
// filter interaction doesn't pay the Intl.DateTimeFormat cost.
watch(flights, (list) => {
console.time('dateCache warm')
list.forEach(f => getDateParts(f))
@@ -380,6 +477,8 @@ export function useFlightStats(flights: Ref<Flight[]>) {
const continents = computed(() => getContinents(allFlights.value))
const topAirlines = computed(() => getTopAirlines(pastFlights.value, upcomingFlights.value))
const topAirports = computed(() => getTopAirports(pastFlights.value, upcomingFlights.value))
const topAircraft = computed(() => getTopAircraft(pastFlights.value, upcomingFlights.value))
const topRoutes = computed(() => getTopRoutes(pastFlights.value, upcomingFlights.value))
const flightTypes = computed(() => getFlightTypes(allFlights.value))
return {
@@ -396,5 +495,7 @@ export function useFlightStats(flights: Ref<Flight[]>) {
flightTypes,
topAirlines,
topAirports,
topAircraft,
topRoutes,
}
}
resources/js/Pages/AddFlight.vue
+28 -3
View File
@@ -5,7 +5,7 @@ import { Head, useForm } from '@inertiajs/vue3'
import AirlineSearchBox from '@/Components/FlightsGoneBy/AirlineSearchBox.vue'
import AircraftSearchBox from '@/Components/FlightsGoneBy/AircraftSearchBox.vue'
import AirportSearchBox from '@/Components/FlightsGoneBy/AirportSearchBox.vue'
import type { SeatType, FlightReason, FlightClass} from '@/Types/types'
import type {SeatType, FlightReason, FlightClass, CrewType} from '@/Types/types'
import { ref, watch, computed } from 'vue'
defineOptions({ layout: MainLayout })
@@ -24,6 +24,7 @@ const props = defineProps<{
seat_type: SeatType | null
flight_class: FlightClass | null
flight_reason: FlightReason | null
crew_type: CrewType | null
airline_options: { value: number; title: string }[]
from_options: { value: number; title: string; country_code: string }[]
to_options: { value: number; title: string; country_code: string }[]
@@ -32,6 +33,7 @@ const props = defineProps<{
seat_types: SeatType[]
flight_classes: FlightClass[]
flight_reasons: FlightReason[]
crew_types: CrewType[]
}>()
const isEdit = !!props.flight
@@ -111,10 +113,17 @@ const form = useForm({
seat_type: props.flight?.seat_type ?? props.seat_types[0] ?? null as SeatType | null,
flight_class: props.flight?.flight_class ?? props.flight_classes[0] ?? null as FlightClass | null,
flight_reason: props.flight?.flight_reason ?? props.flight_reasons[0] ?? null as FlightReason | null,
crew_type: props.flight?.crew_type ?? null as CrewType | null,
note: props.flight?.note ?? '',
auto_update: props.flight?.auto_update ?? false,
})
const isCrew = computed(() => form.flight_reason?.name === 'Crew')
watch(isCrew, (val) => {
if (!val) form.crew_type = null
})
// ── Submit form (ID-based, what actually gets sent) ───────────────────────────
const submitForm = useForm({
@@ -130,12 +139,13 @@ const submitForm = useForm({
seat_type_id: null as number | null,
flight_class_id: null as number | null,
flight_reason_id: null as number | null,
crew_type_id: null as number | null,
note: '' as string | null,
auto_update: false,
})
function submit() {
submitForm.flight_number = flightNumber.value
submitForm.flight_number = flightNumber.value
submitForm.departure_date = form.departure_date
submitForm.arrival_date = form.arrival_date
submitForm.from_id = form.from?.value ?? null
@@ -147,6 +157,7 @@ function submit() {
submitForm.seat_type_id = form.seat_type?.id
submitForm.flight_class_id = form.flight_class?.id
submitForm.flight_reason_id = form.flight_reason?.id
submitForm.crew_type_id = form.crew_type?.id ?? null
submitForm.note = form.note
submitForm.auto_update = form.auto_update
@@ -306,6 +317,7 @@ const arrivalMax = computed(() => {
/>
</v-col>
</v-row>
<!-- ── Registration + Flight class ────────────────────────── -->
<v-row>
<v-col cols="12" md="6">
@@ -356,7 +368,7 @@ const arrivalMax = computed(() => {
</v-col>
</v-row>
<!-- ── Flight reason ──────────────────────────────────────── -->
<!-- ── Flight reason + Crew type ──────────────────────────── -->
<v-row>
<v-col cols="12" md="6">
<v-select
@@ -370,6 +382,18 @@ const arrivalMax = computed(() => {
:error-messages="submitForm.errors.flight_reason_id"
/>
</v-col>
<v-col v-if="isCrew" cols="12" md="6">
<v-select
v-model="form.crew_type"
label="Crew Type"
:items="crew_types"
item-title="name"
item-value="id"
:return-object="true"
:disabled="!lookupComplete"
:error-messages="submitForm.errors.crew_type_id"
/>
</v-col>
</v-row>
<!-- ── Note ──────────────────────────────────────────────── -->
@@ -399,6 +423,7 @@ const arrivalMax = computed(() => {
/>
</v-col>
</v-row>
<!-- ── Submit ─────────────────────────────────────────────── -->
<v-row>
<v-col cols="12">
resources/js/Pages/UserProfile.vue
+8 -7
View File
@@ -1,10 +1,10 @@
<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import { Head } from '@inertiajs/vue3'
import {ref, computed, defineAsyncComponent, watchEffect, onMounted} from 'vue'
import {ref, computed, watchEffect} from 'vue'
import { Flight, ProfileView, User } from "@/Types/types"
import { router } from '@inertiajs/vue3'
import { useFlightStats, FlightStats } from "@/Composables/useFlightStats"
import { useFlightStats } from "@/Composables/useFlightStats"
import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue"
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue"
import DepartureBoard from "@/Components/FlightsGoneBy/DepartureBoard.vue"
@@ -29,6 +29,7 @@ const selectedAirlines = ref<number[]>([])
const selectedCountries = ref<string[]>([])
const selectedContinents = ref<string[]>([])
const selectedFlightClasses = ref<number[]>([])
const selectedCrewTypes = ref<number[]>([])
function onFiltersChange(filters: {
years: number[]
@@ -36,18 +37,17 @@ function onFiltersChange(filters: {
countries: string[]
continents: string[]
flightClasses: number[]
crewTypes: number[]
}) {
localSelectedFlightId.value = null
console.time('filter+stats')
selectedYears.value = filters.years
selectedAirlines.value = filters.airlines
selectedCountries.value = filters.countries
selectedContinents.value = filters.continents
selectedFlightClasses.value = filters.flightClasses
console.timeEnd('filter+stats')
selectedCrewTypes.value = filters.crewTypes
}
function matchesFilters(f: Flight): boolean {
const date = new Date(f.departure_date)
if (selectedYears.value.length && !selectedYears.value.includes(date.getFullYear())) return false
@@ -62,8 +62,10 @@ function matchesFilters(f: Flight): boolean {
const arrCode = f.arrival_airport.region?.continent?.code
if (!selectedContinents.value.includes(depCode ?? '') && !selectedContinents.value.includes(arrCode ?? '')) return false
}
return !(selectedFlightClasses.value.length && !selectedFlightClasses.value.includes(f.flight_class?.id ?? -1));
if (selectedFlightClasses.value.length && !selectedFlightClasses.value.includes(f.flight_class?.id ?? -1)) return false
if (selectedCrewTypes.value.length && !selectedCrewTypes.value.includes(f.crew_type?.id ?? -1)) return false
return true
}
const filteredFlights = computed(() => {
@@ -77,7 +79,6 @@ const stats = useFlightStats(filteredFlights)
watchEffect(() => {
console.time('all.charts.input')
// just access each stat to trigger the log
const _ = [
stats.perYear.value,
stats.perMonth.value,
resources/js/Types/types.d.ts
Vendored
+9
View File
@@ -10,6 +10,7 @@ declare module '@vue/runtime-core' {
export type ProfileView = 'map' | 'board' | 'passes';
export type ChartType = "line" | "area" | "bar" | "pie" | "donut" | "radialBar" | "scatter" | "bubble" | "heatmap" | "candlestick" | "boxPlot" | "radar" | "polarArea" | "rangeBar" | "rangeArea" | "treemap" | undefined
export type BadgeVariant = 'first' | 'business' | 'premium' | 'economy' | 'private' | 'unspecified' | 'generic' | 'general_aviation' | 'crew'
export interface User {
id: number
@@ -118,6 +119,13 @@ export interface FlightReason {
export interface FlightClass {
id: number
name: string
internal_name: BadgeVariant
}
export interface CrewType {
id: number
name: string
internal_name: string
}
export interface Flight {
@@ -138,6 +146,7 @@ export interface Flight {
airline: Airline | null
aircraft: Aircraft | null
seat_type: SeatType | null
crew_type: CrewType | null
flight_reason: FlightReason | null
flight_class: FlightClass | null
duration_display: string