138 lines
4.4 KiB
Vue
138 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { Achievement, Flight, User } from '@/Types/types'
|
|
import { useAircraftFamilies } from '@/Composables/useAircraftFamilies'
|
|
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
|
|
flights: Flight[]
|
|
families: Record<string, string[]>
|
|
}>()
|
|
|
|
const flights = computed(() => props.flights)
|
|
const { entries } = useAircraftFamilies(flights, props.families)
|
|
type Generation = { label: string; variants: string[] }
|
|
|
|
const GENERATIONS : Generation[] = [
|
|
{ label: 'Original', variants: ['737-100', '737-200'] },
|
|
{ label: 'Classic', variants: ['737-300', '737-400', '737-500'] },
|
|
{ label: 'Next Generation', variants: ['737-600', '737-700', '737-800', '737-900'] },
|
|
{ label: 'Max', variants: ['737 Max 7', '737 Max 8', '737 Max 9', '737 Max 10'] },
|
|
]
|
|
|
|
const generationGroups = computed(() =>
|
|
GENERATIONS.map(generation => ({
|
|
label: generation.label,
|
|
entries: entries.value.filter(entry =>
|
|
(generation.variants).includes(entry.family)
|
|
),
|
|
})).filter(group => group.entries.length > 0)
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<Panel>
|
|
<div v-for="group in generationGroups" :key="group.label" class="generation-group">
|
|
<div class="table-toolbar">
|
|
<PanelHeader>{{ group.label }}</PanelHeader>
|
|
</div>
|
|
|
|
<BadgeTable
|
|
:rows="group.entries"
|
|
:rowKey="entry => entry.family"
|
|
:hasItems="entry => entry.flights.length > 0"
|
|
labelWidth="8em"
|
|
>
|
|
<template #label="{ row: entry }">
|
|
<div class="family-label">
|
|
<span class="family-name">{{ entry.family }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<template #items="{ row: entry }">
|
|
<FlightBadge
|
|
v-for="flight in entry.flights"
|
|
:key="flight.id"
|
|
:title="`${flight.departure_airport?.iata_code} → ${flight.arrival_airport?.iata_code}`"
|
|
:flight="flight"
|
|
/>
|
|
</template>
|
|
</BadgeTable>
|
|
</div>
|
|
</Panel>
|
|
|
|
<slot name="extra" />
|
|
<Panel>
|
|
<PanelHeader centered>Requirements</PanelHeader>
|
|
<p>
|
|
To complete this challenge you must fly on at least one aircraft from every
|
|
Boeing 737 variant.
|
|
</p>
|
|
</Panel>
|
|
<Panel>
|
|
<PanelHeader centered>Difficulty</PanelHeader>
|
|
<p>
|
|
This challenge is impossible to complete if you start today, but it's a fun one to look at because despite how common as the 737 is, it's very hard to find them all!
|
|
</p>
|
|
<ul>
|
|
<li><b>-100</b> - It was never that popular, and is no longer in commercial service anywhere. This is what renders the challenge impossible today.</li>
|
|
<li><b>-200</b> - Retired from Western fleets. A handful still fly in Zimbabwe, Venezuela and maybe Canada</li>
|
|
<li><b>-300 / -400 / -500</b> - Rare but doable with some creative routing.</li>
|
|
<li><b>-600</b> - Much like it's Airbus A318 Equivalent, it sold poorly but is still in operation. Air Algerie is probably your best bet..</li>
|
|
<li><b>Max 7</b> - Not possible to fly yet due to lack of certification but should hopefully become common soon enough!</li>
|
|
</ul>
|
|
</Panel>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.table-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.family-label {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0.25rem;
|
|
}
|
|
|
|
.family-name {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
.table-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.family-label {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0.25rem;
|
|
}
|
|
|
|
.family-name {
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|