Added Notifications

2026-05-16 23:48:18 +10:00
parent 69d72e0912
commit 1d5b9f340f
61 changed files with 4204 additions and 182 deletions
@@ -0,0 +1,147 @@
+<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>