Add more airlines and fix edit bugs

resources/js/Components/FlightsGoneBy/FlightMapAndCharts.vue

@@ -1,85 +1,47 @@
-<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 { computed } from 'vue'
 import { usePage } from '@inertiajs/vue3'
-import type { Flight, SharedProps } from '@/Types/types'
-import FlightStatsBar from '@/Components/FlightsGoneBy/FlightStatsBar.vue'
+import { SharedProps } from '@/Types/types'
+import { ref, onMounted, nextTick } from 'vue'
 
-import FlightFillter from "@/Components/FlightsGoneBy/FlightFillter.vue";
+import { FlightStats } from '@/Composables/useFlightStats'
 import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
+import FlightFilter from "@/Components/FlightsGoneBy/FlightFilter.vue";
+import FlightStatsBar from "@/Components/FlightsGoneBy/FlightStatsBar.vue";
 import FlightCharts from "@/Components/FlightsGoneBy/FlightCharts.vue";
-
+import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
 const props = defineProps<{
-    flights: Flight[]
+    stats: FlightStats
+    canEdit: boolean
 }>()
 
-const page = usePage<SharedProps>()
-const now  = new Date()
+const emit = defineEmits<{
+    filtersChange: [filters: {
+        years: number[]
+        airlines: number[]
+        countries: string[]
+        continents: string[]
+        flightClasses: number[]
+    }]
+}>()
 
-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 chartsVisible = ref(false)
+onMounted(async () => {
+    setTimeout(() => { chartsVisible.value = true }, 10)
+})
 
 const mappedFlights = computed(() => [
-    ...pastFlights.value,
-    ...upcomingFlights.value,
+    ...props.stats.pastFlights.value,
+    ...props.stats.upcomingFlights.value,
 ])
 </script>
 
-<style scoped>
-</style>
+<template>
+    <FlightMap :flights="mappedFlights" />
+    <FlightFilter :flights="mappedFlights" @change="$emit('filtersChange', $event)" />
+    <FlightStatsBar :flights="stats.pastFlights.value" :upcoming-flights="stats.upcomingFlights.value" />
+    <FlightCharts v-if="chartsVisible" :stats="stats"  :flight-stats="stats"/>
+    <div v-else style="width:100%; display:flex; align-items: center;justify-content: center">
+        <PlaneLoader />
+    </div>
+</template>