148 lines
4.1 KiB
Vue
148 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { Achievement, Airline, Alliance, Flight, User } from '@/Types/types'
|
|
import Panel from '@/Components/FlightsGoneBy/Panels/Panel.vue'
|
|
import PanelHeader from '@/Components/FlightsGoneBy/Panels/PanelHeader.vue'
|
|
import PanelSubHeader from '@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue'
|
|
import BadgeTable from '@/Components/FlightsGoneBy/GenericBadgeTable.vue'
|
|
import InlineBadge from '@/Components/FlightsGoneBy/InlineBadge.vue'
|
|
import AirlineLogo from '@/Components/FlightsGoneBy/AirlineLogo.vue'
|
|
import AllianceLogo from '@/Components/FlightsGoneBy/AllianceLogo.vue'
|
|
import FlightBadge from "@/Components/FlightsGoneBy/FlightBadge.vue";
|
|
|
|
|
|
interface AirlineEntry {
|
|
airline: Airline
|
|
flights: Flight[]
|
|
}
|
|
|
|
const props = defineProps<{
|
|
achievement: Achievement
|
|
user: User
|
|
isFollowing: boolean
|
|
alliance: Alliance
|
|
airlines: Airline[]
|
|
flights: Flight[]
|
|
}>()
|
|
|
|
const flightsByAirline = computed(() => {
|
|
const allianceAirlineIds = new Set(props.airlines.map(a => a.id))
|
|
const map = new Map<string, AirlineEntry>()
|
|
|
|
// Pre-populate every alliance airline so unflown ones still appear
|
|
for (const airline of props.airlines) {
|
|
map.set(rowKey(airline), { airline, flights: [] })
|
|
}
|
|
|
|
for (const flight of props.flights) {
|
|
const airline = flight.airline
|
|
if (!airline || !allianceAirlineIds.has(airline.id)) continue
|
|
map.get(rowKey(airline))?.flights.push(flight)
|
|
}
|
|
|
|
return map
|
|
})
|
|
|
|
function rowKey(airline: Airline): string {
|
|
return airline.iata_code ?? airline.internal_name
|
|
}
|
|
|
|
const rows = computed(() => [...flightsByAirline.value.keys()])
|
|
|
|
function entryFor(key: string): AirlineEntry {
|
|
return flightsByAirline.value.get(key)!
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Header -->
|
|
<Panel>
|
|
<div class="alliance-header">
|
|
<AllianceLogo :alliance="alliance" size="56" />
|
|
<div>
|
|
<PanelHeader centered>{{ alliance.name }}</PanelHeader>
|
|
<PanelSubHeader centered>
|
|
<slot />
|
|
</PanelSubHeader>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
|
|
|
|
<!-- Airlines table -->
|
|
<Panel>
|
|
<div class="table-toolbar">
|
|
<PanelHeader>Airlines</PanelHeader>
|
|
</div>
|
|
|
|
<BadgeTable
|
|
:rows="rows"
|
|
:rowKey="key => key"
|
|
:hasItems="key => entryFor(key).flights.length > 0"
|
|
labelWidth="14em"
|
|
>
|
|
<template #label="{ row: key }">
|
|
<div class="airline-label" >
|
|
<AirlineLogo :airline="entryFor(key).airline" size="24" />
|
|
<span>{{ entryFor(key).airline.name }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<template #items="{ row: key }">
|
|
<FlightBadge
|
|
v-for="flight in entryFor(key).flights"
|
|
:key="flight.id"
|
|
:title="`${flight.departure_airport?.iata_code} → ${flight.arrival_airport?.iata_code}`"
|
|
:flight="flight" />
|
|
</template>
|
|
</BadgeTable>
|
|
</Panel>
|
|
|
|
<!-- Slot for alliance-specific panels -->
|
|
<slot name="extra" />
|
|
|
|
<!-- Requirements -->
|
|
<Panel>
|
|
<PanelHeader centered>Requirements</PanelHeader>
|
|
<p>
|
|
To complete this challenge you must fly with every current member airline of
|
|
<strong>{{ alliance.name }}</strong>. Alliance membership changes over time, so the
|
|
required airlines reflect the current roster.
|
|
</p>
|
|
|
|
<p>
|
|
Codeshare flights do not count, the operating carrier must be a member of {{alliance.name}}.
|
|
</p>
|
|
</Panel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.alliance-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
|
|
.table-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
|
|
.airline-label {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0 0.25rem;
|
|
}
|
|
|
|
</style>
|