Add London Airport and Million Mile Challenges

2026-08-11 20:52:21 +10:00
parent 65e8c7575e
commit 2b41c3ed44
10 changed files with 284 additions and 9 deletions
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Achievement, Flight, User, Airport } from '@/Types/types'
+import Panel from '@/Components/FlightsGoneBy/Panels/Panel.vue'
+import PanelHeader from '@/Components/FlightsGoneBy/Panels/PanelHeader.vue'
+import BadgeTable from '@/Components/FlightsGoneBy/GenericBadgeTable.vue'
+import FlightBadge from '@/Components/FlightsGoneBy/FlightBadge.vue'
+
+defineOptions({ inheritAttrs: false })
+
+
+const props = defineProps<{
+    achievement: Achievement
+    user: User
+    followStatus: string
+    londonAirports: string[]
+    flights: Flight[]
+}>()
+
+interface AirportEntry {
+    code: string
+    airport: Airport | null
+    flights: Flight[]
+}
+
+const LONDON_AIRPORT_NAMES: Record<string, string> = {
+    LHR: 'Heathrow Airport',
+    LGW: 'Gatwick Airport',
+    STN: 'Stansted Airport',
+    LTN: 'Luton Airport',
+    LCY: 'City Airport',
+    SEN: 'Southend Airport',
+}
+
+
+const airports = computed<AirportEntry[]>(() => {
+    const entries = props.londonAirports.map(code => ({
+        code,
+        airport: null as Airport | null,
+        flights: [] as Flight[],
+    }))
+    const byCode = new Map(entries.map(e => [e.code, e]))
+
+    for (const flight of props.flights) {
+        const dep = flight.departure_airport
+        const arr = flight.arrival_airport
+
+        if (dep?.iata_code && byCode.has(dep.iata_code)) {
+            const entry = byCode.get(dep.iata_code)!
+            entry.airport ??= dep
+            entry.flights.push(flight)
+        }
+
+        if (arr?.iata_code && byCode.has(arr.iata_code)) {
+            const entry = byCode.get(arr.iata_code)!
+            entry.airport ??= arr
+            entry.flights.push(flight)
+        }
+    }
+
+    return entries
+})
+
+const rows = computed(() => airports.value.map(e => e.code))
+
+function entryFor(code: string): AirportEntry {
+    return airports.value.find(e => e.code === code)!
+}
+
+function flightTitle(flight: Flight): string {
+    const name = flight.airline?.name ?? 'Unknown airline'
+    return `${name}: ${flight.departure_airport?.iata_code} → ${flight.arrival_airport?.iata_code}`
+}
+</script>
+
+<template>
+    <!-- Airports table -->
+    <Panel>
+        <div class="table-toolbar">
+            <PanelHeader>London Airports</PanelHeader>
+        </div>
+
+        <BadgeTable
+            :rows="rows"
+            :rowKey="code => code"
+            :hasItems="code => entryFor(code).flights.length > 0"
+            labelWidth="14em"
+        >
+            <template #label="{ row: code }">
+                <div class="airport-label">
+                    <span class="airport-code">{{ code }}</span>
+                    <span>{{ LONDON_AIRPORT_NAMES[code] ?? code }}</span>
+                </div>
+            </template>
+
+            <template #items="{ row: code }">
+                <FlightBadge
+                    v-for="flight in entryFor(code).flights"
+                    :key="flight.id"
+                    :title="flightTitle(flight)"
+                    :flight="flight"
+                />
+            </template>
+        </BadgeTable>
+    </Panel>
+
+    <!-- Requirements -->
+    <Panel>
+        <PanelHeader centered>Requirements</PanelHeader>
+        <p>
+            To complete this challenge you must fly to all {{ londonAirports.length }} of
+            London's airports — Heathrow, Gatwick, Stansted, Luton, London City, and Southend.
+        </p>
+    </Panel>
+</template>
+
+<style scoped>
+.table-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    margin-bottom: 0.75rem;
+}
+
+.airport-label {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0 0.25rem;
+}
+
+.airport-code {
+    font-weight: 600;
+    opacity: 0.7;
+    min-width: 2.75rem;
+}
+</style>