86 lines
3.2 KiB
Vue
86 lines
3.2 KiB
Vue
<template>
|
|
<FlightMap :page="page.props" :flights="mappedFlights" class="profile-map__map" />
|
|
<FlightFillter :flights="flights" @change="onFiltersChange" />
|
|
<FlightStatsBar :flights="pastFlights" :upcoming-flights="upcomingFlights" />
|
|
<FlightCharts :flights="pastFlights" :upcoming-flights="upcomingFlights" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { usePage } from '@inertiajs/vue3'
|
|
import type { Flight, SharedProps } from '@/Types/types'
|
|
import FlightStatsBar from '@/Components/FlightsGoneBy/FlightStatsBar.vue'
|
|
|
|
import FlightFillter from "@/Components/FlightsGoneBy/FlightFillter.vue";
|
|
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
|
|
import FlightCharts from "@/Components/FlightsGoneBy/FlightCharts.vue";
|
|
|
|
const props = defineProps<{
|
|
flights: Flight[]
|
|
}>()
|
|
|
|
const page = usePage<SharedProps>()
|
|
const now = new Date()
|
|
|
|
const selectedYears = ref<number[]>([])
|
|
const selectedAirlines = ref<number[]>([])
|
|
const selectedCountries = ref<string[]>([])
|
|
const selectedContinents = ref<string[]>([])
|
|
const selectedFlightClasses = ref<number[]>([])
|
|
|
|
function onFiltersChange(filters: {
|
|
years: number[]
|
|
airlines: number[]
|
|
countries: string[]
|
|
continents: string[]
|
|
flightClasses: number[]
|
|
}) {
|
|
selectedYears.value = filters.years
|
|
selectedAirlines.value = filters.airlines
|
|
selectedCountries.value = filters.countries
|
|
selectedContinents.value = filters.continents
|
|
selectedFlightClasses.value = filters.flightClasses
|
|
}
|
|
|
|
function matchesFilters(f: Flight, date: Date): boolean {
|
|
if (selectedYears.value.length && !selectedYears.value.includes(date.getFullYear())) return false
|
|
if (selectedAirlines.value.length && !selectedAirlines.value.includes(f.airline?.id ?? -1)) return false
|
|
if (selectedCountries.value.length) {
|
|
const depCode = f.departure_airport.region?.country?.code
|
|
const arrCode = f.arrival_airport.region?.country?.code
|
|
if (!selectedCountries.value.includes(depCode ?? '') && !selectedCountries.value.includes(arrCode ?? '')) return false
|
|
}
|
|
if (selectedContinents.value.length) {
|
|
const depCode = f.departure_airport.region?.continent?.code
|
|
const arrCode = f.arrival_airport.region?.continent?.code
|
|
if (!selectedContinents.value.includes(depCode ?? '') && !selectedContinents.value.includes(arrCode ?? '')) return false
|
|
}
|
|
if (selectedFlightClasses.value.length && !selectedFlightClasses.value.includes(f.flight_class?.id ?? -1)) return false
|
|
return true
|
|
}
|
|
|
|
// ── Filtered flights ──────────────────────────────────────────────────────────
|
|
|
|
const pastFlights = computed(() =>
|
|
props.flights.filter(f => {
|
|
const date = new Date(f.departure_date)
|
|
return date <= now && matchesFilters(f, date)
|
|
})
|
|
)
|
|
|
|
const upcomingFlights = computed(() =>
|
|
props.flights.filter(f => {
|
|
const date = new Date(f.departure_date)
|
|
return date > now && matchesFilters(f, date)
|
|
})
|
|
)
|
|
|
|
const mappedFlights = computed(() => [
|
|
...pastFlights.value,
|
|
...upcomingFlights.value,
|
|
])
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|