147 lines
4.2 KiB
Vue
147 lines
4.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { Achievement, 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 AllianceLogo from '@/Components/FlightsGoneBy/AllianceLogo.vue'
|
|
import FlightBadge from '@/Components/FlightsGoneBy/FlightBadge.vue'
|
|
|
|
defineOptions({ inheritAttrs: false })
|
|
|
|
const props = defineProps<{
|
|
achievement: Achievement
|
|
user: User
|
|
followStatus: string
|
|
majorAlliances: Alliance[]
|
|
flights: Flight[]
|
|
}>()
|
|
|
|
interface AllianceEntry {
|
|
alliance: Alliance
|
|
flights: Flight[]
|
|
}
|
|
|
|
|
|
const alliances = computed<AllianceEntry[]>(() => {
|
|
const entries = props.majorAlliances.map(alliance => ({ alliance, flights: [] as Flight[] }))
|
|
const byName = new Map(entries.map(e => [e.alliance.internal_name, e]))
|
|
|
|
for (const flight of props.flights) {
|
|
const key = flight.airline?.alliance?.internal_name
|
|
if (!key) continue
|
|
byName.get(key)?.flights.push(flight)
|
|
}
|
|
|
|
return entries
|
|
})
|
|
|
|
const completedCount = computed(
|
|
() => alliances.value.filter(a => a.flights.length > 0).length
|
|
)
|
|
|
|
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>
|
|
<!-- Header -->
|
|
<Panel>
|
|
<div class="alliance-header">
|
|
<div class="logo-row">
|
|
<AllianceLogo
|
|
v-for="entry in alliances"
|
|
:key="entry.alliance.internal_name"
|
|
:alliance="entry.alliance"
|
|
size="56"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<PanelHeader centered>Major Alliances</PanelHeader>
|
|
<PanelSubHeader centered>
|
|
{{ completedCount }} / {{ alliances.length }} alliances flown
|
|
</PanelSubHeader>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
|
|
<!-- Per-alliance breakdown -->
|
|
<Panel v-for="entry in alliances" :key="entry.alliance.internal_name">
|
|
<div class="table-toolbar">
|
|
<PanelHeader>{{ entry.alliance.name }}</PanelHeader>
|
|
</div>
|
|
|
|
<BadgeTable
|
|
:rows="[entry.alliance.internal_name]"
|
|
:rowKey="key => key"
|
|
:hasItems="() => entry.flights.length > 0"
|
|
labelWidth="14em"
|
|
>
|
|
<template #label>
|
|
<div class="airline-label">
|
|
<AllianceLogo :alliance="entry.alliance" size="24" />
|
|
<span>{{ entry.alliance.name }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<template #items>
|
|
<FlightBadge
|
|
v-for="flight in entry.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 with at least one member airline from each of
|
|
the three major alliances. Unlike the individual alliance challenges, you don't need
|
|
to fly every airline in an alliance — just one flight per alliance is enough.
|
|
</p>
|
|
|
|
<p>
|
|
Codeshare flights do not count, the operating carrier must be a member of the
|
|
alliance.
|
|
</p>
|
|
</Panel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.alliance-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.logo-row {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.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>
|